/* ==========================================================================
   MOTOPARÇA - Motosiklet Yedek Parça E-Ticaret Template
   style.css  |  Tüm sayfalar için ortak stil dosyası
   ========================================================================== */

/* ---------- 1. DEĞİŞKENLER / TASARIM TOKENLARI ----------
   VARSAYILAN TEMA: AÇIK.
   Koyu tema, <html data-theme="dark"> ile devreye girer (bkz. bölüm 1b).
   Yeni sayfa eklerken <html> etiketine bir şey yazmana gerek yok. */
:root{
  --bg:            #f4f6f9;
  --bg-2:          #ffffff;
  --panel:         #ffffff;
  --panel-2:       #f7f9fc;
  --line:          #d9dfe8;
  --line-soft:     #e6eaf1;

  --text:          #141922;
  --text-2:        #4a5567;
  --muted:         #77839a;

  --accent:        #fa2023;   /* ana kırmızı — Platin/Yıldız harmanı */
  --accent-dark:   #d1121a;
  --accent-soft:   rgba(250,32,35,.10);
  --yellow:        #e0a000;
  --green:         #16a34a;
  --red:           #dc2626;
  --blue:          #2563eb;

  --radius:        10px;
  --radius-sm:     6px;
  --radius-lg:     16px;

  --shadow:        0 4px 20px rgba(20,30,50,.08);
  --shadow-lg:     0 16px 44px rgba(20,30,50,.14);

  --container:     1280px;
  --header-h:      78px;

  --ff:            'Barlow', 'Segoe UI', Roboto, Arial, sans-serif;
  --ff-head:       'Barlow Condensed', 'Barlow', 'Segoe UI', sans-serif;
  --transition:    .25s cubic-bezier(.4,0,.2,1);

  /* Koyu şerit (üst bar + footer) — açık temada da koyu kalır */
  --deep:          #12161f;
  --deep-text:     #a8b2c1;
  --deep-head:     #ffffff;
  --deep-line:     #232a38;

  /* Yüzey ve gradyanlar — tema değişiminde bunlar da güncellenir */
  --grad-hero:       radial-gradient(1100px 500px at 78% 15%, rgba(250,32,35,.12), transparent 60%),
                     radial-gradient(800px 450px at 10% 90%, rgba(59,130,246,.09), transparent 60%),
                     linear-gradient(180deg,#ffffff,#f0f3f8);
  --grad-thumb:      radial-gradient(circle at 50% 35%,#ffffff,#eaeef5);
  --grad-ico:        linear-gradient(145deg,#ffffff,#eef1f7);
  --grad-post:       linear-gradient(135deg,#eef1f7,#dfe5ee);
  --grad-news:       linear-gradient(120deg,#fff1f1,#ffdedf 60%,#f5f7fa);
  --grad-promo-a:    linear-gradient(115deg,#fff0f0,#ffd9da 55%,#fff6f6);
  --grad-promo-b:    linear-gradient(115deg,#eef5ff,#d6e6fb 55%,#f4f8ff);
  --grad-gallery:    radial-gradient(circle at 50% 35%,#ffffff,#e8edf5);
  --grad-gthumb:     radial-gradient(circle,#ffffff,#eef1f7);
  --grad-cart-thumb: radial-gradient(circle,#ffffff,#eef1f7);
  --grad-pagehead:   linear-gradient(180deg,#ffffff,#f4f6f9);

  --thumb-ico:     #93a0b4;
  --post-ico:      #9aa6b8;
  --gthumb-ico:    #8b97ab;
  --wish-bg:       rgba(255,255,255,.88);
  --badge-stock:   #64748b;
  --dark-btn:      #1a2029;
  --scroll-thumb:  #c4ccd9;
  --option-bg:     #ffffff;

  /* Yıldız Moto'dan: siyah rozet / outline buton dili */
  --ink:           #0e0e0e;
  --ink-text:      #ffffff;
  --ink-line:      #0e0e0e;

  color-scheme: light;
}

/* ---------- 1b. KOYU TEMA (data-theme="dark") ---------- */
:root[data-theme="dark"]{
  --bg:            #0d0f13;
  --bg-2:          #121620;
  --panel:         #161b26;
  --panel-2:       #1c2231;
  --line:          #262e3d;
  --line-soft:     #1f2635;

  --text:          #e9edf4;
  --text-2:        #aab3c2;
  --muted:         #7c8798;

  --accent-soft:   rgba(250,32,35,.16);
  --yellow:        #ffc107;
  --green:         #22c55e;
  --red:           #ef4444;
  --blue:          #3b82f6;

  --shadow:        0 4px 24px rgba(0,0,0,.35);
  --shadow-lg:     0 18px 50px rgba(0,0,0,.5);

  --deep:          #080a0e;
  --deep-text:     #aab3c2;
  --deep-head:     #e9edf4;
  --deep-line:     #1f2635;

  --grad-hero:       radial-gradient(1100px 500px at 78% 15%, rgba(250,32,35,.16), transparent 60%),
                     radial-gradient(800px 450px at 10% 90%, rgba(59,130,246,.10), transparent 60%),
                     linear-gradient(180deg,#101520,#0d0f13);
  --grad-thumb:      radial-gradient(circle at 50% 35%,#212838,#0f131b);
  --grad-ico:        linear-gradient(145deg,#1c2231,#0f131c);
  --grad-post:       linear-gradient(135deg,#1b2231,#0f1219);
  --grad-news:       linear-gradient(120deg,#1c0708,#2a0a0c 60%,#12161f);
  --grad-promo-a:    linear-gradient(115deg,#240709,#3d0c10 55%,#190809);
  --grad-promo-b:    linear-gradient(115deg,#07121f,#0d2340 55%,#0a1220);
  --grad-gallery:    radial-gradient(circle at 50% 35%,#222a3b,#0e1219);
  --grad-gthumb:     radial-gradient(circle,#1d2432,#0f131a);
  --grad-cart-thumb: radial-gradient(circle,#1e2634,#101419);
  --grad-pagehead:   linear-gradient(180deg,#131824,#0d0f13);

  --thumb-ico:     #8d99ad;
  --post-ico:      #4b5568;
  --gthumb-ico:    #77839a;
  --wish-bg:       rgba(13,15,19,.75);
  --badge-stock:   #334155;
  --dark-btn:      #0b0e13;
  --scroll-thumb:  #2c3548;
  --option-bg:     #101520;

  --ink:           #e9edf4;
  --ink-text:      #12161f;
  --ink-line:      #3a4457;

  color-scheme: dark;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--ff);
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; transition:color var(--transition); }
a:hover{ color:var(--accent); }
ul,ol{ list-style:none; }
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; outline:none; border:none; background:none; }
button{ cursor:pointer; }
table{ border-collapse:collapse; width:100%; }
h1,h2,h3,h4,h5{ font-family:var(--ff-head); font-weight:700; line-height:1.15; letter-spacing:.2px; }
::selection{ background:var(--accent); color:#fff; }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg-2); }
::-webkit-scrollbar-thumb{ background:var(--scroll-thumb); border-radius:20px; }
::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

/* ---------- 3. YARDIMCI SINIFLAR ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:20px; }
.flex{ display:flex; }
.ac{ align-items:center; }
.jb{ justify-content:space-between; }
.jc{ justify-content:center; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; } .gap-24{ gap:24px; }
.text-c{ text-align:center; }
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; } .mt-40{ margin-top:40px; }
.hidden{ display:none !important; }
.uppercase{ text-transform:uppercase; }
.accent{ color:var(--accent); }
.muted{ color:var(--muted); }

.icon{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.icon-sm{ width:16px; height:16px; }
.icon-lg{ width:26px; height:26px; }

/* ---------- 4. BUTONLAR ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--radius-sm);
  font-weight:600; font-size:14px; letter-spacing:.3px;
  transition:var(--transition); white-space:nowrap; border:1px solid transparent;
}
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 6px 18px rgba(250,32,35,.25); }
.btn-primary:hover{ background:var(--accent-dark); color:#fff; transform:translateY(-2px); box-shadow:0 10px 24px rgba(250,32,35,.35); }
.btn-outline{ border-color:var(--line); color:var(--text); background:var(--panel); }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); }
.btn-ghost{ color:var(--text-2); padding:10px 14px; }
.btn-ghost:hover{ color:var(--accent); background:var(--accent-soft); }
.btn-dark{ background:var(--dark-btn); color:#fff; border-color:var(--line); }
.btn-dark:hover{ background:#000; color:var(--accent); }
.btn-block{ width:100%; }
.btn-lg{ padding:15px 32px; font-size:15px; }
.btn-sm{ padding:8px 14px; font-size:13px; }

/* ---------- 5. ÜST BAR — KAYAN YAZI (TICKER) ---------- */
.topbar{
  background:var(--deep); border-bottom:1px solid var(--deep-line);
  font-size:13px; color:var(--deep-text); overflow:hidden;
}
/* Tek mesaj, sağdan girip soldan çıkar (klasik kayan yazı).
   Başlangıç: kendi genişliği kadar değil, ekran genişliği kadar sağda (100vw).
   Bitiş: kendi genişliği kadar solda (-100%) — yani tamamen ekran dışında. */
.ticker{
  position:relative; height:40px; overflow:hidden; user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.ticker-track{
  position:absolute; top:0; left:0; height:40px;
  display:flex; align-items:center; white-space:nowrap;
  animation:ticker-run 26s linear infinite; animation-delay:-4s; will-change:transform;
}
.ticker:hover .ticker-track{ animation-play-state:paused; }
@keyframes ticker-run{ from{ transform:translateX(100vw); } to{ transform:translateX(-100%); } }

.ticker-item{ display:inline-flex; align-items:center; gap:8px; padding:0 24px; white-space:nowrap; }
.ticker-item svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; color:var(--accent); flex-shrink:0; }
.ticker-item b{ color:var(--deep-head); font-weight:600; }
.ticker-sep{ width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.55; flex-shrink:0; }
.ticker-item .accent-dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(34,197,94,.18); flex-shrink:0; }

/* Not: Kayan yazı bilinçli olarak sistemin "hareketi azalt" tercihinden muaf
   tutulmuştur — duyuru şeridi hareket etmediğinde işlevini yitiriyor. */

/* Tema değiştirme butonu (header içinde, ikon) */
.theme-toggle{
  width:42px; height:42px; flex-shrink:0; border-radius:var(--radius-sm);
  border:1px solid var(--line); color:var(--text-2);
  display:grid; place-items:center; transition:var(--transition);
}
.theme-toggle:hover{ color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.theme-toggle svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* Varsayılan (açık tema): ay ikonu görünür — tıklayınca koyu temaya geçer */
.theme-toggle .ico-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .ico-moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .ico-sun{ display:block; }

/* ---------- 6. HEADER ---------- */
.header{ background:var(--bg-2); border-bottom:1px solid var(--line-soft); position:sticky; top:0; z-index:900; }
.header-main{ display:flex; align-items:center; gap:28px; height:var(--header-h); }

.logo{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
/* Logo görseli — açık temada olduğu gibi, koyu zeminlerde beyaz zemin rozetiyle */
.logo img{ height:64px; width:auto; display:block; transition:var(--transition); }
:root[data-theme="dark"] .header .logo img{ background:#fff; padding:5px 9px; border-radius:10px; }
.footer .logo img{ height:76px; background:#fff; padding:10px 14px; border-radius:12px; }
.logo-mark{
  width:44px; height:44px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),#ff9040); color:#fff;
  box-shadow:0 6px 16px rgba(250,32,35,.35);
}
.logo-mark svg{ width:26px; height:26px; }
.logo-text{ font-family:var(--ff-head); font-size:26px; font-weight:700; letter-spacing:.5px; line-height:1; }
.logo-text small{ display:block; font-family:var(--ff); font-size:10px; font-weight:500; letter-spacing:2.6px; color:var(--muted); text-transform:uppercase; margin-top:2px; }

/* Arama */
.search{ flex:1; display:flex; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; transition:var(--transition); }
.search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.search select{ padding:0 14px; background:var(--panel-2); color:var(--text-2); font-size:13px; border-right:1px solid var(--line); cursor:pointer; }
.search select option{ background:var(--option-bg); color:var(--text); }
.search input{ flex:1; padding:13px 16px; background:transparent; font-size:14px; }
.search input::placeholder{ color:var(--muted); }
.search button{ padding:0 22px; background:var(--accent); color:#fff; display:grid; place-items:center; transition:var(--transition); }
.search button:hover{ background:var(--accent-dark); }

/* Header aksiyonlar */
.head-actions{ display:flex; align-items:center; gap:6px; }
.head-btn{ position:relative; display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius-sm); color:var(--text-2); transition:var(--transition); }
.head-btn:hover{ background:var(--panel); color:var(--accent); }
.head-btn .txt{ display:flex; flex-direction:column; line-height:1.25; }
.head-btn .txt b{ font-size:13px; color:var(--text); font-weight:600; }
.head-btn .txt span{ font-size:11px; color:var(--muted); }
.badge-count{
  position:absolute; top:2px; left:26px;
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--accent); color:#fff; font-size:11px; font-weight:700;
  display:grid; place-items:center; border:2px solid var(--bg-2);
}

/* ---------- 7. NAVİGASYON ---------- */
.nav{ background:var(--panel); border-bottom:1px solid var(--line-soft); }
.nav .container{ display:flex; align-items:center; gap:8px; }
.nav-all{
  display:flex; align-items:center; gap:10px; padding:14px 20px; margin-right:12px;
  background:var(--accent); color:#fff; font-weight:700; font-size:14px;
  text-transform:uppercase; letter-spacing:.5px; align-self:stretch;
}
.nav-all:hover{ background:var(--accent-dark); color:#fff; }
.nav-list{ display:flex; align-items:center; gap:2px; flex:1; }
.nav-list > li > a{
  display:flex; align-items:center; gap:6px; padding:14px 15px;
  font-size:14px; font-weight:500; color:var(--text-2); position:relative;
}
.nav-list > li > a:hover{ color:var(--accent); }
.nav-list > li > a::after{
  content:''; position:absolute; left:15px; right:15px; bottom:0; height:2px;
  background:var(--accent); transform:scaleX(0); transition:transform var(--transition);
}
.nav-list > li > a:hover::after{ transform:scaleX(1); }
.nav-tag{ font-size:10px; padding:2px 6px; border-radius:4px; background:var(--red); color:#fff; font-weight:700; letter-spacing:.5px; }
.nav-tag.green{ background:var(--green); }
.nav-phone{ display:flex; align-items:center; gap:10px; font-family:var(--ff-head); font-size:20px; font-weight:700; }
.nav-phone svg{ color:var(--accent); }

/* Dropdown */
.has-drop{ position:relative; }
.drop{
  position:absolute; top:100%; left:0; min-width:230px; padding:10px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(10px);
  transition:var(--transition); z-index:50;
}
.has-drop:hover .drop{ opacity:1; visibility:visible; transform:translateY(0); }
.drop a{ display:block; padding:9px 13px; border-radius:var(--radius-sm); font-size:14px; color:var(--text-2); }
.drop a:hover{ background:var(--accent-soft); color:var(--accent); }

/* Mobil menü butonu */
.burger{ display:none; padding:10px; color:var(--text); }

/* ---------- 8. HERO ---------- */
.hero{
  position:relative; padding:64px 0 74px;
  background:var(--grad-hero);
  border-bottom:1px solid var(--line-soft); overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0; opacity:.35; pointer-events:none;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);
  mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);
}
.hero .container{ position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
.hero-badge{
  display:inline-flex; align-items:center; gap:9px; padding:7px 15px; border-radius:100px;
  background:var(--accent-soft); border:1px solid rgba(250,32,35,.32); color:var(--accent);
  font-size:12.5px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; margin-bottom:20px;
}
.hero h1{ font-size:clamp(38px,5vw,62px); text-transform:uppercase; margin-bottom:18px; }
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero p{ color:var(--text-2); font-size:16.5px; max-width:520px; margin-bottom:30px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:40px; flex-wrap:wrap; }
.hero-stats div b{ display:block; font-family:var(--ff-head); font-size:32px; color:var(--accent); line-height:1; }
.hero-stats div span{ font-size:13px; color:var(--muted); }

/* Hero slider — yatay kaydırmalı şerit. ... */
.hero .container > *{ min-width:0; }
[data-hero-slider]{ min-width:0; }
.hero-slides{ overflow:hidden; min-width:0; }
.hero-track{
  display:flex; align-items:flex-start;
  transition:transform .6s cubic-bezier(.4,0,.2,1); will-change:transform;
}
.hero-slide{ flex:0 0 100%; min-width:0; }
/* Görsel-only slayt: banner görseli kutuyu doldurur, link varsa tamamı tıklanabilir */
.hero-figur{
  display:block; position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--radius-lg); border:1px solid var(--line-soft); background:var(--panel-2);
}
.hero-figur picture{ display:block; width:100%; height:100%; }
a.hero-figur:hover .hero-media{ transform:scale(1.02); }
.hero-media{ transition:transform .5s cubic-bezier(.4,0,.2,1); }
.hero-figur-bos{ display:grid; place-items:center; color:var(--muted); }
.hero-figur-bos span{ display:flex; flex-direction:column; align-items:center; gap:10px; font-size:13.5px; }
.hero-figur-bos svg{ width:44px; height:44px; }
@media (max-width:768px){ .hero-figur{ aspect-ratio:4/3; } }
/* Banner "Yazı Konumu" (admin > Bannerlar) — metin/CTA blok hizası */
.hero-slide.pos-orta{ text-align:center; }
.hero-slide.pos-orta p{ margin-left:auto; margin-right:auto; }
.hero-slide.pos-orta .hero-cta{ justify-content:center; }
.hero-slide.pos-sag{ text-align:right; }
.hero-slide.pos-sag p{ margin-left:auto; }
.hero-slide.pos-sag .hero-cta{ justify-content:flex-end; }

.hero-controls{ display:flex; align-items:center; gap:18px; margin:30px 0 34px; flex-wrap:wrap; }
.hero-arrows{ display:flex; gap:8px; }
.hero-arrow{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:var(--panel); color:var(--text-2); display:grid; place-items:center; transition:var(--transition);
}
.hero-arrow:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.hero-dots{ display:flex; align-items:center; gap:8px; }
.hero-dot{ width:9px; height:9px; border-radius:50%; background:var(--line); transition:var(--transition); }
.hero-dot:hover{ background:var(--muted); }
.hero-dot.active{ width:30px; border-radius:5px; background:var(--accent); }
.hero-count{ font-family:var(--ff-head); font-size:15px; letter-spacing:1px; color:var(--muted); }
.hero-count b{ color:var(--text); }

/* Garaj kartı (Aracına göre parça bul) */
.garage-card{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px;
  box-shadow:var(--shadow-lg); position:relative;
}
.garage-head{ display:flex; align-items:center; gap:13px; margin-bottom:8px; }
.garage-head .ico{ width:44px; height:44px; border-radius:11px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; }
.garage-head h3{ font-size:22px; text-transform:uppercase; }
.garage-card > p{ color:var(--muted); font-size:13.5px; margin-bottom:20px; }
.field{ margin-bottom:13px; }
.field label{ display:block; font-size:12px; font-weight:600; color:var(--text-2); text-transform:uppercase; letter-spacing:.6px; margin-bottom:7px; }
.field select,.field input{
  width:100%; padding:13px 14px; background:var(--bg); border:1px solid var(--line);
  border-radius:var(--radius-sm); font-size:14px; cursor:pointer; transition:var(--transition);
}
.field select:focus,.field input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
/* textarea (açık adres, not, mesaj) — input ile aynı görünüm; önceden stilsizdi, zeminle kaybolup görünmüyordu */
.field textarea{
  display:block; width:100%; min-height:92px; padding:13px 14px; background:var(--bg); color:var(--text);
  border:1px solid var(--line); border-radius:var(--radius-sm); font:inherit; font-size:16px; line-height:1.5;
  resize:vertical; transition:var(--transition);
}
.field textarea::placeholder{ color:var(--muted); }
.field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.field select option{ background:var(--option-bg); color:var(--text); }
/* Uzun filtre listeleri (marka / model / kategori) — kaydırmalı kutu */
.widget-kaydir{ max-height:230px; overflow-y:auto; padding-right:4px; }
.widget-kaydir::-webkit-scrollbar{ width:6px; }
.widget-kaydir::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.garage-saved{ margin-top:16px; padding-top:16px; border-top:1px dashed var(--line); font-size:13px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.garage-saved b{ color:var(--text); }

/* ---------- 9. AVANTAJ ŞERİDİ ---------- */
.features{ background:var(--panel); border-bottom:1px solid var(--line-soft); }
.features-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.feature{ display:flex; align-items:center; gap:15px; padding:26px 22px; border-right:1px solid var(--line-soft); }
.feature:last-child{ border-right:none; }
.feature .ico{ width:46px; height:46px; border-radius:12px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; flex-shrink:0; }
.feature b{ display:block; font-size:14.5px; margin-bottom:2px; }
.feature span{ font-size:12.5px; color:var(--muted); }

/* ---------- 10. BÖLÜM BAŞLIKLARI ---------- */
.section{ padding:64px 0; }
.section-sm{ padding:44px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:32px; flex-wrap:wrap; }
.section-head .sub{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); margin-bottom:9px; }
.section-head .sub::before{ content:''; width:26px; height:2px; background:var(--accent); }
.section-head h2{ font-size:clamp(27px,3.2vw,38px); text-transform:uppercase; }
.section-head p{ color:var(--muted); font-size:14.5px; margin-top:7px; max-width:560px; }
.link-more{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--accent); }
.link-more:hover{ gap:11px; }

/* ---------- 11. KATEGORİ KARTLARI ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.cat-card{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:26px 18px; text-align:center; transition:var(--transition); position:relative; overflow:hidden;
}
.cat-card::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--accent); transform:scaleX(0); transition:transform var(--transition);
}
.cat-card:hover{ transform:translateY(-6px); border-color:var(--line); background:var(--panel-2); box-shadow:var(--shadow); color:var(--text); }
.cat-card:hover::after{ transform:scaleX(1); }
.cat-card .ico{
  width:66px; height:66px; margin:0 auto 15px; border-radius:50%;
  background:var(--grad-ico); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--accent); transition:var(--transition);
}
.cat-card:hover .ico{ background:var(--accent); color:#fff; border-color:var(--accent); transform:rotate(-8deg) scale(1.06); }
.cat-card b{ display:block; font-size:14.5px; font-weight:600; margin-bottom:4px; }
.cat-card span{ font-size:12.5px; color:var(--muted); }

/* ---------- 12. ÜRÜN KARTLARI ---------- */
.tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.tab{
  padding:10px 20px; border-radius:100px; font-size:13.5px; font-weight:600;
  color:var(--text-2); border:1px solid var(--line); background:var(--panel); transition:var(--transition);
}
.tab:hover{ color:var(--accent); border-color:var(--accent); }
.tab.active{ background:var(--accent); border-color:var(--accent); color:#fff; }

.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.product-grid.cols-5{ grid-template-columns:repeat(5,1fr); }
.product-grid.cols-3{ grid-template-columns:repeat(3,1fr); }

.product{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius);
  overflow:hidden; transition:var(--transition); display:flex; flex-direction:column; position:relative;
}
.product:hover{ border-color:var(--line); transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.product-thumb{
  position:relative; aspect-ratio:1/1; display:grid; place-items:center;
  background:var(--grad-thumb);
  border-bottom:1px solid var(--line-soft); overflow:hidden;
}
.product-img{ position:absolute; inset:0; display:block; }
.product-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:var(--transition); }
.product:hover .product-img img{ transform:scale(1.04); }
.product-thumb svg.part{ width:56%; height:56%; color:var(--thumb-ico); transition:var(--transition); }
.product:hover .product-thumb svg.part{ transform:scale(1.09) rotate(4deg); color:var(--accent); }
.badges{ position:absolute; top:11px; left:11px; display:flex; flex-direction:column; gap:6px; z-index:2; }
.badge{ padding:4px 9px; border-radius:4px; font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:#fff; }
.badge.sale{ background:var(--red); }
.badge.new{ background:var(--green); }
.badge.oem{ background:var(--blue); }
.badge.stock{ background:var(--badge-stock); }
/* Checkout stok onay kutusu ("Stokta X adet kaldı, X adet sipariş edelim mi?") */
.stok-onay-kutu{
  margin-bottom:18px; padding:16px 18px; border:1px solid var(--accent); border-left-width:4px;
  border-radius:var(--radius-sm); background:var(--accent-soft); font-size:14px; line-height:1.55; color:var(--text-2);
}
.stok-onay-kutu .baslik{
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
  font-family:var(--ff-head); font-weight:700; font-size:15px; color:var(--accent); text-transform:uppercase; letter-spacing:.5px;
}
.stok-onay-kutu ul{ margin:0 0 10px; padding-left:18px; }
.stok-onay-kutu li{ margin-bottom:4px; }
.stok-onay-kutu b{ color:var(--text); }
.stok-onay-kutu .soru{ margin:0 0 12px; font-weight:600; color:var(--text); }
.stok-onay-kutu .butonlar{ display:flex; flex-wrap:wrap; gap:10px; }

/* Stok tükendi: kart rozeti + pasif buton + solgun görsel */
.badge.tukendi{ background:var(--muted); }
.product.tukendi .product-img img{ filter:grayscale(1); opacity:.62; }
.product.tukendi:hover .product-img img{ transform:none; }
.btn-tukendi{
  background:var(--panel-2); color:var(--muted); border:1px solid var(--line);
  cursor:not-allowed; font-weight:700;
}
.btn-tukendi:hover{ background:var(--panel-2); color:var(--muted); }
.stok-tukendi-kutu{
  margin:14px 0; padding:13px 15px; border:1px solid var(--line-strong); border-left:4px solid var(--muted);
  border-radius:var(--radius-sm); background:var(--panel-2); color:var(--text-2); font-size:13.5px; line-height:1.55;
}
.stok-tukendi-kutu b{ color:var(--text); }

/* Ön sipariş (yurt dışından tedarik) rozeti + kart/detay/sepet bilgi satırı */
.badge.onsiparis{ background:var(--blue); }
.onsiparis-not{
  display:flex; align-items:center; gap:7px; margin-top:6px; padding:7px 10px;
  border:1px dashed var(--blue); border-radius:var(--radius-sm);
  background:rgba(37,99,235,.07); color:var(--text-2); font-size:12.5px; line-height:1.35;
}
.onsiparis-not svg{ color:var(--blue); flex:none; }
.onsiparis-kutu{
  margin:14px 0; padding:13px 15px; border:1px solid var(--blue); border-left-width:4px;
  border-radius:var(--radius-sm); background:rgba(37,99,235,.06); font-size:13.5px; line-height:1.55; color:var(--text-2);
}
.onsiparis-kutu b{ color:var(--text); }
.onsiparis-kutu .baslik{
  display:flex; align-items:center; gap:8px; font-family:var(--ff-head); text-transform:uppercase;
  letter-spacing:.5px; font-size:14px; font-weight:700; color:var(--blue); margin-bottom:5px;
}
.wish{
  position:absolute; top:11px; right:11px; width:36px; height:36px; border-radius:50%;
  background:var(--wish-bg); backdrop-filter:blur(6px); color:var(--text-2);
  display:grid; place-items:center; opacity:0; transform:translateX(8px); transition:var(--transition); z-index:2;
}
.product:hover .wish{ opacity:1; transform:translateX(0); }
.wish:hover{ background:var(--accent); color:#fff; }
.quick-add{
  /* width:auto — .btn-block'un width:100%'ü left/right:12px ile birleşince buton kartın sağına taşıyordu */
  position:absolute; left:12px; right:12px; bottom:12px; width:auto; opacity:0; transform:translateY(12px);
  transition:var(--transition); z-index:2;
}
.product:hover .quick-add{ opacity:1; transform:translateY(0); }

.product-body{ padding:16px; display:flex; flex-direction:column; flex:1; gap:8px; }
.product-brand{ font-size:11.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--accent); }
.product-title{ font-family:var(--ff); font-size:14.5px; font-weight:600; line-height:1.45; min-height:42px; }
.product-title a:hover{ color:var(--accent); }
.product-meta{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.product-meta code{ font-family:'Consolas',monospace; background:var(--bg); padding:2px 6px; border-radius:4px; border:1px solid var(--line-soft); font-size:11.5px; }
.rating{ display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--muted); }
.stars{ display:flex; gap:1px; color:var(--yellow); }
.stars svg{ width:13px; height:13px; fill:currentColor; stroke:none; }
.stock-line{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--green); font-weight:600; }
.stock-line.low{ color:var(--yellow); }
.stock-line .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.price-row{ display:flex; align-items:baseline; gap:9px; margin-top:auto; padding-top:6px; }
.price{ font-family:var(--ff-head); font-size:25px; font-weight:700; color:var(--text); }
.price-old{ font-size:14px; color:var(--muted); text-decoration:line-through; }
.price-off{ font-size:11.5px; font-weight:700; color:var(--green); background:rgba(34,197,94,.12); padding:2px 7px; border-radius:4px; }
.product-foot{ display:flex; gap:8px; margin-top:12px; }
.icon-btn{
  width:42px; height:42px; flex-shrink:0; border-radius:var(--radius-sm);
  border:1px solid var(--line); color:var(--text-2); display:grid; place-items:center; transition:var(--transition);
}
.icon-btn:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

/* ---------- 13. KAMPANYA BANNER ---------- */
.promo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.promo{
  position:relative; padding:42px; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); min-height:230px; display:flex; flex-direction:column; justify-content:center;
}
.promo.a{ background:var(--grad-promo-a); }
.promo.b{ background:var(--grad-promo-b); }
.promo::after{
  content:''; position:absolute; right:-40px; top:50%; transform:translateY(-50%);
  width:230px; height:230px; border-radius:50%; opacity:.16;
  background:radial-gradient(circle,var(--accent),transparent 70%);
}
.promo.b::after{ background:radial-gradient(circle,var(--blue),transparent 70%); }
.promo small{ font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--accent); }
.promo.b small{ color:#60a5fa; }
.promo h3{ font-size:32px; text-transform:uppercase; margin:10px 0 8px; max-width:330px; }
.promo p{ color:var(--text-2); font-size:14px; margin-bottom:22px; max-width:320px; }

/* ---------- 14. MARKA ŞERİDİ ---------- */
.brand-strip{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.brand{
  height:88px; display:grid; place-items:center; border-radius:var(--radius);
  background:var(--panel); border:1px solid var(--line-soft);
  font-family:var(--ff-head); font-size:20px; font-weight:700; letter-spacing:1.5px;
  color:var(--muted); text-transform:uppercase; transition:var(--transition);
}
.brand:hover{ color:var(--accent); border-color:var(--accent); background:var(--panel-2); transform:translateY(-3px); }

/* ---------- 15. BLOG ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.post{ background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; transition:var(--transition); }
.post:hover{ transform:translateY(-5px); border-color:var(--line); box-shadow:var(--shadow); }
.post-thumb{ aspect-ratio:16/9; background:var(--grad-post); display:grid; place-items:center; color:var(--post-ico); position:relative; }
.post-thumb svg{ width:60px; height:60px; }
.post-cat{ position:absolute; left:14px; bottom:14px; padding:5px 11px; border-radius:4px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; }
.post-body{ padding:20px; }
.post-body .date{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:7px; margin-bottom:10px; }
.post-body h4{ font-family:var(--ff); font-size:16px; font-weight:600; line-height:1.45; margin-bottom:10px; }
.post-body p{ font-size:13.5px; color:var(--muted); line-height:1.65; }

/* ---------- 16. BÜLTEN ---------- */
.newsletter{ background:var(--grad-news); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.news-inner{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:52px 0; }
.news-inner h3{ font-size:31px; text-transform:uppercase; margin-bottom:9px; }
.news-inner p{ color:var(--text-2); font-size:14.5px; }
.news-form{ display:flex; gap:10px; }
.news-form input{ flex:1; padding:15px 18px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); font-size:14px; }
.news-form input:focus{ border-color:var(--accent); }
.news-note{ font-size:12px; color:var(--muted); margin-top:11px; }

/* ---------- 17. FOOTER ---------- */
.footer{ background:var(--deep); padding-top:56px; border-top:1px solid var(--deep-line); }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:44px; }
.footer h5{ font-family:var(--ff); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.9px; margin-bottom:18px; color:var(--deep-head); }
.footer p{ font-size:13.5px; color:var(--deep-text); line-height:1.75; }
.footer .logo-text{ color:var(--deep-head); }
.footer .logo-text small{ color:var(--deep-text); }
.footer-links li{ margin-bottom:10px; }
.footer-links a{ font-size:13.5px; color:var(--deep-text); }
.contact-item{ display:flex; gap:11px; margin-bottom:14px; font-size:13.5px; color:var(--deep-text); }
.contact-item svg{ color:var(--accent); flex-shrink:0; margin-top:3px; }
.socials{ display:flex; gap:9px; margin-top:20px; }
.socials a{ width:38px; height:38px; border-radius:var(--radius-sm); border:1px solid var(--deep-line); display:grid; place-items:center; color:var(--deep-text); }
.socials a:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.footer-bottom{ border-top:1px solid var(--deep-line); padding:20px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--deep-text); }
.footer-credit{ margin:0; }
.footer-credit a{ color:var(--deep-text); font-weight:600; }
.footer-credit a:hover{ color:var(--accent); }
.pay-icons{ display:flex; flex-wrap:wrap; gap:8px; }
.pay-icons span{
  padding:6px 12px; border:1px solid var(--line); border-radius:5px;
  font-size:11px; font-weight:700; letter-spacing:.7px; color:var(--text-2); background:var(--panel);
}
.footer .pay-icons span{ border-color:var(--deep-line); color:var(--deep-text); background:rgba(255,255,255,.04); }

/* ---------- 18. BREADCRUMB ---------- */
.crumb{ padding:18px 0; border-bottom:1px solid var(--line-soft); background:var(--bg-2); }
.crumb ol{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); flex-wrap:wrap; }
.crumb a{ color:var(--text-2); }
.crumb li:not(:last-child)::after{ content:'/'; margin-left:9px; color:var(--line); }

/* ---------- 19. KATEGORİ SAYFASI ---------- */
.shop-layout{ display:grid; grid-template-columns:275px 1fr; gap:26px; align-items:start; padding:32px 0 64px; }
.sidebar{ position:sticky; top:calc(var(--header-h) + 16px); display:flex; flex-direction:column; gap:14px; }
.widget{ background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; }
.widget-head{
  padding:14px 18px; border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-between; cursor:pointer;
}
.widget-head h5{ font-family:var(--ff); font-size:13.5px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; }
.widget-head svg{ transition:var(--transition); color:var(--muted); }
.widget.closed .widget-head svg{ transform:rotate(-90deg); }
.widget.closed .widget-body{ display:none; }
.widget-body{ padding:16px 18px; max-height:290px; overflow-y:auto; }
/* Alt kategori navigasyonu (sol menü) */
.widget-subcat .widget-body{ max-height:460px; padding:8px; }
.subcat-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.subcat-list a{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:9px; text-decoration:none; color:var(--text-2); font-size:13.5px; font-weight:600; transition:var(--transition); }
.subcat-list a:hover{ background:var(--accent-soft); color:var(--accent); }
.subcat-list a.active{ background:var(--accent); color:#fff; }
.subcat-list a.subcat-all{ color:var(--muted); font-weight:500; }
.subcat-list a.subcat-all:hover{ color:var(--accent); background:transparent; }
.subcat-thumb{ width:38px; height:38px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line-soft); border-radius:8px; overflow:hidden; }
.subcat-thumb img{ max-width:100%; max-height:100%; object-fit:contain; padding:2px; }
.subcat-thumb svg{ width:18px; height:18px; color:var(--muted); }
.subcat-list a.active .subcat-thumb{ border-color:rgba(255,255,255,.5); }
.subcat-name{ line-height:1.25; }
.check{ display:flex; align-items:center; gap:10px; padding:7px 0; font-size:13.5px; color:var(--text-2); cursor:pointer; transition:var(--transition); }
.check:hover{ color:var(--accent); }
.check input{ appearance:none; -webkit-appearance:none; width:17px; height:17px; border:1px solid var(--line); border-radius:4px; background:var(--bg); position:relative; cursor:pointer; flex-shrink:0; transition:var(--transition); }
.check input:checked{ background:var(--accent); border-color:var(--accent); }
.check input:checked::after{ content:'✓'; position:absolute; inset:0; display:grid; place-items:center; font-size:12px; color:#fff; font-weight:700; }
.check .count{ margin-left:auto; font-size:12px; color:var(--muted); }
.price-inputs{ display:flex; align-items:center; gap:9px; margin-top:6px; }
.price-inputs input{ width:100%; padding:10px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); font-size:13px; text-align:center; }
input[type=range]{ width:100%; accent-color:var(--accent); margin:6px 0 12px; }

.shop-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:14px 18px; margin-bottom:20px;
}
.shop-bar .result{ font-size:13.5px; color:var(--muted); }
.shop-bar .result b{ color:var(--text); }
.shop-bar select{ padding:9px 13px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); font-size:13.5px; cursor:pointer; }
.shop-bar select option{ background:var(--option-bg); color:var(--text); }
.view-toggle{ display:flex; gap:5px; }
.view-toggle button{ width:38px; height:38px; border-radius:var(--radius-sm); border:1px solid var(--line); color:var(--muted); display:grid; place-items:center; }
.view-toggle button.active{ background:var(--accent); border-color:var(--accent); color:#fff; }

.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.chip{ display:flex; align-items:center; gap:8px; padding:7px 13px; border-radius:100px; background:var(--panel); border:1px solid var(--line); font-size:12.5px; color:var(--text-2); }
.chip button{ color:var(--muted); display:grid; place-items:center; }
.chip button:hover{ color:var(--red); }

.pagination{ display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:38px; }
.pagination a{
  min-width:42px; height:42px; padding:0 12px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--panel); color:var(--text-2);
  display:grid; place-items:center; font-size:14px; font-weight:600;
}
.pagination a:hover{ border-color:var(--accent); color:var(--accent); }
.pagination a.active{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* Kategori üst başlık */
.page-head{ padding:34px 0; background:var(--grad-pagehead); border-bottom:1px solid var(--line-soft); }
.page-head h1{ font-size:clamp(28px,3.6vw,42px); text-transform:uppercase; }
.page-head p{ color:var(--muted); margin-top:8px; max-width:640px; font-size:14.5px; }

/* ---------- 20. ÜRÜN DETAY ---------- */
.detail{ display:grid; grid-template-columns:1fr 1fr; gap:44px; padding:36px 0 56px; }
.gallery-main{
  aspect-ratio:1/1; border-radius:var(--radius-lg); border:1px solid var(--line-soft);
  background:var(--grad-gallery);
  display:grid; place-items:center; position:relative; overflow:hidden;
}
.gallery-main svg.part{ width:60%; height:60%; color:var(--accent); }
.gallery-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:14px; }
.gthumb{
  aspect-ratio:1/1; border-radius:var(--radius-sm); border:1px solid var(--line-soft);
  background:var(--grad-gthumb); display:grid; place-items:center;
  color:var(--gthumb-ico); cursor:pointer; transition:var(--transition);
}
.gthumb svg{ width:52%; height:52%; }
.gthumb:hover,.gthumb.active{ border-color:var(--accent); color:var(--accent); }

.detail-info h1{ font-family:var(--ff); font-size:27px; font-weight:700; line-height:1.35; margin:10px 0 14px; }
.detail-brandline{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.detail-meta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:14px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); font-size:13px; color:var(--muted); margin-bottom:20px; }
.detail-meta b{ color:var(--text); }

.price-box{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:20px; }
.price-box .big{ font-family:var(--ff-head); font-size:42px; font-weight:700; color:var(--accent); line-height:1; }
.price-box .row{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.price-box .info{ font-size:13px; color:var(--muted); margin-top:10px; display:flex; align-items:center; gap:7px; }
.installment{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); font-size:13px; color:var(--text-2); display:flex; align-items:center; gap:9px; }
.installment b{ color:var(--green); }

.compat{
  background:rgba(34,197,94,.07); border:1px solid rgba(34,197,94,.28);
  border-radius:var(--radius); padding:15px 18px; display:flex; align-items:center; gap:13px; margin-bottom:20px;
}
.compat svg{ color:var(--green); flex-shrink:0; }
.compat b{ display:block; font-size:14px; margin-bottom:2px; }
.compat span{ font-size:12.5px; color:var(--muted); }

.buy-row{ display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.qty{ display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); overflow:hidden; }
.qty button{ width:44px; height:50px; color:var(--text-2); font-size:19px; transition:var(--transition); }
.qty button:hover{ background:var(--accent); color:#fff; }
.qty input{ width:56px; height:50px; text-align:center; background:transparent; font-size:15px; font-weight:600; }
.buy-row .btn{ height:50px; }
.buy-row .btn-primary{ flex:1; min-width:200px; }

.detail-list{ display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.detail-list li{ display:flex; align-items:center; gap:11px; font-size:13.5px; color:var(--text-2); }
.detail-list svg{ color:var(--accent); flex-shrink:0; }

/* Sekmeler */
.tabs-bar{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:26px; overflow-x:auto; }
.tabs-bar button{
  padding:14px 22px; font-size:14px; font-weight:600; color:var(--text-2);
  border-bottom:2px solid transparent; white-space:nowrap; transition:var(--transition);
}
.tabs-bar button:hover{ color:var(--accent); }
.tabs-bar button.active{ color:var(--accent); border-bottom-color:var(--accent); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:fade .3s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.tab-panel p{ color:var(--text-2); margin-bottom:14px; line-height:1.8; font-size:14.5px; }
.tab-panel h4{ font-family:var(--ff); font-size:16px; margin:22px 0 12px; }
.tab-panel ul{ display:flex; flex-direction:column; gap:9px; }
.tab-panel ul li{ display:flex; gap:10px; font-size:14px; color:var(--text-2); }
.tab-panel ul li::before{ content:'▸'; color:var(--accent); }

.spec-table th,.spec-table td{ padding:13px 16px; border:1px solid var(--line-soft); font-size:14px; text-align:left; }
.spec-table th{ background:var(--panel); width:34%; font-weight:600; color:var(--text-2); }
.spec-table td{ color:var(--text); }

/* Yorumlar */
.review{ display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line-soft); }
.avatar{ width:46px; height:46px; border-radius:50%; background:var(--panel-2); border:1px solid var(--line); display:grid; place-items:center; font-weight:700; color:var(--accent); flex-shrink:0; }
.review-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:7px; }
.review-head b{ font-size:14px; }
.review-head .date{ font-size:12px; color:var(--muted); }
.review p{ font-size:14px; color:var(--text-2); margin:0; }

/* ---------- 21. SEPET ---------- */
.cart-layout{ display:grid; grid-template-columns:1fr 370px; gap:26px; align-items:start; padding:32px 0 64px; }
.cart-item{ display:grid; grid-template-columns:96px 1fr auto; gap:18px; padding:20px; border-bottom:1px solid var(--line-soft); align-items:center; }
.cart-item:last-child{ border-bottom:none; }
.cart-thumb{ width:96px; height:96px; border-radius:var(--radius-sm); background:var(--grad-cart-thumb); border:1px solid var(--line-soft); display:grid; place-items:center; color:var(--accent); }
.cart-thumb svg{ width:56%; height:56%; }
.cart-item h4{ font-family:var(--ff); font-size:15px; font-weight:600; margin-bottom:6px; }
.cart-item .sub{ font-size:12.5px; color:var(--muted); margin-bottom:10px; }
.cart-actions{ display:flex; align-items:center; gap:14px; }
.cart-actions .qty button{ height:38px; width:34px; font-size:16px; }
.cart-actions .qty input{ height:38px; width:44px; }
.link-del{ font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.link-del:hover{ color:var(--red); }
.cart-price{ text-align:right; }
.cart-price .p{ font-family:var(--ff-head); font-size:23px; font-weight:700; }
.cart-price .o{ font-size:13px; color:var(--muted); text-decoration:line-through; }

.summary{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; position:sticky; top:calc(var(--header-h) + 16px); }
.summary h3{ font-size:20px; text-transform:uppercase; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--line-soft); }
.sum-row{ display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--text-2); margin-bottom:13px; }
.sum-row b{ color:var(--text); font-weight:600; }
.sum-row.total{ border-top:1px solid var(--line); padding-top:16px; margin-top:16px; font-size:16px; }
.sum-row.total b{ font-family:var(--ff-head); font-size:29px; color:var(--accent); }
.coupon{ display:flex; gap:8px; margin:16px 0; }
.coupon input{ flex:1; padding:12px 14px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); font-size:13.5px; }
.free-ship{ background:var(--bg); border:1px dashed var(--line); border-radius:var(--radius-sm); padding:13px; font-size:12.5px; color:var(--text-2); margin-bottom:16px; }
.bar{ height:6px; background:var(--line-soft); border-radius:3px; overflow:hidden; margin-top:9px; }
.bar span{ display:block; height:100%; width:72%; background:linear-gradient(90deg,var(--accent),var(--yellow)); border-radius:3px; }

.card-box{ background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius); }
.card-box .head{ padding:16px 20px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; justify-content:space-between; }
.card-box .head h3{ font-size:19px; text-transform:uppercase; }

/* Sepet adımları */
.steps{ display:flex; align-items:center; justify-content:center; gap:8px; padding:26px 0; flex-wrap:wrap; }
.step{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--muted); }
.step .n{ width:30px; height:30px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-size:13px; font-weight:700; }
.step.active{ color:var(--text); }
.step.active .n{ background:var(--accent); border-color:var(--accent); color:#fff; }
.step-line{ width:56px; height:1px; background:var(--line); }

/* ---------- 22. TEMA İNCE AYARLARI ---------- */
.header{ box-shadow:0 1px 3px rgba(20,30,50,.05); }
.nav{ background:var(--panel-2); }
.brand{ box-shadow:0 1px 2px rgba(20,30,50,.04); }
.free-ship{ background:var(--panel-2); }
.hero::before{ opacity:.55; }
.badge.stock{ color:#fff; }
.btn-outline:hover{ background:var(--accent-soft); }

:root[data-theme="dark"] .header{ box-shadow:none; }
:root[data-theme="dark"] .nav{ background:var(--panel); }
:root[data-theme="dark"] .brand{ box-shadow:none; }
:root[data-theme="dark"] .free-ship{ background:var(--bg); }
:root[data-theme="dark"] .hero::before{ opacity:.35; }

/* ---------- 23. TAŞMA GÜVENLİĞİ ---------- */
.product-title,.cart-item h4,.post-body h4,.detail-info h1{ overflow-wrap:anywhere; }
.shop-layout > *,.cart-layout > *,.product-grid > *,.model-grid > *,.cat-grid > *{ min-width:0; }
.product-meta code,.contact-item span,.spec-table td{ overflow-wrap:break-word; }
.tabs-bar{ -webkit-overflow-scrolling:touch; }

/* ---------- 25. REFERANS HARMANI (Platin Motosiklet + Yildiz Moto) ---------- */

/* --- Kirmizi promobar (Yildiz) --- */
.topbar{ background:var(--accent); border-bottom-color:var(--accent-dark); color:#fff; }
.topbar .ticker-item{ color:#fff; }
.topbar .ticker-item b{ color:#fff; font-weight:700; }
.topbar .ticker-item svg{ color:#fff; }
.topbar .ticker-item .accent-dot{ background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.3); }
.topbar .ticker-sep{ background:#fff; }

/* --- Garaj/arac filtresi kirpilmasin --- */
.widget-garage .widget-body{ max-height:none; overflow:visible; }

/* --- Siyah arama butonu (Yildiz) --- */
.search button{ background:var(--ink); color:var(--ink-text); }
.search button:hover{ background:var(--accent); color:#fff; }

/* --- Marka seridi (Platin) --- */
.brandbar{ background:var(--panel); border-bottom:1px solid var(--line-soft); }
.brandbar .container{
  display:flex; align-items:center; gap:10px;
  overflow-x:auto; scrollbar-width:none; padding-block:10px;
}
.brandbar .container::-webkit-scrollbar{ display:none; }
.brandbar .bb-label{
  font-family:var(--ff-head); font-weight:700; font-size:13px; letter-spacing:.6px;
  text-transform:uppercase; color:var(--muted); white-space:nowrap; padding-right:6px;
}
.brand-chip{
  display:inline-flex; align-items:center; gap:7px; flex-shrink:0;
  padding:8px 16px; border:1px solid var(--line); border-radius:999px;
  font-family:var(--ff-head); font-weight:700; font-size:14px; letter-spacing:.5px;
  text-transform:uppercase; color:var(--text); background:var(--bg-2);
  transition:var(--transition); white-space:nowrap;
}
.brand-chip:hover,.brand-chip.active{
  background:var(--accent); border-color:var(--accent); color:#fff;
  box-shadow:0 4px 14px rgba(250,32,35,.28);
}
.brand-chip .cnt{ font-family:var(--ff); font-weight:500; font-size:11px; opacity:.62; text-transform:none; letter-spacing:0; }

/* --- Model-yil etiketi (Platin) --- */
.model-tag{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 8px; border-radius:3px;
  background:var(--ink); color:var(--ink-text);
  font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.model-tag svg{ width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2.2; flex-shrink:0; }
.model-tag.fit{ background:var(--green); color:#fff; }

/* --- Model vitrini (Platin) --- */
.model-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.model-card{
  position:relative; overflow:hidden; isolation:isolate;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--grad-thumb); padding:20px 18px 18px;
  display:flex; flex-direction:column; gap:10px; min-height:168px;
  transition:var(--transition);
}
.model-card::after{
  content:""; position:absolute; inset:auto -30px -40px auto;
  width:150px; height:150px; border-radius:50%;
  background:var(--accent-soft); z-index:-1; transition:var(--transition);
}
.model-card:hover{ border-color:var(--accent); transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.model-card:hover::after{ transform:scale(1.45); }
.model-card .mc-brand{
  font-family:var(--ff-head); font-size:12px; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--accent);
}
.model-card h3{ font-family:var(--ff-head); font-size:21px; line-height:1.15; color:var(--text); }
.model-card .mc-years{ font-size:12.5px; color:var(--muted); }
.model-card .mc-foot{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding-top:10px; border-top:1px dashed var(--line);
  font-size:12.5px; color:var(--text-2);
}
.model-card .mc-foot b{ color:var(--text); font-weight:600; }
.model-card .mc-go{ display:inline-flex; align-items:center; gap:5px; color:var(--accent); font-weight:600; }
.model-card .mc-go svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:var(--transition); }
.model-card:hover .mc-go svg{ transform:translateX(4px); }

/* --- Ucretsiz kargo ilerleme cubugu (Yildiz) --- */
.ship-bar{
  border:1px solid var(--ink-line); border-radius:var(--radius);
  background:var(--panel); padding:14px 16px; display:flex; flex-direction:column; gap:9px;
}
.ship-bar .sb-top{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text); }
.ship-bar .sb-top svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; color:var(--accent); flex-shrink:0; }
.ship-bar .sb-top b{ font-weight:700; }
.ship-bar .sb-track{ height:7px; border-radius:99px; background:var(--line-soft); overflow:hidden; }
.ship-bar .sb-fill{ height:100%; border-radius:99px; background:var(--ink); transition:width .5s cubic-bezier(.4,0,.2,1); }
.ship-bar.done .sb-fill{ background:var(--green); }
.ship-bar .sb-note{ font-size:12px; color:var(--muted); }

/* --- Urun kartinda siyah/outline "Sepete Ekle" (Yildiz) --- */
.product .btn-outline{
  background:transparent; border-color:var(--ink-line); color:var(--text);
  font-weight:700; letter-spacing:.4px;
}
.product .btn-outline:hover{ background:var(--ink); border-color:var(--ink); color:var(--ink-text); }

/* --- Siyah indirim rozeti (Yildiz discountBadge) --- */
.badge.sale{ background:var(--ink); color:var(--ink-text); }
.badge.model{ background:var(--ink); color:var(--ink-text); text-transform:none; letter-spacing:.2px; font-weight:600; }

/* --- Urun kartinda uyumluluk satiri --- */
.product-fit{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin:-2px 0 2px; font-size:12px; color:var(--text-2);
}

/* --- Iki hatli iletisim (Yildiz) --- */
.nav-phone.dual{ display:flex; align-items:center; gap:18px; }
.nav-phone .ph{ display:flex; flex-direction:column; line-height:1.25; }
.nav-phone .ph small{ font-size:10.5px; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); }
.nav-phone .ph b{ font-size:13.5px; color:var(--text); font-weight:700; }

/* ---------- 25b. HARMAN — RESPONSIVE ---------- */
@media (max-width:1100px){
  .model-grid{ grid-template-columns:repeat(3,1fr); }
  .nav-phone.dual .ph:first-child{ display:none; }
}
@media (max-width:900px){
  .model-grid{ grid-template-columns:repeat(2,1fr); }
  .nav-phone.dual{ display:none; }
}
@media (max-width:560px){
  .model-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .model-card{ min-height:150px; padding:16px 14px 14px; }
  .model-card h3{ font-size:18px; }
  .brandbar .bb-label{ display:none; }
}
@media (max-width:340px){
  .model-grid{ grid-template-columns:1fr; }
}

/* ---------- 24. RESPONSIVE ---------- */
@media (max-width:1200px){
  .cat-grid{ grid-template-columns:repeat(4,1fr); }
  .brand-strip{ grid-template-columns:repeat(4,1fr); }
  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; }
  .nav-list > li > a{ padding:14px 11px; font-size:13.5px; }
  .nav-phone{ font-size:17px; }
}

@media (max-width:1024px){
  .hero .container{ grid-template-columns:1fr; }
  .product-grid,.product-grid.cols-5{ grid-template-columns:repeat(3,1fr); }
  .features-grid{ grid-template-columns:repeat(2,1fr); }
  .feature:nth-child(2){ border-right:none; }
  .shop-layout{ grid-template-columns:1fr; }
  .sidebar{ position:static; display:grid; grid-template-columns:repeat(2,1fr); }
  .detail{ grid-template-columns:1fr; gap:30px; }
  .cart-layout{ grid-template-columns:1fr; }
  .summary{ position:static; }
  .nav-list{ display:none; }
  /* Mobil/tablette navigasyon şeridi tamamen gizli: menü zaten hamburger
     çekmecesinde ("Tüm Ürünler" ilk sırada) — kırmızı TÜM ÜRÜNLER şeridi tekrardı. */
  .nav{ display:none; }
  .nav-phone{ display:none; }
  .burger{ display:block; }
  .head-btn .txt{ display:none; }
  .head-actions{ gap:2px; }
  .widget-body{ max-height:none; }
}

@media (max-width:768px){
  .container{ padding-inline:16px; }
  .ticker-item{ padding:0 16px; font-size:12.5px; }
  .ticker-track{ animation-duration:10s; }
  .footer .logo img{ height:60px; }
  .header-main{
    display:grid; height:auto; padding:12px 0; column-gap:6px; row-gap:12px;
    grid-template-columns:auto auto 1fr;
    grid-template-areas:"burger logo actions" "search search search";
    align-items:center;
  }
  .header-main > .burger{ grid-area:burger; justify-self:start; padding:8px; margin-left:-6px; }
  .header-main > .logo{ grid-area:logo; justify-self:start; }
  .header-main > .head-actions{ grid-area:actions; justify-self:end; }
  .header-main > .search{ grid-area:search; width:100%; }
  .logo img{ height:50px; }
  .header .theme-toggle{ display:none; }
  .head-btn .badge-count{ left:auto; right:0; top:2px; }
  .search select{ display:none; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .product-grid,.product-grid.cols-5,.product-grid.cols-3{ grid-template-columns:repeat(2,1fr); }
  .promo-grid,.blog-grid,.news-inner{ grid-template-columns:1fr; }
  .brand-strip{ grid-template-columns:repeat(3,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:26px; }
  .section{ padding:44px 0; }
  .hero{ padding:44px 0 54px; }
  .sidebar{ grid-template-columns:1fr; }
  .cart-item{ grid-template-columns:76px 1fr; }
  .cart-thumb{ width:76px; height:76px; }
  .cart-price{ grid-column:2; text-align:left; }
  .hero-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px 14px; }
  .hero-stats div b{ font-size:27px; }
  .hero-controls{ margin:24px 0 28px; }
  .shop-bar > .flex{ flex-wrap:wrap; }
  .detail-info h1{ font-size:23px; }
  .price-box .big{ font-size:34px; }
  .summary{ padding:18px; }
  .steps{ gap:6px; padding:20px 0; font-size:12.5px; }
  .step-line{ width:22px; }
}

@media (max-width:520px){
  .features-grid{ grid-template-columns:1fr; }
  .feature{ border-right:none; border-bottom:1px solid var(--line-soft); }
  .footer-grid{ grid-template-columns:1fr; }
  .brand-strip{ grid-template-columns:repeat(2,1fr); }
  .promo{ padding:28px; }
  .promo h3{ font-size:26px; }
  .logo img{ height:40px; }
  .buy-row{ gap:10px; }
  .buy-row .qty{ width:100%; justify-content:space-between; }
  .buy-row .btn-primary{ min-width:0; width:100%; flex:1 0 100%; }
  .spec-table th,.spec-table td{ display:block; width:100%; border-bottom:none; }
  .spec-table td{ border-bottom:1px solid var(--line-soft); }
  .spec-table th{ background:var(--panel); font-size:12.5px; text-transform:uppercase; letter-spacing:.5px; }
  .news-form{ flex-direction:column; }
  .news-form .btn{ width:100%; }
  .gallery-thumbs{ gap:8px; }
  .cart-actions{ flex-wrap:wrap; gap:10px; }
  .section-head h2{ font-size:25px; }
}

@media (max-width:420px){
  .product-grid,.product-grid.cols-5,.product-grid.cols-3{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .hero-stats{ gap:16px 10px; }
  .head-btn{ padding:9px 7px; }
  .btn-lg{ padding:13px 20px; font-size:14px; }
  .hero-cta .btn{ width:100%; }
}

@media (max-width:340px){
  .product-grid,.product-grid.cols-5,.product-grid.cols-3{ grid-template-columns:1fr; }
  .cat-grid{ grid-template-columns:1fr; }
}

/* ---- 25c. HARMAN — 2 sutunlu mobil izgarada kart sikilastirma ---- */
@media (max-width:480px){
  .product-body{ padding:12px; gap:6px; }
  .product-title{ font-size:13.5px; line-height:1.38; min-height:38px; }
  .product-brand{ font-size:10.5px; letter-spacing:.9px; }
  .price{ font-size:20px; }
  .price-old{ font-size:12.5px; }
  .price-row{ gap:6px; flex-wrap:wrap; }
  .product-foot{ margin-top:10px; gap:6px; }
  .product-foot .btn{ padding:10px 8px; font-size:12.5px; }
  .product-foot .icon-btn{ display:none; }
  .product-fit{ font-size:11px; gap:4px; }
  .product-fit > span:not(.model-tag){ display:none; }
  .model-tag{ font-size:9.5px; padding:3px 6px; }
  .rating{ font-size:11.5px; gap:4px; }
  .rv-word{ display:none; }
  .stock-line{ font-size:11px; }
  .price-row .price-off{ display:none; }
  .model-card{ min-height:0; padding:14px 12px 12px; gap:6px; }
  .model-card h3{ font-size:16.5px; }
  .model-card .mc-brand{ font-size:10.5px; letter-spacing:.9px; }
  .model-card .mc-years{ font-size:11.5px; }
  .model-card .mc-foot{ font-size:11px; flex-direction:column; align-items:flex-start; gap:5px; }
  .model-card::after{ width:100px; height:100px; inset:auto -22px -28px auto; }
  .header-main{ padding:10px 0; gap:10px; }
  .logo img{ height:46px; }
  .search input{ padding-block:11px; font-size:13.5px; }
  .search button{ padding-inline:16px; }
  .head-actions{ gap:2px; }
  .cat-card{ padding:14px 10px; }
  .cat-card b{ font-size:13px; }
  .features-grid{ grid-template-columns:repeat(2,1fr); }
  .feature{
    flex-direction:column; align-items:center; text-align:center;
    gap:8px; padding:18px 12px; border-right:1px solid var(--line-soft);
  }
  .feature:nth-child(2n){ border-right:none; }
  .feature:nth-child(-n+2){ border-bottom:1px solid var(--line-soft); }
  .feature .ico{ width:38px; height:38px; border-radius:10px; }
  .feature .ico svg{ width:20px; height:20px; }
  .feature b{ font-size:13px; margin-bottom:1px; }
  .feature span{ font-size:11.5px; line-height:1.35; }
}

@media (max-width:360px){
  .cart-item{ grid-template-columns:58px 1fr; gap:12px; padding:14px; }
  .cart-thumb{ width:58px; height:58px; }
  .cart-actions{ flex-wrap:wrap; gap:8px; }
  .summary{ padding:16px; }
}

@media (max-width:360px){
  .pagination{ gap:5px; }
  .pagination a{ min-width:36px; height:36px; padding:0 8px; font-size:13px; }
}

/* ---------- 26. MOBIL CEKMECE MENU ---------- */
.drawer-backdrop{
  position:fixed; inset:0; z-index:1000;
  background:rgba(10,14,20,.55); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.drawer-backdrop.open{ opacity:1; visibility:visible; }

.drawer{
  position:fixed; top:0; left:0; z-index:1001;
  width:min(86vw,360px); height:100dvh; max-height:100dvh;
  background:var(--bg-2); border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 40px rgba(0,0,0,.25);
}
.drawer.open{ transform:translateX(0); }

.drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--line-soft); flex-shrink:0;
  background:var(--panel);
}
.drawer-head img{ height:34px; width:auto; }
.drawer-close{
  width:40px; height:40px; flex-shrink:0; border-radius:var(--radius-sm);
  border:1px solid var(--line); color:var(--text); display:grid; place-items:center;
  transition:var(--transition);
}
.drawer-close:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.drawer-close svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }

.drawer-body{ overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1; padding-bottom:20px; }

.drawer-sec{ padding:16px 16px 6px; }
.drawer-sec h4{
  font-family:var(--ff); font-size:11px; font-weight:700; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--muted); margin-bottom:10px;
}

.drawer-nav{ display:flex; flex-direction:column; }
.drawer-nav li{ border-bottom:1px solid var(--line-soft); }
.drawer-nav > li > a,.drawer-nav > li > button{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:14px 16px; font-size:15px; font-weight:600; color:var(--text);
  text-align:left; transition:var(--transition);
}
.drawer-nav > li > a:hover,.drawer-nav > li > button:hover{ color:var(--accent); background:var(--accent-soft); }
.drawer-nav .caret{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; color:var(--muted); flex-shrink:0; transition:transform .22s ease; }
.drawer-nav li.open > button .caret{ transform:rotate(180deg); color:var(--accent); }
.drawer-sub{ display:none; padding:2px 0 10px; background:var(--panel-2); }
.drawer-nav li.open .drawer-sub{ display:block; }
.drawer-sub a{
  display:block; padding:10px 16px 10px 30px; font-size:13.5px; color:var(--text-2);
  transition:var(--transition);
}
.drawer-sub a:hover{ color:var(--accent); }
.drawer-nav .nav-tag{ margin-left:auto; }

/* ── Mobil çekmece görselli kartlar (marka logoları + kategori görselleri) ── */
.drawer-sub-media{ padding:10px 12px 14px; }
.drawer-sub-all{ display:block; font-weight:700; font-size:13px; padding:4px 2px 10px; text-decoration:none; }
.drawer-sub-media .drawer-sub-all::before{ content:none !important; }
.drawer-media-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.drawer-media-card{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 4px; background:#fff; border:1px solid var(--line-soft); border-radius:10px; text-decoration:none !important; }
.drawer-media-card::before{ content:none !important; display:none !important; }
.dmc-thumb{ width:100%; height:52px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:8px; overflow:hidden; }
.dmc-thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.dmc-thumb svg{ width:26px; height:26px; color:#c4c4c4; }
.dmc-thumb--logo{ padding:3px; }
.dmc-thumb--logo b{ font-family:var(--ff-head); font-weight:800; font-size:16px; color:var(--accent); }
.dmc-name{ font-size:11px; font-weight:600; color:#1a1a1a; text-align:center; line-height:1.2; letter-spacing:.2px; }

.drawer-brands{ display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 14px; }
.drawer-brands a{
  padding:7px 13px; border:1px solid var(--line); border-radius:999px;
  font-family:var(--ff-head); font-weight:700; font-size:12.5px; letter-spacing:.5px;
  text-transform:uppercase; color:var(--text); background:var(--panel); transition:var(--transition);
}
.drawer-brands a:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }

.drawer-foot{ padding:14px 16px 18px; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:12px; }
.drawer-phone{ display:flex; align-items:center; gap:10px; color:var(--text); }
.drawer-phone svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.9; color:var(--accent); flex-shrink:0; }
.drawer-phone small{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); }
.drawer-phone b{ font-size:14px; }

.drawer-theme{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--text); font-size:13.5px; font-weight:600; text-align:left;
  transition:var(--transition);
}
.drawer-theme:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.drawer-theme svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; color:var(--accent); flex-shrink:0; }
.drawer-theme .ico-sun{ display:none; }
:root[data-theme="dark"] .drawer-theme .ico-moon{ display:none; }
:root[data-theme="dark"] .drawer-theme .ico-sun{ display:block; }

body.drawer-open{ overflow:hidden; }

@media (min-width:1025px){
  .drawer,.drawer-backdrop{ display:none; }
}

/* ---------- 27. SECIM IZGARASI (moto46 referansi) ---------- */
.title-bar{ display:flex; align-items:center; gap:11px; margin-bottom:18px; }
.title-bar::before{
  content:""; width:5px; height:26px; border-radius:3px;
  background:var(--accent); flex-shrink:0;
}
.title-bar h2{ font-family:var(--ff-head); font-size:26px; line-height:1.1; color:var(--text); }

.pick-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.pick-grid.cols-4{ grid-template-columns:repeat(4,1fr); }

.pick-card{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:12px;
  padding:18px 12px 14px; display:flex; flex-direction:column; align-items:center;
  gap:12px; text-align:center; transition:var(--transition); position:relative;
}
.pick-card:hover{
  border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow);
}
.pick-card.active{
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}

.pick-card .ph{
  width:100%; height:88px; display:grid; place-items:center; flex-shrink:0;
}
.pick-card .ph svg{
  width:92%; height:100%; color:var(--thumb-ico); transition:var(--transition);
}
.pick-card:hover .ph svg,.pick-card.active .ph svg{ color:var(--accent); }

.brand-mark{
  width:62px; height:62px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad-ico); border:1px solid var(--line-soft);
  font-family:var(--ff-head); font-size:22px; font-weight:700; letter-spacing:.5px;
  color:var(--text-2); transition:var(--transition);
}
.pick-card:hover .brand-mark,.pick-card.active .brand-mark{
  border-color:var(--accent); color:var(--accent); background:var(--accent-soft);
}

.pick-card b{
  font-size:13.5px; font-weight:700; color:var(--text); line-height:1.3;
  overflow-wrap:anywhere;
}
.pick-card.active b{ color:var(--accent); }
.pick-card small{ font-size:11.5px; color:var(--muted); margin-top:-6px; }

@media (max-width:1100px){ .pick-grid,.pick-grid.cols-4{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:900px){  .pick-grid,.pick-grid.cols-4{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px){
  .pick-grid,.pick-grid.cols-4{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .title-bar h2{ font-size:21px; }
  .title-bar::before{ height:22px; }
  .pick-card{ padding:14px 10px 12px; gap:10px; }
  .pick-card .ph{ height:74px; }
  .pick-card b{ font-size:12.5px; }
  .brand-mark{ width:54px; height:54px; font-size:19px; }
}

/* ---------- 28. CEKMECE MENU — TAM GENISLIK AKORDEON (moto46 referansi) ---------- */
/* Çekmece menü: TÜM satırlar beyaz zemin + koyu yazı (kullanıcı isteği; önceki kırmızı/beyaz zebra kaldırıldı) */
.drawer-nav{ background:#fff; }
.drawer-nav li{ border-bottom:1px solid var(--line-soft); }
.drawer-nav li:last-child{ border-bottom:none; }
.drawer-nav > li > a,
.drawer-nav > li > button{
  padding:19px 18px;
  font-family:var(--ff-head); font-size:16px; font-weight:700;
  letter-spacing:.9px; text-transform:uppercase; color:var(--text);
}
/* Acik/hover satirlar da BEYAZ kalir — yalniz yazi rengi kirmizi olur */
.drawer-nav > li > a:hover,
.drawer-nav > li > button:hover,
.drawer-nav > li.open > button{
  background:#fff; color:var(--accent);
}
.drawer-nav .caret{ color:var(--muted); width:20px; height:20px; }
.drawer-nav li.open > button .caret{ color:var(--accent); }

.drawer-sub{ background:#fff; padding:4px 0 8px; }
.drawer-sub a{
  padding:11px 18px 11px 32px; font-size:13.5px; font-weight:500;
  color:var(--text-2);
}
.drawer-sub a:hover{ color:var(--accent); background:#fff; }
.drawer-sub a::before{
  content:"—"; margin-right:9px; opacity:.5;
}
.drawer-sub-all{ color:var(--accent); }
.drawer-media-card{ border-color:var(--line-soft); }
.dmc-name{ color:var(--text); }

/* Rozetler: beyaz menüde dolu kırmızı/yeşil blok göze batıyordu → beyaz zemin + renkli ince çerçeve */
.drawer-nav .nav-tag{
  background:#fff; color:var(--accent); border:1px solid currentColor;
  padding:2px 7px; border-radius:6px; font-size:10px; font-weight:800; letter-spacing:.6px;
}
.drawer-nav .nav-tag.green{ background:#fff; color:var(--green); }

.drawer-sec{ padding:16px 16px 10px; }

/* ==========================================================================
   CI KÖPRÜ BİLEŞENLERİ — Template style.css'te olmayan, CI JS/markup'ın
   ihtiyaç duyduğu bileşenler. Template CSS değişkenleri kullanıldı.
   ========================================================================== */

/* ===== TOAST BİLDİRİM ===== */
.mv-toast {
  position: fixed;
  bottom: 88px;
  right: 22px;
  z-index: 9999;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  color: var(--text);
  max-width: 320px;
  animation: mv-toast-in .3s ease;
}
.mv-toast.success { border-left: 3px solid var(--green); }
.mv-toast.error   { border-left: 3px solid var(--red); }
@keyframes mv-toast-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ===== ÇEREZ BANNER ===== */
.cookie-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8000;
  background: var(--deep);
  border-top: 1px solid var(--deep-line);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--deep-text);
}
.cookie-bar a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cookie-bar-btns { display: flex; gap: 8px; flex-shrink: 0; }
.btn-cookie-kabul  { padding: 9px 18px; border-radius: var(--radius-sm); background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-cookie-reddet { padding: 9px 18px; border-radius: var(--radius-sm); background: transparent; border: 1px solid var(--deep-line); color: var(--deep-text); font-size: 13px; cursor: pointer; }
.btn-cookie-kabul:hover  { background: var(--accent-dark); }
.btn-cookie-reddet:hover { border-color: var(--deep-text); color: #fff; }
.cookie-bar.gizli { display: none; }
/* Banner açıkken sayfa altındaki butonlar (checkout "Devam Et", iade "Gönder") üstüne kaydırılabilsin,
   yüzen WhatsApp/toast banner'ın altında kalmasın. --cerez-h magaza.js'te banner yüksekliğinden set edilir. */
#cerezBosluk { height: var(--cerez-h, 0px); }
.wa, .mv-toast { translate: 0 calc(-1 * var(--cerez-h, 0px)); }
@media (max-width: 860px) {
  /* Mobilde alt navigasyonun (60px) üstünde dursun — alt menü tıklanabilir kalsın */
  .cookie-bar { bottom: calc(60px + env(safe-area-inset-bottom, 0)); padding: 12px 14px; gap: 10px; }
}

/* ===== HIZLI BAK (QV) MODAL ===== */
.modal-bg {
  position: fixed;
  inset: 0;
  z-index: 7000;
  background: rgba(10, 14, 20, .6);
  backdrop-filter: blur(4px);
  display: none;
  place-items: center;
  padding: 20px;
}
.modal-bg.on { display: grid; }
.qv-modal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  max-width: 860px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-lg);
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 17px;
  transition: var(--transition);
}
.modal-close:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.qv-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.qv-gallery {
  padding: 20px;
  border-right: 1px solid var(--line-soft);
}
.qv-gallery-main {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: var(--grad-thumb);
}
.qv-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.qv-thumb  { width: 58px; height: 58px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); cursor: pointer; transition: var(--transition); }
.qv-thumb.on { border-color: var(--accent); }
.qv-info  { padding: 24px; }
.pdp-brand { font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); }
.pdp-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.pdp-price .now { font-family: var(--ff-head); font-size: 32px; font-weight: 700; color: var(--accent); }
.pdp-price .old { font-size: 15px; color: var(--muted); text-decoration: line-through; }
.opt { margin-bottom: 14px; }
.opt-head { margin-bottom: 8px; }
.lab { font-size: 13px; font-weight: 600; color: var(--text-2); }
.color-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.color-opt  { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; transition: var(--transition); }
.color-opt.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.size-opts { display: flex; gap: 7px; flex-wrap: wrap; }
.size-opt {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--panel);
  color: var(--text);
  transition: var(--transition);
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.size-opt.on  { background: var(--accent); border-color: var(--accent); color: #fff; }
.size-opt.off { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.qv-detay-link { display: block; margin-top: 12px; font-size: 13px; color: var(--accent); }
@media (max-width: 680px) {
  .qv-body { grid-template-columns: 1fr; }
  .qv-gallery { border-right: none; border-bottom: 1px solid var(--line-soft); }
}

/* ===== MOBİL ALT NAVİGASYON ===== */
@media (max-width: 860px) {
  .alt-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 6000;
    background: var(--deep);
    border-top: 1px solid var(--deep-line);
    height: 60px;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)); }
  .mv-toast { bottom: calc(70px + env(safe-area-inset-bottom, 0)); }
  .wa-float  { bottom: calc(72px + env(safe-area-inset-bottom, 0)) !important; }
}
@media (min-width: 861px) { .alt-nav { display: none; } }

.alt-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--deep-text);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  transition: var(--transition);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 2px;
}
.alt-nav-item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.alt-nav-item:hover,
.alt-nav-item:focus { color: var(--accent); }
.alt-nav-ico-wrap { position: relative; }
.alt-nav-sepet-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* ===== WHATSAPP YÜZEN BUTON ===== */
.wa {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 5900;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .35);
  transition: var(--transition);
}
.wa svg { width: 28px; height: 28px; }
.wa:hover { transform: scale(1.1); color: #fff; background: #1da851; }
@media (max-width: 860px) { .wa { bottom: 70px; } }

/* ===== ESKI CI SELECTOR UYUMU (mevcut view'larda kullanılan sınıflar) ===== */
/* hero-slider: magaza.js #heroSlider ile çalışır */
#heroSlider { position: relative; overflow: hidden; }
/* Eski (#heroSlider) slider kabına özgü: yalnız aktif slayt görünür.
   Anasayfadaki yeni [data-hero-slider] şeridinde TÜM slaytlar yan yana durur (translateX ile kayar),
   bu yüzden kural #heroSlider ile sınırlandı — aksi halde yeni slider tamamen gizleniyordu. */
#heroSlider .hero-slide { display: none; }
#heroSlider .hero-slide.on,
#heroSlider .hero-slide.active { display: block; }
/* Aşağıdaki konumlandırma da yalnız eski #heroSlider kabı içindir; yeni slider'da
   oklar/noktalar .hero-controls satırında normal akışta durur. */
#heroSlider .hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; }
#heroSlider .hero-dots  { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; z-index: 10; }
#heroSlider .hero-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; transition: var(--transition); }
#heroSlider .hero-dots span.on { background: var(--accent); width: 26px; border-radius: 4px; }
/* favori kalp butonu */
.fav { width: 34px; height: 34px; border-radius: 50%; background: var(--wish-bg); display: grid; place-items: center; cursor: pointer; transition: var(--transition); border: none; }
.fav.on svg { fill: var(--accent); stroke: var(--accent); }
/* bülten */
.footer-bulten { padding: 36px 0; border-bottom: 1px solid var(--deep-line); text-align: center; }
.footer-bulten h3 { font-size: 24px; color: var(--deep-head); text-transform: uppercase; margin-bottom: 8px; }
.footer-bulten p { color: var(--deep-text); font-size: 14px; margin-bottom: 18px; }
.footer-bulten-form { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; }
.footer-bulten-form input { flex: 1; padding: 13px 16px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--deep-line); color: var(--text); font-size: 14px; }
.footer-bulten-form input::placeholder { color: var(--muted); }
.footer-bulten-form button { padding: 13px 22px; background: var(--accent); color: #fff; border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; cursor: pointer; transition: var(--transition); border: none; }
.footer-bulten-form button:hover { background: var(--accent-dark); }
/* eski checkout / hesabım grid sınıfları */
.sepet-grid     { display: grid; grid-template-columns: 1fr 370px; gap: 26px; align-items: start; }
.hesabim-grid   { display: grid; grid-template-columns: 240px 1fr; gap: 26px; align-items: start; }
.hesabim-aside  { position: sticky; top: calc(var(--header-h) + 16px); }
@media (max-width: 860px) {
  .sepet-grid, .hesabim-grid { grid-template-columns: 1fr; }
  .hesabim-aside { position: static; }
}
/* Promo/duyuru banner'ı (eski class, artık ticker içinde ama hover'ı için) */
.promo-close { background: transparent; border: none; color: rgba(255,255,255,.7); cursor: pointer; font-size: 16px; padding: 4px 8px; }

/* ============================================================
   EK WIDGET STILLERI — urun detay + anasayfa + breadcrumb
   (foundation sozlesmesinde olmayan, view'larca kullanilan siniflar)
   ============================================================ */
:root { --success: #16a34a; }

/* QV modal .open ile aciliyor (footer JS) — .on ile hizala */
.modal-bg.open { display: grid; }

/* Hero medya + baslik (anasayfa slider) */
.hero-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-title { font-family: var(--ff-head); font-size: clamp(28px,5vw,60px); line-height: 1.03; text-transform: uppercase; font-weight: 800; color: #fff; margin: 0 0 14px; }

/* Marka / SEO metin blogu (anasayfa alti) */
.marka-seo-blok { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 28px 30px; margin: 32px 0; color: var(--text-2); line-height: 1.7; }
.marka-seo-blok h2 { font-family: var(--ff-head); color: var(--text); text-transform: uppercase; margin: 0 0 12px; font-size: clamp(20px,2.6vw,30px); }

/* Breadcrumb aktif oge */
.crumb .cur { color: var(--text); font-weight: 600; }

/* Galeri zoom butonu (PDP) */
.zoom { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; background: var(--wish-bg); border: 1px solid var(--line); color: var(--text); border-radius: var(--radius-sm); padding: 8px 10px; cursor: pointer; font: 600 12px/1 var(--ff); }
.zoom:hover { background: #fff; border-color: var(--accent); color: var(--accent); }
/* Büyüteç ikonu boyutsuzdu (img,svg{max-width:100%} ile 0×0 çiziliyordu) → açık ölçü */
.zoom svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* Ana görselin kendisi de tıklanınca büyür */
.gallery-main #mainImg { cursor: zoom-in; }
/* Mobilde sağ altta yüzen WhatsApp butonuyla çakışıyordu → sola alındı */
@media (max-width: 860px) { .zoom { right: auto; left: 12px; } }

/* Buyuk favori butonu (PDP) */
.btn-fav-lg { width: 48px; height: 48px; }
.btn-fav-lg.ok, .btn-fav-lg.aktif { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* Modal icerik kutusu (beden/olcu modali) */
.modal { position: relative; background: var(--panel); border-radius: var(--radius-lg); max-width: 640px; width: calc(100% - 32px); max-height: 88vh; overflow: auto; padding: 26px; box-shadow: var(--shadow-lg); }
.modal-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; font-size: 15px; line-height: 1; z-index: 2; }
.modal-close:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Lightbox (zoomModal) */
#zoomModal.modal-bg.on { background: rgba(8,10,16,.93); }
#zoomModal img { max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lb-close { position: absolute; top: 18px; right: 20px; z-index: 5; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: var(--radius-sm); padding: 8px 12px; cursor: pointer; font: 600 13px/1 var(--ff); }
.lb-close:hover { background: var(--accent); border-color: var(--accent); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lb-nav:hover { background: var(--accent); border-color: var(--accent); }
.lb-prev { left: 20px; } .lb-next { right: 20px; }
.lb-sayac { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 5; color: #fff; background: rgba(0,0,0,.5); border-radius: 20px; padding: 6px 14px; font: 600 13px/1 var(--ff); }

/* Sepete eklendi modal */
.sepet-modal { position: relative; background: var(--panel); border-radius: var(--radius-lg); max-width: 440px; width: calc(100% - 32px); padding: 24px; box-shadow: var(--shadow-lg); }
.sepet-modal-basi { display: flex; align-items: center; gap: 8px; font-family: var(--ff-head); text-transform: uppercase; font-weight: 700; font-size: 18px; color: var(--text); margin-bottom: 16px; }
.sepet-modal-urun { display: flex; gap: 14px; align-items: center; padding: 14px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.sepet-modal-gorsel { width: 72px; height: 72px; flex: none; border-radius: var(--radius-sm); overflow: hidden; background: var(--grad-thumb); }
.sepet-modal-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.sepet-modal-ad { font-weight: 600; color: var(--text); margin: 0 0 4px; }
.sepet-modal-varyant { font-size: 13px; color: var(--muted); margin: 0 0 4px; }
.sepet-modal-fiyat { font-weight: 700; color: var(--accent); margin: 0; }
.sepet-modal-btn-row { display: flex; gap: 10px; margin-top: 18px; }

/* Ucretsiz kargo cubugu */
.kargo-bar { margin-top: 16px; }
.kargo-bar-mesaj { font-size: 13px; color: var(--text-2); margin-bottom: 8px; }
.kargo-bar-track { height: 8px; border-radius: 20px; background: var(--line-soft); overflow: hidden; }
.kargo-bar-fill { height: 100%; width: 0; border-radius: 20px; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); transition: width .4s ease; }

/* Sosyal paylas */
.share-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.share-lbl { font-weight: 600; color: var(--text-2); font-size: 14px; }
/* İkon + metin pill (eski 40px daire, metin sığmayınca ikonu 0'a küçültüyordu) */
.share-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text-2); font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; transition: var(--transition); }
.share-btn svg { flex-shrink: 0; width: 15px; height: 15px; }
.share-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* WhatsApp'tan sor (PDP) */
.pdp-wa-sor { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 11px 16px; border-radius: var(--radius); background: #25D366; color: #fff; font-weight: 600; text-decoration: none; }
.pdp-wa-sor:hover { background: #1da851; }

/* ==========================================================================
   GÖRSELLI MEGA MENÜ — Motosiklet Modeli + Kategori dropdown kartları
   (Yalnızca masaüstü ≥1025px; mobil drawer mevcut stillerle çalışır)
   ========================================================================== */

/* ── Ortak geniş drop ── */
.drop-mega,
.drop-cards {
  left: 0;
  min-width: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ── Motosiklet Modeli mega panel ── */
.mega-arac .drop-mega {
  width: clamp(560px, 72vw, 900px);
}
.mega-inner {
  padding: 20px 22px 22px;
}
.mega-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.mega-head span {
  font-family: var(--ff-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}
.mega-all-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent) !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.mega-all-link:hover { text-decoration: underline; background: none !important; color: var(--accent-dark) !important; }

/* Marka kartları grid */
.mega-brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.mega-brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: var(--panel);
  color: var(--text) !important;
  text-decoration: none;
  transition: var(--transition);
  text-align: center;
}
.mega-brand-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.mega-brand-logo {
  width: 64px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  padding: 4px;
}
.mega-brand-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
/* Logo yoksa harf avatarı */
.mega-brand-logo--text {
  font-family: var(--ff-head);
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .5px;
  background: var(--accent-soft);
}
.mega-brand-name {
  font-size: 12.5px;
  font-weight: 700;
  color: inherit;
  text-transform: uppercase;
  letter-spacing: .4px;
  line-height: 1.2;
}
.mega-brand-cnt {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 500;
}
/* Koyu temada marka kartı arka planı (logo tile'ı her temada beyaz kalır) */
:root[data-theme="dark"] .mega-brand-card { background: var(--panel-2); }

/* ── Kategori görselli dropdown kartları ── */
.drop-cards {
  min-width: 340px;
  max-width: 540px;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
/* Tek alt kategorili dropdown: liste görünümüne dön */
.drop-cards:has(.drop-card:only-child) {
  grid-template-columns: 1fr;
  min-width: 200px;
}
.drop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 10px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: var(--panel);
  color: var(--text-2) !important;
  text-decoration: none;
  transition: var(--transition);
  text-align: center;
}
.drop-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  transform: translateY(-1px);
}
.drop-card-img {
  width: 100%;
  height: 66px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.drop-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Görsel yoksa ikon placeholder */
.drop-card-img--placeholder {
  background: var(--grad-ico);
}
.drop-card-img--placeholder svg {
  width: 28px;
  height: 28px;
  color: var(--muted);
}
.drop-card-lbl {
  font-size: 12px;
  font-weight: 600;
  color: inherit;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Koyu tema (görsel tile'ı her temada beyaz kalır) */
:root[data-theme="dark"] .drop-card       { background: var(--panel-2); }

/* ── Menü konumlandırma: mega arac en başta ── */
/* Mega panel, nav-list sol kenarına yapışmasın diye parent'a relative zaten var */
.mega-arac { position: relative; }
.mega-arac .drop-mega {
  /* Panel sola taşarsa düzelt */
  left: 0;
  right: auto;
}

/* ── Mobil çekmece: model sayısı rozeti ── */
.drawer-cnt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Masaüstü dışında mega menüyü gizle ── */
@media (max-width: 1024px) {
  .drop-mega,
  .drop-cards { display: none !important; }
  /* (drawer açıkken nav zaten gizli — .nav-list display:none ≤860px) */
}

/* ── Orta ekran (860-1024): nav görünür ama mega panel kapalı ── */
@media (min-width: 861px) and (max-width: 1024px) {
  /* Bu aralıkta nav-list görünüyor; klasik metin drop korunur */
  .drop-mega  { display: none !important; }
  .drop-cards { display: none !important; }
  /* Standart .drop geri gelsin */
  .has-drop:hover .drop:not(.drop-mega):not(.drop-cards) {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
}

@media (min-width: 1025px) {
  /* Mega/kart panel hover ile aç */
  .has-drop:hover .drop-mega,
  .has-drop:hover .drop-cards {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  /* Standard drop (metin linkleri) hâlâ çalışıyor */
  .has-drop:hover .drop:not(.drop-mega):not(.drop-cards) {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
}