/* =====================================================================
   Çakır Mühendislik — E.C.A. & DemirDöküm Ürün Kataloğu
   Tasarım sistemi: tokenlar → temel → bileşenler → sayfalar
   Marka renkleri resmî sitelerden alınmıştır:
     DemirDöküm  #0057B7 / #003A70   (demirdokum.com.tr stil dosyası, logo)
     E.C.A.      #009DDD / #0C356A   (eca.com.tr kurumsal logo, stil dosyası)
   ===================================================================== */

/* Yazı tipleri (SIL Open Font License; lisanslar /assets/fonts/ içinde) — üçüncü taraf bağlantısı yok.
   Latin + Türkçe karakter alt kümesi, değişken ağırlık. Yedek yazı tipi ölçüleri, web yazı tipi
   geldiğinde metnin kaymasını (CLS) önlemek için Arial üzerinden eşitlenmiştir. */
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-tr.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: optional; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/assets/fonts/plus-jakarta-sans-tr.woff2") format("woff2"); font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 105.9%; ascent-override: 91.48%; descent-override: 22.78%; line-gap-override: 0%; }
@font-face { font-family: "Jakarta Fallback"; src: local("Arial"); size-adjust: 105.97%; ascent-override: 97.95%; descent-override: 20.95%; line-gap-override: 0%; }

:root {
  /* Nötrler (antrasit metin, açık zemin) */
  --ink: #111827;
  --ink-2: #374151;
  --muted: #5b6472;
  --line: #e5e7eb;
  --line-2: #d1d5db;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f1f3f6;

  /* Platform */
  --primary: #0f2742;
  --primary-2: #1c3d63;
  --heat: #e8590c;          /* yalnızca küçük vurgu: logo, etiket */
  --heat-soft: #fff1e8;

  /* WhatsApp aksiyonu (beyaz metinle 4.5:1 üzeri) */
  --wa: #15803d;
  --wa-2: #166534;
  --wa-soft: #e9f7ee;

  /* Markalar */
  --dd: #0057b7;
  --dd-dark: #003a70;
  --dd-soft: #e8f0fa;
  --eca: #009ddd;
  --eca-dark: #0c356a;
  --eca-ink: #00618a;
  --eca-soft: #e3f5fc;

  --ok: #15803d;
  --err: #b42318;

  /* Tipografi */
  --font-head: "Plus Jakarta Sans", "Jakarta Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: .78rem;
  --fs-sm: .9rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;

  /* Şekil & derinlik */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --sh-1: 0 1px 2px rgba(17, 24, 39, .05), 0 1px 3px rgba(17, 24, 39, .04);
  --sh-2: 0 10px 30px -12px rgba(17, 24, 39, .16), 0 2px 6px rgba(17, 24, 39, .04);
  --sh-3: 0 30px 60px -24px rgba(15, 39, 66, .28);
  --ring: 0 0 0 3px rgba(0, 87, 183, .28);

  --container: 1280px;
  --header-h: 72px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: .15s;
  --t-med: .25s;

  /* z-index ölçeği */
  --z-sticky: 30;
  --z-header: 40;
  --z-float: 50;
  --z-drawer: 100;
  --z-modal: 200;
}

/* ---------------- Temel ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--sticky-top, var(--header-h)) + 16px); }
html.has-pd-nav { scroll-padding-top: calc(var(--sticky-top, var(--header-h)) + 64px); }
/* Yapışkan başlık yüksekliği (header + mobil arama / masaüstü menü); JS yalnızca gerçek değer farklıysa günceller */
:root { --sticky-top: 131px; }
@media (min-width: 1025px) { :root { --sticky-top: 122px; } }

/* Ekran dışındaki ana sayfa bölümleri görünür olana kadar düzenlenmez/çizilmez (mobil işlemci yükü) */
.page-home main > section:nth-child(n+2) { content-visibility: auto; contain-intrinsic-size: auto 760px; }
.site-footer { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* Ürün sayfası: ekran dışındaki bölümler (açıklama, teknik tablo, dokümanlar, SSS, benzer ürünler) görünene kadar düzenlenmez */
.pd-section { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.cv-off .pd-section, .cv-off .site-footer, .cv-off .page-home main > section:nth-child(n+2) { content-visibility: visible; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 800; }
h1, h2 { text-wrap: balance; } /* yalnızca az sayıdaki büyük başlıkta: dengeleme düzen maliyetini artırır */
h2 { font-size: clamp(1.55rem, 2.6vw, 2.25rem); font-weight: 800; }
h3 { font-size: 1.12rem; font-weight: 700; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--dd); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--dd); color: #fff; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 1000; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; }
.skip-link:focus { top: 12px; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .container { padding-inline: 28px; } }

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

/* ---------------- Butonlar ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 12px; border: 1.5px solid transparent; font-family: var(--font-head); font-weight: 700; font-size: .95rem; line-height: 1.1; background: var(--surface); color: var(--ink); cursor: pointer; touch-action: manipulation; text-align: center; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-2); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-2); }
.btn-outline { border-color: var(--line-2); background: var(--surface); }
.btn-outline:hover { border-color: var(--ink); }
.btn-ghost-light { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .22); }
.btn-light { background: #fff; color: var(--primary); }
.btn-light:hover { background: #eef2f7; }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: .88rem; border-radius: 10px; }
.btn-lg { min-height: 54px; padding: 0 26px; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn-icon { width: 44px; min-height: 44px; padding: 0; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--dd); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- Etiketler ---------------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--dd); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.brand-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px 2px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 800; white-space: nowrap; }
.brand-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.brand-chip.dd { background: var(--dd-soft); color: var(--dd-dark); }
.brand-chip.dd::before { background: var(--dd); }
.brand-chip.eca { background: var(--eca-soft); color: var(--eca-dark); }
.brand-chip.eca::before { background: var(--eca); }

/* ---------------- Duyuru çubuğu ---------------- */
.announcement { background: var(--primary); color: #dbe4f0; font-size: .84rem; }
.announcement .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; }
.announcement a, .announcement span { display: inline-flex; align-items: center; gap: 6px; }
.announcement a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.announcement .icon { width: 15px; height: 15px; }
.announcement .ann-right { display: flex; gap: 18px; }
@media (max-width: 760px) { .announcement .ann-right { display: none; } .announcement .container { justify-content: center; } }

/* ---------------- Header ---------------- */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid var(--line); }
.header-main { display: flex; align-items: center; gap: 20px; height: var(--header-h); }
.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.logo-mark { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(140deg, #ff8a3d, var(--heat) 60%, #b8430a); color: #fff; display: grid; place-items: center; }
.logo-mark .icon { width: 22px; height: 22px; }
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-text strong { font-family: var(--font-head); font-weight: 800; font-size: 1.06rem; letter-spacing: -.02em; }
.logo-text small { font-size: .7rem; color: var(--muted); font-weight: 600; }

.search-bar { position: relative; flex: 1; max-width: 560px; }
.search-bar input { width: 100%; height: 46px; padding: 0 112px 0 44px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--surface-2); font-size: 16px; transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast); }
.search-bar input:focus { outline: none; background: #fff; border-color: var(--dd); box-shadow: var(--ring); }
.search-bar > .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-bar button { position: absolute; right: 4px; top: 4px; bottom: 4px; padding: 0 16px; border-radius: 9px; border: 0; background: var(--primary); color: #fff; font-weight: 700; font-size: .88rem; }
.search-bar button:hover { background: var(--primary-2); }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.menu-toggle { display: none; background: var(--surface-2); border: 0; }

.main-nav { border-top: 1px solid var(--line); }
.main-nav > .container > ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; height: 48px; }
.main-nav a, .nav-trigger { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 10px; font-weight: 600; font-size: .93rem; color: var(--ink-2); background: none; border: 0; transition: background-color var(--t-fast), color var(--t-fast); }
.main-nav a:hover, .nav-trigger:hover { background: var(--surface-2); color: var(--ink); }
.main-nav a[aria-current="page"], .nav-trigger.is-current { color: var(--dd); background: var(--dd-soft); }
.main-nav .nav-spacer { margin-left: auto; }
.has-menu { position: relative; }
.nav-trigger .icon { width: 16px; height: 16px; transition: transform var(--t-fast); }
.has-menu[data-open="true"] .nav-trigger .icon { transform: rotate(180deg); }
.dropdown { position: absolute; left: 0; top: calc(100% + 6px); min-width: 300px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 10px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast); z-index: 5; }
.has-menu[data-open="true"] .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown.wide { width: min(720px, 90vw); display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.dropdown a { display: flex; height: auto; padding: 10px; gap: 12px; align-items: center; border-radius: 12px; }
.dropdown a span { display: flex; flex-direction: column; line-height: 1.3; }
.dropdown a small { color: var(--muted); font-weight: 500; font-size: .8rem; }
.dd-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--surface-2); display: grid; place-items: center; color: var(--primary); flex: none; }
.dropdown .brand-logo-item img { height: 22px; width: auto; }
.dropdown .all-link { grid-column: 1 / -1; justify-content: center; font-weight: 700; color: var(--dd); border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; margin-top: 4px; }

@media (max-width: 1024px) {
  .main-nav, .header-actions .btn-call { display: none; }
  .menu-toggle { display: inline-flex; }
  .search-bar { display: none; }
}
@media (max-width: 480px) {
  .logo-text small { display: none; }
  .header-actions .btn-wa span { display: none; }
  .header-actions .btn-wa { width: 44px; padding: 0; }
}
.mobile-search { display: none; padding: 0 0 12px; }
@media (max-width: 1024px) { .mobile-search { display: block; } .mobile-search .search-bar { display: block; max-width: none; } }

/* ---------------- Mobil çekmece ---------------- */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer:not(.is-open) .drawer-panel { content-visibility: hidden; } /* kapalı menü düzenlenmez */
.drawer-backdrop { position: absolute; inset: 0; background: rgba(9, 16, 28, .5); opacity: 0; transition: opacity var(--t-med); }
.drawer.is-open .drawer-backdrop { opacity: 1; }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 90vw); background: var(--surface); transform: translateX(100%); transition: transform .3s var(--ease); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.drawer.is-open .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.drawer-head .logo-text small { display: none; }
.drawer-nav { padding: 8px 10px; display: grid; gap: 2px; }
.drawer-nav a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 10px; border-radius: 10px; font-weight: 600; }
.drawer-nav a:hover, .drawer-nav a[aria-current="page"] { background: var(--surface-2); }
.drawer-nav .group-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 800; padding: 14px 10px 4px; }
.drawer-foot { margin-top: auto; padding: 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; }

/* ---------------- Bölüm yapısı ---------------- */
.section { padding: clamp(48px, 7vw, 96px) 0; }
.section-sm { padding: clamp(32px, 4.5vw, 56px) 0; }
.section-white { background: var(--surface); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(24px, 3.5vw, 40px); }
.section-head h2 { margin: 8px 0 8px; }
.section-head p { color: var(--muted); max-width: 640px; margin: 0; font-size: 1.04rem; }
.section-head.center { flex-direction: column; align-items: center; text-align: center; }

/* Hero: bkz. “Liquid Glass tema” bölümü */

/* ---------------- Marka kartları ---------------- */
.brand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .brand-grid { grid-template-columns: 1fr; } }
.brand-card { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(20px, 3vw, 32px); overflow: hidden; transition: box-shadow var(--t-med), transform var(--t-med) var(--ease); }
.brand-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; }
.brand-card.dd::before { background: linear-gradient(180deg, var(--dd), var(--dd-dark)); }
.brand-card.eca::before { background: linear-gradient(180deg, var(--eca), var(--eca-dark)); }
.brand-card:hover { box-shadow: var(--sh-3); transform: translateY(-3px); }
.brand-card .brand-logo { height: 34px; width: auto; margin-bottom: 14px; }
.brand-card p { color: var(--muted); margin: 0 0 14px; font-size: .96rem; }
.brand-card .cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.brand-card img.brand-product { width: 100%; aspect-ratio: 1; object-fit: contain; }
.brand-card.dd .link-arrow { color: var(--dd); }
.brand-card.eca .link-arrow { color: var(--eca-ink); }
@media (max-width: 480px) { .brand-card { grid-template-columns: 1fr; } .brand-card img.brand-product { max-width: 180px; } }

/* ---------------- Kategori kartları ---------------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
@media (max-width: 480px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .cat-card .cat-body { padding: 12px; } }
.cat-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: box-shadow var(--t-med), transform var(--t-med) var(--ease), border-color var(--t-med); }
.cat-card:hover { box-shadow: var(--sh-2); transform: translateY(-3px); border-color: transparent; }
.cat-card .cat-media { aspect-ratio: 16 / 11; background: linear-gradient(180deg, #fff, var(--surface-2)); display: grid; place-items: center; padding: 14px; }
.cat-card .cat-media img { max-height: 100%; width: auto; object-fit: contain; }
.cat-card .cat-body { padding: 14px 16px 18px; }
.cat-card h3 { margin: 0 0 4px; font-size: 1.04rem; }
.cat-card h3 a::after { content: ""; position: absolute; inset: 0; }
.cat-card p { margin: 0; color: var(--muted); font-size: .88rem; }
.cat-card .count { font-weight: 700; color: var(--ink-2); }

/* ---------------- Ürün kartı ---------------- */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1180px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 380px) { .product-grid { grid-template-columns: 1fr; } }
.catalog .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1180px) { .catalog .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .catalog .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .catalog .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .catalog .product-grid { grid-template-columns: 1fr; } }

.p-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: box-shadow var(--t-med), transform var(--t-med) var(--ease), border-color var(--t-med); }
.p-card:hover { box-shadow: var(--sh-2); transform: translateY(-3px); border-color: transparent; }
.p-card[hidden] { display: none; }
.p-media { position: relative; display: block; aspect-ratio: 1; background: linear-gradient(180deg, #fff 40%, var(--surface-2)); padding: 14px; }
.p-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s var(--ease); }
.p-card:hover .p-media img { transform: scale(1.03); }
.p-media .brand-chip { position: absolute; left: 12px; top: 12px; }
.p-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.p-cat { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.p-title { font-family: var(--font-head); font-size: 1rem; font-weight: 700; line-height: 1.3; margin: 0; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.p-title a:hover { color: var(--dd); }
.p-model { font-size: .84rem; color: var(--muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-specs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; min-height: 26px; }
.p-specs span { font-size: .75rem; font-weight: 600; padding: 3px 8px; border-radius: 7px; background: var(--surface-2); color: var(--ink-2); }
.p-price { font-size: .84rem; color: var(--muted); margin: 6px 0 0; }
.p-actions { margin-top: auto; padding-top: 10px; display: flex; gap: 8px; }
.p-actions .btn { min-height: 42px; border-radius: 10px; font-size: .88rem; }
.p-actions .btn-primary { flex: 1; padding: 0 10px; }
.p-actions .btn-wa { width: 42px; padding: 0; flex: none; }
@media (max-width: 480px) { .p-body { padding: 12px; } .p-title { font-size: .92rem; } .p-specs span:nth-child(n+3) { display: none; } }

/* ---------------- Sekmeler (segment) ---------------- */
.segment { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.segment button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: none; font-weight: 600; font-size: .9rem; color: var(--muted); transition: background-color var(--t-fast), color var(--t-fast); }
.segment button:hover { color: var(--ink); }
.segment button[aria-selected="true"], .segment button[aria-pressed="true"] { background: var(--primary); color: #fff; }

/* ---------------- Çözüm blokları (ısıtma / sıcak su) ---------------- */
.solution { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 960px) { .solution { grid-template-columns: 1fr; } }
.solution-links { display: grid; gap: 10px; margin-top: 20px; }
.solution-link { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.solution-link:hover { border-color: var(--dd); box-shadow: var(--sh-1); }
.solution-link .dd-ico { background: var(--dd-soft); color: var(--dd); }
.solution-link span { display: flex; flex-direction: column; line-height: 1.3; }
.solution-link small { color: var(--muted); }
.solution-link > .icon:last-child { margin-left: auto; color: var(--muted); }

/* ---------------- Marka keşfi ---------------- */
.discover { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .discover { grid-template-columns: 1fr; } }
.discover-col { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.discover-col header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.discover-col header img { height: 26px; width: auto; }
.discover-col ul { list-style: none; margin: 0; padding: 0; display: grid; }
.discover-col li a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 46px; padding: 0 4px; border-bottom: 1px solid var(--line); font-weight: 600; }
.discover-col li:last-child a { border-bottom: 0; }
.discover-col li a:hover { color: var(--dd); }
.discover-col li a span { font-size: .82rem; color: var(--muted); font-weight: 600; }

/* ---------------- Hesaplayıcı ---------------- */
.calc { display: grid; grid-template-columns: 1.1fr .9fr; border-radius: var(--r-xl); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2); }
.calc-form { padding: clamp(22px, 3.5vw, 40px); }
.calc-result { padding: clamp(22px, 3.5vw, 40px); background: linear-gradient(150deg, var(--dd) 0%, var(--dd-dark) 100%); color: #fff; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.calc-result .big { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.8rem, 6vw, 4.2rem); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.calc-result p { color: #dbe7f6; font-size: .9rem; margin: 6px 0 14px; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field > label, .field .label { font-weight: 600; font-size: .92rem; }
.range-row { display: flex; align-items: center; gap: 12px; }
.range-row output { min-width: 80px; text-align: right; font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
input[type="range"] { flex: 1; accent-color: var(--dd); height: 28px; }
.seg-radio { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0 0 16px; }
.seg-radio legend { font-weight: 600; font-size: .92rem; margin-bottom: 6px; padding: 0; }
.seg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.seg-radio label { min-height: 42px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 10px; border: 1.5px solid var(--line-2); font-weight: 600; font-size: .9rem; cursor: pointer; transition: all var(--t-fast); }
.seg-radio input:checked + label { background: var(--primary); border-color: var(--primary); color: #fff; }
.seg-radio input:focus-visible + label { outline: 3px solid var(--dd); outline-offset: 2px; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }

/* ---------------- Avantajlar ---------------- */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.feature { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.feature .f-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--dd-soft); color: var(--dd); margin-bottom: 14px; }
.feature h3 { margin-bottom: 6px; }
.feature p { color: var(--muted); margin: 0; font-size: .94rem; }

/* ---------------- Blog kartları ---------------- */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.guide-card { position: relative; display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; transition: box-shadow var(--t-med), transform var(--t-med) var(--ease); }
.guide-card:hover { box-shadow: var(--sh-2); transform: translateY(-3px); }
.guide-card .g-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--surface-2); color: var(--primary); }
.guide-card h3 { margin: 6px 0 0; }
.guide-card h3 a::after { content: ""; position: absolute; inset: 0; }
.guide-card p { color: var(--muted); margin: 0; font-size: .94rem; }
.guide-card .more { margin-top: auto; padding-top: 8px; font-weight: 700; color: var(--dd); display: inline-flex; gap: 6px; align-items: center; }

/* ---------------- SSS ---------------- */
.faq { display: grid; gap: 10px; max-width: 880px; margin-inline: auto; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); }
.faq details[open] { border-color: var(--line-2); box-shadow: var(--sh-1); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 20px; min-height: 56px; font-family: var(--font-head); font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; flex: none; transition: transform var(--t-med), background-color var(--t-med), color var(--t-med); }
.faq details[open] summary .plus { transform: rotate(45deg); background: var(--primary); color: #fff; }
.faq .answer { padding: 0 20px 18px; color: var(--ink-2); }
.faq .answer p:last-child { margin: 0; }
.faq .answer a { color: var(--dd); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- WhatsApp CTA ---------------- */
.wa-cta { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center; border-radius: var(--r-xl); padding: clamp(26px, 4.5vw, 56px); background: linear-gradient(120deg, var(--primary), #183a60 60%, var(--dd-dark)); color: #fff; }
.wa-cta::after { content: ""; position: absolute; right: -120px; top: -140px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 157, 221, .35), transparent 65%); pointer-events: none; }
.wa-cta h2 { color: #fff; margin-bottom: 8px; }
.wa-cta p { color: #d3deec; margin: 0; }
.wa-cta .actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; position: relative; z-index: 1; }
@media (max-width: 860px) { .wa-cta { grid-template-columns: 1fr; } .wa-cta .actions { justify-content: flex-start; } }

/* ---------------- Sayfa başlığı ---------------- */
.page-head { background: #fff; border-bottom: 1px solid var(--line); padding: 20px 0 clamp(26px, 4vw, 44px); }
.page-head h1 { font-size: clamp(1.8rem, 3.6vw, 2.75rem); margin: 18px 0 10px; }
.page-head .lead { color: var(--ink-2); max-width: 760px; font-size: 1.06rem; margin: 0; }
.page-head.brand-dd { background: linear-gradient(120deg, var(--dd) 0%, var(--dd-dark) 100%); border: 0; color: #fff; }
/* E.C.A. camgöbeği (#009DDD) beyaz metinle 4.5:1 sağlamadığı için metin zemininde aynı tonun koyusu kullanılır */
.page-head.brand-eca { background: radial-gradient(60% 120% at 100% 0%, rgba(0, 157, 221, .55), transparent 60%), linear-gradient(120deg, #007db8 0%, var(--eca-dark) 100%); border: 0; color: #fff; }
.page-head.brand-dd h1, .page-head.brand-eca h1 { color: #fff; }
.page-head.brand-dd .lead, .page-head.brand-eca .lead { color: #e6eef8; }
.page-head.brand-dd .breadcrumb ol, .page-head.brand-eca .breadcrumb ol { color: #d6e4f3; }
.page-head.brand-dd .breadcrumb [aria-current], .page-head.brand-eca .breadcrumb [aria-current] { color: #fff; }
.page-head .brand-badge { display: inline-flex; align-items: center; background: #fff; padding: 10px 14px; border-radius: 12px; margin-top: 18px; }
.page-head .brand-badge img { height: 28px; width: auto; }
.subcats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.subcats a { padding: 8px 14px; border-radius: 999px; background: var(--surface-2); font-weight: 600; font-size: .9rem; border: 1px solid transparent; }
.subcats a:hover { border-color: var(--dd); color: var(--dd); }
.page-head.brand-dd .subcats a, .page-head.brand-eca .subcats a { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); color: #fff; }
.page-head.brand-dd .subcats a:hover, .page-head.brand-eca .subcats a:hover { background: #fff; color: var(--primary); }

.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 0; margin: 0; font-size: .86rem; color: var(--muted); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: "›"; opacity: .6; }
.breadcrumb a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.breadcrumb a:hover { text-decoration-color: currentColor; }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }

/* ---------------- Katalog ---------------- */
.catalog { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; }
.filters { position: sticky; top: calc(var(--sticky-top, 121px) + 16px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; display: grid; gap: 18px; max-height: calc(100vh - var(--sticky-top, 121px) - 32px); overflow: auto; }
.filters fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 2px; }
.filters legend { font-family: var(--font-head); font-weight: 800; font-size: .92rem; margin-bottom: 6px; padding: 0; }
.opt { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px; border-radius: 9px; cursor: pointer; font-size: .94rem; }
.opt:hover { background: var(--surface-2); }
.opt input { width: 18px; height: 18px; accent-color: var(--dd); cursor: pointer; flex: none; }
.opt .count { margin-left: auto; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.input { width: 100%; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--line-2); border-radius: 11px; background: #fff; font-size: 16px; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.input:focus { outline: none; border-color: var(--dd); box-shadow: var(--ring); }
textarea.input { min-height: 110px; resize: vertical; }
.search-field { position: relative; }
.search-field .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-field .input { padding-left: 40px; }
.catalog-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.catalog-bar .result-count { margin: 0; color: var(--muted); }
.catalog-bar .result-count strong { color: var(--ink); }
.catalog-bar .sort { display: flex; align-items: center; gap: 8px; }
.catalog-bar .sort label { font-size: .88rem; color: var(--muted); white-space: nowrap; }
.catalog-bar select { width: auto; min-height: 42px; }
.filter-toggle { display: none; }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.active-filters:empty { display: none; }
.active-filters button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: .84rem; font-weight: 600; }
.active-filters button:hover { border-color: var(--err); color: var(--err); }
.load-more { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 26px; }
.load-more p { margin: 0; color: var(--muted); font-size: .88rem; }
.catalog.is-loading .product-grid { opacity: .5; }
.empty-state, .error-state { text-align: center; padding: 44px 22px; background: #fff; border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
.empty-state h3 { margin-bottom: 6px; }
.empty-state p, .error-state p { color: var(--muted); }
.empty-state .suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 18px; }
.empty-state .suggest a { padding: 8px 12px; border-radius: 999px; background: var(--surface-2); font-weight: 600; font-size: .88rem; }
@media (max-width: 960px) {
  .catalog { grid-template-columns: 1fr; }
  .filters { position: static; display: none; max-height: none; }
  .filters.is-open { display: grid; }
  .filter-toggle { display: inline-flex; }
}

/* ---------------- Ürün detay ---------------- */
.pd { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 960px) { .pd { grid-template-columns: 1fr; } }
.gallery { position: sticky; top: calc(var(--sticky-top, 121px) + 68px); }
@media (max-width: 960px) { .gallery { position: static; } }
.gallery-stage { position: relative; aspect-ratio: 1; background: radial-gradient(70% 70% at 50% 40%, #fff, #eef1f5); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }
.gallery-stage img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.gallery-stage .brand-chip { position: absolute; left: 16px; top: 16px; }
.zoom-btn { position: absolute; right: 14px; bottom: 14px; background: rgba(255, 255, 255, .92); border: 1px solid var(--line); }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.gallery-thumbs button { flex: none; width: 76px; height: 76px; padding: 6px; border-radius: 12px; border: 2px solid var(--line); background: #fff; scroll-snap-align: start; transition: border-color var(--t-fast); }
.gallery-thumbs button[aria-current="true"] { border-color: var(--dd); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pd-info .brand-link { display: inline-flex; align-items: center; gap: 10px; }
.pd-info .brand-link img { height: 26px; width: auto; }
.pd-info h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 14px 0 6px; }
.pd-model { color: var(--muted); margin: 0 0 14px; font-size: .95rem; }
.pd-model strong { color: var(--ink-2); }
.pd-summary { color: var(--ink-2); font-size: 1.02rem; }
.variant-picker { border: 0; padding: 0; margin: 4px 0 18px; }
.variant-picker legend { font-weight: 700; font-size: .92rem; margin-bottom: 8px; padding: 0; }
.variant-picker .opts { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-picker input { position: absolute; opacity: 0; pointer-events: none; }
.variant-picker label { min-height: 42px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 10px; border: 1.5px solid var(--line-2); background: #fff; font-weight: 700; font-size: .9rem; cursor: pointer; transition: all var(--t-fast); }
.variant-picker label:hover { border-color: var(--ink); }
.variant-picker input:checked + label { border-color: var(--dd); background: var(--dd-soft); color: var(--dd-dark); }
.variant-picker input:focus-visible + label { outline: 3px solid var(--dd); outline-offset: 2px; }
.variant-picker .help { margin-top: 6px; }
.key-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.key-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .96rem; }
.key-list .icon { color: var(--ok); margin-top: 3px; }
.price-panel { border: 1px solid var(--line); background: #fff; border-radius: var(--r-lg); padding: 18px; margin-bottom: 14px; }
.price-panel strong { display: block; font-family: var(--font-head); font-size: 1.15rem; }
.price-panel p { margin: 4px 0 14px; color: var(--muted); font-size: .9rem; }
.pd-cta { display: grid; gap: 10px; }
.pd-cta .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .pd-cta .row { grid-template-columns: 1fr; } }
.pd-meta-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: .92rem; }
.share { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--muted); font-size: .88rem; }
.share a, .share button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); transition: background-color var(--t-fast), color var(--t-fast); }
.share a:hover, .share button:hover { background: var(--primary); color: #fff; }

.pd-nav { position: sticky; top: var(--sticky-top, var(--header-h)); z-index: var(--z-sticky); background: rgba(255, 255, 255, .95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); margin-top: clamp(32px, 5vw, 56px); }
.pd-nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.pd-nav ul::-webkit-scrollbar { display: none; }
.pd-nav a { display: inline-flex; align-items: center; min-height: 50px; padding: 0 14px; font-weight: 700; font-size: .92rem; color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; }
.pd-nav a:hover { color: var(--ink); }
.pd-nav a[aria-current="true"] { color: var(--ink); border-color: var(--dd); }
.pd-section { padding: clamp(28px, 4vw, 48px) 0; border-bottom: 1px solid var(--line); }
.pd-section:last-of-type { border-bottom: 0; }
.pd-section > h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.source-note { font-size: .84rem; color: var(--muted); margin-top: 12px; }
.source-note a { color: var(--dd); text-decoration: underline; text-underline-offset: 3px; }

.prose { max-width: 820px; color: var(--ink-2); }
.prose .lead { font-size: 1.1rem; color: var(--ink); }
.prose h2 { font-size: 1.45rem; margin-top: 1.5em; }
.prose h3 { font-size: 1.12rem; margin-top: 1.4em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose a { color: var(--dd); text-decoration: underline; text-underline-offset: 3px; }
/* Editörden gelen tablolar ve alıntılar (sınıfsız HTML) */
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .93rem; background: #fff; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 10px 14px; border: 1px solid var(--line); vertical-align: top; }
.prose thead th { background: var(--surface-2); font-weight: 800; }
.prose tbody th { font-weight: 600; background: #fbfcfd; }
.prose blockquote { margin: 0 0 1.2em; background: var(--surface-2); border-left: 4px solid var(--dd); border-radius: 0 12px 12px 0; padding: 14px 18px; color: var(--ink-2); }
.prose img { border-radius: var(--r-md); }

.spec-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; margin-bottom: 18px; -webkit-overflow-scrolling: touch; }
.spec-wrap:focus-visible { outline: 3px solid var(--dd); }
.spec-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.spec-table caption { text-align: left; padding: 14px 16px 6px; font-family: var(--font-head); font-weight: 800; }
.spec-table th, .spec-table td { text-align: left; padding: 11px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.spec-table thead th { background: var(--surface-2); font-weight: 800; white-space: nowrap; border-top: 0; }
.spec-table tbody th { font-weight: 600; color: var(--ink-2); background: #fbfcfd; min-width: 200px; }
.spec-table .sec td { background: var(--dd-soft); color: var(--dd-dark); font-weight: 800; font-size: .85rem; letter-spacing: .02em; }
.spec-table.kv tbody th { width: 40%; }
.spec-table.multi tbody th { position: sticky; left: 0; z-index: 1; }
.spec-table td { font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .spec-table th, .spec-table td { padding: 10px 12px; } .spec-table tbody th { min-width: 150px; } }
.scroll-hint { display: none; font-size: .82rem; color: var(--muted); margin: -8px 0 16px; }
@media (max-width: 760px) { .scroll-hint { display: block; } }

.feature-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.feature-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; }
.feature-card h3 { font-size: 1rem; display: flex; gap: 10px; align-items: flex-start; }
.feature-card h3 .icon { color: var(--dd); margin-top: 1px; }
.feature-card p { margin: 0; color: var(--muted); font-size: .93rem; }

.doc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.doc-item { display: flex; gap: 12px; align-items: center; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.doc-item:hover { border-color: var(--dd); box-shadow: var(--sh-1); }
.doc-item .pdf { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: #fdecea; color: var(--err); font-size: .7rem; font-weight: 800; flex: none; }
.doc-item span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.doc-item small { color: var(--muted); font-size: .78rem; }
.doc-item strong { font-size: .93rem; overflow-wrap: anywhere; }
.doc-item > .icon { margin-left: auto; color: var(--muted); }

.final-cta { text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(26px, 4vw, 48px); }
.final-cta h2 { margin-bottom: 8px; }
.final-cta p { color: var(--muted); max-width: 560px; margin: 0 auto 18px; }

/* Lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 960px); width: 100%; }
.lightbox::backdrop { background: rgba(9, 16, 28, .82); }
.lightbox-inner { position: relative; background: #fff; border-radius: var(--r-lg); padding: 16px; }
.lightbox img { width: 100%; max-height: 80vh; object-fit: contain; }
.lightbox .close { position: absolute; right: 10px; top: 10px; background: var(--surface-2); border: 0; }
.lightbox .nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, .95); border: 1px solid var(--line); }
.lightbox .prev { left: 10px; }
.lightbox .next { right: 10px; }

/* ---------------- Form ---------------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 30px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.req { color: var(--err); }
.help { font-size: .82rem; color: var(--muted); }
.error-msg { display: none; font-size: .84rem; color: var(--err); font-weight: 600; }
.field.invalid .input { border-color: var(--err); }
.field.invalid .error-msg { display: block; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--ink-2); margin: 4px 0 6px; }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--dd); flex: none; }
.consent a { text-decoration: underline; text-underline-offset: 3px; }
.form-error-summary { display: none; border: 1px solid #f3c1bc; background: #fdf1f0; color: var(--err); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-size: .9rem; }
.form-error-summary.show { display: block; }

/* ---------------- İletişim ---------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-list { display: grid; gap: 10px; }
.contact-item { display: flex; gap: 14px; align-items: center; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); }
a.contact-item:hover { border-color: var(--dd); box-shadow: var(--sh-1); }
.contact-item .ci { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--dd-soft); color: var(--dd); flex: none; }
.contact-item .ci.wa { background: var(--wa-soft); color: var(--wa); }
.contact-item small { display: block; color: var(--muted); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.contact-item strong { font-family: var(--font-head); overflow-wrap: anywhere; }
.map-box { position: relative; min-height: 340px; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(135deg, #eaf0f7, #dfe8f2); border: 1px solid var(--line); display: grid; place-items: center; text-align: center; padding: 24px; }
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-box p { color: var(--muted); max-width: 360px; margin: 8px auto 14px; font-size: .9rem; }

/* ---------------- Footer ---------------- */
.site-footer { background: #0b1626; color: #a8b4c6; padding: clamp(44px, 6vw, 72px) 0 0; font-size: .93rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr; gap: 28px; }
.site-footer h2 { color: #fff; font-size: .95rem; margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.site-footer ul a { display: inline-flex; min-height: 32px; align-items: center; }
.site-footer a:hover { color: #fff; }
.site-footer .logo-text strong { color: #fff; }
.site-footer .logo-text small { color: #8c99ad; }
.footer-about p { margin: 14px 0; max-width: 340px; }
.footer-nap { display: grid; gap: 10px; font-style: normal; }
.footer-nap a, .footer-nap span { display: flex; gap: 10px; align-items: flex-start; }
.footer-nap .icon { width: 18px; height: 18px; margin-top: 3px; color: #7cc5ea; }
.footer-bottom { margin-top: 40px; border-top: 1px solid rgba(255, 255, 255, .09); padding: 20px 0 26px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .84rem; color: #8c99ad; }
.footer-bottom nav { display: flex; gap: 6px 16px; flex-wrap: wrap; }
.footer-note { font-size: .8rem; color: #7c899c; max-width: 820px; margin: 6px 0 0; }
@media (max-width: 1080px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } .footer-about { grid-column: 1 / -1; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-contact { grid-column: 1 / -1; } }

/* ---------------- Yüzen / mobil aksiyonlar ---------------- */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: var(--z-float); display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 20px 0 16px; border-radius: 999px; background: var(--wa); color: #fff; font-family: var(--font-head); font-weight: 700; box-shadow: 0 16px 36px -12px rgba(21, 128, 61, .65); transition: transform var(--t-fast), background-color var(--t-fast); }
.wa-float:hover { background: var(--wa-2); transform: translateY(-2px); }
.mobile-bar { display: none; }
@media (max-width: 760px) {
  .wa-float { display: none; }
  .mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-float); display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .mobile-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border-radius: 10px; font-size: .72rem; font-weight: 700; color: var(--ink-2); }
  .mobile-bar a.wa { background: var(--wa); color: #fff; }
  .mobile-bar.product { grid-template-columns: 64px 1fr; }
  .mobile-bar.product a.wa { flex-direction: row; gap: 8px; font-size: .92rem; }
  body { padding-bottom: 76px; }
}

/* ---------------- Yardımcılar ---------------- */
.toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 16px); background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 12px; font-weight: 600; font-size: .9rem; opacity: 0; pointer-events: none; transition: opacity var(--t-med), transform var(--t-med); z-index: var(--z-modal); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.is-in, .no-js .reveal { opacity: 1; transform: none; }
.img-fallback { background: repeating-linear-gradient(45deg, #f3f5f8, #f3f5f8 10px, #eceff3 10px, #eceff3 20px); }
.muted { color: var(--muted); }
.mt-0 { margin-top: 0; }
.gap-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.seo-text { columns: 2 340px; column-gap: 40px; color: var(--ink-2); }
.seo-text h2 { column-span: all; }
.seo-text p { break-inside: avoid; }
.legal { max-width: 820px; }
.legal h2 { font-size: 1.3rem; margin-top: 1.6em; }
.note-box { background: var(--surface-2); border-left: 4px solid var(--dd); border-radius: 0 12px 12px 0; padding: 14px 18px; color: var(--ink-2); font-size: .94rem; margin: 0 0 24px; }
.not-found { text-align: center; padding: clamp(56px, 10vw, 128px) 0; }
.not-found .code { font-family: var(--font-head); font-weight: 800; font-size: clamp(4.5rem, 14vw, 9rem); line-height: 1; letter-spacing: -.05em; color: var(--dd); }

/* =====================================================================
   LIQUID GLASS TEMA
   İlk tasarımın koyu gece mavisi hero'su, alev turuncusu vurgu ve yüzen
   cam kartları; tüm yüzeylerde yarı saydam, bulanık (frosted) cam katman,
   üst kenarda ışık yansıması (specular) ve renkli arka plan ağı.
   Okunabilirlik: cam yüzeyler en az %62 opak; saydamlık azaltma tercihinde
   ve backdrop-filter desteklenmeyen tarayıcılarda opak yüzeye düşer.
   ===================================================================== */
:root {
  --navy: #0a1a33;
  --navy-2: #102648;
  --flame: #c2410c;          /* beyaz metinle 5.2:1 */
  --flame-2: #f97316;
  --flame-ink: #b4380b;      /* açık zeminde metin */
  --flame-soft: #fff1e8;

  --glass: rgba(255, 255, 255, .62);
  --glass-strong: rgba(255, 255, 255, .86);
  --glass-card: rgba(255, 255, 255, .74);
  --glass-line: rgba(255, 255, 255, .75);
  --glass-edge: rgba(15, 39, 66, .08);
  --glass-blur: saturate(180%) blur(18px);
  --glass-sheen: linear-gradient(160deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .18) 32%, rgba(255, 255, 255, 0) 60%);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(15, 39, 66, .05), 0 18px 40px -24px rgba(15, 39, 66, .38);
  --glass-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(255, 255, 255, .4), 0 2px 6px rgba(15, 39, 66, .06), 0 30px 60px -28px rgba(15, 39, 66, .48);
  --glass-dark: rgba(255, 255, 255, .09);
  --glass-dark-line: rgba(255, 255, 255, .2);
  --glass-dark-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 24px 48px -24px rgba(0, 0, 0, .55);
  --bg: #eef2f8;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(255, 255, 255, .95); --glass-card: rgba(255, 255, 255, .95); --glass-strong: #fff; --glass-dark: rgba(20, 40, 72, .92); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: #fff; --glass-card: #fff; --glass-strong: #fff; --glass-dark: #18335f; --glass-blur: none; }
}

/* Arka plan ağı: camın arkasında hafif renkli ışık */
html { background: var(--bg); }
body { background: transparent; position: relative; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(40% 35% at 92% 8%, rgba(0, 157, 221, .16), transparent 70%),
  radial-gradient(38% 40% at 4% 30%, rgba(0, 87, 183, .12), transparent 70%),
  radial-gradient(35% 35% at 70% 75%, rgba(249, 115, 22, .09), transparent 70%),
  radial-gradient(45% 40% at 15% 95%, rgba(0, 157, 221, .1), transparent 70%),
  linear-gradient(180deg, #f3f6fb, #e9eef6); }

/* Ortak cam yüzey */
.glass, .p-card, .cat-card, .feature, .guide-card, .faq details, .discover-col, .solution-link, .filters, .price-panel,
.contact-item, .form-card, .doc-item, .feature-card, .final-cta, .empty-state, .error-state, .segment, .calc, .spec-wrap,
.gallery-stage, .gallery-thumbs button, .variant-picker label, .share a, .share button, .map-box, .active-filters button, .subcats a {
  /* Kaydırma performansı için içerik kartlarında canlı bulanıklık (backdrop-filter) kullanılmaz;
     cam görünümü yarı opak zemin + ışık yansıması + iç kenar parlamasıyla verilir. Canlı bulanıklık
     yalnızca yapışkan çubuklarda, menülerde ve küçük hero kartlarında. */
  background-color: var(--glass-card);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
}
.spec-wrap, .calc, .filters, .form-card, .price-panel { background-color: var(--glass-strong); }
.p-card:hover, .cat-card:hover, .guide-card:hover, .solution-link:hover, .doc-item:hover, a.contact-item:hover {
  border-color: #fff; box-shadow: var(--glass-shadow-hover); }
.section-white { background: rgba(255, 255, 255, .42); border-block: 1px solid rgba(255, 255, 255, .7); }

/* Başlık etiketi: ilk tasarımdaki alev çizgisi */
.eyebrow { color: var(--flame-ink); }
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--flame-2), var(--flame)); }
.section-head.center .eyebrow { justify-content: center; }

/* Butonlar */
.btn { border-radius: 14px; }
.btn-primary { background: linear-gradient(180deg, #1c3d63, var(--primary)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 22px -12px rgba(15, 39, 66, .7); }
.btn-primary:hover { background: linear-gradient(180deg, #24507f, var(--primary-2)); }
.btn-wa { background: linear-gradient(180deg, #179046, var(--wa)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 12px 24px -12px rgba(21, 128, 61, .75); }
.btn-wa:hover { background: linear-gradient(180deg, #15803d, var(--wa-2)); }
.btn-flame { background: linear-gradient(180deg, #cf4a10, var(--flame)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 30px -12px rgba(194, 65, 12, .8); }
.btn-flame:hover { background: linear-gradient(180deg, var(--flame), #9a3412); }
.btn-outline { background-color: var(--glass-card); background-image: var(--glass-sheen); border-color: var(--glass-line); box-shadow: var(--glass-shadow); }
.btn-outline:hover { border-color: var(--primary); }
.btn-glass { color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
.btn-glass:hover { background: rgba(255, 255, 255, .2); }

/* Header: buzlu cam */
.site-header { background: rgba(255, 255, 255, .68); border-bottom: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 10px 30px -24px rgba(15, 39, 66, .45); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); }
.main-nav { border-top: 1px solid rgba(15, 39, 66, .06); }
.search-bar input { background: rgba(255, 255, 255, .7); border-color: rgba(15, 39, 66, .12); box-shadow: inset 0 1px 2px rgba(15, 39, 66, .06); }
.announcement { background: linear-gradient(90deg, var(--navy), #13305a); }
.dropdown { background: rgba(255, 255, 255, .86); border-color: #fff; -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); }
.drawer-panel { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); }
.logo-mark { background: linear-gradient(140deg, #fb923c, #ea580c 55%, #9a3412); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 18px -8px rgba(194, 65, 12, .8); }

/* ---------------- Hero (koyu, ışıklı, cam kartlı) ---------------- */
.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--navy); color: #fff; }
.hero-glow { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(45% 60% at 88% 12%, rgba(249, 115, 22, .38), transparent 62%),
  radial-gradient(50% 70% at 6% 100%, rgba(0, 87, 183, .6), transparent 62%),
  radial-gradient(40% 55% at 62% 78%, rgba(0, 157, 221, .3), transparent 62%),
  linear-gradient(160deg, #0b1d3a 0%, var(--navy) 55%, #071226 100%); }
.hero-glow::after { content: ""; position: absolute; inset: 0; opacity: .4; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(75% 70% at 55% 40%, #000, transparent 80%); mask-image: radial-gradient(75% 70% at 55% 40%, #000, transparent 80%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-top: clamp(44px, 6.5vw, 92px); padding-bottom: clamp(56px, 7vw, 104px); }
.hero h1 { color: #fff; margin: 16px 0 18px; font-size: clamp(2.1rem, 4.6vw, 3.7rem); }
.hero h1 .hl { display: inline; background: linear-gradient(92deg, #ffd3b8, #fb923c 55%, #f97316); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .eyebrow { color: #fdba74; }
.hero-sub { color: #f1f5fb; font-weight: 600; font-size: 1.12rem; margin-bottom: 6px; }
.hero-lead { font-size: 1.12rem; color: #c9d4e8; max-width: 560px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 26px; }
.hero .quick-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .9rem; color: #9fb0c9; }
.hero .quick-links > span { margin-right: 4px; font-weight: 600; }
.hero .quick-links a { padding: 7px 14px; border-radius: 999px; color: #eaf1fb; font-weight: 600; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color var(--t-fast), border-color var(--t-fast); }
.hero .quick-links a:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .4); color: #fff; }

.hero-visual { position: relative; min-height: 500px; display: grid; place-items: center; }
.hero-visual-image { min-height: 0; display: block; }
.hero-visual-image img { width: 100%; height: auto; border-radius: var(--r-xl); box-shadow: var(--glass-dark-shadow); }
.hero-orb { position: absolute; width: min(440px, 92%); aspect-ratio: 1; border-radius: 50%; background:
  radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .34), rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, .02) 70%);
  border: 1px solid rgba(255, 255, 255, .2); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), inset 0 -30px 60px rgba(0, 157, 221, .18), 0 40px 80px -40px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-device { position: relative; z-index: 1; width: min(330px, 66%); aspect-ratio: 1; display: grid; place-items: center; }
.hero-device img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 36px 46px rgba(0, 0, 0, .5)); }
/* Süzülme yalnızca geniş ekranda ve sayfa yüklendikten bir süre sonra (mobilde işlemci ve görsel kararlılık için kapalı) */
@media (prefers-reduced-motion: no-preference) and (min-width: 961px) { .hero-device { animation: hero-float 7s ease-in-out 2.5s infinite; } }
@keyframes hero-float { 50% { transform: translateY(-12px); } }
.hero .glass, .hero-chip, .hero-mini, .hero-main-label { position: absolute; z-index: 2; color: #fff; background: var(--glass-dark); border: 1px solid var(--glass-dark-line); border-radius: 18px; box-shadow: var(--glass-dark-shadow); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); }
.hero-chip { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: .86rem; }
.hero-chip strong { display: block; font-family: var(--font-head); font-size: 1.02rem; line-height: 1.2; }
.hero-chip small { color: #c9d4e8; }
.hero-chip .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.hero-chip.c1 { top: 4%; left: 0; }
.hero-chip.c1 .ic { background: rgba(249, 115, 22, .26); color: #fdba74; }
.hero-chip.c2 { top: 46%; right: -6px; }
.hero-chip.c2 .ic { background: rgba(110, 231, 168, .2); color: #6ee7a8; }
.hero-mini { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; max-width: 250px; transition: transform var(--t-med) var(--ease), background-color var(--t-med); }
.hero-mini:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .16); }
.hero-mini img { width: 56px; height: 56px; border-radius: 12px; background: #fff; object-fit: contain; padding: 4px; flex: none; }
.hero-mini > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hero-mini strong { font-family: var(--font-head); font-size: .84rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-mini .brand-chip { align-self: flex-start; min-height: 20px; font-size: .68rem; background: rgba(255, 255, 255, .92); }
.hero-mini.m1 { top: 0; right: 0; }
.hero-mini.m2 { bottom: 18%; left: -6px; }
.hero-main-label { bottom: 2%; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px; white-space: nowrap; font-family: var(--font-head); font-size: .9rem; }
.hero-main-label .brand-chip { background: rgba(255, 255, 255, .92); }
.hero-main-label:hover { background: rgba(255, 255, 255, .16); }
@media (max-width: 1180px) { .hero-chip.c2 { right: 0; } .hero-mini.m2 { left: 0; } }
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 440px; max-width: 560px; width: 100%; margin-inline: auto; }
}
@media (max-width: 600px) {
  .hero-visual { min-height: 360px; }
  .hero-mini.m2, .hero-chip.c2 { display: none; }
  .hero-mini { max-width: 190px; }
  .hero-mini img { width: 44px; height: 44px; }
  .hero-chip { padding: 9px 12px; font-size: .8rem; }
  .hero-chip .ic { width: 32px; height: 32px; }
  .hero-chip strong { font-size: .92rem; }
  .hero-main-label { font-size: .82rem; left: 4%; right: 4%; transform: none; justify-content: center; white-space: normal; text-align: left; }
}
@media (max-width: 380px) { .hero-mini.m1 { display: none; } }

/* ---------------- Marka kartları: marka renginde cam ---------------- */
.brand-card { color: #fff; border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 30px 60px -32px rgba(10, 26, 51, .6); isolation: isolate; }
.brand-card::before { display: none; }
.brand-card::after { content: ""; position: absolute; z-index: -1; right: -90px; top: -110px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .32), rgba(255, 255, 255, .04) 60%); border: 1px solid rgba(255, 255, 255, .18); }
.brand-card.dd { background: radial-gradient(70% 90% at 0% 100%, rgba(0, 157, 221, .35), transparent 60%), linear-gradient(135deg, #0a63c9, var(--dd) 40%, var(--dd-dark)); }
.brand-card.eca { background: radial-gradient(70% 90% at 0% 100%, rgba(249, 115, 22, .22), transparent 60%), linear-gradient(135deg, #0088c7, #007db8 35%, var(--eca-dark)); }
.brand-card p { color: #e3edf9; }
.brand-card .brand-logo { height: 52px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .95); box-shadow: inset 0 1px 0 #fff, 0 10px 24px -14px rgba(0, 0, 0, .5); }
.brand-card .chip { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .26); }
.brand-card.dd .link-arrow, .brand-card.eca .link-arrow { color: #fff; }
.brand-card img.brand-product { background: rgba(255, 255, 255, .94); border-radius: 22px; padding: 10px; box-shadow: inset 0 1px 0 #fff, 0 24px 40px -24px rgba(0, 0, 0, .55); }

/* ---------------- Kategori, ürün ve diğer kartlar ---------------- */
.cat-card .cat-media, .p-media { background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .45)); }
.p-media { margin: 8px 8px 0; border-radius: calc(var(--r-lg) - 6px); }
.p-specs span { background: rgba(15, 39, 66, .06); }
.dd-ico, .feature .f-ico, .guide-card .g-ico, .contact-item .ci { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
.segment { padding: 5px; }
.segment button[aria-selected="true"], .segment button[aria-pressed="true"] { background: linear-gradient(180deg, #1c3d63, var(--primary)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 14px -8px rgba(15, 39, 66, .8); }
.calc-result { background: radial-gradient(60% 80% at 100% 0%, rgba(0, 157, 221, .4), transparent 60%), linear-gradient(150deg, var(--dd) 0%, var(--dd-dark) 100%); }
.faq details[open] { box-shadow: var(--glass-shadow-hover); }
.page-head { background: rgba(255, 255, 255, .55); border-bottom: 1px solid rgba(255, 255, 255, .8); }
.pd-nav { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.input { background: rgba(255, 255, 255, .85); }
.variant-picker input:checked + label { background: var(--dd-soft); }
.subcats a { background-color: var(--glass); }

/* WhatsApp CTA: koyu cam */
.wa-cta { background: radial-gradient(50% 90% at 100% 0%, rgba(249, 115, 22, .3), transparent 60%), radial-gradient(50% 90% at 0% 100%, rgba(0, 87, 183, .55), transparent 60%), linear-gradient(120deg, var(--navy), #13305a); border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 40px 80px -40px rgba(10, 26, 51, .7); }
.wa-cta::after { background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .02) 60%); border: 1px solid rgba(255, 255, 255, .14); }
.wa-cta .btn-ghost-light { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* ---------------- Afiş alanı (bento: 1 büyük + 2 yatay) ---------------- */
.promo-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-auto-rows: minmax(230px, auto); gap: clamp(14px, 1.6vw, 20px); }
.promo-count-1 { grid-template-columns: 1fr; }
.promo-count-2 { grid-template-columns: 1fr 1fr; }
.promo { position: relative; isolation: isolate; overflow: hidden; display: flex; gap: 18px; border-radius: var(--r-xl); padding: clamp(22px, 2.8vw, 36px); color: #fff;
  border: 1px solid rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 30px 60px -34px rgba(10, 26, 51, .65); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med); }
.promo:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 40px 70px -34px rgba(10, 26, 51, .75); }
.promo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(155deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 38%); pointer-events: none; }
.promo::after { content: ""; position: absolute; z-index: -1; width: 340px; aspect-ratio: 1; right: -120px; bottom: -150px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .26), rgba(255, 255, 255, .03) 62%); border: 1px solid rgba(255, 255, 255, .16); pointer-events: none; }
.promo-big { grid-row: span 2; flex-direction: column; justify-content: space-between; min-height: 480px; }
.promo-count-1 .promo-big, .promo-count-2 .promo-big { grid-row: auto; min-height: 320px; }
.promo-wide { align-items: center; }
.promo-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; position: relative; z-index: 1; min-width: 0; }
.promo-wide .promo-copy { flex: 1 1 56%; }
.promo-eyebrow { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 12px; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.promo-title { font-family: var(--font-head); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; font-size: clamp(1.25rem, 1.9vw, 1.6rem); text-wrap: balance; }
.promo-big .promo-title { font-size: clamp(1.6rem, 2.9vw, 2.4rem); max-width: 16ch; }
.promo-text { color: rgba(255, 255, 255, .86); font-size: .95rem; line-height: 1.5; max-width: 44ch; }
.promo-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; min-height: 44px; padding: 0 18px; border-radius: 999px; font-family: var(--font-head); font-weight: 700; font-size: .92rem;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color var(--t-fast), color var(--t-fast); }
.promo:hover .promo-btn { background: #fff; color: var(--navy); }
.promo-media { position: relative; z-index: 1; display: flex; gap: 14px; align-items: flex-end; justify-content: center; }
.promo-media img { flex: 1 1 0; min-width: 0; width: 100%; aspect-ratio: 1; object-fit: contain; padding: 10px; border-radius: 22px; background: rgba(255, 255, 255, .95); box-shadow: inset 0 1px 0 #fff, 0 26px 40px -24px rgba(0, 0, 0, .6); transition: transform .5s var(--ease); }
.promo-big .promo-media img { max-width: 230px; }
.promo-big .promo-media img:nth-child(2) { transform: translateY(-26px); }
.promo-wide .promo-media { flex: 0 1 44%; }
.promo-wide .promo-media img { max-width: 150px; }
.promo:hover .promo-media img { transform: translateY(-4px) scale(1.02); }
.promo-big:hover .promo-media img:nth-child(2) { transform: translateY(-30px) scale(1.02); }
.theme-navy { background: radial-gradient(60% 70% at 100% 0%, rgba(249, 115, 22, .42), transparent 62%), radial-gradient(60% 80% at 0% 100%, rgba(0, 87, 183, .55), transparent 62%), linear-gradient(150deg, #10284d, var(--navy)); }
.theme-dd { background: radial-gradient(60% 90% at 100% 100%, rgba(0, 157, 221, .4), transparent 60%), linear-gradient(135deg, #0a63c9, var(--dd) 45%, var(--dd-dark)); }
.theme-eca { background: radial-gradient(60% 90% at 100% 0%, rgba(255, 255, 255, .18), transparent 60%), linear-gradient(135deg, #0088c7, #007db8 40%, var(--eca-dark)); }
.theme-flame { background: radial-gradient(60% 90% at 100% 0%, rgba(253, 186, 116, .45), transparent 60%), linear-gradient(135deg, #c2410c, #9a3412 60%, #7c2d12); }
.theme-light { color: var(--ink); background-color: var(--glass-card); background-image: var(--glass-sheen); border-color: var(--glass-line); }
.theme-light .promo-text { color: var(--ink-2); }
.theme-light .promo-eyebrow { color: var(--flame-ink); background: var(--flame-soft); border-color: rgba(194, 65, 12, .15); }
.theme-light .promo-btn { background: var(--primary); color: #fff; border-color: transparent; }
.promo-image { padding: 0; display: block; background: var(--surface-2); }
.promo-image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .promo-grid, .promo-count-2 { grid-template-columns: 1fr; }
  .promo-big { grid-row: auto; min-height: 0; }
  .promo-big .promo-media img { max-width: 170px; }
  .promo-big .promo-media img:nth-child(2) { transform: none; }
}
@media (max-width: 480px) {
  .promo-wide { flex-direction: column; align-items: flex-start; }
  .promo-wide .promo-media { align-self: stretch; justify-content: flex-start; }
  .promo-wide .promo-media img { max-width: 110px; }
  .promo-big .promo-media img { max-width: 140px; }
}

/* ---------------- Sosyal medya takip kartları ---------------- */
.social-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.social-grid.count-1 { max-width: 420px; margin-inline: auto; }
.social-grid.count-2 { max-width: 860px; margin-inline: auto; }
.social-card { --net: #0f2742; --net-2: #0a1a33; --net-ink: #0f2742; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  min-height: 236px; padding: 28px 22px 24px; border-radius: var(--r-xl); color: #fff; background: radial-gradient(70% 70% at 80% 100%, rgba(255, 255, 255, .16), transparent 60%), linear-gradient(140deg, var(--net), var(--net-2));
  border: 1px solid rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 28px 56px -32px rgba(10, 26, 51, .6); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med); }
.social-card:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 38px 66px -32px rgba(10, 26, 51, .7); }
.social-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 40%); }
.social-card::after { content: ""; position: absolute; z-index: -1; width: 220px; aspect-ratio: 1; right: -70px; bottom: -90px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .02) 62%); }
.social-icon { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; margin-bottom: 6px; background: linear-gradient(160deg, rgba(255, 255, 255, .36), rgba(255, 255, 255, .1)); border: 1px solid rgba(255, 255, 255, .45);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -8px 18px rgba(0, 0, 0, .12), 0 18px 30px -14px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.social-icon .icon { width: 32px; height: 32px; stroke-width: 1.9; }
.social-name { font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; }
.social-text { color: rgba(255, 255, 255, .88); font-size: .93rem; max-width: 30ch; }
.social-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; min-height: 44px; padding: 0 22px; border-radius: 999px; background: #fff; color: var(--net-ink); font-family: var(--font-head); font-weight: 800; font-size: .95rem; box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .55); transition: transform var(--t-fast); }
.social-card:hover .social-btn { transform: scale(1.04); }
.net-instagram { --net: #c13584; --net-2: #5b2bb5; --net-ink: #a12b6e; background: radial-gradient(60% 60% at 0% 100%, rgba(253, 186, 116, .55), transparent 60%), linear-gradient(140deg, #c13584, #833ab4 60%, #405de6); }
.net-youtube { --net: #d40000; --net-2: #8f0000; --net-ink: #c40000; }
.net-facebook { --net: #1462c9; --net-2: #0b3d91; --net-ink: #1462c9; }
.net-linkedin { --net: #0a66c2; --net-2: #004182; --net-ink: #0a66c2; }
.net-x { --net: #1f2937; --net-2: #000; --net-ink: #111827; }
.net-tiktok { --net: #111; --net-2: #000; --net-ink: #111; background: radial-gradient(50% 60% at 0% 0%, rgba(37, 244, 238, .35), transparent 60%), radial-gradient(50% 60% at 100% 100%, rgba(254, 44, 85, .4), transparent 60%), #0b0b0b; }

/* ---------------- Footer: koyu, ışıklı ---------------- */
.site-footer { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 60% at 100% 0%, rgba(249, 115, 22, .16), transparent 60%), radial-gradient(40% 70% at 0% 100%, rgba(0, 87, 183, .35), transparent 60%); }
.footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.footer-social a { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #dbe6f5; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); transition: background-color var(--t-fast), color var(--t-fast); }
.footer-social a:hover { background: rgba(255, 255, 255, .18); color: #fff; }

/* Yüzen WhatsApp ve mobil çubuk */
.wa-float { background: linear-gradient(180deg, #179046, var(--wa)); border: 1px solid rgba(255, 255, 255, .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 18px 36px -12px rgba(21, 128, 61, .7); }
@media (max-width: 760px) {
  .mobile-bar { background: rgba(255, 255, 255, .78); border-top: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 -10px 30px -20px rgba(15, 39, 66, .4); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); }
}

/* ---------------- Ödeme seçenekleri (ürün detay) ---------------- */
.pay-options { margin: 0 0 14px; padding: 16px; border-radius: var(--r-lg); background-color: var(--glass-card); background-image: var(--glass-sheen); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); }
.pay-options h2 { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin: 0 0 12px; }
.pay-options h2 .icon { color: var(--flame-ink); }
.pay-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pay-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r-md); background: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .62)); border: 1px solid #fff; box-shadow: inset 0 1px 0 #fff, 0 10px 24px -18px rgba(15, 39, 66, .45); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med); }
.pay-card:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, 0 18px 32px -18px rgba(15, 39, 66, .5); }
.pay-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
.pay-transfer .pay-ico { background: var(--dd-soft); color: var(--dd); }
.pay-single .pay-ico { background: var(--eca-soft); color: var(--eca-ink); }
.pay-installment .pay-ico { background: var(--flame-soft); color: var(--flame-ink); }
.pay-body { display: flex; flex-direction: column; line-height: 1.3; }
.pay-body strong { font-family: var(--font-head); font-size: .98rem; }
.pay-body small { color: var(--muted); font-size: .8rem; }
.pay-price { display: flex; flex-direction: column; margin-top: auto; padding-top: 8px; border-top: 1px dashed rgba(15, 39, 66, .14); }
.pay-amount { font-family: var(--font-head); font-weight: 800; font-size: 1.02rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.pay-total { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pay-ask { font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.pay-note { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: .82rem; color: var(--muted); }
.pay-note .icon { flex: none; margin-top: 2px; }
@media (max-width: 340px) { .pay-grid { grid-template-columns: 1fr; } }

/* Seçeneğe göre fiyat: seçenek düğmesinde fiyat */
.variant-picker.has-prices .opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.variant-picker.has-prices label { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 58px; padding: 8px 12px; line-height: 1.2; }
.variant-picker label small { font-size: .78rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.variant-picker input:checked + label small { color: var(--dd-dark); }
[data-price-display] { font-variant-numeric: tabular-nums; }

/* ---------------- Showroom afişi (Hakkımızda) ---------------- */
.showroom { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.5fr); gap: clamp(14px, 1.6vw, 20px); padding: clamp(12px, 1.4vw, 18px); border-radius: calc(var(--r-xl) + 8px);
  background: radial-gradient(50% 70% at 0% 0%, rgba(249, 115, 22, .3), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(0, 87, 183, .55), transparent 60%), linear-gradient(140deg, #10284d, var(--navy));
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 40px 80px -40px rgba(10, 26, 51, .7); }
.showroom.no-photos { grid-template-columns: 1fr; }
.sr-info { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(18px, 2.6vw, 34px); color: #fff; border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.sr-info .eyebrow { color: #fdba74; }
.sr-info h2 { color: #fff; margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.sr-text { color: #d5e0f0; margin: 0; font-size: 1rem; }
.sr-facts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.sr-facts li { display: flex; gap: 12px; align-items: flex-start; }
.sr-facts li > .icon { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 12px; color: #fdba74; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); }
.sr-facts span { display: flex; flex-direction: column; line-height: 1.35; color: #f1f5fb; font-weight: 600; font-size: .95rem; }
.sr-facts small { color: #9fb0c9; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sr-facts a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.sr-grid { display: grid; gap: clamp(10px, 1.2vw, 14px); grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-auto-rows: minmax(170px, 1fr); min-height: clamp(360px, 38vw, 520px); }
.sr-grid.count-1 { grid-template-columns: 1fr; }
.sr-grid.count-2 { grid-template-columns: 1fr 1fr; }
.sr-grid.count-3 .is-main, .sr-grid.count-5 .is-main { grid-row: span 2; }
.sr-grid.count-4 .is-main { grid-column: 1 / -1; }
.sr-grid.count-5 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); }
.sr-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-xl); background: #0b1d3a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 20px 40px -26px rgba(0, 0, 0, .7); }
.sr-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.sr-photo:hover img { transform: scale(1.04); }
.sr-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 30%, transparent 62%, rgba(5, 12, 26, .55)); border-radius: inherit; }
.sr-photo figcaption { position: absolute; left: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 7px 14px; border-radius: 999px; color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .86rem;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); }
.sr-photo figcaption::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fb923c; box-shadow: 0 0 0 3px rgba(251, 146, 60, .3); }
@media (max-width: 960px) {
  .showroom { grid-template-columns: 1fr; }
  .sr-grid { min-height: 0; grid-auto-rows: auto; }
  .sr-photo { aspect-ratio: 1 / 1; }
  .sr-photo.is-main { aspect-ratio: 4 / 3; }
  .sr-grid.count-1 .sr-photo, .sr-grid.count-2 .sr-photo { aspect-ratio: 4 / 3; }
  .sr-grid.count-3 .is-main, .sr-grid.count-5 .is-main { grid-row: auto; grid-column: 1 / -1; }
  .sr-grid.count-3, .sr-grid.count-5 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .sr-photo figcaption { left: 8px; bottom: 8px; padding: 5px 10px; font-size: .76rem; }
  .sr-actions .btn { flex: 1 1 140px; }
}

/* Yetkili satıcı rozeti */
.dealer-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 12px 4px 9px; border-radius: 999px; font-family: var(--font-head); font-size: .8rem; font-weight: 800; letter-spacing: .01em;
  color: var(--dd-dark); background: linear-gradient(180deg, #fff, #eef4fc); border: 1px solid rgba(0, 87, 183, .2); box-shadow: inset 0 1px 0 #fff, 0 6px 14px -10px rgba(0, 58, 112, .6); }
.dealer-badge .icon { color: var(--dd); }
.dealer-badge.on-dark { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.dealer-badge.on-dark .icon { color: #6ee7a8; }
.hero-copy > .dealer-badge { display: flex; width: fit-content; margin-bottom: 16px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.brand-card .dealer-badge { margin: 0 0 12px 10px; vertical-align: middle; }
.page-head .dealer-badge { margin-top: 12px; }
.pd-brand-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.footer-dealer { margin-top: 14px; }

/* Marka logosu (yazı logonun içinde) */
.logo-brand img { height: 46px; width: auto; }
.drawer-head .logo-brand img { height: 40px; }
.site-footer .logo-brand img { height: 52px; }
@media (max-width: 480px) { .site-header .logo-brand img { height: 38px; } }

/* Mobil: canlı bulanıklık (backdrop-filter) yazılımla çizimde en pahalı işlemdir ve ilk boyamayı geciktirir.
   Telefonda cam görünümü yarı saydam zemin + ışık yansıması + kenar parlamasıyla verilir; bulanıklık kapatılır. */
@media (max-width: 960px) {
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .site-header { background: rgba(255, 255, 255, .94); }
  .pd-nav { background: rgba(255, 255, 255, .96); }
  .mobile-bar { background: rgba(255, 255, 255, .96) !important; }
  .drawer-panel, .dropdown { background: #fff; }
  .hero .glass, .hero-chip, .hero-mini, .hero-main-label { background: rgba(20, 44, 82, .72); }
  .hero-orb { background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .26), rgba(255, 255, 255, .05) 45%, rgba(255, 255, 255, .02) 70%); }
}

/* Cam yüzeylerde odak halkası görünür kalsın */
.p-card:focus-within, .cat-card:focus-within, .guide-card:focus-within { outline: 3px solid var(--dd); outline-offset: 2px; }
.promo:focus-visible, .social-card:focus-visible, .hero-mini:focus-visible, .hero-main-label:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px var(--dd); }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-device { animation: none; }
}