/* ==========================================================================
   LOFS Teknoloji — Tasarım Sistemi
   Renk: Turuncu / Siyah / Beyaz — Liquid Glass + Glassmorphism (destekleyici)
   Açık/Koyu tema: aşağıdaki semantik token katmanı (--surface-*, --text-*, --border-*)
   [data-theme="dark"] altında yeniden tanımlanır; bileşenler ham renk yerine bu
   semantik token'ları kullanır ki tema değişince otomatik uyum sağlasın.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --c-black: #0a0a0d;
  --c-black-soft: #16161b;
  --c-black-80: rgba(10,10,13,.8);
  --c-white: #ffffff;
  --c-offwhite: #f6f6f8;
  --c-paper: #fbfaf9;

  --c-orange-50:  #fff2e8;
  --c-orange-100: #ffe1cc;
  --c-orange-300: #ff9a5c;
  --c-orange-500: #ff6a1a;
  --c-orange-600: #f05a0e;
  --c-orange-700: #cc4708;

  --c-gray-50:  #f7f7f8;
  --c-gray-100: #eeeef0;
  --c-gray-200: #e1e1e5;
  --c-gray-300: #cbcbd1;
  --c-gray-400: #a6a6b0;
  --c-gray-500: #82828d;
  --c-gray-600: #5f5f6a;
  --c-gray-700: #45454e;
  --c-gray-800: #2b2b31;
  --c-gray-900: #18181c;

  --c-success: #1c9a56;
  --c-success-bg: #e7f7ee;
  --c-error: #dd3730;
  --c-error-bg: #fdeceb;
  --c-warn: #c97a09;
  --c-warn-bg: #fdf1de;

  --font-display: 'Plus Jakarta Sans', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --shadow-sm: 0 2px 8px rgba(10,10,13,.06);
  --shadow-md: 0 8px 24px rgba(10,10,13,.10);
  --shadow-lg: 0 20px 48px rgba(10,10,13,.16);
  --shadow-orange: 0 10px 28px rgba(255,106,26,.35);

  --glass-bg: rgba(255,255,255,.66);
  --glass-bg-strong: rgba(255,255,255,.82);
  --glass-border: rgba(255,255,255,.55);
  --glass-blur: 20px;
  --glass-sheen: linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,0) 40%);

  --glass-dark-bg: rgba(16,16,20,.72);
  --glass-dark-border: rgba(255,255,255,.12);

  --header-h: 72px;
  --container-w: 1280px;
  --motion-fast: 160ms;
  --motion-med: 260ms;
  --ease: cubic-bezier(.2,.8,.2,1);

  /* ---- Semantik tema token'ları (açık tema varsayılanları) ---- */
  --surface-page: var(--c-paper);
  --surface-1: #ffffff;              /* kartlar, paneller, formlar */
  --surface-2: var(--c-gray-50);     /* çökük/alt alanlar, tablo şeridi */
  --surface-3: var(--c-gray-100);    /* daha çökük alanlar */
  --surface-overlay: rgba(255,255,255,.97); /* dropdown/mega/drawer — neredeyse opak */
  --surface-nav: rgba(255,255,255,.62);     /* ikincil nav şeridi */

  --text-1: var(--c-black);      /* başlıklar, güçlü metin */
  --text-2: var(--c-gray-700);   /* gövde metni */
  --text-3: var(--c-gray-500);   /* ikincil/meta metin */
  --text-on-brand: #ffffff;      /* siyah/turuncu yüzeyler üzerindeki metin (değişmez) */

  --border-1: var(--c-gray-200);
  --border-2: var(--c-gray-300);

  --input-bg: #ffffff;
  --input-border: var(--c-gray-200);

  --shadow-1: var(--shadow-sm);
  --shadow-2: var(--shadow-md);
  --shadow-3: var(--shadow-lg);

  --scrollbar-track: var(--c-gray-100);

  /* İki renkli (duo-tone) ince çerçeve bileşeni için nötr renk — açık temada siyah,
     koyu temada beyaz (bkz. aşağıdaki koyu tema blokları); turuncu yarı her zaman sabit. */
  --duo-neutral: var(--c-black);
  --duo-border-w: 1.25px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-med: 0ms; }
}

/* ---- Koyu tema ----
   Not: --c-black, .hero/.office-section/.site-footer/.admin-sidebar/.lofs-preloader gibi
   KASITLI OLARAK her zaman siyah kalan marka yüzeyleri burada DEĞİŞTİRİLMEZ — sadece
   sayfa/kart/metin/kenarlık gibi "tema ile değişmesi gereken" semantik token'lar
   yeniden tanımlanır. Bu sayede ürün kartı, form, admin paneli, dropdown, tablo, rozet
   gibi TÜM bileşenler otomatik olarak koyu temaya uyum sağlar. */
:root[data-theme="dark"] {
  --surface-page: #0c0c10;
  --surface-1: #17171d;
  --surface-2: #1c1c22;
  --surface-3: #232329;
  --surface-overlay: rgba(23,23,29,.97);
  --surface-nav: rgba(18,18,23,.7);

  --text-1: #f2f2f4;
  --text-2: #c7c7cf;
  --text-3: #8f8f9a;

  --border-1: #2b2b33;
  --border-2: #38383f;

  --input-bg: #1b1b21;
  --input-border: #33333c;

  --shadow-1: 0 2px 10px rgba(0,0,0,.4);
  --shadow-2: 0 10px 28px rgba(0,0,0,.5);
  --shadow-3: 0 24px 56px rgba(0,0,0,.6);

  --glass-bg: rgba(28,28,35,.58);
  --glass-bg-strong: rgba(28,28,35,.82);
  --glass-border: rgba(255,255,255,.09);
  --glass-sheen: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0) 40%);

  --scrollbar-track: #1c1c22;

  --c-success-bg: #103b25;
  --c-error-bg: #3a1615;
  --c-warn-bg: #3a2a0c;
  --duo-neutral: var(--c-white);
  color-scheme: dark;
}

/* Sistem tercihine göre (kullanıcı henüz seçim yapmadıysa) — bkz. head.php'deki
   engelleyici (blocking) script; JS localStorage'da kayıt yoksa data-theme hiç
   yazılmaz ve bu media query devreye girer. Kullanıcı aktif seçim yaptığında
   data-theme="light"/"dark" HTML'e yazılır ve bu media query'yi geçersiz kılar. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --surface-page: #0c0c10;
    --surface-1: #17171d;
    --surface-2: #1c1c22;
    --surface-3: #232329;
    --surface-overlay: rgba(23,23,29,.97);
    --surface-nav: rgba(18,18,23,.7);
    --text-1: #f2f2f4;
    --text-2: #c7c7cf;
    --text-3: #8f8f9a;
    --border-1: #2b2b33;
    --border-2: #38383f;
    --input-bg: #1b1b21;
    --input-border: #33333c;
    --shadow-1: 0 2px 10px rgba(0,0,0,.4);
    --shadow-2: 0 10px 28px rgba(0,0,0,.5);
    --shadow-3: 0 24px 56px rgba(0,0,0,.6);
    --glass-bg: rgba(28,28,35,.58);
    --glass-bg-strong: rgba(28,28,35,.82);
    --glass-border: rgba(255,255,255,.09);
    --scrollbar-track: #1c1c22;
    --c-success-bg: #103b25;
    --c-error-bg: #3a1615;
    --c-warn-bg: #3a2a0c;
    --duo-neutral: var(--c-white);
    color-scheme: dark;
  }
  /* .dash-metric.highlight'ın koyu tema kuralı (aşağıda satır ~1117) yalnızca
     data-theme="dark" ÖZNİTELİĞİNE bağlıydı; kullanıcı temayı hiç değiştirmemiş
     ama sistemi koyu ise (en yaygın durum) bu kural hiç uygulanmıyor, açık temanın
     krem rengi arka planı kalıyor ve üzerindeki (koyu temaya göre neredeyse beyaz
     olan) metin görünmez oluyordu. Aynı kuralı buraya da ekleyerek iki durumu
     eşitliyoruz - bkz. EPOSTA-GUVENILIRLIK-DUZELTME-RAPORU.md. */
  :root:not([data-theme="light"]):not([data-theme="dark"]) .dash-metric.highlight { background: rgba(255,106,26,.1); border-color: rgba(255,106,26,.25); }
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--motion-med) var(--ease), color var(--motion-med) var(--ease);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 800; margin: 0 0 .4em; letter-spacing: -.01em; color: var(--text-1); }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
.muted { color: var(--text-3); }

/* transform ile gizleniyor (left:-999px DEĞİL) — büyük negatif left değeri, body'nin
   kaydırılabilir (scrollable) alanına dahil olup görünmez bir yatay taşmaya yol açabiliyordu;
   transform ise düzen/kaydırma sınırlarını etkilemeden sadece görsel olarak taşır. */
.skip-link {
  position: absolute; left: 0; top: 0; z-index: 999;
  background: var(--c-orange-500); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0;
  transform: translateY(-150%); transition: transform var(--motion-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 2.5px solid var(--c-orange-500);
  outline-offset: 2px;
  border-radius: 6px;
}

.container { max-width: var(--container-w); margin: 0 auto; padding: 0 20px; }
.section { padding: var(--space-12) 0; }
.section.center { text-align: center; }
/* Genel ortalama yardımcı sınıfı: bir <section> öğesinin kendisi değil, içindeki bir
   başlık/açıklama grubu (örn. FAQ bölümündeki <div class="center">) sarmalandığında da
   aynı şekilde ortalansın diye ayrı tanımlanır (önceden sadece .section.center eşleşiyordu,
   bu yüzden iç div'ler ortalanmıyor ve başlık altındaki kutularla hizası bozuluyordu).
   Not: max-width burada KASITLI olarak eklenmez — .section.center (örn. premium-intro)
   ile de eşleştiği için bölümün tamamını daraltıp stat kartlarını bozardı; genişlik
   kısıtı zaten .section-text ve .faq-list kendi max-width+margin:auto'suyla sağlanıyor. */
.center { text-align: center; }
.eyebrow {
  display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-orange-600); margin-bottom: var(--space-3);
}
.eyebrow--light { color: var(--c-orange-300); }
.section-title { font-size: clamp(26px, 3.4vw, 40px); margin-bottom: var(--space-3); }
.section-text { color: var(--text-3); max-width: 640px; margin: 0 auto var(--space-6); font-size: 16px; }
.section.center .section-text { margin-left: auto; margin-right: auto; }
.highlight { color: var(--c-orange-600); font-weight: 700; }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }

/* ---------- Liquid Glass surface ---------- */
.glass-surface {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  box-shadow: var(--shadow-2);
  isolation: isolate;
  color: var(--text-2);
}
.glass-surface::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: var(--glass-sheen);
  pointer-events: none;
  opacity: .7;
  z-index: -1;
}
.glass-surface--floating { box-shadow: var(--shadow-3); }
.glass-surface--dark {
  background: var(--glass-dark-bg);
  border-color: var(--glass-dark-border);
  color: #fff;
}
/* backdrop-filter desteklemeyen tarayıcılarda okunabilir katı yüzeye düş */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-surface { background: var(--surface-1); }
  .glass-surface--dark { background: rgba(20,20,24,.96); }
}

/* ---------- Açılır menü yüzeyleri (okunabilirlik önceliği) ----------
   Hesap dropdown'u, mega menü ve mobil çekmece arkadaki banner/ürün/yazı içeriğinin
   ÜZERİNDE açılır; bu yüzden genel .glass-surface şeffaflığı burada yetersiz kalıp arka
   plan metinlerinin karışmasına yol açıyordu. Çözüm SADECE bu üç bileşene özgüdür (site
   genelindeki kart/hero/buton camsı yüzeyleri değişmedi): arka plan alfa değeri neredeyse
   opak yapıldı (opacity değil — içerik/metin/ikonlar soldurulmaz, sadece background-color'ın
   alfa kanalı yönetilir), backdrop-filter çalışmasa da panel zaten opak olduğu için okunaklı
   kalır. --surface-overlay tema-duyarlı olduğundan koyu modda da otomatik doğru çalışır. */
.account-dropdown.glass-surface,
.mega-panel.glass-surface,
.mobile-drawer.glass-surface {
  background: var(--surface-overlay);
  border-color: var(--border-1);
  box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255,255,255,.06);
  color: var(--text-2);
}
.account-dropdown.glass-surface::before,
.mega-panel.glass-surface::before,
.mobile-drawer.glass-surface::before {
  opacity: .25; /* opak yüzeyde parlama (sheen) daha az belirgin olsun, metinle yarışmasın */
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .account-dropdown.glass-surface,
  .mega-panel.glass-surface,
  .mobile-drawer.glass-surface { background: var(--surface-1); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 14.5px;
  padding: 13px 22px; border-radius: var(--radius-pill); border: 1px solid transparent;
  transition: transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn--primary {
  background: linear-gradient(135deg, var(--c-orange-300), var(--c-orange-500) 55%, var(--c-orange-700));
  color: #fff; box-shadow: var(--shadow-orange);
}
.btn--primary:hover { box-shadow: 0 14px 34px rgba(255,106,26,.44); transform: translateY(-1px); }
.btn--dark { background: var(--c-black); color: #fff; }
.btn--dark:hover { background: var(--c-black-soft); }
.btn--soft { background: var(--c-orange-50); color: var(--c-orange-700); border-color: var(--c-orange-100); }
.btn--soft:hover { background: var(--c-orange-100); }
.btn--ghost { background: var(--surface-2); color: var(--text-1); border-color: var(--border-1); backdrop-filter: blur(8px); }
.btn--ghost:hover { background: var(--surface-1); }
.btn--glass {
  background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.4);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.btn--glass:hover { background: rgba(255,255,255,.28); }
.btn--outline-fav { background: var(--surface-1); color: var(--c-orange-600); border-color: var(--c-orange-300); }
.btn--outline-fav.is-active { background: var(--c-orange-500); color: #fff; }
.btn--disabled { background: var(--surface-3); color: var(--text-3); pointer-events: none; }
.btn--danger { background: var(--c-error); color: #fff; }
.btn--sm { padding: 9px 16px; font-size: 13px; }
.btn--lg { padding: 16px 28px; font-size: 15.5px; }
.btn--block { width: 100%; }
form.product-card__add-form, form.detail-add-form, form.detail-buy-form { display: inline-flex; }

/* ---------- Chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: var(--radius-pill); font-family: var(--font-display);
}
.chip--condition { background: var(--c-black); color: #fff; }
.chip--low { background: var(--c-warn-bg); color: var(--c-warn); }
.chip--sold { background: var(--c-gray-800); color: #fff; }
.chip--discount { background: var(--c-orange-500); color: #fff; box-shadow: 0 4px 12px rgba(255,106,26,.4); }
.badge-count {
  position: absolute; top: -6px; right: -6px; background: var(--c-orange-500); color: #fff;
  font-size: 11px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px; box-shadow: 0 0 0 2px var(--surface-1);
}
.badge-count[hidden] { display: none; }
.badge-dot { position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--c-orange-500); box-shadow: 0 0 0 2px var(--surface-1); }

/* ---------- Notices / toasts ---------- */
.notice { padding: 14px 18px; border-radius: var(--radius-md); margin-bottom: var(--space-5); font-size: 14.5px; }
.notice p { margin: 0 0 4px; }
.notice p:last-child { margin-bottom: 0; }
.notice--success { background: var(--c-success-bg); color: var(--c-success); }
.notice--error { background: var(--c-error-bg); color: var(--c-error); }
.checkout-wide { margin: 0 0 var(--space-4); }
.toast-flash {
  position: fixed; top: 90px; left: 50%; transform: translateX(-50%);
  background: var(--c-black); color: #fff; padding: 12px 22px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600; z-index: 500; box-shadow: var(--shadow-3);
  animation: toast-in-out 3.6s var(--ease) forwards;
}
.toast-flash[data-flash="error"] { background: var(--c-error); }
@keyframes toast-in-out {
  0% { opacity: 0; transform: translate(-50%, -8px); }
  10%, 85% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -8px); }
}

/* ---------- Tema seçici (açık/koyu) ---------- */
.theme-toggle {
  position: relative;
}
.theme-toggle__icon { position: absolute; inset: 0; margin: auto; display: flex; align-items: center; justify-content: center; transition: opacity var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease); }
.theme-toggle__icon--moon { opacity: 0; transform: scale(.6) rotate(-40deg); }
:root[data-theme="dark"] .theme-toggle__icon--sun { opacity: 0; transform: scale(.6) rotate(40deg); }
:root[data-theme="dark"] .theme-toggle__icon--moon { opacity: 1; transform: none; }
.mobile-drawer__theme-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: var(--space-2);
  padding: 13px 4px; font-weight: 700; font-size: 14px; background: transparent; border: 0; border-top: 1px solid var(--border-1); color: var(--text-1);
}
.theme-toggle__switch {
  position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--border-2); flex-shrink: 0; transition: background var(--motion-fast) var(--ease);
}
.theme-toggle__switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1);
  transition: transform var(--motion-fast) var(--ease);
}
:root[data-theme="dark"] .theme-toggle__switch { background: var(--c-orange-500); }
:root[data-theme="dark"] .theme-toggle__switch::after { transform: translateX(18px); }

/* ---------- Preloader ----------
   İlk girişte kısa bir marka anı: yazı hafif blur'dan netliğe + yukarı hareketle belirir,
   turuncu vurgunun üzerinden ince bir ışık geçer, ardından katman yumuşakça kaybolur.
   Ne zaman oynatılacağı (ana sayfaya doğrudan giriş/yenileme) head.php'deki engelleyici
   script tarafından navigasyon tipine + document.referrer'a bakılarak belirlenir (bkz.
   .no-anim). JS hiç çalışmazsa bile katman ekranı sonsuza kadar kilitlemesin diye saf CSS
   ile ~2.4sn sonra otomatik gizlenen bir güvenlik ağı var. Bu katman KASITLI olarak her
   zaman siyah — marka anı, tema rengine bağlı değildir (footer/hero gibi sabit markalı
   yüzeylerle aynı mantık). */
.lofs-preloader {
  position: fixed; inset: 0; z-index: 999; background: #08080a;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .35s var(--ease), visibility .35s;
}
.lofs-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.lofs-preloader.no-anim,
.lofs-preloader.no-anim .preloader-mark,
.lofs-preloader.no-anim .preloader-mark::after { transition: none !important; animation: none !important; }
/* JS hiçbir sebeple çalışmazsa (hata, engellenmiş script vb.) katman en geç ~2.4sn'de
   kendiliğinden gizlenir; JS normal çalıştığında bu, is-hidden zaten eklendiği için
   görünürlüğü etkilemeyen zararsız bir tekrardır. */
@keyframes preloader-failsafe-hide { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.lofs-preloader:not(.no-anim) { animation: preloader-failsafe-hide 0s linear 2.4s forwards; }

.preloader-mark {
  position: relative; overflow: hidden; font-family: var(--font-display); font-weight: 800; font-size: 30px;
  color: #fff; display: flex; gap: 8px; opacity: 0;
  animation: preloader-mark-in .6s var(--ease) forwards;
}
.preloader-mark b { color: var(--c-orange-500); font-weight: 800; }
.preloader-mark::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,154,92,.6), transparent);
  transform: skewX(-20deg); opacity: 0;
  animation: preloader-sweep .7s ease-out .45s forwards;
}
@keyframes preloader-mark-in {
  0% { opacity: 0; filter: blur(9px); transform: translateY(12px); }
  70% { opacity: 1; filter: blur(0); transform: translateY(0); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes preloader-sweep {
  0% { left: -60%; opacity: 0; }
  15% { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lofs-preloader { transition: opacity .01s linear, visibility .01s linear; animation: none !important; }
  .preloader-mark { opacity: 1; animation: none; }
  .preloader-mark::after { display: none; }
}

/* ---------- Service strip / ticker ---------- */
.service-strip { background: var(--c-black); color: rgba(255,255,255,.75); overflow: hidden; font-size: 12.5px; }
.service-strip__track { display: flex; gap: 40px; white-space: nowrap; padding: 8px 0; animation: ticker 34s linear infinite; width: max-content; }
@media (prefers-reduced-motion: reduce) { .service-strip__track { animation: none; } }
.service-strip__track i { width: 3px; height: 3px; border-radius: 50%; background: var(--c-orange-500); display: inline-block; margin: 0 -18px 0 18px; align-self: center; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Header ----------
   .site-header__row artık simetrik yan kolonlu bir CSS Grid: [1fr][arama][1fr]. Sol ve
   sağ kolonlar EŞİT fr paylaşımı aldığı için içerikleri farklı genişlikte olsa bile
   (logo vs. sepet+hesap+tema ikonları) ortadaki arama alanı her zaman sayfanın GERÇEK
   yatay merkezinde kalır — logo sola, aksiyonlar sağa yaslanır ama kenara yapışmaz
   (.container zaten kenar boşluğu sağlıyor). */
.site-header { position: sticky; top: 0; z-index: 200; }
/* z-index: .glass-surface her yüzeye isolation:isolate + kendi stacking context'ini veriyor;
   bar ve altındaki .primary-nav kardeş (sibling) stacking context'ler olduğu için normalde
   DOM sırasına göre boyanır (primary-nav sonra geldiğinden üstte kalır). Hesap dropdown'u
   bar'dan taşıp primary-nav'ın kapladığı alana sarktığında bu yüzden ilk öğe (Giriş Yap)
   primary-nav'ın camsı panelinin ALTINDA kalıp görünmez/tıklanamaz oluyordu. Bar'a primary-nav'dan
   yüksek açık z-index vererek bar'ın (ve ondan taşan dropdown'un) her zaman üstte boyanmasını
   garantiliyoruz — tasarım/şeffaflık değişmiyor, sadece boyama sırası düzeliyor. */
.site-header__bar { position: relative; z-index: 2; border-radius: 0; border-top: 0; border-left: 0; border-right: 0; box-shadow: var(--shadow-1); }
.site-header__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 560px) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-4);
  height: var(--header-h);
}
.site-header__left { display: flex; align-items: center; gap: var(--space-3); justify-self: start; min-width: 0; }
.site-header__row > .site-search { justify-self: center; width: 100%; }
.site-header__actions { justify-self: end; }
.brand-mark { font-family: var(--font-display); font-weight: 800; font-size: 22px; display: flex; gap: 5px; flex-shrink: 0; }
.brand-mark__main { color: var(--text-1); }
.brand-mark__accent { color: var(--c-orange-500); }

.hamburger-btn { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; flex-shrink: 0; }
.hamburger-btn span { width: 20px; height: 2px; background: var(--text-1); border-radius: 2px; transition: transform var(--motion-fast), opacity var(--motion-fast); }

.icon-btn {
  position: relative; width: 42px; height: 42px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; color: var(--text-1);
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.icon-btn:hover { background: var(--c-orange-50); border-color: var(--c-orange-100); }

.site-search {
  flex: 1; display: flex; align-items: center; gap: 8px; background: var(--surface-2);
  border: 1px solid var(--border-1); border-radius: var(--radius-pill); padding: 8px 8px 8px 16px; max-width: 560px;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.site-search:focus-within { border-color: var(--c-orange-300); box-shadow: 0 0 0 4px var(--c-orange-50); }
.site-search svg { color: var(--text-3); flex-shrink: 0; }
.site-search input { flex: 1; border: 0; background: transparent; outline: none; min-width: 0; color: var(--text-1); }
.site-search input::placeholder { color: var(--text-3); }
.site-search button { background: var(--c-black); color: #fff; border-radius: var(--radius-pill); padding: 8px 18px; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.site-search--drawer { max-width: none; margin: var(--space-4) var(--space-5); }

.site-header__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cart-link { overflow: visible; }

.account-menu { position: relative; }
.account-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); width: 240px; padding: 10px; z-index: 80;
  display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--motion-med) var(--ease), transform var(--motion-med) var(--ease), visibility var(--motion-med);
}
.account-menu.is-open .account-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.account-dropdown__head { padding: 8px 12px; font-weight: 700; font-size: 13px; color: var(--text-3); }
.account-dropdown a, .account-dropdown__logout {
  display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 14px; width: 100%; text-align: left; background: transparent; border: 0; color: var(--text-1);
}
.account-dropdown a:hover, .account-dropdown__logout:hover { background: var(--c-orange-50); color: var(--c-orange-700); }
.account-dropdown b { font-size: 11.5px; background: var(--c-orange-500); color: #fff; border-radius: 999px; padding: 1px 7px; }

.primary-nav { border-radius: 0; border: 0; border-top: 1px solid var(--border-1); box-shadow: none; background: var(--surface-nav); backdrop-filter: blur(14px); }
.primary-nav__row { display: flex; align-items: center; justify-content: center; gap: var(--space-2); height: 48px; }
.primary-nav__link { padding: 8px 14px; border-radius: var(--radius-pill); font-weight: 700; font-size: 13.5px; color: var(--text-2); }
.primary-nav__link:hover { background: var(--c-orange-50); color: var(--c-orange-700); }
.primary-nav__link--accent { color: var(--c-orange-600); }

.mega-wrap { position: relative; }
.mega-trigger { display: flex; align-items: center; gap: 4px; background: transparent; border: 0; padding: 8px 14px; border-radius: var(--radius-pill); font-weight: 700; font-size: 13.5px; color: var(--text-1); }
.mega-trigger:hover { background: var(--c-orange-50); color: var(--c-orange-700); }
.mega-panel {
  position: absolute; top: calc(100% + 10px); left: 0; width: 560px; padding: var(--space-5);
  display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-6);
  opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
  transition: opacity var(--motion-med) var(--ease), transform var(--motion-med) var(--ease), visibility var(--motion-med);
  z-index: 60;
}
.mega-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.mega-panel h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 12px; }
.mega-panel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.mega-panel__grid a { padding: 6px 0; font-weight: 600; font-size: 14px; color: var(--text-1); border-bottom: 1px solid transparent; }
.mega-panel__grid a:hover { color: var(--c-orange-600); }
.mega-quick-card { display: block; padding: 12px 14px; border-radius: var(--radius-md); background: var(--c-orange-50); margin-bottom: 8px; }
.mega-quick-card strong { display: block; font-size: 13.5px; color: var(--c-black); }
.mega-quick-card span { font-size: 11.5px; color: var(--c-orange-600); }
.mega-quick-card:hover { background: var(--c-orange-100); }

/* ---------- Mobile drawer ---------- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(10,10,13,.5); opacity: 0; visibility: hidden; transition: opacity var(--motion-med); z-index: 240; }
.drawer-overlay.is-open { opacity: 1; visibility: visible; }
.mobile-drawer {
  position: fixed; top: 0; left: 0; height: 100%; width: min(340px, 86vw); z-index: 250;
  transform: translateX(-104%); transition: transform var(--motion-med) var(--ease);
  border-radius: 0; overflow-y: auto; display: flex; flex-direction: column;
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5); }
.mobile-drawer__nav { padding: 0 var(--space-5) var(--space-8); display: flex; flex-direction: column; gap: 2px; }
.mobile-drawer__nav details { border-bottom: 1px solid var(--border-1); }
.mobile-drawer__nav summary { padding: 14px 4px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; color: var(--text-1); }
.mobile-drawer__nav summary::-webkit-details-marker { display: none; }
.mobile-drawer__nav summary::after { content: '+'; color: var(--c-orange-500); font-weight: 800; }
.mobile-drawer__nav details[open] summary::after { content: '–'; }
.mobile-drawer__links { display: flex; flex-direction: column; padding: 0 0 12px 8px; }
.mobile-drawer__links a { padding: 8px 4px; font-size: 14px; color: var(--text-2); }
.mobile-drawer__divider { height: 1px; background: var(--border-1); margin: 10px 0; }
.mobile-drawer__nav > a { padding: 13px 4px; font-weight: 700; border-bottom: 1px solid var(--border-1); display: flex; justify-content: space-between; color: var(--text-1); }
.mobile-drawer__nav > a b { font-size: 11px; background: var(--c-orange-500); color: #fff; border-radius: 999px; padding: 1px 7px; }
.mobile-drawer__logout { width: 100%; text-align: left; padding: 13px 4px; font-weight: 700; background: transparent; border: 0; color: var(--c-error); }
body.drawer-open { overflow: hidden; }

/* ---------- Ana sayfa vitrini: 3 kolon (Yeni Eklenenler | Banner | İndirimli Ürünler) ----------
   Önceki dev/tam-genişlik hero'nun yerine, header ile aynı ortalanmış container içinde,
   çok daha kompakt bir vitrin. Orta banner yan kartlardan belirgin geniş (~54%), yan
   sütunlar ~%23'er. Banner görselleri KIRPILMADAN (object-fit:contain) gösterilir. */
.home-showcase { padding: var(--space-6) 0 var(--space-4); }
.home-showcase__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.35fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: stretch;
}
.home-showcase__col { height: clamp(360px, 38vw, 440px); min-width: 0; }
.home-showcase__banner-col { height: clamp(360px, 38vw, 440px); min-width: 0; border-radius: var(--radius-lg); overflow: hidden; position: relative; background: var(--c-black); box-shadow: var(--shadow-2); }
.home-showcase__banner-col .hero__slider { height: 100%; aspect-ratio: auto; }
.home-showcase__banner-col .hero__slide img { object-fit: contain; }

/* ---------- Vitrin slider'ı (Yeni Eklenenler / İndirimli Ürünler) ---------- */
.showcase-slider { position: relative; height: 100%; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1); display: flex; flex-direction: column; }
.showcase-slider__head { padding: var(--space-3) var(--space-4) 0; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.showcase-slider__head h3 { font-size: 14px; margin: 0; }
.showcase-slider__head a { font-size: 11.5px; font-weight: 700; color: var(--c-orange-600); }
.showcase-slider__viewport { flex: 1; overflow: hidden; position: relative; touch-action: pan-y; }
.showcase-slider__track { display: flex; height: 100%; transition: transform var(--motion-med) var(--ease); }
@media (prefers-reduced-motion: reduce) { .showcase-slider__track { transition: none; } }
.showcase-slide { flex: 0 0 100%; width: 100%; height: 100%; display: flex; flex-direction: column; padding: var(--space-3) var(--space-4) var(--space-4); }
.showcase-slide__media { position: relative; flex: 1; min-height: 0; border-radius: var(--radius-md); background: var(--surface-2); overflow: hidden; margin-bottom: var(--space-3); }
.showcase-slide__media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.showcase-slide__badge { position: absolute; top: 8px; left: 8px; }
.showcase-slide__title { font-size: 13.5px; font-weight: 700; color: var(--text-1); margin: 0 0 4px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.showcase-slide__prices { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.showcase-slide__price { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--text-1); }
.showcase-slide__price--sale { color: var(--c-orange-600); }
.showcase-slide__price-old { font-size: 12px; color: var(--text-3); }
.showcase-slider__nav {
  position: absolute; top: 42%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-1); color: var(--text-1); border: 1px solid var(--border-1); box-shadow: var(--shadow-1);
  font-size: 15px; z-index: 3; display: flex; align-items: center; justify-content: center;
}
.showcase-slider__nav--prev { left: 8px; }
.showcase-slider__nav--next { right: 8px; }
.showcase-slider__dots { display: flex; justify-content: center; gap: 6px; padding-bottom: var(--space-3); flex-shrink: 0; }
.showcase-slider__dots button { width: 6px; height: 6px; border-radius: 50%; background: var(--border-2); border: 0; padding: 0; }
.showcase-slider__dots button.is-active { background: var(--c-orange-500); width: 16px; border-radius: 999px; }
.showcase-slider[data-single] .showcase-slider__nav,
.showcase-slider[data-single] .showcase-slider__dots { display: none; }
.showcase-slider__empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-4); color: var(--text-3); font-size: 13px; }

/* ---------- Category quicknav ----------
   Kartlar admin panelinden ("Ana Sayfa Kategori Görselleri") yüklenen gerçek kategori
   fotoğraflarını arka plan olarak kullanır; kategori adı her zaman altta, koyu bir
   gradient üzerinde okunaklı kalır. Görsel henüz yüklenmemişse (category-tile--empty)
   kırık resim/eski ikon yerine marka renklerine uygun sade bir gradient + isim gösterilir. */
.category-quicknav { padding-top: var(--space-8); padding-bottom: var(--space-4); }
.category-quicknav__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); }
.category-tile {
  position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-1); background: var(--surface-3);
  transition: transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.category-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.category-tile__media {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform 500ms var(--ease);
}
.category-tile:hover .category-tile__media { transform: scale(1.05); }
.category-tile__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,13,0) 38%, rgba(10,10,13,.78) 100%);
}
.category-tile__label {
  position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 15.5px; line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.category-tile--empty {
  background: linear-gradient(155deg, var(--c-gray-900) 0%, var(--c-black) 55%, var(--c-orange-700) 145%);
}
.category-tile--empty .category-tile__label { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); }

/* ---------- İki renkli (duo-tone) ince çerçeve — tekrar kullanılabilir bileşen ----------
   Açık temada üst+sol kenar siyah (--duo-neutral), sağ+alt kenar turuncu; koyu temada
   nötr yarı beyaza döner (bkz. :root[data-theme] token'ları), turuncu yarı sabit kalır.
   Sabit/statiktir — animasyon yok. Yalnızca dış kenarlığı boyar, iç öğeleri etkilemez. */
.duo-border {
  border: var(--duo-border-w) solid var(--duo-neutral);
  border-right-color: var(--c-orange-500);
  border-bottom-color: var(--c-orange-500);
}

/* ---------- Stats ---------- */
.premium-intro { background: radial-gradient(ellipse at top, var(--c-orange-50) 0%, transparent 60%); }
:root[data-theme="dark"] .premium-intro { background: radial-gradient(ellipse at top, rgba(255,106,26,.08) 0%, transparent 60%); }
.stats-row { display: flex; justify-content: center; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-6); }
.stat-card { padding: var(--space-6) var(--space-8); text-align: center; min-width: 180px; }
.stat-card b { display: block; font-family: var(--font-display); font-size: 34px; color: var(--c-orange-600); }
.stat-card span { color: var(--text-3); font-weight: 600; font-size: 13.5px; }

/* ---------- Product grid & card ---------- */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.product-card { display: flex; flex-direction: column; overflow: hidden; transition: transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease); }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.product-card.is-sold { opacity: .72; }
.product-card__top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: flex-start; z-index: 2; }
.product-card__media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--surface-2); overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform var(--motion-med) var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.05); }
.fav-btn, .fav-form { display: inline-flex; }
.fav-btn {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.85); color: var(--c-black);
  align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.7); backdrop-filter: blur(8px);
  transition: color var(--motion-fast), transform var(--motion-fast);
}
.fav-btn.is-active { color: var(--c-orange-500); }
.fav-btn:hover { transform: scale(1.08); }
.product-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: 6px; flex: 1; background: var(--surface-1); }
.product-card__brand { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.product-card__title { font-size: 15px; font-weight: 700; margin: 0; line-height: 1.3; }
.product-card__title a { color: var(--text-1); }
.product-card__desc { font-size: 13px; color: var(--text-3); margin: 0; flex: 1; }
.product-card__meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; gap: 8px; flex-wrap: wrap; }
.product-card__price { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--text-1); }
.product-card__price-group { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.product-card__price-old { font-size: 13px; color: var(--text-3); font-weight: 600; }
.product-card__price--sale { color: var(--c-orange-600); }
.product-card__fav-count { font-size: 11.5px; color: var(--text-3); }
.product-card__actions { display: flex; gap: 8px; margin-top: 10px; }
.product-card__actions .btn { flex: 1; min-width: 0; }

/* ---------- Office / kurumsal ---------- */
.office-section { background: var(--c-black); color: #fff; }
.office-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.office-col h2 { color: #fff; font-size: 24px; }
.office-col p { color: rgba(255,255,255,.72); }
.office-col--media { padding: var(--space-5); }
.office-col--media img { border-radius: var(--radius-md); }
.office-address { margin-top: var(--space-3); font-size: 13.5px; color: rgba(255,255,255,.85); }
.office-section .glass-surface { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: #fff; }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 820px; margin: 0 auto; }
.faq-item { overflow: hidden; }
.faq-item__q { width: 100%; text-align: left; background: transparent; border: 0; padding: 18px 20px; font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; align-items: center; color: var(--text-1); }
.faq-item__q span { color: var(--c-orange-500); font-size: 20px; transition: transform var(--motion-fast); flex-shrink: 0; margin-left: 12px; }
.faq-item.is-open .faq-item__q span { transform: rotate(45deg); }
.faq-item__a { max-height: 0; overflow: hidden; transition: max-height var(--motion-med) var(--ease); }
.faq-item__a p { padding: 0 20px 18px; color: var(--text-3); font-size: 14px; margin: 0; }
.faq-item.is-open .faq-item__a { max-height: 400px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-black); color: rgba(255,255,255,.7); padding-top: var(--space-12); }
/* Footer koyu zeminde: paylaşılan .brand-mark bileşeninin "LOFS" kısmı normalde siyah
   (açık zeminler için), burada görünmez olur. Sadece footer'a özel, header'daki açık
   zemin logosunu etkilemeyen bir override. Turuncu kısım zaten okunaklı, değiştirilmedi. */
.site-footer .brand-mark__main { color: #fff; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-6); padding-bottom: var(--space-8); }
.footer-col h3 { color: #fff; font-size: 13.5px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.footer-col a, .footer-col .footer-address { display: block; padding: 5px 0; font-size: 13.5px; color: rgba(255,255,255,.66); }
.footer-col a:hover { color: var(--c-orange-400); }
.footer-col--brand p { font-size: 13.5px; color: rgba(255,255,255,.6); margin: 14px 0; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; }
.footer-social a:hover { background: var(--c-orange-500); color: #fff; }
.trust-strip { padding: var(--space-5) 20px; border-top: 1px solid rgba(255,255,255,.08); }
.trust-strip__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.trust-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: var(--radius-pill);
  background: #fdfdfc; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.trust-badge__logo { height: 15px; width: auto; display: block; }
.trust-badge--icon { color: var(--c-orange-600); }
.trust-badge__icon { flex-shrink: 0; }
.trust-badge__label { font-size: 11px; font-weight: 700; color: var(--c-gray-700); letter-spacing: .01em; white-space: nowrap; }
/* Footer alt bilgisi: telif satırı + hemen altında (aynı merkez eksende, küçük boşlukla)
   PlutonSoft kredi linki — ikisi de yatayda tam ortalanmış. */
.footer-bottom { padding: var(--space-5) 20px var(--space-8); font-size: 12.5px; color: rgba(255,255,255,.45); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.footer-bottom p { margin: 0; }
.footer-credit { font-weight: 700; color: rgba(255,255,255,.6); transition: color var(--motion-fast); }
.footer-credit:hover { color: var(--c-orange-400); }

.whatsapp-float {
  position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%;
  background: #22c35e; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-3); z-index: 150; transition: transform var(--motion-fast);
}
.whatsapp-float:hover { transform: scale(1.06); }

/* ---------- Live support ---------- */
.live-support { position: fixed; right: 20px; bottom: 86px; z-index: 160; }
.live-support__toggle { box-shadow: var(--shadow-3); }
.live-support__box { position: absolute; bottom: 60px; right: 0; width: 320px; max-height: 420px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all var(--motion-med) var(--ease); }
.live-support.open .live-support__box { opacity: 1; visibility: visible; transform: translateY(0); }
.live-support__head { display: flex; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--border-1); }
.live-support__head div { display: flex; flex-direction: column; gap: 2px; }
.live-support__head b { color: var(--text-1); }
.live-support__messages { flex: 1; overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: 8px; min-height: 140px; }
.live-msg { max-width: 80%; padding: 8px 12px; border-radius: 14px; font-size: 13px; }
.live-msg.user { align-self: flex-end; background: var(--c-orange-500); color: #fff; }
.live-msg.admin { align-self: flex-start; background: var(--surface-2); color: var(--text-1); }
.live-support__form { display: flex; flex-direction: column; gap: 8px; padding: var(--space-3); border-top: 1px solid var(--border-1); }
.live-support__guest-fields { display: flex; gap: 8px; }
.live-support__form input, .live-support__form textarea { border: 1px solid var(--border-1); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--input-bg); color: var(--text-1); }
.support-welcome { color: var(--text-3); font-size: 13px; padding: 10px; text-align: center; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.field small { font-weight: 500; color: var(--text-3); }
.field input, .field textarea, .field select {
  border: 1.5px solid var(--input-border); border-radius: var(--radius-md); padding: 12px 14px; background: var(--input-bg);
  font-size: 14.5px; color: var(--text-1); transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--c-orange-400); box-shadow: 0 0 0 4px var(--c-orange-50); outline: none; }
.field--full { grid-column: 1 / -1; }
.field--checkbox { flex-direction: row; align-items: center; gap: 10px; }
.field--checkbox input[type="checkbox"] { width: auto; flex-shrink: 0; accent-color: var(--c-orange-500); padding: 0; }
.field--checkbox span { font-weight: 600; color: var(--text-1); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.form-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.form-subtitle h3 { font-size: 16px; margin-bottom: 4px; }
.form-subtitle p { font-size: 13px; color: var(--text-3); margin: 0; }
.form-card { padding: var(--space-6); margin-bottom: var(--space-5); }
.form-card h2 { font-size: 19px; margin-bottom: var(--space-4); }

/* ---------- Auth pages ---------- */
.auth-section { padding: var(--space-12) 0; }
.auth-container { display: flex; justify-content: center; }
.auth-card { width: 100%; max-width: 440px; padding: var(--space-8); text-align: center; }
.auth-card h1 { font-size: 26px; }
.auth-card__lead { color: var(--text-3); font-size: 14px; margin-bottom: var(--space-6); }
.auth-card .form-stack { text-align: left; }
.auth-card__foot { margin-top: var(--space-5); font-size: 13.5px; color: var(--text-3); }
.auth-card__foot a { color: var(--c-orange-600); font-weight: 700; }

/* ---------- Page head ---------- */
.page-head { padding: var(--space-10) 0 var(--space-6); }
.page-head h1 { font-size: clamp(24px, 3vw, 34px); }
.page-head p { color: var(--text-3); max-width: 620px; }
.legal-head { background: linear-gradient(180deg, var(--c-orange-50), transparent); }
:root[data-theme="dark"] .legal-head { background: linear-gradient(180deg, rgba(255,106,26,.08), transparent); }
.legal-section { padding-top: 0; }
.legal-card { padding: var(--space-8); max-width: 880px; margin: 0 auto; }
.legal-card h2 { font-size: 17px; margin-top: var(--space-6); }
.legal-card h3 { font-size: 15px; }
.legal-card p { color: var(--text-2); font-size: 14.5px; }

/* ---------- Empty state ---------- */
.empty-state { padding: var(--space-12) var(--space-6); text-align: center; max-width: 560px; margin: 0 auto; }
.empty-state h2, .empty-state h3 { margin-bottom: var(--space-2); }
.empty-state p { color: var(--text-3); margin-bottom: var(--space-5); }
.order-success__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--c-success-bg); color: var(--c-success); font-size: 30px; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); }
.order-success__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.not-found__code { font-family: var(--font-display); font-size: 64px; font-weight: 800; color: var(--c-orange-500); }

/* ---------- Cart ---------- */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-6); align-items: start; }
.cart-list { display: flex; flex-direction: column; gap: var(--space-4); }
.cart-item { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto auto auto; gap: var(--space-4); align-items: center; padding: var(--space-4); }
.cart-item img { width: 84px; height: 84px; object-fit: contain; background: var(--surface-2); border-radius: var(--radius-md); padding: 8px; }
.cart-item__info h3 { font-size: 14.5px; margin-bottom: 2px; }
.cart-item__info p { font-size: 12.5px; color: var(--text-3); margin: 0 0 4px; }
.cart-item__info b { color: var(--c-orange-600); }
.cart-item__price-group { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cart-item__price-old { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.cart-item__qty { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.cart-item__qty input { width: 64px; border: 1.5px solid var(--input-border); border-radius: var(--radius-sm); padding: 8px; text-align: center; background: var(--input-bg); color: var(--text-1); }
.cart-item__line { text-align: right; font-size: 13px; color: var(--text-3); }
.cart-item__line strong { display: block; font-size: 15px; color: var(--text-1); }
.cart-item__remove { width: 34px; height: 34px; border-radius: 50%; background: var(--c-error-bg); color: var(--c-error); display: flex; align-items: center; justify-content: center; border: 0; }
.cart-summary { padding: var(--space-6); display: flex; flex-direction: column; gap: 12px; position: sticky; top: 100px; }
.cart-summary h2 { font-size: 18px; }
.cart-summary__row { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-2); }
.cart-summary__row--discount { color: var(--c-success); font-weight: 700; }
.cart-summary__row--total { font-size: 17px; font-weight: 800; color: var(--text-1); border-top: 1px solid var(--border-1); padding-top: 12px; }
.coupon-box { display: flex; flex-direction: column; gap: 8px; padding: var(--space-3) 0; border-top: 1px dashed var(--border-1); border-bottom: 1px dashed var(--border-1); }
.coupon-box__actions { display: flex; gap: 8px; }
.coupon-box__actions .btn { flex: 1; }
.coupon-saving-card { background: var(--c-success-bg); border-radius: var(--radius-md); padding: 14px; margin: 4px 0; }
.coupon-saving-head { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--c-success); margin-bottom: 6px; }
.coupon-saving-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-2); }
.coupon-saving-row.discount { color: var(--c-success); font-weight: 700; }
.coupon-saving-row.total { font-weight: 800; color: var(--text-1); border-top: 1px solid rgba(28,154,86,.25); margin-top: 4px; padding-top: 4px; }
.coupon-saving-card p { font-size: 12px; color: var(--text-2); margin: 8px 0 0; }

/* ---------- Checkout ---------- */
.checkout-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-6); align-items: start; }
.checkout-choice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.checkout-choice > div { padding: var(--space-5); }
.checkout-choice h3 { font-size: 16px; }
.checkout-choice p { font-size: 13px; color: var(--text-2); margin-bottom: 12px; }
.checkout-choice .btn { margin-right: 8px; }
.checkout-form { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.checkout-form h2 { font-size: 16px; margin-top: var(--space-4); }
.checkout-form h2:first-of-type { margin-top: 0; }
.delivery-options { display: flex; gap: 12px; flex-wrap: wrap; }
.delivery-option { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border: 1.5px solid var(--border-1); border-radius: var(--radius-md); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.delivery-option:has(input:checked) { border-color: var(--c-orange-500); background: var(--c-orange-50); }
.payment-placeholder { padding: var(--space-4); background: var(--surface-2); border: 1px dashed var(--border-2); }
.payment-placeholder b { display: block; margin-bottom: 4px; }
.payment-placeholder p { font-size: 13px; color: var(--text-2); margin: 0; }
.checkout-summary { padding: var(--space-6); display: flex; flex-direction: column; gap: 10px; position: sticky; top: 100px; }
.checkout-summary h2 { font-size: 18px; }
.summary-item { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.summary-item img { width: 46px; height: 46px; object-fit: contain; background: var(--surface-2); border-radius: var(--radius-sm); padding: 4px; }
.summary-item span { flex: 1; }
.summary-item small { display: block; color: var(--text-3); }
.checkout-coupon { display: flex; gap: 8px; align-items: flex-end; border-top: 1px dashed var(--border-1); padding-top: 10px; flex-wrap: wrap; }
.checkout-coupon .field { flex: 1; min-width: 140px; }
.checkout-coupon__actions { display: flex; gap: 6px; }
.summary-total { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-2); }
.summary-total--grand { font-size: 18px; font-weight: 800; color: var(--text-1); border-top: 1px solid var(--border-1); padding-top: 10px; }

/* ---------- Account ---------- */
.account-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.account-summary { padding: var(--space-6); position: sticky; top: 100px; }
.account-summary__hero { display: flex; align-items: center; gap: 14px; margin-bottom: var(--space-5); }
.account-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--c-orange-300), var(--c-orange-600)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; font-family: var(--font-display); }
.account-summary__hero h2 { font-size: 18px; margin-bottom: 2px; }
.account-summary__hero p { font-size: 13px; color: var(--text-3); margin: 0; }
.account-summary__list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 var(--space-5); }
.account-summary__list div { display: flex; justify-content: space-between; font-size: 13px; gap: 10px; }
.account-summary__list dt { color: var(--text-3); }
.account-summary__list dd { margin: 0; font-weight: 700; text-align: right; color: var(--text-1); }
.account-summary__links { display: flex; gap: 8px; }

/* ---------- Orders ---------- */
.orders-list { display: flex; flex-direction: column; gap: var(--space-5); }
.order-card { padding: var(--space-6); }
.order-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.order-card__top h2 { font-size: 17px; margin: 2px 0; }
.order-card__top small { color: var(--text-3); font-size: 12px; }
.order-card__top span { color: var(--text-3); font-size: 12.5px; }
.order-card__badges { display: flex; gap: 8px; }
.admin-stats { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.admin-stats .stat { background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--radius-md); box-shadow: var(--shadow-1); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: 2px; min-width: 140px; }
.admin-stats .stat b { font-family: var(--font-display); font-size: 26px; color: var(--c-orange-600); }
.admin-stats .stat span { color: var(--text-3); font-weight: 600; font-size: 12.5px; }
.status-pill, .pay-pill { padding: 6px 14px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; }
.status-pill { background: var(--surface-3); color: var(--text-2); }
.status-pill--new, .status-pill--preparing { background: var(--c-warn-bg); color: var(--c-warn); }
.status-pill--packing, .status-pill--shipped, .status-pill--out { background: #e5edff; color: #2f5ad1; }
:root[data-theme="dark"] .status-pill--packing, :root[data-theme="dark"] .status-pill--shipped, :root[data-theme="dark"] .status-pill--out { background: #1c2b4d; color: #8fb0ff; }
.status-pill--ready { background: var(--c-success-bg); color: var(--c-success); }
.status-pill--done { background: var(--c-success-bg); color: var(--c-success); }
.status-pill--cancel, .status-pill--returning, .status-pill--returned { background: var(--c-error-bg); color: var(--c-error); }
.pay-pill { background: var(--c-black); color: #fff; }
.order-note { padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: var(--space-4); font-size: 13.5px; display: flex; gap: 6px; flex-direction: column; }
.order-note--warn { background: var(--c-error-bg); color: var(--c-error); }
.order-note--pickup { background: var(--c-orange-50); color: var(--c-orange-700); }
.order-timeline { display: flex; overflow-x: auto; gap: 4px; margin-bottom: var(--space-4); padding-bottom: 4px; }
.order-timeline__step { flex: 1; min-width: 92px; text-align: center; position: relative; }
.order-timeline__step::before { content: ''; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: var(--border-1); z-index: 0; }
.order-timeline__step:first-child::before { display: none; }
.order-timeline__step.is-done::before { background: var(--c-orange-400); }
.order-timeline__dot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--border-2); color: #fff; font-size: 11px; margin: 0 auto 6px; }
.order-timeline__step.is-done .order-timeline__dot { background: var(--c-orange-500); }
.order-timeline__step.is-current .order-timeline__dot { box-shadow: 0 0 0 4px var(--c-orange-100); }
.order-timeline__step b { display: block; font-size: 10.5px; font-weight: 700; color: var(--text-3); }
.order-timeline__step.is-done b { color: var(--text-1); }
.order-details summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--c-orange-600); padding: 6px 0; }
.order-products { display: flex; flex-direction: column; gap: 8px; margin: var(--space-3) 0; }
.order-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; font-size: 13px; margin-top: var(--space-3); }
.order-info-grid div { background: var(--surface-2); padding: 10px 12px; border-radius: var(--radius-sm); }
.order-info-grid small { display: block; color: var(--text-3); margin-bottom: 2px; }
.order-info-grid__wide { grid-column: 1 / -1; }

/* ---------- Notifications ---------- */
.notification-list { display: flex; flex-direction: column; gap: 10px; }
.notification-item { display: flex; gap: 14px; padding: var(--space-4); align-items: flex-start; }
.notification-item.is-unread { border-color: var(--c-orange-300); background: rgba(255,106,26,.06); }
.notification-item__icon { font-size: 20px; }
.notification-item__body { flex: 1; }
.notification-item__line { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 2px; }
.notification-item__line span { color: var(--c-orange-600); font-size: 11.5px; font-weight: 700; text-transform: uppercase; }
.notification-item__body p { font-size: 13.5px; color: var(--text-2); margin: 0 0 4px; }
.notification-item__body small { color: var(--text-3); font-size: 11.5px; }
.notification-item__actions { display: flex; flex-direction: column; gap: 6px; }

/* ---------- Product detail ---------- */
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-3); padding: var(--space-4) 20px 0; }
.breadcrumb a:hover { color: var(--c-orange-600); }
.breadcrumb b { color: var(--text-1); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
.detail-gallery__main { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.detail-gallery__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 30px; opacity: 0; transition: opacity var(--motion-med); }
.detail-gallery__photo.is-active { opacity: 1; }
.detail-gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--surface-1); color: var(--text-1); box-shadow: var(--shadow-2); border: 0; font-size: 18px; }
.detail-gallery__nav--prev { left: 14px; }
.detail-gallery__nav--next { right: 14px; }
.detail-gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.detail-gallery__thumb { width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--surface-2); }
.detail-gallery__thumb.is-active { border-color: var(--c-orange-500); }
.detail-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.detail-panel__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.detail-panel h1 { font-size: 26px; margin: 12px 0 6px; }
.detail-panel__price { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--c-orange-600); margin: var(--space-3) 0; }
.detail-panel__price-group { display: flex; align-items: baseline; gap: 12px; margin: var(--space-3) 0; flex-wrap: wrap; }
.detail-panel__price-old { font-size: 18px; color: var(--text-3); font-weight: 600; }
.detail-panel__price--sale { margin: 0; }
.detail-specs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 20px; margin: var(--space-4) 0; }
.detail-specs div { display: flex; justify-content: space-between; font-size: 13.5px; border-bottom: 1px dashed var(--border-1); padding-bottom: 6px; }
.detail-specs dt { color: var(--text-3); }
.detail-specs dd { margin: 0; font-weight: 700; color: var(--text-1); }
.detail-panel__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: var(--space-4); }
.detail-add-form { display: flex; gap: 10px; align-items: center; }
.qty-stepper { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 700; color: var(--text-3); }
.qty-stepper input { width: 64px; padding: 12px 8px; border-radius: var(--radius-md); border: 1.5px solid var(--input-border); background: var(--input-bg); color: var(--text-1); text-align: center; }
.detail-panel__note { margin-top: var(--space-4); font-size: 12.5px; }
.detail-tabs { margin-top: var(--space-10); }
.tabs { padding: 0; overflow: hidden; }
.tabs__buttons { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border-1); }
.tabs__buttons button { padding: 16px 22px; background: transparent; border: 0; font-weight: 700; font-size: 13.5px; color: var(--text-3); border-bottom: 2px solid transparent; }
.tabs__buttons button.is-active { color: var(--c-orange-600); border-color: var(--c-orange-500); }
.tabs__content { display: none; padding: var(--space-6); font-size: 14px; color: var(--text-2); line-height: 1.7; }
.tabs__content.is-active { display: block; }

/* ---------- Listing / filters ---------- */
.layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.filter-panel { padding: var(--space-5); position: sticky; top: 100px; }
.filter-panel__head { display: none; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.filter-group { margin-bottom: var(--space-5); }
.filter-group h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 10px; }
.filter-link { display: block; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13.5px; color: var(--text-2); font-weight: 600; }
.filter-link:hover { background: var(--surface-2); }
.filter-link.is-active { background: var(--c-orange-500); color: #fff; }
.listing-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-5); gap: 10px; }
.listing-toolbar--end { justify-content: flex-end; }
.listing-toolbar__filter-btn { display: none; }
.sort-select { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); min-width: 0; }
.sort-select select { min-width: 0; }
.sort-select select { border: 1.5px solid var(--input-border); border-radius: var(--radius-pill); padding: 8px 14px; background: var(--input-bg); color: var(--text-1); }
.pagination { display: flex; justify-content: center; align-items: center; gap: var(--space-4); margin-top: var(--space-8); }
.pagination__btn { padding: 10px 20px; border-radius: var(--radius-pill); background: var(--c-black); color: #fff; font-weight: 700; font-size: 13px; }
.pagination__info { font-size: 13px; color: var(--text-3); font-weight: 600; }

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-6); align-items: start; }
.contact-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.contact-card { display: flex; gap: 12px; align-items: center; padding: var(--space-5); }
.contact-card__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--c-orange-50); color: var(--c-orange-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-card h3 { font-size: 14.5px; margin-bottom: 2px; }
.contact-card p { font-size: 13px; color: var(--text-3); margin: 0; }
.contact-map { padding: var(--space-5); }
.contact-map img { border-radius: var(--radius-md); margin-bottom: var(--space-4); }
.contact-map__info h3 { font-size: 16px; }
.contact-map__info p { font-size: 13.5px; }

/* ==========================================================================
   Admin paneli — profesyonel/okunabilir tasarım sistemi
   Kutu/form alanları belirgin ayrışsın diye admin'de camsı şeffaflık KULLANILMAZ; net
   katı yüzeyler + tutarlı gölge/kenarlık hiyerarşisi tercih edilir. Aynı semantik
   --surface-*/--text-*/--border-* token'larını kullandığı için tema değişince otomatik
   uyum sağlar.
   ========================================================================== */
body.admin-body { background: var(--surface-page); font-family: var(--font-body); color: var(--text-2); }
.admin-login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.admin-login-card { max-width: 420px; padding: var(--space-8); text-align: center; }
.admin-wrap { display: flex; min-height: 100vh; }
/* Sidebar KASITLI OLARAK her zaman siyah marka yüzeyi (--c-black), temadan bağımsız.
   Marka kutusu (.admin-brand) --admin-item-surface dolgusuyla dokunulmadan korunuyor —
   bkz. aşağıda. Menü linkleri/çıkış butonu İSE artık --admin-item-surface'ı KULLANMIYOR;
   onlar için ayrı, çok daha ince bir çizgi + neredeyse şeffaf yüzey tanımı aşağıda. */
.admin-sidebar {
  --admin-item-surface: rgba(255,255,255,.14);
  width: 250px; background: var(--c-black); color: rgba(255,255,255,.78); padding: var(--space-5);
  flex-shrink: 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
/* Mobilde/tablette gizli, hamburger butonuyla açılan bir çekmeceye dönüşür (bkz.
   aşağıdaki @media ≤900px kuralı). Masaüstünde bu buton hiç görünmez. */
.admin-drawer-close { display: none; position: absolute; top: var(--space-4); right: var(--space-4); z-index: 2; color: #fff; }
.admin-brand {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--admin-item-surface); margin-bottom: var(--space-5);
}
.admin-brand span { color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.admin-brand small { font-size: 11px; color: var(--c-orange-400); font-weight: 700; }
.admin-nav { display: flex; flex-direction: column; gap: var(--space-4); }
.admin-nav__group { display: flex; flex-direction: column; gap: 4px; }
.admin-nav__group-title {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.4); padding: 0 12px; margin: 0 0 2px;
}
/* Menü linkleri: tek katman, sabit 1px çizgi (açık temada üst/sol siyah + sağ/alt
   turuncu; koyu temada --duo-neutral beyaza döndüğü için üst/sol beyaz olur — bkz.
   :root[data-theme] token'ları). Dolgu sidebar zeminine YAKIN, neredeyse şeffaf —
   çizginin kendisi görünürlüğü sağlıyor, kutu dolgusu değil. Outline/box-shadow YOK;
   hover/aktif/focus hiçbiri kenarlık genişliğini veya rengini DEĞİŞTİRMEZ. */
.admin-nav__link {
  display: block; padding: 9px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  color: rgba(255,255,255,.82); background: rgba(255,255,255,.035);
  border: 1px solid var(--duo-neutral); border-right-color: var(--c-orange-500); border-bottom-color: var(--c-orange-500);
  transition: background var(--motion-fast), color var(--motion-fast);
}
.admin-nav__link:hover { background: rgba(255,255,255,.07); color: #fff; }
.admin-nav__link:focus-visible { outline: 2px solid var(--c-orange-300); outline-offset: 2px; }
/* Aktif öğe: yoğun dolgu yerine turuncu metin + çok hafif yüzey farkı. Kenarlık
   (siyah/beyaz+turuncu, 1px) diğer tüm öğelerle TUTARLI kalması için değiştirilmez. */
.admin-nav__link.is-active { background: rgba(255,106,26,.1); color: var(--c-orange-300); font-weight: 700; }
.admin-sidebar__logout { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,.08); }
.admin-sidebar__logout button {
  width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 700;
  background: rgba(221,55,48,.1); color: #ff8b85;
  border: 1px solid var(--duo-neutral); border-right-color: var(--c-orange-500); border-bottom-color: var(--c-orange-500);
}
.admin-sidebar__logout button:hover { background: rgba(221,55,48,.18); }
.admin-sidebar__logout button:focus-visible { outline: 2px solid var(--c-orange-300); outline-offset: 2px; }
.admin-main { flex: 1; min-width: 0; }
.admin-content { padding: var(--space-8); max-width: 1400px; }
.admin-main h1 { font-size: 24px; color: var(--text-1); }

/* Admin üst bar: sayfa bağlamı + tema seçici (item 7 için) */
.admin-topbar { position: sticky; top: 0; z-index: 40; background: var(--surface-1); border-bottom: 1px solid var(--border-1); }
.admin-topbar__row { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--space-8); gap: var(--space-3); }
.admin-topbar__title { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--text-1); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-topbar__title span { color: var(--text-3); font-weight: 600; margin-left: 8px; }
/* Mobil hamburger: masaüstünde .hamburger-btn zaten display:none; ≤900px'te (bkz. mevcut
   kural) görünür olur — admin ve müşteri tarafı aynı 3-çizgi ikon/bileşenini paylaşır. */
.admin-topbar .hamburger-btn { flex-shrink: 0; }
.admin-topbar .hamburger-btn span { background: var(--text-1); }
.admin-topbar .theme-toggle { color: var(--text-1); border: 1px solid var(--border-1); }
.admin-topbar .theme-toggle:hover { background: var(--surface-2); }

.admin-hero { background: var(--c-black); color: #fff; border-radius: var(--radius-lg); padding: var(--space-8); margin-bottom: var(--space-6); }
.admin-hero h1 { color: #fff; }
.admin-hero p { color: rgba(255,255,255,.7); }
.dashboard-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--space-4); }
.dashboard-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.dash-metric { background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-1); }
.dash-metric small { color: var(--text-3); font-size: 12px; }
.dash-metric b { display: block; font-size: 24px; font-family: var(--font-display); margin: 4px 0; color: var(--text-1); }
.dash-metric span { font-size: 12px; color: var(--text-3); }
.dash-metric.highlight { background: var(--c-orange-50); border-color: var(--c-orange-100); }
:root[data-theme="dark"] .dash-metric.highlight { background: rgba(255,106,26,.1); border-color: rgba(255,106,26,.25); }
.dashboard-grid-pro { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-5); }
.dash-panel { background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-1); margin-bottom: var(--space-5); min-width: 0; }
.dash-panel.wide { grid-column: 1 / 2; }
.dash-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-1); }
.dash-panel-head h2 { font-size: 15px; }
.dash-panel-head a { color: var(--c-orange-600); font-size: 12.5px; font-weight: 700; }
.dash-order-row, .dash-user-row, .dash-stock-row, .dash-fav-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-1); font-size: 13px; gap: 10px; color: var(--text-2); }
.dash-order-row:last-child, .dash-user-row:last-child, .dash-stock-row:last-child, .dash-fav-row:last-child { border-bottom: 0; }

.table-card { background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--radius-md); box-shadow: var(--shadow-1); padding: var(--space-5); overflow-x: auto; margin-bottom: var(--space-5); }
.table-card table, .admin-wide-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-card thead th, .admin-wide-table thead th { background: var(--surface-2); color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; font-weight: 700; }
.table-card th, .table-card td, .admin-wide-table th, .admin-wide-table td { padding: 12px 10px; border-bottom: 1px solid var(--border-1); text-align: left; vertical-align: middle; color: var(--text-2); }
.table-card tbody tr:hover, .admin-wide-table tbody tr:hover { background: var(--surface-2); }
.table-card tbody tr:last-child td, .admin-wide-table tbody tr:last-child td { border-bottom: 0; }
.admin-price-old { color: var(--text-3); font-size: 12px; }
.admin-price-sale { color: var(--c-orange-600); }

.admin-filter-card { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-5); }
.admin-filter { padding: 8px 14px; border-radius: var(--radius-pill); background: var(--surface-1); border: 1px solid var(--border-1); font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-1); color: var(--text-2); }
.admin-filter.active { background: var(--c-orange-500); color: #fff; border-color: var(--c-orange-500); }
.stock-badge { padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 700; }
.stock-badge.ok { background: var(--c-success-bg); color: var(--c-success); }
.stock-badge.low, .stock-badge.warn { background: var(--c-warn-bg); color: var(--c-warn); }
.stock-badge.empty, .stock-badge.danger { background: var(--c-error-bg); color: var(--c-error); }
.notice.success { background: var(--c-success-bg); color: var(--c-success); padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: var(--space-4); }
.notice.error { background: var(--c-error-bg); color: var(--c-error); padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: var(--space-4); }

/* Aksiyon hiyerarşisi: primary (turuncu) / soft-secondary / light-secondary / danger görsel
   olarak net ayrışır — "tehlikeli" aksiyonlar (sil vb.) her zaman kırmızı. */
.admin-content .btn, .admin-content .btn-dark, .admin-content .btn-soft, .admin-content .btn-light, .admin-content .btn-danger, .admin-content .mini-danger, .admin-content .btn-sm {
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; border-radius: var(--radius-pill);
  padding: 10px 18px; font-size: 12.5px; border: 1px solid transparent; cursor: pointer; transition: filter var(--motion-fast), transform var(--motion-fast);
}
.admin-content .btn:hover, .admin-content .btn-dark:hover, .admin-content .btn-soft:hover, .admin-content .btn-light:hover, .admin-content .btn-danger:hover, .admin-content .mini-danger:hover { filter: brightness(1.08); }
.admin-content .btn { background: var(--c-orange-500); color: #fff; box-shadow: 0 6px 16px rgba(255,106,26,.28); }
.admin-content .btn-dark { background: var(--c-black); color: #fff; }
.admin-content .btn-soft { background: var(--c-orange-50); color: var(--c-orange-700); border-color: var(--c-orange-100); }
:root[data-theme="dark"] .admin-content .btn-soft { background: rgba(255,106,26,.12); border-color: rgba(255,106,26,.3); }
.admin-content .btn-light { background: var(--surface-2); color: var(--text-2); border-color: var(--border-1); }
.admin-content .btn-danger, .admin-content .mini-danger { background: var(--c-error-bg); color: var(--c-error); border-color: rgba(221,55,48,.3); }
.admin-content .btn-danger:hover, .admin-content .mini-danger:hover { background: var(--c-error); color: #fff; }
.admin-content .btn-sm { padding: 7px 13px; font-size: 11.5px; }

/* Dashboard karşılama alanı ("...Hoş Geldiniz") butonları — düz siyah zemin, beyaz
   yazı/ikon; gradient/glow/parlama YOK. Kapsam yalnızca bu karşılama alanıyla sınırlı;
   silme gibi diğer admin aksiyonlarının anlamlı renkleri (.btn-danger vb.) etkilenmez.
   Buton zemini kendi kapsayıcısıyla (.admin-hero, her zaman siyah) aynı renkte olduğu
   için kenarları ince, nötr bir border ile tanımlanır (parlayan gölge yerine). */
.dashboard-hero-actions .btn,
.dashboard-hero-actions .btn-dark,
.dashboard-hero-actions .btn-light {
  background: var(--c-black); color: #fff; box-shadow: none; border: 1px solid rgba(255,255,255,.2);
}
.dashboard-hero-actions .btn:hover,
.dashboard-hero-actions .btn-dark:hover,
.dashboard-hero-actions .btn-light:hover {
  filter: none; background: var(--c-black-soft); border-color: rgba(255,255,255,.35);
}
.dashboard-hero-actions .btn:focus-visible,
.dashboard-hero-actions .btn-dark:focus-visible,
.dashboard-hero-actions .btn-light:focus-visible {
  outline: 2px solid var(--c-orange-300); outline-offset: 2px;
}

.admin-content .form-card { background: var(--surface-1); border: 1px solid var(--border-1); box-shadow: var(--shadow-1); }
.admin-content .field, .admin-content label { font-size: 13px; color: var(--text-2); font-weight: 600; }
.admin-content input:not([type="checkbox"]):not([type="radio"]), .admin-content select, .admin-content textarea {
  border: 1.5px solid var(--input-border); border-radius: var(--radius-sm); padding: 10px 12px; width: 100%;
  background: var(--input-bg); color: var(--text-1); transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.admin-content input:not([type="checkbox"]):not([type="radio"]):focus, .admin-content select:focus, .admin-content textarea:focus { border-color: var(--c-orange-400); box-shadow: 0 0 0 3px var(--c-orange-50); outline: none; }
.admin-content input[type="checkbox"], .admin-content input[type="radio"] { width: auto; flex-shrink: 0; accent-color: var(--c-orange-500); }
.admin-content .badge { padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; }
.admin-content .badge.success { background: var(--c-success-bg); color: var(--c-success); }
.admin-content .badge.danger { background: var(--c-error-bg); color: var(--c-error); }
.admin-order-card { background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--radius-md); box-shadow: var(--shadow-1); padding: var(--space-5); margin-bottom: var(--space-4); }
.admin-order-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-1); }
.admin-order-head-actions { display: flex; gap: 8px; align-items: center; }
.admin-order-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.admin-order-box { background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--space-3); font-size: 12.5px; color: var(--text-2); }
.admin-order-box h3 { font-size: 12px; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.admin-order-box > b, .admin-order-box > small, .admin-order-box > strong { display: block; }
.admin-order-box > b { color: var(--text-1); margin-bottom: 2px; }
.admin-order-box > small + small { margin-top: 2px; }
.admin-order-box .admin-total { font-size: 16px; margin: 4px 0 2px; }
.admin-order-product { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.admin-order-product:last-child { margin-bottom: 0; }
.order-product-thumb { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-1); border: 1px solid var(--border-1); }
.order-product-thumb img { width: 100%; height: 100%; object-fit: contain; }
.admin-order-product > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-order-product b { color: var(--text-1); font-size: 12.5px; }
.mini-link { color: var(--c-orange-600); font-weight: 700; font-size: 11.5px; }
.order-admin-form label { display: block; margin-bottom: 6px; font-size: 11.5px; font-weight: 700; color: var(--text-3); }
.order-admin-form .btn { margin-top: 6px; }
.delivery-badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; margin-top: 4px; }
.delivery-badge.pickup { background: var(--c-orange-50); color: var(--c-orange-700); }
.delivery-badge.cargo { background: #e5edff; color: #2f5ad1; }
:root[data-theme="dark"] .delivery-badge.cargo { background: #1c2b4d; color: #8fb0ff; }
.coupon-admin-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.coupon-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-1); gap: 10px; flex-wrap: wrap; }
.coupon-row > div { display: flex; flex-direction: column; gap: 3px; }
.coupon-row b { color: var(--text-1); }
.coupon-status { padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; }
.coupon-status.on { background: var(--c-success-bg); color: var(--c-success); }
.coupon-status.off { background: var(--surface-3); color: var(--text-3); }
.coupon-scope-box { margin: var(--space-4) 0; padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius-sm); border: 1px solid var(--border-1); }
.coupon-rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-3); max-height: 220px; overflow-y: auto; }
/* İndirimli Ürünler → ürün seçim listesi: .coupon-product-checks burada .coupon-rule-grid
   İÇİNDE DEĞİL, tek başına kullanılıyor; bu yüzden kendi kaydırma/kutu çerçevesini
   burada tanımlıyoruz (paylaşılan .coupon-product-checks sınıfının coupons.php'deki
   iç-içe kullanımını etkilemez). */
#discountProductList { max-height: 300px; overflow-y: auto; border: 1px solid var(--border-1); border-radius: var(--radius-sm); padding: 4px 10px; background: var(--surface-2); }
.check-line, .radio-line, .product-check-line { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 0; color: var(--text-2); }
.product-check-line span { display: flex; flex-direction: column; gap: 2px; }
.product-check-line b { color: var(--text-1); }
.support-passive-card { background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: var(--space-10); text-align: center; box-shadow: var(--shadow-1); }
.support-passive-icon { font-size: 40px; }

/* ---------- Admin: Ana Sayfa Kategori Görselleri ---------- */
.admin-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-5); }
.admin-category-card { background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--radius-md); box-shadow: var(--shadow-1); overflow: hidden; display: flex; flex-direction: column; }
.admin-category-card__preview { position: relative; aspect-ratio: 4 / 5; background: var(--surface-3); overflow: hidden; }
.admin-category-card__preview img { width: 100%; height: 100%; object-fit: cover; }
.admin-category-card__preview .admin-category-card__empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--c-gray-400); font-size: 12.5px; font-weight: 600; padding: var(--space-4);
  background: linear-gradient(155deg, var(--c-gray-900), var(--c-black) 60%, var(--c-orange-700) 150%); color: rgba(255,255,255,.75);
}
.admin-category-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: 10px; }
.admin-category-card__body h3 { font-size: 15px; margin: 0; color: var(--text-1); }
.admin-category-card__body small { color: var(--text-3); font-size: 11.5px; line-height: 1.5; }
.admin-category-card__form { display: flex; flex-direction: column; gap: 8px; }
.admin-category-card__form input[type="file"] { font-size: 12px; }
.admin-category-card__actions { display: flex; gap: 8px; }

/* ---------- Admin: birkaç sayfada (Favoriler/Bildirimler/Bakım/Canlı Destek) kullanılan
   ama önceki tasarım geçişinde stil kazanmamış sınıflar — mobilde bunlar (özellikle
   çerçevesiz <table>) sayfanın tamamını yatay kaydırıyordu; burada mevcut tasarım diliyle
   (kart yüzeyi + .table-card ile aynı yatay-kaydırma kapsayıcısı) hizalanıyor. ---------- */
.admin-page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.admin-page-head h1 { margin-bottom: 4px; }
.admin-page-head p { margin: 0; color: var(--text-3); font-size: 13.5px; }
.admin-kicker { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 6px; }
.compact-admin-hero { padding: var(--space-5) var(--space-6); }

.admin-card {
  background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--radius-md);
  box-shadow: var(--shadow-1); padding: var(--space-5); overflow-x: auto; margin-bottom: var(--space-5);
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.admin-table thead th { background: var(--surface-2); color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; font-weight: 700; }
.admin-table th, .admin-table td { padding: 12px 10px; border-bottom: 1px solid var(--border-1); text-align: left; vertical-align: middle; color: var(--text-2); }
.admin-table tbody tr:hover { background: var(--surface-2); }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-fav-count { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text-2); font-size: 11.5px; font-weight: 700; }

.admin-notification-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
/* .admin-form: notifications.php gibi sayfalarda <label> doğrudan <form> içinde, herhangi
   bir grid/flex sarmalayıcı OLMADAN kullanılıyor — <label> varsayılan display:inline
   olduğundan alanlar yan yana akıp taşıyordu. Blok yapmak tek başına düzeltiyor. */
.admin-form label { display: block; margin-bottom: var(--space-4); font-size: 13px; font-weight: 600; color: var(--text-2); }
.admin-form label:last-of-type { margin-bottom: var(--space-3); }
.admin-notification-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--border-1); flex-wrap: wrap;
}
.admin-notification-row:last-child { border-bottom: 0; }
.admin-notification-row p { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.admin-notification-row > div:first-child { min-width: 0; flex: 1 1 220px; }
.admin-notification-row > div:first-child span { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.notification-row-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }

.maintenance-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.maintenance-check { margin-bottom: 4px; }
.pickup-warning { display: inline-block; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--c-orange-50); color: var(--c-orange-700); font-size: 11.5px; font-weight: 700; margin-bottom: var(--space-3); }
:root[data-theme="dark"] .pickup-warning { background: rgba(255,106,26,.12); }
.support-passive-status { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: var(--space-4); font-size: 13.5px; }
.muted-badge { background: var(--surface-3); color: var(--text-3); }

/* Ürün galerisi önizlemeleri (İlan Ekle/Düzenle): önceden düz akan <label> öğeleriydi
   (grid yoktu) — geniş yüklenen fotoğraflar yan yana taşabiliyordu. Şimdi ekran genişliğine
   göre kendiliğinden kolon sayısını azaltan bir küçük-resim ızgarası. */
.admin-gallery-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin-top: 8px; }
.admin-gallery-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--text-2); cursor: pointer; }
.admin-gallery-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-1); }

.inline-ban-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inline-ban-form input { width: auto; min-width: 0; }
.coupon-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega-panel { width: 480px; }
  .dashboard-grid-pro { grid-template-columns: minmax(0, 1fr); }
  .dash-panel.wide { grid-column: auto; }
  .home-showcase__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
  .admin-notification-layout { grid-template-columns: minmax(0, 1fr); }
  .maintenance-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  .category-quicknav__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .office-layout { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .office-col--media { order: -1; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .account-layout { grid-template-columns: minmax(0, 1fr); }
  .account-summary { position: static; }
  .cart-layout, .checkout-wrap { grid-template-columns: minmax(0, 1fr); }
  .cart-summary, .checkout-summary { position: static; }
  .admin-order-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .coupon-admin-grid { grid-template-columns: minmax(0, 1fr); }
  .site-header__row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .home-showcase__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .home-showcase__banner-col { height: clamp(240px, 46vw, 360px); order: -1; }
  .home-showcase__col { height: 320px; }
}

@media (max-width: 900px) {
  .primary-nav { display: none; }
  .hamburger-btn { display: flex; }
  .site-header__row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 10px; height: auto; padding: 10px 0; }
  .site-header__row > .site-search:not(.site-search--drawer) { grid-column: 1 / -1; order: 3; justify-self: stretch; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .filter-panel { position: fixed; top: 0; left: 0; height: 100%; width: min(320px, 86vw); z-index: 260; transform: translateX(-105%); transition: transform var(--motion-med) var(--ease); border-radius: 0; overflow-y: auto; }
  .filter-panel.is-open { transform: translateX(0); }
  .filter-panel__head { display: flex; }
  .listing-toolbar__filter-btn { display: inline-flex; }
  /* Sidebar artık uzun bir liste halinde sayfanın üzerinde AKMAZ; ekranın kenarında
     sabit yer de kaplamaz — hamburger butonuyla açılan, ekran genişliğini aşmayan,
     kendi içinde dikey kaydırılabilen bir ÇEKMECEYE dönüşür (bkz. admin.js). Marka
     kutusu ve menü linklerinin kendi görünümü (çerçeve, dolgu, renk) HİÇ değişmez —
     sadece dış konumlandırma (fixed + transform) değişiyor. */
  .admin-sidebar {
    position: fixed; top: 0; left: 0; width: min(300px, 86vw); height: 100%; max-height: none;
    z-index: 250; padding-top: var(--space-10);
    transform: translateX(-105%); transition: transform var(--motion-med) var(--ease);
    box-shadow: var(--shadow-3);
  }
  .admin-sidebar.is-open { transform: translateX(0); }
  .admin-drawer-close { display: inline-flex; }
  .admin-topbar__row { padding: 12px var(--space-4); }
}
body.admin-drawer-open { overflow: hidden; }

@media (max-width: 768px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .category-quicknav__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-row { gap: var(--space-3); }
  .stat-card { padding: var(--space-4) var(--space-5); min-width: 140px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .checkout-choice { grid-template-columns: minmax(0, 1fr); }
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-cards { grid-template-columns: minmax(0, 1fr); }
  .detail-panel__actions { flex-direction: column; align-items: stretch; }
  .detail-add-form { flex-direction: column; align-items: stretch; }
  .detail-specs { grid-template-columns: minmax(0, 1fr); }
  .cart-item { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "img info" "img qty" "img line" "img remove"; }
  .cart-item img { grid-area: img; width: 64px; height: 64px; }
  .order-info-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .admin-order-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-content { padding: var(--space-4); }
  .home-showcase__grid { grid-template-columns: minmax(0, 1fr); }
  .home-showcase__col { height: 300px; }
  .home-showcase__banner-col { height: clamp(200px, 52vw, 300px); }
  /* Kupon formundaki 3 kolonlu (Kategoriler/Markalar/Belirli Ürünler) mini-liste dar
     ekranda tek kolona iner; sabit 220px'lik iç kaydırma kutusu kaldırılır — sayfa
     kendi normal akışıyla kayar (üç ayrı minik kaydırma alanı yerine). */
  .coupon-rule-grid { grid-template-columns: minmax(0, 1fr); max-height: none; overflow-y: visible; }
  .admin-category-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ---------- Mobilde "kart" görünümüne dönüşen tablolar ----------
   .responsive-table işaretli kapsayıcılarda (İlanlar/Kullanıcılar/Yasaklanan
   Kullanıcılar/Favoriler listeleri) dar ekranda başlık satırı görsel olarak gizlenir,
   her <tr> kendi kartına dönüşür ve her <td> kendi data-label'ını etiket olarak solda
   gösterir — Düzenle/Sil dahil TÜM sütunlara yatay kaydırmaya gerek kalmadan doğrudan
   erişilir (aksi halde 8-9 sütunlu tablolarda işlem butonlarına ulaşmak için uzun bir
   yatay kaydırma gerekiyordu). */
@media (max-width: 640px) {
  .responsive-table { overflow-x: visible; }
  .responsive-table table,
  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table th,
  .responsive-table td,
  .responsive-table tr { display: block; width: 100%; min-width: 0; }
  .responsive-table thead tr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .responsive-table tbody tr {
    border: 1px solid var(--border-1); border-radius: var(--radius-md); margin-bottom: var(--space-3);
    padding: var(--space-3); background: var(--surface-1);
  }
  .responsive-table tbody tr:hover { background: var(--surface-1); }
  .responsive-table td {
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
    padding: 7px 0; border-bottom: 1px dashed var(--border-1); text-align: right;
    flex-wrap: wrap; min-width: 0; overflow-wrap: break-word;
  }
  .responsive-table td:last-child { border-bottom: 0; }
  .responsive-table td::before {
    content: attr(data-label); font-weight: 700; font-size: 11px; text-transform: uppercase;
    letter-spacing: .03em; color: var(--text-3); text-align: left; flex-shrink: 0;
  }
  .responsive-table td[data-label="Foto"] { justify-content: flex-end; }
  .responsive-table td.actions, .responsive-table td[data-label="İşlem"] { flex-direction: column; align-items: stretch; gap: 8px; }
  .responsive-table td.actions::before, .responsive-table td[data-label="İşlem"]::before { margin-bottom: 2px; }
  .responsive-table td.actions form, .responsive-table td[data-label="İşlem"] form { margin-top: 0 !important; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* 2 kolonlu dar kartta "İncele" + "Sepete Ekle" yan yana sığmayıp kart dışına taşıyordu
     (flex:1 butonların varsayılan min-width:auto'su metnin min-content genişliğinin altına
     inmesini engelliyordu); dar ekranda alt alta dizerek taşmayı kökünden çözer. */
  .product-card__actions { flex-direction: column; }
  /* Altı kategori kartı dar ekranda tek satıra sıkıştırılmaz; dengeli 2 kolon. */
  .category-quicknav__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .site-header__row { gap: 8px; }
  .brand-mark { font-size: 18px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .order-info-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-gallery__thumb { width: 52px; height: 52px; }
  .stats-row { flex-direction: column; align-items: center; }
  .admin-gallery-list { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
}

/* ---------- Dokunmatik hedef boyutu + iOS otomatik yakınlaştırma önleme ----------
   ≤900px'te (dokunmatik olası) küçük ikon butonları ~44px'e yaklaştırılır; form alanı
   yazı boyutu en az 16px yapılır (iOS Safari, <16px input'a odaklanınca sayfayı otomatik
   yakınlaştırır — bu masaüstünde fark edilmez ama mobilde can sıkıcı bir "zıplama"dır). */
@media (max-width: 900px) {
  .icon-btn { width: 44px; height: 44px; }
  .fav-btn { width: 40px; height: 40px; }
  .cart-item__remove { width: 40px; height: 40px; }
  .showcase-slider__nav { width: 38px; height: 38px; }
  .detail-gallery__nav { width: 44px; height: 44px; }
  .hero__nav { width: 44px; height: 44px; }
  .admin-drawer-close { width: 40px; height: 40px; }
  .field input, .field textarea, .field select,
  .site-search input,
  .admin-content input:not([type="checkbox"]):not([type="radio"]), .admin-content select, .admin-content textarea,
  .cart-item__qty input, .qty-stepper input,
  .live-support__form input, .live-support__form textarea,
  #discountProductSearch, .sort-select select {
    font-size: 16px;
  }
}

/* ---------- Hero (mevcut banner slider — index.php'de artık orta kolonda kullanılıyor) ----------
   Hero görselleri hazır tasarlanmış reklam banner'ları (üzerlerinde marka adı, başlık ve
   rozetler zaten basılı). Bu yüzden görsel üzerine ikinci bir başlık BİNDİRİLMEZ ve
   object-fit:cover ile kırpma YAPILMAZ; gerçek en-boy oranı korunarak görsel eksiksiz
   gösterilir (bkz. .home-showcase__banner-col .hero__slide img { object-fit:contain }). */
.hero { position: relative; background: var(--c-black); }
.hero__slider { position: relative; width: 100%; height: 100%; overflow: hidden; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease); }
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: contain; background: var(--c-black); }
.hero__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.35); font-size: 18px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hero__nav:hover { background: rgba(255,255,255,.3); }
.hero__nav--prev { left: 14px; }
.hero__nav--next { right: 14px; }
.hero__dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
.hero__dots button { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); border: 0; padding: 0; }
.hero__dots button.is-active { background: var(--c-orange-500); width: 22px; border-radius: 999px; }