/* ==========================================================
   DEKOR ANTALYA - ANA STİL DOSYASI
   Faz 1: Temel yapı + Header + Çekmece Menü + Footer + İletişim Çubuğu
   ========================================================== */

/* ---------- 1. DEĞİŞKENLER (varsayılan değerler) ----------
   Admin panelden değiştirilen renkler functions.php tarafından
   buraya ek bir <style> bloğu olarak eklenir ve bu değerlerin
   üzerine yazar. */
:root {
  --dekor-primary: #F7D000;   /* vurgu rengi - sarı */
  --dekor-dark: #2E2E2E;      /* koyu gri - header/footer */
  --dekor-dark-2: #0d0d0d;    /* gradyan ucu - siyaha yakın */
  --dekor-text: #222222;
  --dekor-text-light: #888888;
  --dekor-bg-light: #fafafa;
  --dekor-border: #ececec;
  --dekor-radius: 10px;
  --dekor-radius-lg: 16px;
  --dekor-container: 1200px;
  --dekor-header-height: 76px;
  --dekor-contact-bar-height: 60px;
}

/* ---------- 2. TEMEL SIFIRLAMA ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--dekor-text);
  line-height: 1.6;
  /* Sabit alt iletişim çubuğu içeriğin altında kalmasın */
  padding-bottom: var(--dekor-contact-bar-height);
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

.dekor-container {
  max-width: var(--dekor-container);
  margin: 0 auto;
  padding: 0 20px;
}

/* Ekran okuyucular için, görsel olarak gizli ama erişilebilir metin */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 3. HEADER ---------- */
.dekor-header {
  /* Sağdan sola: koyu (dark-2) -> daha açık koyu gri (dark) */
  background: linear-gradient(to left, var(--dekor-dark-2) 0%, var(--dekor-dark) 100%);
  position: sticky;
  top: 0;
  z-index: 500;
  height: var(--dekor-header-height);
}

.dekor-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 24px;
}

/* Logo */
.dekor-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.dekor-logo-img {
  height: 48px;
  width: auto;
}
.dekor-logo-text {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Masaüstü menü */
.dekor-nav-desktop {
  display: none; /* mobilde gizli, breakpoint'te açılır */
}
.dekor-nav-desktop ul {
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dekor-nav-desktop a {
  color: #cfcfcf;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
  padding: 8px 0;
}
.dekor-nav-desktop a:hover,
.dekor-nav-desktop a:focus-visible,
.dekor-nav-desktop .current-menu-item a {
  color: var(--dekor-primary);
}

/* wp_nav_menu yedek (fallback) listesi de aynı stilleri kullanır */
#dekor-menu-fallback {
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Teklif Al butonu (header) */
.dekor-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dekor-primary);
  color: var(--dekor-dark);
  font-size: 13px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 24px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dekor-cta-button:hover,
.dekor-cta-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(247, 208, 0, 0.35);
}

/* Header sağ taraf: CTA + hamburger birlikte */
.dekor-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Hamburger butonu (her zaman görünür, drawer'ı açar) */
.dekor-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.dekor-menu-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
}
.dekor-menu-toggle .icon-close { display: none; }
.dekor-menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.dekor-menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ---------- 4. ÇEKMECE (DRAWER) MENÜ ---------- */
.dekor-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 600;
}
.dekor-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.dekor-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 84vw);
  background: var(--dekor-dark);
  z-index: 601;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.dekor-drawer.is-open {
  transform: translateX(0);
}

.dekor-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dekor-drawer-head .dekor-logo-img { height: 36px; }
.dekor-drawer-head .dekor-logo-text { font-size: 15px; }

.dekor-drawer-close {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
}
.dekor-drawer-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
}

.dekor-drawer-nav {
  flex: 1;
  padding: 8px 0;
}
.dekor-drawer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dekor-drawer-nav a {
  display: block;
  padding: 14px 24px;
  color: #e6e6e6;
  font-size: 14px;
  border-left: 3px solid transparent;
  transition: background 0.2s ease, color 0.2s ease;
}
.dekor-drawer-nav a:hover,
.dekor-drawer-nav a:focus-visible,
.dekor-drawer-nav .current-menu-item a {
  color: var(--dekor-primary);
  border-left-color: var(--dekor-primary);
  background: rgba(247, 208, 0, 0.06);
}

.dekor-drawer-footer {
  padding: 20px 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.dekor-drawer-footer .dekor-cta-button {
  width: 100%;
  padding: 12px 0;
}
.dekor-drawer-social {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
}
.dekor-drawer-social .dekor-social-icon svg {
  width: 18px;
  height: 18px;
  fill: var(--dekor-primary);
}

/* Drawer açıkken sayfanın kaydırılmasını önle */
body.dekor-drawer-open {
  overflow: hidden;
}

/* ---------- 5. FOOTER ---------- */
.dekor-footer {
  background: linear-gradient(135deg, var(--dekor-dark-2) 0%, var(--dekor-dark) 100%);
  color: #cfcfcf;
  padding: 40px 0 28px;
  font-size: 13px;
}
.dekor-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.dekor-footer-copy { color: #a8a8a8; }
.dekor-footer-social {
  display: flex;
  gap: 16px;
}
.dekor-social-icon svg {
  width: 18px;
  height: 18px;
  fill: var(--dekor-primary);
  transition: transform 0.2s ease;
}
.dekor-social-icon:hover svg,
.dekor-social-icon:focus-visible svg {
  transform: translateY(-2px);
}

/* ---------- 6. SABİT ALT İLETİŞİM ÇUBUĞU ---------- */
.dekor-contact-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--dekor-contact-bar-height);
  background: linear-gradient(to right, var(--dekor-dark-2), var(--dekor-dark));
  display: flex;
  z-index: 400;
  box-shadow: 0 -4px 14px rgba(0,0,0,0.18);
}
.dekor-contact-bar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #f1f1f1;
  font-size: 11px;
  transition: background 0.2s ease, color 0.2s ease;
}
.dekor-contact-bar a:hover,
.dekor-contact-bar a:focus-visible {
  background: rgba(255,255,255,0.06);
  color: var(--dekor-primary);
}
.dekor-contact-bar svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dekor-contact-bar .dekor-contact-call {
  color: var(--dekor-primary);
}

/* ---------- 7. RESPONSIVE / MASAÜSTÜ ---------- */
@media (min-width: 992px) {
  .dekor-nav-desktop { display: block; }

  /* Masaüstünde hamburger yine de mevcut: kullanıcı isteği üzere
     menü çekmece olarak açılıyor, bu yüzden masaüstünde de
     görünür bırakıyoruz (ikinci hızlı menü olarak). İsterseniz
     bu satırı kaldırarak masaüstünde sadece yatay menüyü
     gösterebiliriz. */
  .dekor-menu-toggle { display: flex; }
}

@media (max-width: 480px) {
  .dekor-contact-bar a span { display: none; }
}

/* ---------- 8. HERO SLIDER ----------
   Yükseklik sabittir: görsel yüklenmeden önce de yer kaplar,
   bu sayede CLS (ani sayfa kayması) oluşmaz. Geçişler sadece
   "opacity" ile yapılır (GPU dostu). */
.dekor-hero {
  position: relative;
  height: 560px;
  overflow: hidden;
  background: var(--dekor-dark);
}

.dekor-hero-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.dekor-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.dekor-hero-slide.is-active {
  opacity: 1;
  z-index: 1;
}

.dekor-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.dekor-hero-img--placeholder {
  background: linear-gradient(135deg, var(--dekor-dark) 0%, var(--dekor-dark-2) 100%);
}

.dekor-hero-content {
  position: absolute;
  top: 50%;
  left: 6%;
  transform: translateY(-50%);
  max-width: 540px;
  background: rgba(0, 0, 0, 0.45);
  padding: 28px 32px;
  border-radius: var(--dekor-radius-lg);
  color: #ffffff;
  z-index: 2;
}
.dekor-hero-title {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 12px;
}
.dekor-hero-desc {
  font-size: 14px;
  line-height: 1.7;
  color: #eaeaea;
  margin: 0 0 18px;
}
.dekor-hero-button { box-shadow: none; }

/* Önceki / Sonraki okları */
.dekor-hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background 0.2s ease, transform 0.2s ease;
}
.dekor-hero-nav:hover,
.dekor-hero-nav:focus-visible {
  background: #ffffff;
}
.dekor-hero-prev { left: 16px; }
.dekor-hero-next { right: 16px; }
.dekor-hero-nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--dekor-dark);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Nokta göstergeleri */
.dekor-hero-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.dekor-hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.dekor-hero-dot.is-active {
  background: var(--dekor-primary);
  transform: scale(1.15);
}

@media (max-width: 768px) {
  .dekor-hero { height: 420px; }
  .dekor-hero-content {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 88%;
    max-width: 420px;
    text-align: center;
    padding: 22px 20px;
  }
  .dekor-hero-title { font-size: 21px; }
  .dekor-hero-desc { font-size: 13px; }
  .dekor-hero-nav { width: 38px; height: 38px; }
}

/* ---------- 9. HİZMET KARTLARI (Ürün ve Hizmetlerimiz) ---------- */
.dekor-services {
  padding: 8px 0 12px;
}

.dekor-section-title {
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  margin: 44px 0 28px;
  color: var(--dekor-text);
}

.dekor-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding-bottom: 48px;
}

.dekor-service-card {
  display: block;
  border: 1px solid var(--dekor-border);
  border-radius: var(--dekor-radius);
  overflow: hidden;
  background: #ffffff;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dekor-service-card:hover,
.dekor-service-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.dekor-service-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.dekor-service-img--placeholder {
  background: linear-gradient(135deg, #fdf3c4 0%, #fbe98a 100%);
}

.dekor-service-body {
  padding: 16px 18px 22px;
}
.dekor-service-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 8px;
}
.dekor-service-desc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--dekor-text-light);
  margin: 0;
}

/* ---------- 10. TEKLİF FORMU (sayfa içi, AJAX) ---------- */
.dekor-quote {
  background: var(--dekor-bg-light);
  padding: 8px 0 56px;
  scroll-margin-top: var(--dekor-header-height);
}

.dekor-quote-intro {
  text-align: center;
  color: var(--dekor-text-light);
  font-size: 14px;
  max-width: 560px;
  margin: -8px auto 18px;
}

.dekor-quote-altcontact {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.dekor-quote-altlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--dekor-border);
  border-radius: 24px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dekor-text);
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.dekor-quote-altlink:hover,
.dekor-quote-altlink:focus-visible {
  border-color: var(--dekor-primary);
  transform: translateY(-1px);
}
.dekor-quote-altlink svg {
  width: 16px;
  height: 16px;
  fill: var(--dekor-primary);
  flex-shrink: 0;
}

.dekor-quote-form {
  max-width: 640px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--dekor-border);
  border-radius: var(--dekor-radius-lg);
  padding: 32px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

.dekor-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .dekor-form-row { grid-template-columns: 1fr; }
  .dekor-quote-form { padding: 24px 18px; }
}

.dekor-form-field {
  margin-bottom: 18px;
}
.dekor-form-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 7px;
  color: var(--dekor-text);
}
.dekor-form-field input[type="text"],
.dekor-form-field input[type="tel"],
.dekor-form-field input[type="email"],
.dekor-form-field select,
.dekor-form-field textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--dekor-border);
  border-radius: 9px;
  font-size: 14px;
  font-family: inherit;
  color: var(--dekor-text);
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dekor-form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 38px;
}
.dekor-form-field input:focus,
.dekor-form-field select:focus,
.dekor-form-field textarea:focus {
  outline: none;
  border-color: var(--dekor-primary);
  box-shadow: 0 0 0 3px rgba(247, 208, 0, 0.25);
}
.dekor-form-field textarea {
  resize: vertical;
  min-height: 96px;
}

.dekor-form-consent {
  margin-bottom: 20px;
}
.dekor-form-consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--dekor-text-light);
  line-height: 1.6;
  cursor: pointer;
}
.dekor-form-consent input[type="checkbox"] {
  appearance: none;
  width: 19px;
  height: 19px;
  border: 1.5px solid var(--dekor-border);
  border-radius: 5px;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dekor-form-consent input[type="checkbox"]:checked {
  background: var(--dekor-primary);
  border-color: var(--dekor-primary);
}
.dekor-form-consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid var(--dekor-dark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.dekor-form-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--dekor-primary);
  outline-offset: 2px;
}
.dekor-form-consent a {
  color: var(--dekor-text);
  font-weight: 600;
  text-decoration: underline;
}

/* Honeypot - sadece botlar görür/doldurur. Birden fazla CSS tekniğiyle
   garanti altına alınır (sadece tek bir yönteme bağlı kalınmaz),
   böylece herhangi bir CSS yükleme sorununda bile alan kullanıcıdan
   tamamen gizli kalır değil ama en azından çok küçük/dikkat çekmeyen
   halde durur. Asıl güvenlik önlemi yine de sunucu tarafındadır
   (inc/quote-form.php). */
.dekor-form-honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.dekor-quote-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 0;
  font-size: 14.5px;
  border-radius: 9px;
}
.dekor-quote-submit:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}
.dekor-quote-submit-spinner {
  display: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--dekor-dark);
  stroke-width: 2.5;
  animation: dekor-spin 0.8s linear infinite;
}
.dekor-quote-submit.is-loading .dekor-quote-submit-spinner {
  display: block;
}
@keyframes dekor-spin {
  to { transform: rotate(360deg); }
}

.dekor-form-status {
  margin: 16px 0 0;
  font-size: 13.5px;
  text-align: center;
  min-height: 1.4em;
  font-weight: 500;
}
.dekor-form-status.is-success {
  color: #1f7a3a;
  background: #eafbe7;
  border-radius: 8px;
  padding: 10px 14px;
}
.dekor-form-status.is-error {
  color: #b32d2e;
  background: #fdecec;
  border-radius: 8px;
  padding: 10px 14px;
}

.dekor-field-error {
  display: block;
  color: #b32d2e;
  font-size: 12px;
  margin-top: 5px;
  font-weight: 500;
}
.dekor-input-error {
  border-color: #b32d2e !important;
}
.dekor-input-error:focus {
  box-shadow: 0 0 0 3px rgba(179, 45, 46, 0.15) !important;
}

/* ---------- 11. MARKA LOGOLARI (Çözüm Ortaklarımız) ---------- */
.dekor-partners {
  padding: 8px 0 12px;
}

.dekor-partners-track-wrap {
  overflow: hidden;
  padding: 10px 0 50px;
}

.dekor-partners-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: dekor-marquee 32s linear infinite;
}
.dekor-partners-track:hover {
  animation-play-state: paused;
}

@keyframes dekor-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.dekor-partner-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: 64px;
  filter: grayscale(100%) opacity(0.55);
  transition: filter 0.2s ease;
}
.dekor-partner-item:hover,
.dekor-partner-item:focus-visible {
  filter: grayscale(0%) opacity(1);
}
.dekor-partner-logo {
  max-height: 48px;
  width: auto;
}
.dekor-partner-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--dekor-text-light);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .dekor-partners-track {
    animation: none;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
}

/* ---------- 12. HİZMET BÖLGELERİ ---------- */
.dekor-regions {
  padding: 8px 0 12px;
}

.dekor-regions-intro {
  text-align: center;
  color: var(--dekor-text-light);
  font-size: 14px;
  max-width: 680px;
  margin: -8px auto 28px;
}

.dekor-regions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 22px;
  list-style: none;
  margin: 0 0 54px;
  padding: 0;
}

.dekor-region-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--dekor-text);
  text-align: center;
  transition: transform 0.2s ease, color 0.2s ease;
}
.dekor-region-link:hover,
.dekor-region-link:focus-visible {
  transform: translateY(-3px);
  color: var(--dekor-dark);
}

.dekor-region-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fdf3c4 0%, #fbe98a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dekor-region-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--dekor-dark);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dekor-region-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dekor-region-name {
  font-size: 12px;
  font-weight: 500;
}