/* ==========================================================================
   LIQUID GLASS LAYER  —  İzmir Jant Dünyası
   --------------------------------------------------------------------------
   Amaç : Mevcut temanın YERLEŞİMİNİ, renk kimliğini, tipografisini ve
          ölçülerini DEĞİŞTİRMEDEN; yüzeylere (kart, panel, form, tablo)
          Apple "liquid glass" (buzlu cam) dilini uygulamak.

   ALTIN KURAL — ANİMASYON KORUMASI
   Sitede özenle yazılmış animasyonlar var:
     • header nav a:hover  → "Double Line & Lightning Spark" (background-color,
       filter animasyonu)
     • .nav-anim-spin / roll / pulse / sway / heartbeat / bounce
     • .mnav-search        → goldPulse (box-shadow) + searchGlowSpin
     • WhatsApp / chat balonu nabız efektleri
   CSS'te `!important` bildirimler ANİMASYONLARI geçersiz kılar. Bu yüzden
   animasyonlu öğelerde `box-shadow`, `background-color`, `filter`,
   `transform` ve `transition` özellikleri ASLA ezilmez.

   Bu katmanın dokunduğu özellikler:
     • Yüzeylerde : background-color, backdrop-filter, border-color, box-shadow
     • Buton/nav  : YALNIZCA backdrop-filter
     • Formlarda  : background-color, backdrop-filter, border-color
   Genişlik, yükseklik, margin, padding, display, position ve grid/flex
   düzeni HİÇ değiştirilmez (tek istisna: mobil alt çubuğun yüzen konumu).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) TASARIM TOKENLARI
   -------------------------------------------------------------------------- */
:root {
  /* Bulanıklık / doygunluk */
  --lg-blur: 30px;
  --lg-blur-strong: 46px;
  --lg-blur-soft: 20px;
  --lg-sat: 180%;

  /* Yüzey tint'i — hesap paneli dili: yarı saydam BEYAZ, ferah */
  --lg-tint: 255, 255, 255;
  --lg-surface: rgba(var(--lg-tint), 0.82);
  --lg-surface-soft: rgba(var(--lg-tint), 0.70);
  --lg-surface-strong: rgba(var(--lg-tint), 0.93);

  /* Kenarlık + üst spektral (cam) çizgisi */
  --lg-edge: rgba(255, 255, 255, 0.85);
  --lg-edge-soft: rgba(203, 213, 225, 0.55);
  --lg-spec:
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.03);
  --lg-spec-soft: inset 0 1px 0 rgba(255, 255, 255, 0.85);

  /* Çok yumuşak, geniş gölgeler (hesap paneli dili) */
  --lg-shadow:
    0 4px 16px -2px rgba(15, 23, 42, 0.05),
    0 18px 45px -10px rgba(15, 23, 42, 0.08);
  --lg-shadow-lift:
    0 6px 20px -4px rgba(15, 23, 42, 0.07),
    0 28px 65px -15px rgba(15, 23, 42, 0.13);
  --lg-shadow-soft:
    0 2px 10px -2px rgba(15, 23, 42, 0.05);

  /* Altın vurgu (marka kimliği korunur) */
  --lg-gold: 212, 175, 55;
  --lg-ring: rgba(var(--lg-gold), 0.42);

  /* Hareket */
  --lg-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lg-dur: 0.28s;

  /* Köşe yarıçapları — hesap paneli ölçeği (daha yuvarlak, ferah) */
  --lg-r-sm: 16px;
  --lg-r-md: 22px;
  --lg-r-lg: 28px;
  --lg-r-xl: 34px;
}

/* Koyu tema: tema JS ile body'ye .dark-mode / .dark-theme ekleniyor. */
body.dark-mode,
body.theme-dark,
body[data-theme="dark"],
html.dark body,
html[data-theme="dark"] body {
  --lg-tint: 18, 24, 38;
  --lg-surface: rgba(var(--lg-tint), 0.75);
  --lg-surface-soft: rgba(var(--lg-tint), 0.62);
  --lg-surface-strong: rgba(var(--lg-tint), 0.90);

  --lg-edge: rgba(255, 255, 255, 0.14);
  --lg-edge-soft: rgba(255, 255, 255, 0.09);
  --lg-spec:
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.60);
  --lg-spec-soft: inset 0 1px 0 rgba(255, 255, 255, 0.16);

  --lg-shadow:
    0 4px 18px -2px rgba(0, 0, 0, 0.35),
    0 20px 50px -10px rgba(0, 0, 0, 0.55);
  --lg-shadow-lift:
    0 6px 22px -4px rgba(0, 0, 0, 0.40),
    0 30px 70px -14px rgba(0, 0, 0, 0.70);
  --lg-shadow-soft:
    0 4px 18px -2px rgba(0, 0, 0, 0.35);
}

/* backdrop-filter desteklemeyen tarayıcılarda okunabilirlik için
   yüzeyleri belirgin biçimde opaklaştır. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  :root {
    --lg-surface: rgba(var(--lg-tint), 0.94);
    --lg-surface-soft: rgba(var(--lg-tint), 0.90);
    --lg-surface-strong: rgba(var(--lg-tint), 0.97);
  }
}

/* --------------------------------------------------------------------------
   2) ARKA PLAN
   Sayfa arka planlarına BİLİNÇLİ OLARAK dokunulmaz. Sitede her sayfa kendi
   temasını (açık/koyu) kendi CSS'i ile kuruyor; body arka planını ezmek
   temayı bozardı.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   3) ÜST BAŞLIK (HEADER) — premium, OPAK ve animasyonlu
   --------------------------------------------------------------------------
   Header görünümü temada TAMAMEN değişkenlerle yönetiliyor:
     --header-bg · --header-border · --nav-icon-bg/-border/-color
   Bu değişkenleri geçersiz kılmak, hiçbir kuralı `!important` ile ezmeden
   header'ı yeniden tasarlamamızı sağlar. Böylece:
     • Header artık SAYDAM DEĞİL (opak gradyan + üstten altın ışık)
     • lightning-flash / nav-anim-* animasyonları korunur (dokunulmuyor)
   -------------------------------------------------------------------------- */

/* Koyu tema (varsayılan) */
:root {
  --header-bg:
    radial-gradient(120% 200% at 50% -70%, rgba(212, 175, 55, 0.18), transparent 62%),
    linear-gradient(180deg, rgba(31, 34, 43, 0.92) 0%, rgba(21, 23, 30, 0.90) 55%, rgba(13, 15, 20, 0.93) 100%);
  --header-border: 1px solid rgba(212, 175, 55, 0.24);
  --nav-icon-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
  --nav-icon-border: 1px solid rgba(255, 255, 255, 0.14);
  --nav-icon-color: #ececec;
  /* Menü yazıları daha okunaklı */
  --nav-link: #d8d8d8;
  --nav-drop-link: #e0e0e0;
}

/* Açık tema — neredeyse opak, ama cam dokusu korunur (saydam DEĞİL) */
body.light-theme,
body.light-mode {
  --header-bg:
    radial-gradient(120% 200% at 50% -70%, rgba(212, 175, 55, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(253, 252, 249, 0.90) 55%, rgba(247, 243, 233, 0.93) 100%);
  --header-border: 1px solid rgba(184, 148, 31, 0.26);
  --nav-icon-bg: linear-gradient(180deg, #ffffff 0%, #f7f3e9 100%);
  --nav-icon-border: 1px solid rgba(184, 148, 31, 0.24);
  --nav-icon-color: #303030;
  /* Menü yazıları: #555 → #2b2b2b (kontrast 7:1 → ~13:1) */
  --nav-link: #2b2b2b;
  --nav-drop-link: #2b2b2b;
}

/* Açık temada `body.light-theme header` kuralı doğrudan bir renk atadığı için
   yukarıdaki --header-bg gradyanı uygulanmıyordu; burada bağlıyoruz. */
body.light-theme header,
body.light-mode header,
body.light-theme .site-header,
body.light-mode .site-header {
  background: var(--header-bg) !important;
}

/* Header yazılarının okunaklılığı
   --------------------------------------------------------------------------
   main.v2.css şu iki kuralda DEĞİŞKEN DEĞİL, doğrudan renk atıyor:
     body.light-theme .navMenu a           { color: #555 }
     body.light-theme header .iconBtn      { color: #555; border…; background… }
   Bu yüzden --nav-link / --nav-icon-* değişkenlerini ezmek yetmiyordu.
   Aşağıda bu seçiciler hedeflenip yazılar koyulaştırılır (kontrast ~7:1 → ~13:1).
   Renk dışındaki hiçbir özellik (geçiş, animasyon) ezilmez. */
body.light-theme .navMenu a,
body.light-theme .navMenu .navDropToggle,
body.light-theme .navDropPanel a,
body.light-mode .navMenu a,
body.light-mode .navMenu .navDropToggle,
body.light-mode .navDropPanel a {
  color: #2b2b2b !important;
}

body.light-theme header .iconBtn,
body.light-theme header .hamb,
body.light-mode header .iconBtn,
body.light-mode header .hamb {
  border: var(--nav-icon-border) !important;
  background: var(--nav-icon-bg) !important;
  color: var(--nav-icon-color) !important;
}

header,
.site-header,
.premium-header {
  /* Buzlu cam dokusu. Arka plan neredeyse opak olduğu için arkadaki içerik
     görünmez (saydam değil), ama yüzey gerçek cam gibi davranır. */
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(180%) !important;
  backdrop-filter: blur(var(--lg-blur)) saturate(180%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 14px 40px -22px rgba(0, 0, 0, 0.85) !important;
  /* Kaydırma sırasında bulanıklık yeniden hesaplanırken titremeyi önler:
     header'a kendi GPU katmanı verilir. */
  will-change: backdrop-filter, box-shadow;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Yapışkan menü: üstte sabit kalır. */
  position: sticky !important;
  top: 0 !important;
  /* Hareket: arka plan / kenar / gölge yumuşak geçişli.
     (nav linklerinin animasyonları etkilenmez — onlar alt öğelerde.) */
  transition:
    background-color 0.4s var(--lg-ease),
    border-color 0.4s var(--lg-ease),
    box-shadow 0.3s var(--lg-ease) !important;
}

/* Sayfa kaydırıldığında header'ın gölgesi belirginleşir.
   Sınıfı liquid-glass-boot.php ekler. */
header.ijd-hdr-scrolled,
.site-header.ijd-hdr-scrolled {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 18px 44px -18px rgba(0, 0, 0, 0.90),
    0 2px 10px -4px rgba(0, 0, 0, 0.50) !important;
}

body.light-theme header.ijd-hdr-scrolled,
body.light-mode header.ijd-hdr-scrolled,
body.light-theme .site-header.ijd-hdr-scrolled,
body.light-mode .site-header.ijd-hdr-scrolled {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 16px 40px -20px rgba(15, 23, 42, 0.34),
    0 2px 8px -3px rgba(15, 23, 42, 0.10) !important;
}

body.light-theme header,
body.light-mode header,
body.light-theme .site-header,
body.light-mode .site-header {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 10px 32px -20px rgba(15, 23, 42, 0.30) !important;
}

/* Header'ı altın çizgilerle çerçevele: üstte sabit, altta süzülen ışık. */
header::before,
.site-header::before,
.premium-header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.42) 30%,
    rgba(255, 240, 190, 0.85) 50%,
    rgba(212, 175, 55, 0.42) 70%,
    transparent 100%
  );
}

header::after,
.site-header::after,
.premium-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.25) 22%,
    rgba(255, 240, 190, 0.95) 50%,
    rgba(212, 175, 55, 0.25) 78%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: lgHeaderSheen 7s linear infinite;
}

@keyframes lgHeaderSheen {
  from { background-position: 130% 0; }
  to   { background-position: -130% 0; }
}

@media (prefers-reduced-motion: reduce) {
  header::after,
  .site-header::after,
  .premium-header::after {
    animation: none;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(212, 175, 55, 0.55) 50%,
      transparent 100%
    );
  }
}

/* İkon butonları: değişkenler üzerinden zenginleştirildi (kural ezilmedi).
   Hover gölgesi/geçişi main.v2.css'te olduğu gibi kalır. */

/* Logo amblemi: altın çerçeve + iç ışık */
.brandLogo,
.brand__mark {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.20), rgba(212, 175, 55, 0.05)) !important;
  border-color: rgba(212, 175, 55, 0.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 4px 14px -4px rgba(212, 175, 55, 0.50) !important;
}

body.dark-mode .brandLogo,
body.dark-theme .brandLogo,
body.dark-mode .brand__mark,
body.dark-theme .brand__mark {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 4px 16px -4px rgba(212, 175, 55, 0.45) !important;
}

/* Header içi ikon/bağlantılar: opak header üzerinde artık blur gereksiz. */
header .iconBtn,
header .hamb,
header .headerAccountBtn,
header .headerCartBtn,
header .headerWhatsappBtn,
header .headerLangBtn,
header .headerThemeOption,
header .headerLangItem {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Açılır menüler / dil seçici / tema seçici (animasyonsuz yüzeyler) */
.navDropPanel,
.headerLangDropdown,
.headerThemePicker,
.headerLangPicker,
.navDrop > .navDropPanel {
  background-color: var(--lg-surface-strong) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-sat)) !important;
  backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-sat)) !important;
  border-color: var(--lg-edge) !important;
  box-shadow: var(--lg-spec), var(--lg-shadow-lift) !important;
  border-radius: var(--lg-r-md) !important;
}

/* Yan menü (drawer) — mobil hamburger menüsü
   --------------------------------------------------------------------------
   main.v2.css'te `body.light-theme .drawerPanel` (özgüllük 0,2,1) doğrudan
   opak bir gradyan atadığı için basit `.drawerPanel` kuralı yetmiyordu;
   burada aynı seçiciler hedeflenip cam yüzeye çevrilir.
   -------------------------------------------------------------------------- */
.drawer,
body.light-theme .drawer,
body.light-mode .drawer {
  background-color: rgba(12, 14, 20, 0.38) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
}

.drawerPanel,
body.light-theme .drawerPanel,
body.light-mode .drawerPanel,
.drawerTop,
body.light-theme .drawerTop,
body.light-mode .drawerTop {
  background: var(--lg-surface-strong) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-sat)) !important;
  backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-sat)) !important;
  border-left-color: var(--lg-edge) !important;
  box-shadow: var(--lg-spec), -26px 0 70px -30px rgba(16, 24, 40, 0.45) !important;
}

/* Drawer bağlantıları: cam haplar */
.drawerLinks a,
body.light-theme .drawerLinks a,
body.light-mode .drawerLinks a {
  background-color: var(--lg-surface) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) !important;
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) !important;
  border-color: var(--lg-edge) !important;
  box-shadow: var(--lg-spec-soft), var(--lg-shadow-soft) !important;
  border-radius: var(--lg-r-md) !important;
}

.drawerLinks a:hover,
body.light-theme .drawerLinks a:hover,
body.light-mode .drawerLinks a:hover {
  border-color: var(--lg-ring) !important;
  box-shadow: var(--lg-spec), var(--lg-shadow-lift) !important;
}

/* Drawer içi butonlar (tema / hesap / sepet) da cam olsun */
.drawerActions .btn,
body.light-theme .drawerActions .btn,
body.light-mode .drawerActions .btn,
.drawerThemeBtn {
  background-color: var(--lg-surface) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur-soft)) saturate(160%) !important;
  backdrop-filter: blur(var(--lg-blur-soft)) saturate(160%) !important;
  border-color: var(--lg-edge) !important;
  box-shadow: var(--lg-spec-soft), var(--lg-shadow-soft) !important;
}

/* --------------------------------------------------------------------------
   4) MOBİL ALT GEZİNME ÇUBUĞU  (yüzen cam ada)
   --------------------------------------------------------------------------
   .mnav-search üzerinde `goldPulse` (box-shadow) ve `searchGlowSpin`
   animasyonları çalışıyor — bu öğeye DOKUNULMAZ, aksi halde altın arama
   butonunun nabız efekti söner.

   `mobile-navbar.php` kendi <style> bloğunu sayfa gövdesinde (bizden SONRA)
   bastığı ve `main.v2.css` içinde `nav#mobileNav` (ID seçici → özgüllük 1,0,1)
   ile `!important` kurallar tanımlı olduğu için, burada ID seçiciyle daha da
   yüksek özgüllük kullanılır. Aksi halde konum kuralları uygulanmaz.
   -------------------------------------------------------------------------- */
html body nav#mobileNav,
html body nav.mnav {
  /* Telefonun alt kenarına YAPIŞIK: yanlarda ve altta boşluk bırakmaz.
     (Önceden `bottom: max(8px, safe-area)` idi; Android'de ekranın altında
     boşluk kalıyordu.) Çentik/gesture çubuğu payı içeride korunur. */
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border-radius: 20px 20px 0 0 !important;
  padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
  /* Koyu buzlu cam: menü yazıları (açık renk) okunur kalır. */
  background-color: rgba(14, 15, 20, 0.86) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(185%) !important;
  backdrop-filter: blur(var(--lg-blur-strong)) saturate(185%) !important;
  border-top-color: rgba(212, 175, 55, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 -8px 30px -12px rgba(16, 24, 40, 0.45) !important;
}

/* Alt çubuk artık ekranın en altına yapıştığı için sayfa içeriğine
   bırakılacak pay da ona göre hesaplanır (çubuk + güvenli alan). */
body {
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
}

html body .mnav-item {
  border-radius: 16px !important;
}

/* Yüzen çubuk yükseldiği için içerik altında kalmasın. */
@media (max-width: 979px) {
  html body {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

.mobile-glass-dock {
  background-color: var(--lg-surface) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-sat)) !important;
  backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-sat)) !important;
  border-color: var(--lg-edge) !important;
  box-shadow: var(--lg-spec), 0 16px 40px -12px rgba(16, 24, 40, 0.28) !important;
}

/* --------------------------------------------------------------------------
   5) KARTLAR / PANELLER / KUTULAR  (ana cam yüzeyler)
   Bu yüzeylerde sürekli animasyon yok; cam efekti güvenle uygulanır.
   -------------------------------------------------------------------------- */
.card,
.luxCard,
.servCard,
.toolCard,
.prodItem,
.ribbonGrid,
.ribbonWrap,
.chk-item,
.inp-group,
.sb-group,
.order,
.pill,
.tag,
.seoHubWrap,
.heroWheelCard,
.hsMain,
.hsPill,

/* Ürün detay (PDP v7) */
.pdp7-card,
.pdp7-buybox-wrap,
.pdp7-fitment-box,
.pdp7-tech-block,
.pdp7-tech-media-box,
.pdp7-eu-meter-card,
.pdp7-accordion-list,
.pdp7-faq-item,
.pdp7-vcard-item,
.pdp7-verified-vehicles-inner,
.pdp7-story-banner,
.pdp7-specs-clean-grid,
.pdp7-delivery-strip,
.pdp7-trust-strip,

/* Ürün detay (PDP final) */
.pdp-final-card,
.pdp-final-panel,
.pdp-final-buybox,
.pdp-final-fitment-box,
.pdp-final-spec-table,
.pdp-final-trust-wrap,
.pdp-final-toast,
.pdp-final-callout,
.pdp-final-info-grid,
.pdp-final-accordion,

/* Ürün detay (PDP shared / lastik) */
.pdp-shared-alt-card,
.pdp-shared-panel,
.pdp-shared-buybox,
.pdp-shared-install-card,
.pdp-shared-faq-card,
.pdp-shared-tech-card,
.pdp-shared-service-box,
.pdp-shared-trust-strip,
.pdp-shared-eu-strip,
.pdp-shared-payment-grid,

/* Bundle (jant + lastik paketi) */
.bundle-summary-body,
.bundle-tire-card,
.bundle-all-tires-panel,
.bundle-campaign-inner,
.bundle-vehicle-selector,
.bundle-terms-content,
.bundle-summary-footer,

/* CRO bileşenleri */
.cro-store-card,
.cro-trust-bar,
.cro-delivery-box,
.cro-modal-box,
.cro-config-dialog,
.cro-installment-preview,
.cro-brand-showcase-card,
.cro-config-body,

/* Lastik–araç uyumluluk (fitment) */
.ijd-fitment__form,
.ijd-fitment__saved,
.ijd-fitment-modal__dialog,
.fitment-alert-banner,

/* Giriş / kayıt sayfaları */
.authPanel,
.authFormRow,
.authInputShell,
.authMedia,
.authProductFrame,
.authNotice,
.authQuickLink,

/* Görsel arama */
.vsearch-modal,
.vsearch-status-box,
.vsearch-wa-card,
.vsearch-preview-wrap,
.vsearch-item,

/* Hesap paneli */
.card__hd,
.card__bd,
.pTop,
.side,

/* Ürün listeleme (katalog) ve ürün kartları */
.prodLink,
.prodBody,
.prodTop,
.prodActions,
.relCard,
.relBody,
.relWrap,
.relGrid,
.brandCard,
.brandLine,
.popularVisualCard,
.popularVisualMedia,
.altSellerBox,
.altSellerBody,
.altSellerGrid,
.seoBox,
.seoPanel,
.seoHubCard,
.seoHubLinks,
.seoMetric,
.seoLinks,
.pageHero,
.calcSection,
.calcRow,
.form-grid,
.authSpec,
.sum-row,

/* Ürün detay gövdesi */
.panel,
.specGrid,
.specHeader,
.seasonBox,
.imgBox,
.imgZoomWrap,
.mo-box,
.mItem,
.stockQuick,

/* SSS / akordeon kutuları */
#sss details,
details.acc,
.acc-item {
  background-color: var(--lg-surface) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) !important;
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) !important;
  border-color: var(--lg-edge) !important;
  box-shadow: var(--lg-spec), var(--lg-shadow) !important;
  /* Hesap paneli dili: ferah, yuvarlak kart köşeleri */
  border-radius: var(--lg-r-lg) !important;
}

/* İç içe (nested) yüzeyler daha hafif olsun — görsel hiyerarşi korunur */
.card .card,
.card__bd .card,
.pdp7-card .pdp7-card,
.pdp-shared-panel .pdp-shared-install-card,
.bundle-summary-body .bundle-summary-includes,
.cro-modal-box .cro-store-card {
  background-color: var(--lg-surface-soft) !important;
  box-shadow: var(--lg-spec-soft), var(--lg-shadow-soft) !important;
}

/* Öne çıkan / vurgulu yüzeyler biraz daha opak */
.heroWheelCard,
.cro-brand-showcase-card,
.pdp7-buybox-wrap,
.pdp-shared-buybox,
.bundle-summary-sticky,
.authPanel {
  background-color: var(--lg-surface-strong) !important;
  box-shadow: var(--lg-spec), var(--lg-shadow-lift) !important;
}

/* --------------------------------------------------------------------------
   6) BUTONLAR
   --------------------------------------------------------------------------
   YALNIZCA backdrop-filter eklenir. Renk, gölge ve geçiş özellikleri
   EZİLMEZ; böylece marka renkleri ve hover/parlama/nabız animasyonları
   aynen çalışmaya devam eder.
   -------------------------------------------------------------------------- */
.btn,
.miniBtn,
.toolBtn,
.ghost,
.primary,
.filter-chip,
.c-tag,
.h-tag-btn,
.premium-btn-filter,
.premium-filter-btn,
.stockToggleBtn,
.supplierToggleBtn,
.cro-qty-btn,
.cro-btn-cart,
.cro-btn-wa,
.cro-store-btn,
.cro-bank-tab,
.cro-inst-t-btn,
.cro-inst-btn,
.pdp7-btn-main-cta,
.pdp7-btn-wa,
.pdp7-btn-check-fit,
.pdp7-btn-card,
.pdp7-size-chip,
.pdp7-chip,
.pdp-shared-btn-cart,
.pdp-shared-btn-wa,
.pdp-shared-alt-btn,
.pdp-shared-size-pill,
.pdp-shared-tab-btn,
.bundle-tire-select-btn,
.bundle-add-to-cart-btn,
.bundle-compatible-wheels-btn,
.bundle-vehicle-search-btn,
.bundle-season-btn,
.bundle-mobile-sticky-btn,
.vsearch-btn-action,
.vsearch-item-btn,
.vsearch-close,
.ijdChat-optBtn,
.ijdChat-cta,
.tab,
.tabs a,
.drawerThemeBtn,
.drawerLinks a,
.msp-opt,
.btnGold,
.btnWa,
.btnCall,
.btnGoCart,
.altSellerBtn,
.altSellerLive,
.relBtn,
.msp-go,
.etbisBtn,
.c-btn,
.c-action,
.hsTab,
.chip,
.seasonBadge,
.euBadge,
.stockTag {
  -webkit-backdrop-filter: blur(var(--lg-blur-soft)) saturate(160%) !important;
  backdrop-filter: blur(var(--lg-blur-soft)) saturate(160%) !important;
}

/* --------------------------------------------------------------------------
   7) FORM ELEMANLARI
   -------------------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
select,
textarea,
.sb-inp,
.calcInput,
.authField,
.pdp7-select,
.bundle-vf-select,
.vsearch-dropzone {
  background-color: var(--lg-surface-soft) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur-soft)) saturate(150%) !important;
  backdrop-filter: blur(var(--lg-blur-soft)) saturate(150%) !important;
  border-color: var(--lg-edge) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
select:focus,
textarea:focus,
.sb-inp:focus,
.calcInput:focus {
  border-color: var(--lg-ring) !important;
  outline: none !important;
}

/* Seçili filtre çipleri / etiket kutuları */
.chk-item,
.chk-list,
.sb-group,
.inp-group {
  border-color: var(--lg-edge-soft) !important;
}

/* --------------------------------------------------------------------------
   8) TABLOLAR VE LİSTELER
   -------------------------------------------------------------------------- */
table,
.taksit-tablosu-wrapper,
.pdp-shared-spec-table,
.pdp-final-spec-table,
.pdp7-specs-clean-grid,
.cro-inst-table {
  background-color: var(--lg-surface-soft) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) !important;
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) !important;
  border-color: var(--lg-edge-soft) !important;
  border-radius: var(--lg-r-sm) !important;
  overflow: hidden;
}

.taksit-tablosu-wrapper table,
.pdp-shared-spec-table table,
.pdp-final-spec-table table {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   9) FOOTER
   -------------------------------------------------------------------------- */
footer,
.hizmet-footer,
.ijd-footer,
.site-footer {
  -webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-sat)) !important;
  backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-sat)) !important;
}

/* --------------------------------------------------------------------------
   10) MODAL / OVERLAY
   -------------------------------------------------------------------------- */
.cro-modal-backdrop,
.vsearch-overlay,
.msp-overlay,
.ijd-fitment-modal,
.fitment-modal-backdrop,
.modal-backdrop {
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
}

/* --------------------------------------------------------------------------
   11) SOHBET / ROZETLER
   --------------------------------------------------------------------------
   ÖNEMLİ — OKUNABİLİRLİK
   Sohbet penceresinin metinleri AÇIK renktir (#e8e8e8, #9a9a9a, krem) ve
   tasarımı koyu zemin için yapılmıştır. Bazı sayfalarda pencere zemini
   beyaza çevrildiği için yazılar okunamaz hale geliyordu; burada zemin
   yeniden koyu cama sabitlenir. Metin renklerine DOKUNULMAZ.
   -------------------------------------------------------------------------- */
html body .ijdChat-window,
html body .ijdChat-input {
  background: rgba(17, 17, 19, 0.97) !important;
}

html body .ijdChat-header {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.03)) !important;
}

/* --- Sohbet okunabilirliği: koyu zemin üzerinde metni belirginleştir --- */
html body .ijdChat-msg,
html body .ijdChat-msg.bot {
  color: #f4f4f4 !important;
}

/* KRİTİK: Sohbet mesajları `**kalın**` biçiminde <strong> üretiyor. Temadan
   gelen `strong` rengi rgb(34,34,34) — koyu sohbet zemininde bu yazı
   GÖRÜNMEZ oluyordu. Mesaj içi vurgu ve satır içi etiketler burada
   sabitlenir; bağlantılar altın kalır. */
html body .ijdChat-msg strong,
html body .ijdChat-msg b,
html body .ijdChat-msg em,
html body .ijdChat-msg i,
html body .ijdChat-msg small,
html body .ijdChat-msg span {
  color: #f4f4f4 !important;
}

html body .ijdChat-msg a,
html body .ijdChat-msg a * {
  color: #f7efb8 !important;
}

/* Genel güvence: sohbet penceresi içindeki tüm satır içi vurgular, bulunduğu
   metnin rengini miras alır. Temadan gelen koyu `strong` rengi bir daha
   sızamaz. (Ürün kartı, araç kartı, ölçü sonucu vb. tüm mesaj türleri.) */
html body .ijdChat-window strong,
html body .ijdChat-window b,
html body .ijdChat-window em,
html body .ijdChat-window i,
html body .ijdChat-window u,
html body .ijdChat-window mark {
  color: inherit !important;
}

html body .ijdChat-msg.bot {
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

html body .ijdChat-vTitle,
html body .ijdChat-prodTitle {
  color: #f0f0f0 !important;
}

html body .ijdChat-mini-note,
html body .ijdChat-vSpec,
html body .ijdChat-secLbl {
  color: #cfcfcf !important;
}

html body .ijdChat-input input {
  color: #f2f2f2 !important;
}

html body .ijdChat-input input::placeholder {
  color: rgba(255, 255, 255, 0.58) !important;
}

.ijdChat-bubble,
.whatsapp-float,
.whatsapp-floating,
.ai-chat-launcher,
.chat-whatsapp-btn,
.chat-premium-btn,
.ijd-etbis-badge,
.ijd-etbis-badge__action {
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(170%) !important;
  backdrop-filter: blur(var(--lg-blur)) saturate(170%) !important;
}

/* --------------------------------------------------------------------------
   12) İKON / AMBLEM KAPSAYICILARI
   -------------------------------------------------------------------------- */
.brandLogo,
.brand__mark,
.luxIcon,
.servIcon,
.toolIcon,
.pBrand__logo,
.vsearch-icon-box,
.cro-trust-icon-bubble,
.pdp-shared-brand-logo-wrap,
.pdp-shared-tech-img-box,
.cro-brand-glow {
  -webkit-backdrop-filter: blur(var(--lg-blur-soft)) saturate(160%) !important;
  backdrop-filter: blur(var(--lg-blur-soft)) saturate(160%) !important;
}

/* --------------------------------------------------------------------------
   13) MOBİL İYİLEŞTİRMELER
   Küçük ekranda blur maliyetini azaltır.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --lg-blur: 20px;
    --lg-blur-strong: 28px;
    --lg-blur-soft: 14px;
    --lg-sat: 175%;
  }

  /* Mobilde çok katmanlı ağır gölgeleri sadeleştir */
  .card,
  .luxCard,
  .prodItem,
  .servCard,
  .toolCard,
  .pdp7-card,
  .pdp-final-card,
  .pdp-shared-alt-card,
  .bundle-tire-card,
  .cro-store-card,
  .authPanel {
    box-shadow: var(--lg-spec), var(--lg-shadow-soft) !important;
  }
}

/* --------------------------------------------------------------------------
   14) ERİŞİLEBİLİRLİK
   -------------------------------------------------------------------------- */
/* Saydamlığı azalt tercihi olan kullanıcılar için opak yüzeyler */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --lg-surface: rgba(var(--lg-tint), 0.96);
    --lg-surface-soft: rgba(var(--lg-tint), 0.92);
    --lg-surface-strong: rgba(var(--lg-tint), 0.99);
  }

  header,
  footer,
  html body .mnav,
  .card,
  .pdp7-card,
  .pdp-final-card,
  .pdp-shared-alt-card,
  .bundle-tire-card,
  .cro-store-card,
  .authPanel {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Klavye odağı görünür kalsın */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(var(--lg-gold), 0.85) !important;
  outline-offset: 2px !important;
}

/* --------------------------------------------------------------------------
   16) GİRİŞ / KAYIT SAYFASI — DÜZEN VE BOŞLUK AYARI
   --------------------------------------------------------------------------
   İki sorun vardı:
   1) `.authMedia` grid'inde `align-items` yoktu → `stretch` yüzünden 3 küçük
      istatistik kutusu, yandaki görselin boyuna UZATILIYORDU.
   2) Görsel dikey (portrait) olduğu için doğal oranından 587px yüksekliğe
      çıkıyordu; kutular 272px kalınca yanda ~315px'lik ölü boşluk oluşuyordu.

   Yeni düzen: görsel tam genişlikte ve sabit yükseklikte; 3 istatistik kutusu
   görselin ALTINDA eşit üç sütun olarak durur. Ölü boşluk kalmaz.
   -------------------------------------------------------------------------- */
.authMedia {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.authProductFrame,
.authProductFrame img {
  min-height: 0;
  max-height: 330px;
}

.authSpecStack {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-content: stretch;
}

.authSpec {
  min-height: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.authSpec b {
  font-size: 20px;
}

.authSpec span {
  margin-top: 5px;
}

/* Başlık aşırı büyüktü (66px) ve 3 satıra taşıyordu; küçültülüp
   daha derli toplu hale getirildi. */
.authStory h1 {
  font-size: clamp(26px, 3.1vw, 42px);
  line-height: 1.12;
}

/* Dikey boşlukları sıkılaştır (ferah ama seyrek değil) */
.authShell {
  padding: 34px 0 48px;
}

.authStage {
  gap: 28px;
}

.authPanel {
  margin-top: 0;
  padding: 28px;
}

.authPanelTop {
  margin-bottom: 20px;
}

.authField {
  margin-bottom: 13px;
}

.authFormRow {
  margin: -2px 0 11px;
}

.authFooterText {
  margin-top: 16px;
}

.authQuickLinks {
  margin-top: 22px;
}

.authQuickLink {
  min-height: 58px;
}

@media (max-width: 760px) {
  .authShell {
    padding: 28px 0 44px;
  }

  .authStory h1 {
    font-size: clamp(23px, 6.6vw, 30px);
  }
}

/* --------------------------------------------------------------------------
   18) ÜRÜN KARTI — MARKA LOGOSU
   --------------------------------------------------------------------------
   Butonda YALNIZCA marka logosu gösterilir (metin yok). Tüm logolar aynı
   ölçüdeki bir kutuda ortalanır; markalar farklı en-boy oranında olsa da
   butonlar ve kartlar aynı hizada kalır, düzen kaymaz.
   Logo bulunamayan üründe eski görünüm (ikon + "İncele") korunur.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   MARKA LOGOSU — butonu doldurur, tüm markalar eşit görünür
   --------------------------------------------------------------------------
   • Logo, butonun kullanılabilir genişliğini doldurur (max 82px) ve dikeyde
     ortalanır → farklı en-boy oranına sahip markalar aynı ağırlıkta görünür.
   • BUTON ZEMİNİ HER İKİ TEMADA DA AÇIK tutulur. Koyu temada buton zemini koyu
     kalırsa koyu renkli logolar (Velare, Sonic vb.) okunmaz hale geliyordu.
   • Beyaz logolar için koyu şerit (`is-on-dark`) açık zemin üzerinde gerekli.
   -------------------------------------------------------------------------- */
.miniBtnBrandLogo {
  /* Yükseklik sabit, genişlik markaya göre serbest (üst sınırlı).
     Kare oranlı logolar (Continental gibi) sabit kutu + contain ile çok küçük
     kalıyordu; yükseklik bazlı ölçekleme tüm markaları dengeli gösterir. */
  width: auto;
  max-width: 92px;
  height: 27px;
  padding: 0;
  box-sizing: border-box;
  object-fit: contain;
  object-position: left center;
  background: transparent;
  border-radius: 4px;
  display: block;
}

/* Logo taşıyan buton: her temada açık zemin.
   `.miniBtn:has(...)` kullanılıyor çünkü anlık görüntü/önbellek HTML'inde
   `.prodInspectBtn` sınıfı bulunmayabilir; iki seçici birlikte güvence sağlar. */
.miniBtn:has(.miniBtnBrandLogo),
.prodInspectBtn:has(.miniBtnBrandLogo) {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 1px 3px -1px rgba(15, 23, 42, 0.14) !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

/* Beyaz/açık logolar açık zeminde kaybolmasın: koyu şerit */
.miniBtnBrandLogo.is-on-dark {
  background: #14161c;
  padding: 2px 5px;
  border-radius: 4px;
}

.prodInspectBtn {
  min-width: 0;
  gap: 5px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.prodInspectBtn .miniBtnText {
  white-space: nowrap;
}

/* Logo varsa butonda metin gösterilmez. */
.prodInspectBtn:has(.miniBtnBrandLogo) .miniBtnText {
  display: none;
}

/* "Sepete Ekle" metni butona sığsın: daha ufak punto + dar iç boşluk. */
.prodActions .miniBtn {
  padding-left: 8px !important;
  padding-right: 8px !important;
  gap: 4px !important;
}

.prodActions .miniBtn .miniBtnText {
  font-size: 9.5px;
  letter-spacing: 0.2px;
}

.prodActions .miniBtn i {
  font-size: 14px;
}

/* :has() desteklemeyen tarayıcılar için JS tarafı metni zaten kaldırır. */

/* --------------------------------------------------------------------------
   19) FAVORİ BUTONU (ürün kartları)
   --------------------------------------------------------------------------
   Kalp butonu ürün görselinin sağ üst köşesinde durur. Tıklanınca:
   dolgu geçişi + "pop" animasyonu + halka dalgası oynar.
   -------------------------------------------------------------------------- */
.prodItem .prodImg,
.card .c-img,
.card .c-media,
.card .prodImg {
  position: relative;
}

.ijdFavBtn {
  position: absolute;
  /* Kartların sağ üstünde marka rozeti ve "4 ADET" etiketi var; favori
     butonu sol alt köşede durur, hiçbiriyle çakışmaz. */
  top: auto;
  bottom: 8px;
  left: 8px;
  right: auto;
  z-index: 4;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 8px -2px rgba(15, 23, 42, 0.18);
  color: #6b7280;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

.ijdFavBtn svg {
  width: 18px;
  height: 18px;
  display: block;
  overflow: visible;
}

.ijdFavBtn svg path {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill 0.28s ease, stroke 0.28s ease;
}

.ijdFavBtn:hover {
  transform: scale(1.08);
  border-color: rgba(212, 175, 55, 0.55);
  color: #b8941f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 6px 18px -6px rgba(212, 175, 55, 0.55);
}

/* Favoride: kalp dolu ve altın */
.ijdFavBtn.is-active {
  border-color: rgba(212, 175, 55, 0.65);
  color: #d4af37;
  background: rgba(255, 252, 240, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 6px 20px -6px rgba(212, 175, 55, 0.65);
}

.ijdFavBtn.is-active svg path {
  fill: currentColor;
  stroke: currentColor;
}

/* Tıklama anında kalp büyüyüp yerine oturur */
@keyframes ijdFavPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.42); }
  62%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

.ijdFavBtn.is-pop {
  animation: ijdFavPop 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dışa yayılan altın halka dalgası */
@keyframes ijdFavRing {
  0%   { transform: scale(0.7); opacity: 0.85; }
  100% { transform: scale(2.1); opacity: 0; }
}

.ijdFavBtn::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid rgba(212, 175, 55, 0.85);
  opacity: 0;
  pointer-events: none;
}

.ijdFavBtn.is-pop::after {
  animation: ijdFavRing 0.6s ease-out;
}

/* Favoriden çıkarılırken hafifçe söner */
.ijdFavBtn.is-off {
  animation: ijdFavPop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Mobilde dokunma hedefini büyüt */
@media (max-width: 768px) {
  .ijdFavBtn {
    width: 38px;
    height: 38px;
    bottom: 6px;
    left: 6px;
  }

  .ijdFavBtn svg {
    width: 20px;
    height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ijdFavBtn,
  .ijdFavBtn.is-pop,
  .ijdFavBtn.is-off {
    animation: none !important;
    transition: none !important;
  }

  .ijdFavBtn::after {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   20) KAYAN MARKA LOGOLARI (marquee)
   --------------------------------------------------------------------------
   `.brandPill` kapsülleri logo taşıyıcısıdır ve HER İKİ TEMADA da açık zeminli
   kalmalıdır. Koyu temada yüzey rengi verilirse (siyah/koyu) logoların koyu
   olanları (Bridgestone, Goodyear vb.) tamamen kaybolur.
   Bu yüzden kapsül zemini sabit açık renkte tutulur.
   -------------------------------------------------------------------------- */
.brandPill,
body.dark-mode .brandPill,
body.dark-theme .brandPill,
body.light-theme .brandPill,
body.light-mode .brandPill {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.35) !important;
}

/* Logo her zaman normal karışımda ve tam opak kalsın. */
.brandPill img {
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   22) FİLTRE PANELİ AKSİYON BUTONLARI
   --------------------------------------------------------------------------
   Sol paneldeki "Sonuçları Göster" (.btn.btn-gold) ve "Filtreleri Temizle"
   (.btn.btn-text) butonları düz dolguydu. İkisi de cam dokusuna çevrilir:
   altın CTA marka rengini korur, ikincil buton buzlu cam olur.
   -------------------------------------------------------------------------- */
.btn.btn-gold {
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.60),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 2px 10px -2px rgba(var(--lg-gold), 0.45),
    0 12px 30px -12px rgba(var(--lg-gold), 0.45) !important;
}

.btn.btn-gold:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 4px 14px -2px rgba(var(--lg-gold), 0.55),
    0 18px 42px -14px rgba(var(--lg-gold), 0.55) !important;
}

.btn.btn-text,
.btn.ghost {
  background: var(--lg-surface) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) !important;
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) !important;
  border-color: var(--lg-edge) !important;
  box-shadow: var(--lg-spec-soft), var(--lg-shadow-soft) !important;
}

.btn.btn-text:hover,
.btn.ghost:hover {
  border-color: var(--lg-ring) !important;
  box-shadow: var(--lg-spec), var(--lg-shadow-lift) !important;
}

/* --------------------------------------------------------------------------
   23) DİL SEÇİCİ MENÜSÜ — hover boşluğu düzeltmesi
   --------------------------------------------------------------------------
   Menü `.headerLangDropdown { top: calc(100% + 6px) }` ile düğmenin 6px
   altında açılıyor. Fare o boşluğa geldiğinde `:hover` bitiyor ve menü
   kapanıyordu — bu yüzden dil seçilemiyordu ("fareyi aşağı indirince
   kayboluyor"). Aşağıdaki görünmez köprü boşluğu kapatır.

   Ayrıca menü kendisi de cam yüzeye çevrilir.
   -------------------------------------------------------------------------- */
.headerLangPicker::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 16px;
  pointer-events: auto;
}

/* Menünün kendi üst boşluğu da köprüye dahil olsun */
.headerLangDropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
}

.headerLangDropdown {
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) !important;
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) !important;
  box-shadow: var(--lg-spec), var(--lg-shadow-lift) !important;
  border-radius: var(--lg-r-md) !important;
}

/* --------------------------------------------------------------------------
   24) MOBİL NAVBAR — görsel zenginleştirme
   --------------------------------------------------------------------------
   Üst başlık ve alt "cam ada" çubuğu mobilde çok sade duruyordu. Bu bölüm
   yalnızca görsel katman ekler: aktif öğe vurgusu, altın dokunuşlar, dokunma
   geri bildirimi. Yerleşim ve ölçüler değiştirilmez.
   -------------------------------------------------------------------------- */

/* --- Üst başlık: ikon daireleri mobilde daha belirgin --- */
@media (max-width: 980px) {
  header .iconBtn,
  header .hamb {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      0 2px 10px -4px rgba(15, 23, 42, 0.22) !important;
  }

  body.dark-mode header .iconBtn,
  body.dark-mode header .hamb,
  body.dark-theme header .iconBtn,
  body.dark-theme header .hamb {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 2px 10px -4px rgba(0, 0, 0, 0.6) !important;
  }

  /* Logo amblemi biraz daha canlı */
  header .brandLogo {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      0 4px 16px -4px rgba(var(--lg-gold), 0.55) !important;
  }
}

/* --- Alt çubuk (cam ada): altın kenar çizgisi --- */
html body nav#mobileNav {
  border-top: 1px solid rgba(212, 175, 55, 0.20) !important;
}

body.light-theme nav#mobileNav {
  border-top: 1px solid rgba(184, 148, 31, 0.22) !important;
}

/* --- Alt çubuk öğeleri --- */
html body .mnav-item {
  border-radius: 14px !important;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html body .mnav-item i {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease !important;
}

/* Basılı tutulunca hafif küçülme (dokunma geri bildirimi) */
html body .mnav-item:active {
  transform: scale(0.93);
}

html body .mnav-item:active i {
  transform: scale(0.9);
}

/* Aktif sayfa: altın ikon + hafif ışıma */
html body .mnav-item.active,
html body .mnav-item.active i {
  color: #f4c95d !important;
}

html body .mnav-item.active i {
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.55));
}

body.light-theme .mnav-item.active,
body.light-theme .mnav-item.active i,
body.light-mode .mnav-item.active,
body.light-mode .mnav-item.active i {
  color: #ffd873 !important;
}

/* Aktif öğenin arkasında yumuşak altın hale */
html body .mnav-item.active {
  background: radial-gradient(60% 70% at 50% 45%, rgba(212, 175, 55, 0.22), transparent 72%);
}

/* WhatsApp öğesi yeşil kalsın (aktif stilini ezmesin) */
html body .mnav-item.mnav-wa.active i,
html body .mnav-item.mnav-wa i {
  color: #25D366 !important;
  filter: none;
}

/* --------------------------------------------------------------------------
   25) HEADER MENÜ — YILDIRIM (ŞİMŞEK) EFEKTİ
   --------------------------------------------------------------------------
   Temada `lightning-flash` animasyonu vardı ama:
     • yalnızca `<a>` bağlantılarını kapsıyordu; açılır menü düğmeleri
       (`.navDropToggle` — "Hizmetler ⌄" gibi) efekt almıyordu,
     • 0.3 sn sürdüğü için neredeyse fark edilmiyordu.
   Burada efekt hem yayılır hem de "çakan yıldırım" hissi verecek şekilde
   güçlendirilir. Yalnızca `text-shadow` / `filter` kullanılır — tema
   tarafından atanan `transform` ve arka plan animasyonları korunur.
   -------------------------------------------------------------------------- */

/* Açılır menü düğmeleri de çift çizgi + konum bağlamı kazansın */
header nav .navDropToggle {
  position: relative;
}

header nav .navDropToggle::before,
header nav .navDropToggle::after {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  background: #d4af37;
  transition: width 0.25s ease;
}

header nav .navDropToggle::before { top: -2px; left: 0; }
header nav .navDropToggle::after { bottom: -2px; right: 0; }

header nav .navDropToggle:hover::before,
header nav .navDropToggle:hover::after { width: 100%; }

/* Yumuşak tek parlama: ani çakma yok, titreme hissi vermez.
   Hover başlarken kısa bir aydınlanma, ardından sabit hafif ışıma. */
@keyframes ijdSpark {
  0% {
    text-shadow: none;
  }
  45% {
    text-shadow:
      0 0 10px rgba(255, 248, 214, 0.80),
      0 0 20px rgba(212, 175, 55, 0.45);
  }
  100% {
    text-shadow:
      0 0 7px rgba(212, 175, 55, 0.55),
      0 0 16px rgba(212, 175, 55, 0.28);
  }
}

/* Menü bağlantıları ve açılır menü düğmeleri */
header nav a:hover,
header nav .navDropToggle:hover,
.header-menu a:hover,
.pNav__link:hover {
  animation: ijdSpark 0.42s cubic-bezier(0.22, 1, 0.36, 1) 1 !important;
  text-shadow:
    0 0 7px rgba(212, 175, 55, 0.55),
    0 0 16px rgba(212, 175, 55, 0.28);
}

/* Alt çizgiler hover'da yumuşakça parlasın */
header nav a:hover::before,
header nav a:hover::after,
header nav .navDropToggle:hover::before,
header nav .navDropToggle:hover::after,
.header-menu a:hover::before,
.header-menu a:hover::after {
  box-shadow: 0 0 5px rgba(212, 175, 55, 0.60);
}

/* Hareket azaltma tercihi: yıldırım animasyonu kapalı */
@media (prefers-reduced-motion: reduce) {
  header nav a:hover,
  header nav .navDropToggle:hover,
  .header-menu a:hover,
  .pNav__link:hover {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   26) HESAP PANELİ ÜST ÇUBUĞU — mobil sıkışma düzeltmesi
   --------------------------------------------------------------------------
   Hesap sayfasının kendi üst çubuğunda logo + "Ana Sayfa" + tema seçici
   (Açık/Koyu) + "Çıkış" yan yana geliyor ve dar ekranda logo kırpılıyordu
   ("İZ JA" gibi). Mobilde butonlar yalnızca ikon gösterir; alt "cam ada"
   çubuğunda zaten Anasayfa bulunduğu için işlev kaybı olmaz.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* (Yatay taşma koruması artık global — yukarıda `html` üzerinde.) */
  .topbar__inner {
    gap: 8px;
    width: calc(100% - 20px);
  }

  .topbar .brand {
    min-width: 0;
    flex: 0 1 auto;
  }

  .topbar .brand strong {
    font-size: 12.5px;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .topbar .brand span span {
    display: none;
  }

  .topbar .brand__mark {
    width: 36px;
    height: 36px;
  }

  .homePill span,
  .theme-seg-opt span,
  .logoutBtn span {
    display: none;
  }

  .homePill,
  .logoutBtn {
    padding-left: 9px;
    padding-right: 9px;
    gap: 0;
  }

  .theme-seg-opt {
    padding-left: 7px;
    padding-right: 7px;
  }
}

/* --------------------------------------------------------------------------
   27) "ÖDEMEYE DEVAM ET" BUTONU (sipariş kartı, pending durumu)
   -------------------------------------------------------------------------- */
.oc-pay-resume {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 4px 0 18px;
  padding: 14px 16px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 16px;
  background:
    linear-gradient(115deg, rgba(212, 175, 55, 0.10), rgba(245, 158, 11, 0.05)),
    var(--surface, rgba(255, 255, 255, 0.9));
}

.oc-pay-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: var(--gold-gradient, linear-gradient(135deg, #fef08a 0%, #d4af37 50%, #b8860b 100%));
  color: #1a1405;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 3px 12px -3px rgba(212, 175, 55, 0.55);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.oc-pay-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 8px 24px -6px rgba(212, 175, 55, 0.65);
}

.oc-pay-btn:active {
  transform: scale(0.97);
}

.oc-pay-note {
  flex: 1 1 220px;
  min-width: 0;
  color: var(--muted, #475569);
  font-size: 12.5px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .oc-pay-resume {
    gap: 10px;
    padding: 12px 14px;
  }

  .oc-pay-btn {
    width: 100%;
    justify-content: center;
    padding: 13px 18px;
  }

  .oc-pay-note {
    flex: 1 1 100%;
    font-size: 12px;
  }
}

/* --------------------------------------------------------------------------
   28) PDP JANT + LASTİK PAKETİ (bundle) — cam yüzeyler
   --------------------------------------------------------------------------
   Ürün detay sayfasındaki "Uyumlu Lastik Önerileri" ve "Komple Takım Özeti"
   bölümü düz beyaz kutulardan oluşuyordu; sitenin cam diliyle bütünleşmiyordu.
   Yalnızca arka plan/kenar/gölge katmanı eklenir; yerleşim ve animasyonlar
   korunur.
   -------------------------------------------------------------------------- */
.bundle-builder-section,
.bundle-tires-area,
.bundle-tires-empty,
.bundle-vehicle-selector,
.bundle-vehicle-selected,
.bundle-vehicle-field,
.bundle-vehicle-form,
.bundle-season-selector,
.bundle-summary-sticky,
.bundle-summary-header,
.bundle-summary-empty-state,
.bundle-campaign-banner,
.bundle-campaign-inner,
.bundle-campaign-includes,
.bundle-mobile-sticky-inner,
.bundle-terms-content,
.bundle-package,
.bundle-tire-card,
.rel-card {
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) !important;
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) !important;
  border-radius: var(--lg-r-lg) !important;
  border: 1px solid var(--lg-border) !important;
  background: var(--lg-surface) !important;
  box-shadow: var(--lg-spec), var(--lg-shadow-lift) !important;
}

/* Sezon ve araç seçimi düğmeleri */
.bundle-season-btn,
.bundle-vehicle-change-btn,
.bundle-vehicle-search-btn {
  -webkit-backdrop-filter: blur(18px) saturate(170%) !important;
  backdrop-filter: blur(18px) saturate(170%) !important;
  border-radius: var(--lg-r-md) !important;
  border: 1px solid var(--lg-border) !important;
}

.bundle-season-btn.active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 12px -4px rgba(var(--lg-gold), 0.6) !important;
}

/* Açık temada okunabilirlik */
body.light-theme .bundle-builder-section,
body.light-theme .bundle-tires-area,
body.light-theme .bundle-tire-card,
body.light-theme .bundle-summary-sticky,
body.light-theme .bundle-vehicle-selector,
body.light-theme .bundle-season-selector,
body.light-theme .rel-card {
  color: #16202e !important;
}

/* Koyu temada metin netliği */
body.dark-mode .bundle-builder-section,
body.dark-theme .bundle-builder-section,
body.dark-mode .bundle-tires-area,
body.dark-theme .bundle-tires-area,
body.dark-mode .bundle-tire-card,
body.dark-theme .bundle-tire-card,
body.dark-mode .bundle-summary-sticky,
body.dark-theme .bundle-summary-sticky {
  color: #eef1f7 !important;
}

/* Yatay taşma koruması — TÜM ekran boyutlarında.
   `overflow-x: clip` kullanılır (hidden DEĞİL): clip kaydırma kabı
   oluşturmadığı için `header { position: sticky }` çalışmaya devam eder.
   Bu yüzden hem html hem body üzerinde güvenle uygulanabilir. */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

/* Sabit (fixed) öğeler kırpılmadan viewport'a göre konumlanır; ürün
   detayındaki mobil satın alma çubuğu bu yüzden taşabiliyordu. */
@media (max-width: 900px) {
  .pdp-shared-sticky,
  .cro-mobile-bar,
  .bundle-mobile-sticky,
  .bundle-mobile-sticky-inner,
  [class*="mobile-sticky"],
  [class*="stickyBar"],
  [class*="sticky-bar"] {
    left: 0 !important;
    right: 0 !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
}

/* Uzun kelime/URL taşmasını engelle */
.pdp-shared-wrap,
.pdp-shared-panel,
.pdp-shared-desc-wrap,
.pdp-shared-tabpanel,
section,
main {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   29) PHOSPHOR IKONLARI — navbar / dock boyut ve aktif durum
   --------------------------------------------------------------------------
   Navbar ikonları Phosphor setine geçti (RemixIcon'dan daha zarif çizgiler).
   Phosphor `1em` tabanlı çalıştığı için boyutlar burada sabitlenir; aktif
   öğede dolgulu (fill) varyant gösterilir.
   -------------------------------------------------------------------------- */
.ph {
  font-size: 1.15em;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

/* Üst başlık ikonları */
header .iconBtn .ph,
header .hamb .ph {
  font-size: 19px;
}

/* Mobil alt çubuk ikonları */
html body .mnav-item .ph {
  font-size: 22px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Aktif öğe: dolgulu ikon (daha belirgin ve şık) */
html body .mnav-item.active .ph::before {
  font-family: "Phosphor-Fill" !important;
}

/* Arama düğmesi (ortadaki altın daire) */
html body .mnav-item.mnav-search .ph {
  font-size: 24px;
}

/* WhatsApp kendi rengini korur */
html body .mnav-item.mnav-wa .ph {
  color: #25D366;
}

/* --------------------------------------------------------------------------
   30) MARKA PROFİL BLOĞU
   --------------------------------------------------------------------------
   Marka sayfalarında (/lastik/marka/{marka}/) gösterilen tanıtım bloğu.
   Veri kaynağı: includes/ijd-brand-profiles.php
   -------------------------------------------------------------------------- */
.ijd-brand-block {
  margin: 18px 0 26px;
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 22px 24px;
  border-radius: var(--lg-r-lg, 22px);
  border: 1px solid rgba(212, 175, 55, 0.28);
  background:
    linear-gradient(115deg, rgba(212, 175, 55, 0.09), rgba(15, 143, 104, 0.03)),
    var(--lg-surface, rgba(255, 255, 255, 0.9));
  -webkit-backdrop-filter: blur(var(--lg-blur, 24px)) saturate(170%);
  backdrop-filter: blur(var(--lg-blur, 24px)) saturate(170%);
  box-shadow: 0 10px 34px -20px rgba(15, 23, 42, 0.35);
}

.ijd-brand-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.ijd-brand-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 13px;
  border-radius: 13px;
  background: rgba(148, 163, 184, 0.09);
  border: 1px solid rgba(148, 163, 184, 0.22);
  min-width: 0;
}

.ijd-brand-fact span {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--soft, #64748b);
}

.ijd-brand-fact strong {
  font-size: 13.5px;
  color: var(--text, #0f172a);
  line-height: 1.35;
}

.ijd-brand-story { min-width: 0; }

.ijd-brand-story h2 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--text-title, #0f172a);
}

.ijd-brand-story p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted, #475569);
}

.ijd-brand-story p:last-child { margin-bottom: 0; }
.ijd-brand-story strong { color: var(--text, #0f172a); }

/* Koyu tema */
body.dark-mode .ijd-brand-fact,
body.dark-theme .ijd-brand-fact {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
}
body.dark-mode .ijd-brand-story p,
body.dark-theme .ijd-brand-story p { color: #b9c0cc; }
body.dark-mode .ijd-brand-story h2,
body.dark-theme .ijd-brand-story h2 { color: #f1f4f9; }
body.dark-mode .ijd-brand-fact strong,
body.dark-theme .ijd-brand-fact strong { color: #eef1f7; }

@media (max-width: 780px) {
  .ijd-brand-block {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 18px 16px;
  }
  .ijd-brand-story h2 { font-size: 17px; }
  .ijd-brand-story p { font-size: 13.5px; }
}

/* Ürün açıklaması: ebat çözümlemesi listesi */
.ijd-size-legend {
  margin: 0 0 12px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ijd-size-legend li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted, #475569);
}
.ijd-size-legend strong { color: var(--text, #0f172a); }
.ijd-size-legend em { font-style: normal; color: var(--gold-text, #a9821a); font-weight: 600; }

.ijd-size-note {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  background: rgba(212, 175, 55, 0.07);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted, #475569);
}
.ijd-size-note a { color: var(--gold-text, #a9821a); font-weight: 700; }

.seoBox h3 {
  margin: 22px 0 10px;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--text-title, #0f172a);
}
.seoBox p { line-height: 1.7; }
.seoBox ul { line-height: 1.7; }

body.dark-mode .ijd-size-legend li,
body.dark-theme .ijd-size-legend li { color: #b9c0cc; }
body.dark-mode .ijd-size-note,
body.dark-theme .ijd-size-note { color: #b9c0cc; background: rgba(212, 175, 55, 0.10); }
body.dark-mode .seoBox h3,
body.dark-theme .seoBox h3 { color: #f1f4f9; }

/* --------------------------------------------------------------------------
   31) ÜRÜN AÇIKLAMASI — okunabilir, cam dokulu düzen
   --------------------------------------------------------------------------
   Açıklama sekmesi düz metin yığını gibi görünüyordu; tanım listesi (dt/dd)
   hizasız, bloklar iç içeydi. Bu bölüm tek sütunlu, ferah ve cam dokulu bir
   düzene kavuşturulur. Mobilde tamamen tek sütuna iner.
   -------------------------------------------------------------------------- */
.pdp-shared-desc-wrap {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

.pdp-shared-desc-wrap > p,
.pdp-shared-desc-p {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted, #475569);
}

/* İlk giriş paragrafı — vurgulu cam şerit */
.pdp-shared-desc-p:first-of-type {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, 0.30);
  background: linear-gradient(115deg, rgba(212, 175, 55, 0.10), rgba(255, 255, 255, 0.4));
  color: var(--text, #0f172a);
  font-size: 15px;
  font-weight: 600;
}

/* --- Teknik künye: iki sütunlu, çizgili tablo görünümü --- */
.product-facts {
  display: grid;
  grid-template-columns: minmax(140px, 34%) minmax(0, 1fr);
  margin: 0 0 20px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.06);
  overflow: hidden;
}

.product-facts dt,
.product-facts dd {
  margin: 0;
  padding: 11px 15px;
  font-size: 14px;
  line-height: 1.5;
  border-bottom: 1px solid rgba(148, 163, 184, 0.20);
  min-width: 0;
  overflow-wrap: break-word;
}

.product-facts dt {
  font-weight: 700;
  color: var(--soft, #64748b);
  background: rgba(148, 163, 184, 0.07);
}

.product-facts dd {
  color: var(--text, #0f172a);
  font-weight: 600;
}

.product-facts dt:nth-last-of-type(1),
.product-facts dd:last-of-type {
  border-bottom: 0;
}

/* --- Başlık hiyerarşisi --- */
.pdp-shared-desc-wrap h2,
.seoBox h2 {
  margin: 0 0 14px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.25;
  color: var(--text-title, #0f172a);
}

.pdp-shared-desc-wrap h3,
.seoBox h3 {
  position: relative;
  margin: 26px 0 12px;
  padding-left: 14px;
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text-title, #0f172a);
}

.pdp-shared-desc-wrap h3::before,
.seoBox h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 4px;
  border-radius: 99px;
  background: linear-gradient(180deg, #fdf0a8, #d4af37);
}

.pdp-shared-desc-wrap p,
.seoBox p {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted, #475569);
}

.pdp-shared-desc-wrap a,
.seoBox a {
  color: var(--gold-text, #a9821a);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 175, 55, 0.45);
}

/* --- Mobil: tek sütun --- */
@media (max-width: 720px) {
  .product-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-facts dt {
    padding-bottom: 2px;
    border-bottom: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: transparent;
  }

  .product-facts dd {
    padding-top: 0;
    padding-bottom: 12px;
    font-size: 14px;
  }

  .product-facts dt:not(:first-of-type) {
    border-top: 1px solid rgba(148, 163, 184, 0.20);
    padding-top: 11px;
  }

  .pdp-shared-desc-wrap h2, .seoBox h2 { font-size: 18.5px; }
  .pdp-shared-desc-wrap h3, .seoBox h3 { font-size: 15.5px; margin-top: 22px; }
  .pdp-shared-desc-wrap p, .seoBox p,
  .pdp-shared-desc-wrap > p, .pdp-shared-desc-p { font-size: 14px; line-height: 1.7; }

  .pdp-shared-desc-p:first-of-type { font-size: 14.5px; padding: 13px 14px; }
  .ijd-size-note { font-size: 13px; padding: 11px 12px; }
}

/* Koyu tema */
body.dark-mode .product-facts,
body.dark-theme .product-facts {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}
body.dark-mode .product-facts dt,
body.dark-theme .product-facts dt {
  background: rgba(255, 255, 255, 0.04);
  color: #97a0b0;
}
body.dark-mode .product-facts dd,
body.dark-theme .product-facts dd { color: #eef1f7; }
body.dark-mode .pdp-shared-desc-wrap p,
body.dark-theme .pdp-shared-desc-wrap p,
body.dark-mode .pdp-shared-desc-wrap > p,
body.dark-theme .pdp-shared-desc-wrap > p { color: #b9c0cc; }
body.dark-mode .pdp-shared-desc-p:first-of-type,
body.dark-theme .pdp-shared-desc-p:first-of-type {
  background: linear-gradient(115deg, rgba(212, 175, 55, 0.14), rgba(255, 255, 255, 0.04));
  color: #f1f4f9;
}

/* --------------------------------------------------------------------------
   32) UYUMLULUK BLOĞU — PCD + araç marka logoları
   --------------------------------------------------------------------------
   Jant ürün detayındaki "Uyumluluk Özeti" ve "Bu ölçüyü kullanan markalar"
   bölümü düz kenarlıklı, dağınık duruyordu. Burada cam dokulu, eşit ölçülü
   ve mobilde düzgün kırılan bir düzene kavuşturulur.
   -------------------------------------------------------------------------- */
.compat-compact {
  border: 1px solid rgba(212, 175, 55, 0.30) !important;
  border-radius: var(--lg-r-lg, 18px) !important;
  background:
    linear-gradient(150deg, rgba(212, 175, 55, 0.13), rgba(255, 255, 255, 0.35)),
    var(--lg-surface, rgba(255, 255, 255, 0.9)) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur, 24px)) saturate(170%);
  backdrop-filter: blur(var(--lg-blur, 24px)) saturate(170%);
  box-shadow: 0 8px 26px -18px rgba(15, 23, 42, 0.45);
  padding: 16px !important;
}

.compat-compact-head {
  font-size: 12.5px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.compat-compact-note {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}

.compat-mini-chip {
  border: 1px solid rgba(148, 163, 184, 0.30) !important;
  background: rgba(148, 163, 184, 0.10) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
}

/* --- "Bu ölçüyü kullanan markalar" logo şeridi --- */
.marquee-content {
  gap: 10px !important;
  align-items: stretch;
}

.marquee-item {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 96px;
  min-height: 84px;
  padding: 12px 10px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  background: #ffffff !important;
  box-shadow: 0 3px 12px -8px rgba(15, 23, 42, 0.45);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease;
}

.marquee-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -10px rgba(15, 23, 42, 0.5);
}

/* Logolar aynı yükseklikte ve ortalanmış — eşit görünüm */
.marquee-item img,
.marquee-item svg {
  width: auto !important;
  max-width: 62px;
  height: 30px !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

.marquee-brand-name,
.marquee-item span {
  font-size: 10.5px !important;
  font-weight: 750 !important;
  letter-spacing: 0.02em;
  color: #334155 !important;
  text-align: center;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 720px) {
  .marquee-item {
    min-width: 80px;
    min-height: 74px;
    padding: 10px 8px !important;
  }
  .marquee-item img,
  .marquee-item svg {
    max-width: 50px;
    height: 24px !important;
  }
  .marquee-brand-name,
  .marquee-item span { font-size: 9.5px !important; }
  .compat-compact { padding: 14px !important; }
}

/* --------------------------------------------------------------------------
   33) MOBİL TAŞMA KORUMASI — ürün detay
   --------------------------------------------------------------------------
   Ürün detayında güven satırı (Orijinal ürün · Faturalı satış · ...) ve yan
   yana duran butonlar dar ekranda kesiliyordu. Mobilde bu satırlar sarılır ve
   butonlar tam genişliğe iner.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .pdp-shared-wrap,
  .pdp-shared-panel,
  .pdp-shared-body,
  .info,
  .media,
  .pdp-shared-info {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip;
  }

  /* Güven / rozet satırları sarılsın */
  .pdp-shared-trust,
  .pdp-shared-trust-row,
  .pdp-trust,
  [class*="trust-row"],
  [class*="trustRow"],
  [class*="assurance"] {
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
  }

  /* Yan yana butonlar alt alta */
  .pdp-shared-cta-row,
  .pdp-shared-actions,
  [class*="cta-row"],
  [class*="ctaRow"],
  [class*="action-row"] {
    flex-wrap: wrap !important;
  }

  .pdp-shared-cta-row > *,
  [class*="cta-row"] > *,
  [class*="ctaRow"] > * {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  /* Uzun metinler kesilmesin */
  .pdp-shared-wrap p,
  .info p {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* --------------------------------------------------------------------------
   33) MOBİL TAŞMA KORUMASI — ürün detay (GERÇEK sınıflar)
   --------------------------------------------------------------------------
   Tespit edilen taşma kaynakları:
     • .cro-ver-pill        → "Orijinal ürün · Faturalı satış · Garanti..." rozetleri
     • .cro-product-truth-signals / .cro-review-rating-badge → kapsayıcı sarmıyordu
     • .sticky-buybar       → position:fixed sabit satın alma çubuğu ekrandan taşıyor
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Güven rozetleri alt satıra insin */
  .cro-product-truth-signals,
  .cro-review-rating-badge {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .cro-ver-pill {
    font-size: 10.5px !important;
    padding: 4px 9px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
  }
  .cro-ver-pill i { font-size: 12px !important; }

  /* Sabit satın alma çubuğu ekranı aşmasın */
  .sticky-buybar {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .sticky-buybar .sticky-top {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 4px 10px !important;
    min-width: 0 !important;
  }

  .sticky-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .sticky-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .sticky-price { font-size: 17px !important; }
  .sticky-stock { font-size: 10.5px !important; }

  /* Ürün başlığı ve uzun metinler kesilmesin */
  .p-title, .p-brand, .info h1 {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* --------------------------------------------------------------------------
   34) PCD → ARAÇ UYUMLULUĞU BLOĞU (jant marka sayfaları)
   --------------------------------------------------------------------------
   Markanın sattığı her bijon aralığı için uyumlu araç markalarını logo ile
   gösterir. Veri: includes/car-brand-compatibility.php
   -------------------------------------------------------------------------- */
.ijd-pcd-fitment {
  margin: 16px 0 22px;
  padding: 18px 20px;
  border-radius: var(--lg-r-lg, 20px);
  border: 1px solid rgba(212, 175, 55, 0.28);
  background:
    linear-gradient(150deg, rgba(212, 175, 55, 0.10), rgba(255, 255, 255, 0.3)),
    var(--lg-surface, rgba(255, 255, 255, 0.9));
  -webkit-backdrop-filter: blur(var(--lg-blur, 24px)) saturate(170%);
  backdrop-filter: blur(var(--lg-blur, 24px)) saturate(170%);
  box-shadow: 0 10px 30px -22px rgba(15, 23, 42, 0.45);
}

.ijd-pcd-fitment-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-text, #a9821a);
}
.ijd-pcd-fitment-head i { font-size: 17px; }

.ijd-pcd-row {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
}
.ijd-pcd-row:first-of-type { border-top: 0; padding-top: 4px; }

.ijd-pcd-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ijd-pcd-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fdf0a8, #d4af37);
  color: #1a1405;
  font-size: 12.5px;
  font-weight: 850;
  letter-spacing: 0.03em;
  white-space: nowrap;
  box-shadow: 0 2px 8px -3px rgba(212, 175, 55, 0.7);
}

.ijd-pcd-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--soft, #64748b);
  padding-left: 3px;
}

.ijd-pcd-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.ijd-pcd-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 34px;
  padding: 5px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 2px 7px -5px rgba(15, 23, 42, 0.5);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.ijd-pcd-logo:hover { transform: translateY(-2px); }

.ijd-pcd-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

.ijd-pcd-logo b {
  font-size: 11px;
  font-weight: 850;
  color: #334155;
  letter-spacing: 0.02em;
}

.ijd-pcd-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 34px;
  padding: 0 9px;
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.14);
  border: 1px dashed rgba(148, 163, 184, 0.45);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted, #475569);
}

.ijd-pcd-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.07);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted, #475569);
}
.ijd-pcd-note strong { color: var(--text, #0f172a); }

@media (max-width: 720px) {
  .ijd-pcd-fitment { padding: 15px 14px; }
  .ijd-pcd-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .ijd-pcd-left {
    flex-direction: row;
    align-items: center;
    gap: 9px;
  }
  .ijd-pcd-logo { width: 46px; height: 31px; padding: 4px; }
  .ijd-pcd-more { min-width: 40px; height: 31px; }
  .ijd-pcd-fitment-head { font-size: 11.5px; }
}

body.dark-mode .ijd-pcd-note,
body.dark-theme .ijd-pcd-note {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
  color: #b9c0cc;
}
body.dark-mode .ijd-pcd-note strong,
body.dark-theme .ijd-pcd-note strong { color: #eef1f7; }

/* --------------------------------------------------------------------------
   35) LASTİK EBAT → ARAÇ BLOĞU (lastik ürün detayı)
   --------------------------------------------------------------------------
   "205/55R16 ebadını kullanan araçlar" bölümü. Veri:
   includes/car-brand-compatibility.php → ijd_vehicles_for_tire_size()
   -------------------------------------------------------------------------- */
.ijd-tire-fitment {
  margin: 20px 0 4px;
  padding: 18px 20px;
  border-radius: var(--lg-r-lg, 20px);
  border: 1px solid rgba(212, 175, 55, 0.28);
  background:
    linear-gradient(150deg, rgba(212, 175, 55, 0.10), rgba(255, 255, 255, 0.3)),
    var(--lg-surface, rgba(255, 255, 255, 0.9));
  -webkit-backdrop-filter: blur(var(--lg-blur, 24px)) saturate(170%);
  backdrop-filter: blur(var(--lg-blur, 24px)) saturate(170%);
  box-shadow: 0 10px 30px -22px rgba(15, 23, 42, 0.45);
}

.ijd-tire-fitment-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-title, #0f172a);
}
.ijd-tire-fitment-head i { color: var(--gold-text, #a9821a); font-size: 18px; }
.ijd-tire-fitment-head span {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.16);
  border: 1px solid rgba(212, 175, 55, 0.35);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--gold-text, #a9821a);
}

.ijd-tire-fitment-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-bottom: 12px;
}

.ijd-tire-fitment-models {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted, #475569);
  margin-bottom: 10px;
}

@media (max-width: 720px) {
  .ijd-tire-fitment { padding: 15px 14px; }
  .ijd-tire-fitment-head { font-size: 12.5px; gap: 6px; }
  .ijd-tire-fitment-head i { font-size: 16px; }
  .ijd-tire-fitment-models { font-size: 12px; }
}

body.dark-mode .ijd-tire-fitment-models,
body.dark-theme .ijd-tire-fitment-models { color: #b9c0cc; }
body.dark-mode .ijd-tire-fitment-head,
body.dark-theme .ijd-tire-fitment-head { color: #f1f4f9; }

/* --------------------------------------------------------------------------
   36) GÜVEN BLOĞU TİPOGRAFİSİ ("Neden bizi tercih etmelisiniz?")
   --------------------------------------------------------------------------
   Bölümün yazı hiyerarşisi düz ve sıradan duruyordu. Burada zarif bir
   tipografik düzen kurulur: ince aralıklı üst başlık, güçlü ana başlık,
   okunaklı madde metinleri.
   -------------------------------------------------------------------------- */
.cro-why-us-section .cro-why-head {
  margin-bottom: 26px;
}

.cro-why-us-section .cro-why-kicker {
  display: inline-block;
  margin-bottom: 10px;
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold-text, #a9821a);
  position: relative;
  padding-left: 34px;
}

.cro-why-us-section .cro-why-kicker::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, currentColor);
  transform: translateY(-50%);
}

.cro-why-us-section .cro-why-title {
  font-family: 'Space Grotesk', 'Rajdhani', 'Inter', system-ui, sans-serif;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--text-title, #0f172a);
  margin: 0;
  max-width: 22ch;
}

.cro-why-us-section .cro-why-card h3 {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 7px;
  color: var(--text-title, #0f172a);
}

.cro-why-us-section .cro-why-card p {
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--muted, #475569);
  margin: 0;
}

/* Araç marka logo ızgarası — isim tipografisi */
.brand-logo-item-name {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.01em;
}

/* Uyumluluk notu başlığı (seoBox h3) zaten altın çubuklu */
.seoBox h3 + p,
.pdp-shared-desc-wrap h3 + p { margin-top: 0; }

@media (max-width: 720px) {
  .cro-why-us-section .cro-why-kicker { font-size: 10.5px; letter-spacing: 0.16em; padding-left: 28px; }
  .cro-why-us-section .cro-why-kicker::before { width: 18px; }
  .cro-why-us-section .cro-why-title { font-size: 21px; max-width: 100%; }
  .cro-why-us-section .cro-why-card h3 { font-size: 14.5px; }
  .cro-why-us-section .cro-why-card p { font-size: 13px; }
}

body.dark-mode .cro-why-us-section .cro-why-title,
body.dark-theme .cro-why-us-section .cro-why-title,
body.dark-mode .cro-why-us-section .cro-why-card h3,
body.dark-theme .cro-why-us-section .cro-why-card h3 { color: #f1f4f9; }
body.dark-mode .cro-why-us-section .cro-why-card p,
body.dark-theme .cro-why-us-section .cro-why-card p { color: #b9c0cc; }

/* --------------------------------------------------------------------------
   37) ARAÇ SAYFASI — okunabilirlik düzeltmeleri
   --------------------------------------------------------------------------
   /arac/{marka}/{model}/ sayfası kendi koyu temasını kullanır. Cam katmanı
   yüklendiğinde lastik ebadı etiketleri (pill) soluk kalıyordu; burada
   kontrast netleştirilir.
   -------------------------------------------------------------------------- */
.tirePill,
.tirePills a,
.tiresBlock a {
  color: #ffffff !important;
  background: rgba(212, 175, 55, 0.16) !important;
  border: 1px solid rgba(212, 175, 55, 0.45) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  text-decoration: none !important;
  font-weight: 800 !important;
}

.tirePill:hover,
.tirePills a:hover {
  background: rgba(212, 175, 55, 0.30) !important;
  border-color: rgba(212, 175, 55, 0.7) !important;
}

.tiresBlock small,
.tiresBlock > small {
  color: #d8c78a !important;
  letter-spacing: 0.06em;
}

/* Araç sayfası kartlarına hafif cam dokunuşu */
.arac-page .card,
body > .wrap .card {
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
}

@media (max-width: 720px) {
  .tirePill, .tirePills a { font-size: 11.5px !important; padding: 4px 9px !important; }
}

/* --------------------------------------------------------------------------
   38) CRO ROZETLERİ — kargo güvencesi, DOT yılı, mobil çakışma
   --------------------------------------------------------------------------
   Bu blok HTML'e dokunmadan (CSS ::before/::after ile) üç dönüşüm öğesi
   ekler:
     1. "Tüm Türkiye'ye Ücretsiz & Sigortalı Kargo" rozeti — satın alma
        alanının hemen üstünde (terk edilen sepet oranını düşürür)
     2. "Garantili <yıl> Üretim" DOT rozeti — lastik sayfalarında
     3. Mobilde AI asistan / WhatsApp butonlarının sabit satın alma çubuğuyla
        çakışmasını önleyen konum düzeltmesi
   -------------------------------------------------------------------------- */

/* --- 1) KARGO GÜVENCESİ ROZETİ --- */
/* Sabit satın alma çubuğunda (sticky-buybar) bu rozet flex düzenini bozup
   "4'lü Takım" ve WhatsApp butonlarının üstüne biniyordu. Üst bildirim
   şeridinde aynı mesaj zaten görünüyor; burada gösterilmez. */
.sticky-buybar .sticky-actions::before {
  display: none !important;
}

.pdp-shared-cta-row::before,
.cro-team-price-box .cro-secondary-ctas::before {
  content: "🚚 Tüm Türkiye'ye Ücretsiz & Sigortalı Kargo";
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 9px;
  padding: 8px 12px;
  border-radius: 11px;
  border: 1px solid rgba(15, 143, 104, 0.30);
  background: linear-gradient(135deg, rgba(15, 143, 104, 0.12), rgba(15, 143, 104, 0.05));
  color: #0d7a58;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.35;
}

body.dark-mode .pdp-shared-cta-row::before,
body.dark-theme .pdp-shared-cta-row::before {
  color: #7fe3bb;
  border-color: rgba(127, 227, 187, 0.30);
  background: linear-gradient(135deg, rgba(127, 227, 187, 0.14), rgba(127, 227, 187, 0.05));
}

/* --- 2) DOT / ÜRETİM YILI ROZETİ (lastik) --- */
/* Ürün başlığı altındaki çip şeridinin hemen ardına vurgulu rozet */
body.page-urun-lastik .pdp-shared-chips::after {
  content: "✅ Garantili Güncel Üretim · Faturalı";
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.06));
  color: var(--gold-text, #a9821a);
  font-size: 11.5px;
  font-weight: 850;
  white-space: nowrap;
}

/* Sabit satın alma çubuğunda DOT/kargo satırı fiyatla üst üste biniyordu;
   bu bilgi sayfada zaten ayrıca gösteriliyor. Çubuk sade kalıyor:
   solda fiyat, sağda aksiyon butonları. */
.sticky-buybar .sticky-top::after {
  display: none !important;
}

/* --- 3) MOBİL ÇAKIŞMA DÜZELTMESİ ---
   Sabit satın alma çubuğu (sticky-buybar) sağ altta ~60-160px bandını
   kaplıyor. AI asistan balonu ve WhatsApp balonu bu bandın ÜSTÜNE çıkar;
   aksi hâlde "4'lü Takımı Ekle" / WhatsApp butonlarının üzerine biniyordu. */
body:has(.sticky-buybar) .ijdChat-bubble {
  bottom: calc(178px + env(safe-area-inset-bottom, 0px)) !important;
}
body:has(.sticky-buybar) .ijdChat-launcher {
  bottom: calc(236px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width: 900px) {
  body:has(.sticky-buybar) .ijdChat-bubble {
    bottom: calc(172px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
  }
  body:has(.sticky-buybar) .ijdChat-tooltip {
    bottom: calc(180px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Sabit satın alma çubuğu varken AI asistan ve WhatsApp butonları
     çubuğun ÜSTÜNDE kalsın — üstünü örtmesin. */
  .ijdChat-bubble {
    right: 14px !important;
  }

  .ijdChat-launcher,
  .whatsapp-floating,
  .ai-chat-launcher {
    bottom: calc(214px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Asistan penceresi açıkken sabit çubuğu kapat ki üstünü örtmesin */
  body.ijd-chat-open .sticky-buybar,
  body.ijd-chat-open .bundle-mobile-sticky {
    display: none !important;
  }
}

/* Masaüstünde de asistan açıkken çakışma olmasın */
@media (min-width: 901px) {
  body.ijd-chat-open .sticky-buybar { z-index: 940 !important; }
}

/* --------------------------------------------------------------------------
   39) BRİSA SANAL POS BANNER — AÇIK, FERAH TASARIM
   --------------------------------------------------------------------------
   Koyu tema dar ve sıkışık duruyordu. Açık zemin + altın vurgu ile sade,
   ferah ve premium bir görünüm; mobil öncelikli yerleşim.
   -------------------------------------------------------------------------- */
.ijd-pos-banner {
  display: block;
  margin: 0 0 18px;
  padding: 26px 26px 22px;
  border-radius: 20px;
  border: 1px solid rgba(184, 148, 31, 0.30);
  background:
    radial-gradient(130% 120% at 88% 6%, rgba(212, 175, 55, 0.14), transparent 60%),
    linear-gradient(160deg, #fffdf7 0%, #fdf8ea 100%);
  box-shadow: 0 10px 32px -22px rgba(120, 90, 10, 0.5);
  width: auto;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.ijd-pos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.ijd-pos-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(184, 148, 31, 0.4);
  background: #ffffff;
  color: #8c6d17;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.16em;
}
.ijd-pos-kicker::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: #d4af37;
}

.ijd-pos-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 750;
  color: #0f8f68;
}
.ijd-pos-secure i { font-size: 15px; }

.ijd-pos-title {
  margin: 0 0 4px;
  font-size: clamp(20px, 2.3vw, 27px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #16202e;
  max-width: 100%;
  overflow-wrap: break-word;
}

.ijd-pos-big {
  margin: 0 0 20px;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #a9821a;
  max-width: 100%;
  overflow-wrap: break-word;
}
.ijd-pos-big span {
  display: inline-block;
  padding: 2px 12px 4px;
  margin-left: 4px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fdf0a8, #d4af37);
  color: #1a1405;
}

.ijd-pos-banks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
  min-width: 0;
  max-width: 100%;
}

.ijd-pos-bank {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 14px 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.30);
  background: #ffffff;
  text-align: center;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 3px 12px -9px rgba(15, 23, 42, 0.5);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}
.ijd-pos-bank:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.5);
}
.ijd-pos-bank b {
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.2;
  color: #16202e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.ijd-pos-bank i {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  color: #7c8798;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
/* Taksit sayısı artık gösterilmiyor (canlı PayTR tablosundan gelir) */
.ijd-pos-bank em {
  font-style: normal;
  margin-top: 5px;
  padding: 2px 11px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.16);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.5;
  color: #8c6d17;
}
.ijd-pos-bank { padding: 16px 8px; }
.ijd-pos-bank.is-featured {
  border-color: rgba(184, 148, 31, 0.55);
  background: linear-gradient(160deg, #fffdf3, #fdf3d4);
}
.ijd-pos-bank.is-featured em {
  background: linear-gradient(135deg, #fdf0a8, #d4af37);
  color: #1a1405;
}

.ijd-pos-mailorder {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(184, 148, 31, 0.32);
  background: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.6;
  color: #4a5568;
  max-width: 100%;
  box-sizing: border-box;
}
.ijd-pos-mailorder i {
  flex: 0 0 auto;
  margin-top: 1px;
  font-size: 17px;
  color: #a9821a;
}
.ijd-pos-mailorder > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.ijd-pos-mailorder strong {
  color: #16202e;
  font-weight: 850;
}

.ijd-pos-note {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.6;
  color: #6b7686;
}

@media (max-width: 720px) {
  .ijd-pos-banner { padding: 20px 16px 17px; border-radius: 17px; }
  .ijd-pos-head { gap: 9px; margin-bottom: 14px; }
  .ijd-pos-title { font-size: 18.5px; }
  .ijd-pos-big { font-size: 21px; margin-bottom: 16px; }
  .ijd-pos-banks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 14px;
  }
  .ijd-pos-bank { padding: 11px 5px 10px; border-radius: 12px; }
  .ijd-pos-bank b { font-size: 11px; }
  .ijd-pos-bank i { font-size: 9px; }
  .ijd-pos-bank em { font-size: 13.5px; padding: 1px 8px; margin-top: 4px; }
  .ijd-pos-mailorder { padding: 12px 13px; font-size: 12px; }
  .ijd-pos-note { font-size: 11.5px; gap: 4px 12px; }
}

/* Koyu tema */
body.dark-mode .ijd-pos-banner,
body.dark-theme .ijd-pos-banner {
  border-color: rgba(212, 175, 55, 0.28);
  background:
    radial-gradient(130% 120% at 88% 6%, rgba(212, 175, 55, 0.16), transparent 60%),
    linear-gradient(160deg, #14161c 0%, #101218 100%);
}
body.dark-mode .ijd-pos-title,
body.dark-theme .ijd-pos-title,
body.dark-mode .ijd-pos-bank b,
body.dark-theme .ijd-pos-bank b,
body.dark-mode .ijd-pos-mailorder strong,
body.dark-theme .ijd-pos-mailorder strong { color: #f1f4f9; }
body.dark-mode .ijd-pos-kicker,
body.dark-theme .ijd-pos-kicker { background: rgba(212, 175, 55, 0.14); color: #e9cd67; }
body.dark-mode .ijd-pos-bank,
body.dark-theme .ijd-pos-bank {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
}
body.dark-mode .ijd-pos-mailorder,
body.dark-theme .ijd-pos-mailorder { background: rgba(255, 255, 255, 0.04); color: #b9c0cc; }
body.dark-mode .ijd-pos-note,
body.dark-theme .ijd-pos-note { color: #93a1b8; }
body.dark-mode .ijd-pos-big,
body.dark-theme .ijd-pos-big { color: #e9cd67; }

   40) MOBİL DOCK YAZILARI — OKUNURLUK (ACİL DÜZELTME)
   --------------------------------------------------------------------------
   Alt çubuktaki etiketler 10px olduğu için telefonda okunmuyordu. Boyut,
   ağırlık ve kontrast artırıldı; aktif öğe altın kalıyor.
   -------------------------------------------------------------------------- */
html body .mnav-item {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  color: #eef1f7 !important;
  line-height: 1.15 !important;
}

html body .mnav-item i,
html body .mnav-item .ph {
  font-size: 23px !important;
  margin-bottom: 3px;
}

/* Aktif öğe: altın ve net */
html body .mnav-item.active,
html body .mnav-item.active i,
html body .mnav-item.active .ph,
body.light-theme .mnav-item.active,
body.light-theme .mnav-item.active i,
body.light-theme .mnav-item.active .ph,
body.light-mode .mnav-item.active,
body.light-mode .mnav-item.active i,
body.light-mode .mnav-item.active .ph {
  color: #f4c95d !important;
  font-weight: 900 !important;
}

/* Pasif öğelerde yeterli kontrast (soluk gri değil) */
html body .mnav-item:not(.active) {
  color: #cfd6e2 !important;
  opacity: 1 !important;
}

html body .mnav-item:not(.active) i,
html body .mnav-item:not(.active) .ph {
  opacity: 0.92 !important;
}

/* WhatsApp öğesi kendi yeşilini korur */
html body .mnav-item.mnav-wa,
html body .mnav-item.mnav-wa i,
html body .mnav-item.mnav-wa .ph {
  color: #25D366 !important;
}

@media (max-width: 400px) {
  html body .mnav-item { font-size: 11px !important; }
  html body .mnav-item i,
  html body .mnav-item .ph { font-size: 22px !important; }
}

/* --------------------------------------------------------------------------
   42) "ARACINIZI SEÇİN" MODALI — AÇIK TEMA (OKUNURLUK)
   --------------------------------------------------------------------------
   fitment.css modalı koyu tema için yazılmıştı (yüzey #11151d) ve açık tema
   override'ı yalnızca birkaç öğeyi kapsıyordu. Sonuç: açık temada koyu modal
   ve okunmayan yazılar. Burada CSS değişkenleri açık temaya çevrilir.
   -------------------------------------------------------------------------- */
body.light-mode .ijd-fitment,
body.light-theme .ijd-fitment,
html:not([data-theme="dark"]) body:not(.dark-mode):not(.dark-theme) .ijd-fitment {
  --ijd-fitment-surface: #fffdf7;
  --ijd-fitment-surface-raised: #ffffff;
  --ijd-fitment-line: rgba(148, 163, 184, 0.32);
  --ijd-fitment-muted: #5b6675;
  --ijd-fitment-text: #16202e;
  --ijd-fitment-gold: #a9821a;
  --ijd-fitment-gold-soft: #8c6d17;
  background:
    radial-gradient(120% 120% at 88% 4%, rgba(212, 175, 55, 0.13), transparent 60%),
    linear-gradient(160deg, #fffdf7, #fdf8ea);
  border-color: rgba(184, 148, 31, 0.30);
  box-shadow: 0 14px 40px -26px rgba(120, 90, 10, 0.55);
}

body.light-mode .ijd-fitment h2,
body.light-theme .ijd-fitment h2 { color: #16202e; }

body.light-mode .ijd-fitment__head p,
body.light-theme .ijd-fitment__head p { color: #5b6675; }

body.light-mode .ijd-fitment__head-icon,
body.light-theme .ijd-fitment__head-icon {
  color: #a9821a;
  background: rgba(212, 175, 55, 0.14);
  border-color: rgba(184, 148, 31, 0.3);
}

/* Adım başlıkları (1 Marka, 2 Model ...) */
body.light-mode .ijd-fitment__field > span,
body.light-theme .ijd-fitment__field > span {
  color: #3d4859;
  font-weight: 800;
}
body.light-mode .ijd-fitment__field > span small,
body.light-theme .ijd-fitment__field > span small { color: #6b7686; }

/* Numaralı rozetler */
body.light-mode .ijd-fitment__field > span b,
body.light-theme .ijd-fitment__field > span b {
  color: #1a1405;
  background: linear-gradient(135deg, #fdf0a8, #d4af37);
}

/* Girdi alanları */
body.light-mode .ijd-fitment__field select,
body.light-theme .ijd-fitment__field select,
body.light-mode .ijd-fitment--modal .ijd-fitment__field select,
body.light-theme .ijd-fitment--modal .ijd-fitment__field select {
  color: #16202e;
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.45);
}
body.light-mode .ijd-fitment__field select:focus,
body.light-theme .ijd-fitment__field select:focus {
  border-color: rgba(184, 148, 31, 0.7);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}

/* Devre dışı buton okunur kalsın */
body.light-mode .ijd-fitment__submit:disabled,
body.light-theme .ijd-fitment__submit:disabled {
  color: #6b7686;
  background: #eceef2;
  border-color: #d8dce3;
  opacity: 1;
}

/* Teknik rozet (PCD · ET · CB · Çap · J) */
body.light-mode .ijd-fitment__control,
body.light-theme .ijd-fitment__control {
  color: #0d7a58;
  background: #ffffff;
  border-color: rgba(15, 143, 104, 0.25);
}
body.light-mode .ijd-fitment__control i,
body.light-theme .ijd-fitment__control i { color: #0f8f68; }

/* --------------------------------------------------------------------------
   41) SEPET İÇİ ÖNERİ BLOĞU — sepeti zenginleştir, ekleme yaptır
   -------------------------------------------------------------------------- */
.ijd-cart-suggest {
  margin: 20px 0 0;
  padding: 24px 24px 20px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: linear-gradient(160deg, #ffffff 0%, #fbfcfe 100%);
  box-shadow: 0 8px 26px -20px rgba(15, 23, 42, 0.45);
}

.ijd-cs-head { margin-bottom: 18px; }
.ijd-cs-head h2 {
  margin: 0 0 5px;
  font-size: 19px;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: #16202e;
}
.ijd-cs-head p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #6b7686;
}

.ijd-cs-section { margin-bottom: 18px; }

.ijd-cs-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #8c6d17;
}
.ijd-cs-label i { font-size: 15px; }

.ijd-cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 9px;
}

.ijd-cs-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.30);
  background: #ffffff;
  text-decoration: none;
  min-width: 0;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease, border-color 0.18s ease;
}
.ijd-cs-card:hover {
  transform: translateY(-2px);
  border-color: rgba(184, 148, 31, 0.55);
  box-shadow: 0 8px 20px -12px rgba(15, 23, 42, 0.5);
}
.ijd-cs-card b {
  font-size: 14.5px;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: #16202e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ijd-cs-card i {
  font-style: normal;
  font-size: 11px;
  font-weight: 650;
  color: #7c8798;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ijd-cs-pcd b { color: #a9821a; }

.ijd-cs-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding-top: 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
}
.ijd-cs-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 18px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, #d4af37, #b8941f);
  color: #1a1405;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ijd-cs-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(184, 148, 31, 0.7);
}
.ijd-cs-btn-ghost {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.42);
  color: #16202e;
}
.ijd-cs-btn-ghost:hover { border-color: rgba(184, 148, 31, 0.6); }

@media (max-width: 720px) {
  .ijd-cart-suggest { padding: 18px 15px 15px; border-radius: 15px; }
  .ijd-cs-head h2 { font-size: 17px; }
  .ijd-cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .ijd-cs-card { padding: 10px 11px; }
  .ijd-cs-card b { font-size: 13px; }
  .ijd-cs-card i { font-size: 10px; }
  .ijd-cs-cta { gap: 7px; }
  .ijd-cs-btn { flex: 1 1 auto; justify-content: center; padding: 10px 13px; font-size: 12.5px; }
}

body.dark-mode .ijd-cart-suggest,
body.dark-theme .ijd-cart-suggest {
  background: linear-gradient(160deg, #14161c, #101218);
  border-color: rgba(255, 255, 255, 0.10);
}
body.dark-mode .ijd-cs-head h2,
body.dark-theme .ijd-cs-head h2,
body.dark-mode .ijd-cs-card b,
body.dark-theme .ijd-cs-card b { color: #f1f4f9; }
body.dark-mode .ijd-cs-card,
body.dark-theme .ijd-cs-card { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.10); }
body.dark-mode .ijd-cs-btn-ghost,
body.dark-theme .ijd-cs-btn-ghost { background: rgba(255, 255, 255, 0.06); color: #f1f4f9; }

/* --------------------------------------------------------------------------
   43) JANT → LASTİK KOMBİN BLOĞU (sepet içi akıllı öneri)
   --------------------------------------------------------------------------
   Sepette jant varsa, jantın genişlik/çap ölçüsüne uyan GERÇEK lastikler
   görsel + fiyat + "Sepete Ekle" ile listelenir.
   -------------------------------------------------------------------------- */
.ijd-combo {
  margin: 20px 0 0;
  padding: 24px 24px 18px;
  border-radius: 18px;
  border: 1px solid rgba(184, 148, 31, 0.30);
  background:
    radial-gradient(120% 120% at 90% 4%, rgba(212, 175, 55, 0.12), transparent 58%),
    linear-gradient(160deg, #fffdf7, #fdf8ea);
  box-shadow: 0 10px 30px -22px rgba(120, 90, 10, 0.5);
}

.ijd-combo__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.ijd-combo__icon {
  display: grid;
  width: 42px; height: 42px;
  place-items: center;
  border-radius: 13px;
  background: rgba(212, 175, 55, 0.16);
  border: 1px solid rgba(184, 148, 31, 0.32);
  color: #a9821a;
  font-size: 21px;
}
.ijd-combo__intro { min-width: 0; }
.ijd-combo__eyebrow {
  display: block;
  margin-bottom: 2px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8c6d17;
}
.ijd-combo__intro h2 {
  margin: 0 0 3px;
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 850;
  letter-spacing: -0.02em;
  color: #16202e;
}
.ijd-combo__intro p {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: #6b7686;
}

.ijd-combo__qty { display: grid; gap: 5px; justify-items: end; }
.ijd-combo__qty-label {
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8c6d17;
}
.ijd-combo__qty-btns { display: flex; gap: 5px; }
.ijd-combo__qty-btn {
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  background: #ffffff;
  color: #3d4859;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.16s ease;
}
.ijd-combo__qty-btn.is-active {
  border-color: rgba(184, 148, 31, 0.65);
  background: linear-gradient(135deg, #fdf0a8, #d4af37);
  color: #1a1405;
}

.ijd-combo__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.ijd-combo__card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: #ffffff;
  min-width: 0;
  box-shadow: 0 3px 14px -10px rgba(15, 23, 42, 0.4);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease, border-color 0.18s ease;
}
.ijd-combo__card:hover {
  transform: translateY(-2px);
  border-color: rgba(184, 148, 31, 0.5);
  box-shadow: 0 10px 24px -14px rgba(15, 23, 42, 0.5);
}

.ijd-combo__media {
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  border-radius: 11px;
  background: #f7f8fa;
  overflow: hidden;
}
.ijd-combo__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.ijd-combo__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ijd-combo__brand {
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8c6d17;
}
.ijd-combo__title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.35;
  color: #16202e;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ijd-combo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 10.5px;
  font-weight: 700;
}
.ijd-combo__size { color: #a9821a; }
.ijd-combo__year { color: #7c8798; }
.ijd-combo__stock { color: #0f8f68; }

.ijd-combo__foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
}
.ijd-combo__price {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #16202e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ijd-combo__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #d4af37, #b8941f);
  color: #1a1405;
  font-size: 11.5px;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}
.ijd-combo__add:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(184, 148, 31, 0.8); }
.ijd-combo__add:disabled { opacity: 0.62; cursor: wait; transform: none; }
.ijd-combo__add i { font-size: 14px; }

.ijd-combo__note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.55;
  color: #6b7686;
}
.ijd-combo__note i { flex: 0 0 auto; margin-top: 1px; font-size: 14px; color: #a9821a; }

.ijd-combo__add.is-added {
  background: linear-gradient(135deg, #34d399, #0f8f68);
  color: #ffffff;
}

@media (max-width: 760px) {
  .ijd-combo { padding: 18px 15px 14px; border-radius: 15px; }
  .ijd-combo__head { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
  .ijd-combo__qty { grid-column: 1 / -1; justify-items: stretch; }
  .ijd-combo__qty-btns { width: 100%; }
  .ijd-combo__qty-btn { flex: 1 1 0; text-align: center; }
  .ijd-combo__grid { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .ijd-combo__intro h2 { font-size: 16.5px; }
}

body.dark-mode .ijd-combo,
body.dark-theme .ijd-combo {
  background:
    radial-gradient(120% 120% at 90% 4%, rgba(212, 175, 55, 0.14), transparent 58%),
    linear-gradient(160deg, #14161c, #101218);
  border-color: rgba(212, 175, 55, 0.28);
}
body.dark-mode .ijd-combo__intro h2,
body.dark-theme .ijd-combo__intro h2,
body.dark-mode .ijd-combo__title,
body.dark-theme .ijd-combo__title,
body.dark-mode .ijd-combo__price,
body.dark-theme .ijd-combo__price { color: #f1f4f9; }
body.dark-mode .ijd-combo__card,
body.dark-theme .ijd-combo__card { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.10); }
body.dark-mode .ijd-combo__media,
body.dark-theme .ijd-combo__media { background: rgba(255, 255, 255, 0.06); }
body.dark-mode .ijd-combo__qty-btn,
body.dark-theme .ijd-combo__qty-btn { background: rgba(255, 255, 255, 0.06); color: #e6eaf0; }

/* --------------------------------------------------------------------------
   44) SEPET YENİDEN TASARIM — boş sepet deneyimi + öneri blokları
   -------------------------------------------------------------------------- */
.ijd-cart-empty .grid { grid-template-columns: minmax(0, 1fr) !important; }

/* --- Boş sepet kartı --- */
.ijd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 46px 24px 40px !important;
  text-align: center;
}
.ijd-empty__icon {
  display: grid;
  width: 74px; height: 74px;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(160deg, #fffdf3, #fdf3d4);
  border: 1px solid rgba(184, 148, 31, 0.32);
  color: #a9821a;
  font-size: 34px;
}
.ijd-empty__title {
  margin: 0;
  font-size: 21px;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: #16202e;
}
.ijd-empty__desc {
  max-width: 480px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.6;
  color: #6b7686;
}
.ijd-empty__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 4px;
}
.ijd-empty__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, #d4af37, #b8941f);
  color: #1a1405;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ijd-empty__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(184, 148, 31, 0.75); }
.ijd-empty__btn--ghost {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.42);
  color: #16202e;
}
.ijd-empty__btn--ghost:hover { border-color: rgba(184, 148, 31, 0.6); box-shadow: 0 10px 24px -14px rgba(15,23,42,.5); }

/* --- Boş sepet öneri bloğu --- */
.ijd-emptysuggest {
  margin: 0 0 22px;
  padding: 26px 24px 22px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: linear-gradient(160deg, #ffffff, #fbfcfe);
  box-shadow: 0 8px 26px -20px rgba(15, 23, 42, 0.45);
}
.ijd-es-head { margin-bottom: 18px; }
.ijd-es-head h2 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: #16202e;
}
.ijd-es-head p { margin: 0; font-size: 13px; font-weight: 600; color: #6b7686; }

.ijd-es-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 11px;
  margin-bottom: 20px;
}
.ijd-es-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.30);
  background: #ffffff;
  text-decoration: none;
  min-width: 0;
  transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), border-color 0.18s ease, box-shadow 0.18s ease;
}
.ijd-es-card:hover {
  transform: translateY(-3px);
  border-color: rgba(184, 148, 31, 0.55);
  box-shadow: 0 12px 26px -16px rgba(15, 23, 42, 0.5);
}
.ijd-es-ico {
  display: grid;
  grid-row: span 2;
  width: 46px; height: 46px;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(160deg, #fffdf3, #fdf3d4);
  border: 1px solid rgba(184, 148, 31, 0.28);
  color: #a9821a;
  font-size: 21px;
}
.ijd-es-card b {
  font-size: 14px;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: #16202e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ijd-es-card i {
  grid-column: 2;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 650;
  color: #7c8798;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ijd-es-pop { margin-bottom: 16px; }
.ijd-es-pop:last-child { margin-bottom: 0; }
.ijd-es-pop-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #8c6d17;
}
.ijd-es-pop-label i { font-size: 15px; }
.ijd-es-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ijd-es-chips a {
  padding: 9px 15px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: #ffffff;
  color: #16202e;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.16s ease;
}
.ijd-es-chips a:hover {
  border-color: rgba(184, 148, 31, 0.6);
  background: linear-gradient(135deg, #fdf0a8, #d4af37);
  color: #1a1405;
}
.ijd-es-chips--pcd a { color: #a9821a; }

@media (max-width: 720px) {
  .ijd-emptysuggest { padding: 20px 15px 17px; border-radius: 15px; }
  .ijd-es-head h2 { font-size: 17.5px; }
  .ijd-es-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ijd-es-card { grid-template-columns: 38px minmax(0,1fr); gap: 9px; padding: 12px 12px; }
  .ijd-es-ico { width: 38px; height: 38px; font-size: 18px; border-radius: 11px; }
  .ijd-es-card b { font-size: 12.5px; }
  .ijd-es-card i { font-size: 10.5px; }
  .ijd-es-chips a { padding: 8px 12px; font-size: 12px; }
  .ijd-empty { padding: 34px 18px 30px !important; }
  .ijd-empty__icon { width: 62px; height: 62px; font-size: 28px; }
  .ijd-empty__title { font-size: 18.5px; }
  .ijd-empty__cta { flex-direction: column; width: 100%; }
  .ijd-empty__btn { justify-content: center; width: 100%; }
}

body.dark-mode .ijd-emptysuggest,
body.dark-theme .ijd-emptysuggest { background: linear-gradient(160deg, #14161c, #101218); border-color: rgba(255,255,255,.10); }
body.dark-mode .ijd-es-head h2, body.dark-theme .ijd-es-head h2,
body.dark-mode .ijd-es-card b, body.dark-theme .ijd-es-card b,
body.dark-mode .ijd-empty__title, body.dark-theme .ijd-empty__title { color: #f1f4f9; }
body.dark-mode .ijd-es-card, body.dark-theme .ijd-es-card,
body.dark-mode .ijd-es-chips a, body.dark-theme .ijd-es-chips a { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); color: #e6eaf0; }
body.dark-mode .ijd-empty__btn--ghost, body.dark-theme .ijd-empty__btn--ghost { background: rgba(255,255,255,.06); color: #f1f4f9; }

/* Boş sepette sağ panel (Teslimat & Ödeme) gizlenir.
   NOT: yalnızca .grid içindeki İKİNCİ .card hedeflenir; başka hiçbir
   öğe gizlenmez (önceki denemede fazla geniş seçici içeriği yok etmişti). */
body.ijd-cart-empty .grid > .card:nth-of-type(2) { display: none !important; }
body.ijd-cart-empty .grid { grid-template-columns: minmax(0, 1fr) !important; }

/* Boş sepette sağ panel gizlenir.
   NOT: Dolu durum kuralı BİLEREK yok — !important kuralı JS'in
   panel.style.display='block' ayarını ezip paneli kalıcı gizli tutuyordu. */

/* Boş sepet davranışı TAMAMEN JavaScript'e bırakıldı.
   NEDEN: ':last-of-type' seçicisi, .grid içinde tek görünür kart kalınca
   yanlışlıkla ÜRÜNLER kartını (boş sepet mesajını) gizliyordu. Ayrıca
   '!important' JS'in display ayarını ezip paneli kalıcı gizli tutuyordu.
   JS, paneli #pForm'un üst kartından (closest('.card')) kesin buluyor. */

/* --------------------------------------------------------------------------
   45) "ARACINIZI SEÇİN" MODALI — ETİKET ve SELECT OKUNURLUĞU (ACİL)
   --------------------------------------------------------------------------
   Açık temada adım etiketleri (MARKA, MODEL, YIL...) ve select kutuları
   silik kalıyordu; zemin beyaz, kenarlık beyaz olduğu için alanlar
   görünmüyordu. Burada net kontrast kurulur.
   -------------------------------------------------------------------------- */
body.light-theme .ijd-fitment__field > span,
body.light-mode .ijd-fitment__field > span,
html:not([data-theme="dark"]) body:not(.dark-mode):not(.dark-theme) .ijd-fitment__field > span {
  color: #16202e !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}

body.light-theme .ijd-fitment__field > span small,
body.light-mode .ijd-fitment__field > span small {
  color: #6b7686 !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Numaralı adım rozetleri (1 2 3 4 5) */
body.light-theme .ijd-fitment__field > span b,
body.light-mode .ijd-fitment__field > span b {
  color: #1a1405 !important;
  background: linear-gradient(135deg, #fdf0a8, #d4af37) !important;
  border: 0 !important;
  font-weight: 900 !important;
}

/* Select kutuları: beyaz zemin + net kenarlık + koyu metin */
body.light-theme .ijd-fitment__field select,
body.light-mode .ijd-fitment__field select,
body.light-theme .ijd-fitment--modal .ijd-fitment__field select,
body.light-mode .ijd-fitment--modal .ijd-fitment__field select {
  color: #16202e !important;
  background: #ffffff !important;
  border: 1.5px solid #b9c0cc !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* Devre dışı select'ler krem zeminde kayboluyordu -> beyaz zemin + kesik kenarlık */
body.light-theme .ijd-fitment__field select:disabled,
body.light-mode .ijd-fitment__field select:disabled {
  color: #8b95a3 !important;
  background: #ffffff !important;
  border: 1.5px dashed #c3cad6 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #8b95a3 !important;
}

/* Placeholder / boş select metni net olsun */
body.light-theme .ijd-fitment__field select option,
body.light-mode .ijd-fitment__field select option {
  color: #16202e !important;
  background: #ffffff !important;
}
body.light-theme .ijd-fitment__field select:invalid,
body.light-mode .ijd-fitment__field select:invalid {
  color: #6b7686 !important;
}

/* Modal biraz daha ferah */
body.light-theme .ijd-fitment--modal .ijd-fitment__form,
body.light-mode .ijd-fitment--modal .ijd-fitment__form,
.ijd-fitment--modal .ijd-fitment__form {
  gap: 12px 14px !important;
}
body.light-theme .ijd-fitment--modal .ijd-fitment__field,
body.light-mode .ijd-fitment--modal .ijd-fitment__field,
.ijd-fitment--modal .ijd-fitment__field {
  gap: 7px !important;
}
body.light-theme .ijd-fitment--modal .ijd-fitment__field select,
body.light-mode .ijd-fitment--modal .ijd-fitment__field select,
.ijd-fitment--modal .ijd-fitment__field select {
  min-height: 42px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
}
body.light-theme .ijd-fitment--modal,
body.light-mode .ijd-fitment--modal,
.ijd-fitment--modal {
  padding: 22px 22px 18px !important;
}

body.light-theme .ijd-fitment__field select:focus,
body.light-mode .ijd-fitment__field select:focus {
  border-color: #b8941f !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.20) !important;
}

/* Devre dışı "Kaydet ve Teyit Et" butonu okunur kalsın */
body.light-theme .ijd-fitment__submit:disabled,
body.light-mode .ijd-fitment__submit:disabled {
  color: #6b7686 !important;
  background: #eceef2 !important;
  border-color: #d8dce3 !important;
  opacity: 1 !important;
}

/* "Uyumun nasıl hesaplanıyor?" bağlantısı */
body.light-theme .ijd-fitment__hint,
body.light-mode .ijd-fitment__hint,
body.light-theme .ijd-fitment a,
body.light-mode .ijd-fitment a {
  color: #8c6d17 !important;
  font-weight: 750 !important;
}

/* --------------------------------------------------------------------------
   21) YAZDIRMA — cam efektleri kapat
   -------------------------------------------------------------------------- */ — cam efektleri kapat
   -------------------------------------------------------------------------- */ — cam efektleri kapat
   -------------------------------------------------------------------------- */ — cam efektleri kapat
   -------------------------------------------------------------------------- */ — cam efektleri kapat
   -------------------------------------------------------------------------- */
@media print {
  * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
}

/* ==========================================================================
   46) "ARACINIZI SECIN" MODALI - SON OKUNURLUK OVERRIDE (YUKSEK OZGULLUK)
   --------------------------------------------------------------------------
   fitment.css icindeki `.ijd-fitment select:disabled { opacity:.42 }` ve
   `.ijd-fitment select { background: var(--surface-raised) }` kurallari
   onceki denemeleri eziyordu. Burada `html body` oneki + `!important` ile
   kesin ustunluk kurulur ve dosyanin en sonunda yer alir.
   ========================================================================== */
html body .ijd-fitment select,
html body.light-theme .ijd-fitment select,
html body.light-mode .ijd-fitment select {
  color: #16202e !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1.5px solid #b9c0cc !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #16202e !important;
  font-weight: 700 !important;
}

html body .ijd-fitment select:disabled,
html body.light-theme .ijd-fitment select:disabled,
html body.light-mode .ijd-fitment select:disabled,
html body .ijd-fitment--modal select:disabled {
  color: #8b95a3 !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1.5px dashed #b9c0cc !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #8b95a3 !important;
}

html body .ijd-fitment select option {
  color: #16202e !important;
  background: #ffffff !important;
}

html body .ijd-fitment__field > span,
html body.light-theme .ijd-fitment__field > span,
html body.light-mode .ijd-fitment__field > span {
  color: #16202e !important;
  opacity: 1 !important;
  font-weight: 850 !important;
  font-size: 10.5px !important;
}

html body .ijd-fitment__submit:disabled {
  color: #6b7686 !important;
  background: #eceef2 !important;
  border: 1px solid #d8dce3 !important;
  opacity: 1 !important;
}