/* ============================================================
   toptanbandana.com — DemFabrika
   Jetonlar: MARKA-KILAVUZU.md §8 (bağlayıcı, değiştirilmez)
   Hareket:  PERFORMANS-PLAYBOOK.md §7 (yalnız transform + opacity)
   ============================================================ */

:root{
  --navy-950:#0D1226; --navy-900:#141C36; --navy-800:#1A2548; --navy-700:#233261;
  --navy-600:#30427E; --navy-500:#4359A3; --navy-400:#697DBF; --navy-300:#95A3D0;
  --navy-200:#C1C8E2; --navy-100:#DDE1EE; --navy-50:#F2F3F8;

  --ember-700:#B25910; --ember-600:#DA6B10; --ember-500:#F08025;
  --ember-400:#F6984C; --ember-200:#FDD2B0; --ember-50:#FFF4EB;

  --steel-900:#21232C; --steel-700:#484C5B; --steel-500:#73798C;
  --steel-300:#AFB3C0; --steel-200:#D3D6DE; --steel-100:#E7E9EE; --steel-50:#F6F7F9;

  --surface-base:#FFFFFF; --surface-raised:#F6F7F9; --surface-inverse:#1A2548;
  --text-primary:#141C36; --text-secondary:#484C5B; --text-muted:#5F6577;
  --text-on-inverse:#F2F3F8; --text-on-inverse-soft:#C1C8E2;
  --action:#F08025; --action-text:#B25910; --action-text-on-inverse:#F6984C;
  --border:#E7E9EE; --border-strong:#73798C; --focus-ring:#F08025;
  --elevate-inset:none;
  --tag-bg:#FFF4EB; --tag-fg:#B25910;

  /* kategori aksanı — MARKA-KILAVUZU §5, bandana kimliği (iki modda da aynı) */
  --cat-bandana:#A6543F;
  /* footer sahnesi: değerler _footer-gorsel.mjs ölçümünden geliyor */
  --surface-footer:#010918; --sahne-gok:#000612;
  /* ÜRÜN FOTOĞRAFI ZEMİNİ — görsel dosyaları her yerde saydam (beyaz zemin
     _img.mjs'te alfaya çevrildi). Beyazı PLAKA veriyor, dosya değil; böylece
     tek görsel seti hem beyaz plakada hem saydam kullanılabiliyor.
     Varsayılan (iç sayfalar): beyaz plaka — saydam görsel beyaz plakada, opak
     beyaz zeminli görselle birebir aynı görünür.
     Ana sayfa: plaka saydam (aşağıdaki .anasayfa bloğu). */
  --surface-photo:#FFFFFF; --photo-dim:none;
  --sahne-zemin:#FFFFFF;
  /* hero-boxes ızgarası */
  --hb-line:rgba(20,28,54,.07); --hb-plus:rgba(20,28,54,.11); --hb-mark:rgba(26,37,72,.34);
  --hb-tint:.50; --hb-mark-lit:.45;

  --font-display:'Oswald',Impact,sans-serif;
  --font-body:'Montserrat',system-ui,sans-serif;

  --shadow-sm:0 1px 2px rgba(13,18,38,.06), 0 2px 6px rgba(13,18,38,.05);
  --shadow:0 2px 6px rgba(13,18,38,.06), 0 10px 28px rgba(13,18,38,.10);
  --shadow-lg:0 4px 12px rgba(13,18,38,.08), 0 24px 56px rgba(13,18,38,.16);
  --shadow-ember:0 2px 6px rgba(240,128,37,.22), 0 12px 30px rgba(240,128,37,.24);

  --ease-spring:cubic-bezier(.22,1,.36,1);

  /* aralık ölçeği — kasıtlı, rastgele adım yok */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
  --wrap:1180px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --surface-base:#0D1226; --surface-raised:#141C36; --surface-inverse:#1A2548;
    --text-primary:#F2F3F8; --text-secondary:#C1C8E2; --text-muted:#95A3D0;
    --action-text:#F6984C; --action-text-on-inverse:#F6984C;
    --border:#233261; --border-strong:#697DBF; --focus-ring:#F6984C;
    --elevate-inset:inset 0 1px 0 rgba(255,255,255,.06);
    --tag-bg:rgba(240,128,37,.14); --tag-fg:#F6984C;
    --surface-photo:#FFFFFF; --photo-dim:none;
    --sahne-zemin:#FFFFFF;
    --hb-line:rgba(242,243,248,.08); --hb-plus:rgba(242,243,248,.12); --hb-mark:rgba(255,255,255,.95);
    --hb-tint:.45; --hb-mark-lit:.50;
    --shadow-sm:0 1px 2px rgba(0,0,0,.34);
    --shadow:0 2px 6px rgba(0,0,0,.38), 0 10px 28px rgba(0,0,0,.44);
    --shadow-lg:0 4px 12px rgba(0,0,0,.44), 0 24px 56px rgba(0,0,0,.50);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --surface-base:#0D1226; --surface-raised:#141C36; --surface-inverse:#1A2548;
  --text-primary:#F2F3F8; --text-secondary:#C1C8E2; --text-muted:#95A3D0;
  --action-text:#F6984C; --action-text-on-inverse:#F6984C;
  --border:#233261; --border-strong:#697DBF; --focus-ring:#F6984C;
  --elevate-inset:inset 0 1px 0 rgba(255,255,255,.06);
  --tag-bg:rgba(240,128,37,.14); --tag-fg:#F6984C;
  --surface-photo:#FFFFFF; --photo-dim:none;
  --sahne-zemin:#FFFFFF;
  --hb-line:rgba(242,243,248,.08); --hb-plus:rgba(242,243,248,.12); --hb-mark:rgba(255,255,255,.95);
  --hb-tint:.45; --hb-mark-lit:.50;
  --shadow-sm:0 1px 2px rgba(0,0,0,.34);
  --shadow:0 2px 6px rgba(0,0,0,.38), 0 10px 28px rgba(0,0,0,.44);
  --shadow-lg:0 4px 12px rgba(0,0,0,.44), 0 24px 56px rgba(0,0,0,.50);
  color-scheme: dark;
}

/* ANA SAYFA: ürün fotoğrafları plakasız, sayfa zemininde yüzer.
   Yalnız burada — iç sayfalarda beyaz plaka korunuyor (yukarıdaki varsayılan).
   Jetonlar body'de geçersiz kılınıyor, iki tema bloğundan da sonra geldiği için
   açık ve karanlık modda birlikte çalışır. */
body.anasayfa{ --surface-photo:transparent; --sahne-zemin:transparent; }

/* ---------- temel ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--surface-base); color:var(--text-primary);
  font-family:var(--font-body); font-size:16px; font-weight:400; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--action-text); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--focus-ring); outline-offset:3px; border-radius:2px}

h1,h2,h3,h4{
  font-family:var(--font-display); font-weight:600;
  text-transform:uppercase; letter-spacing:-.01em;
  /* TR kuralı: çok satırlı büyük harf başlıkta line-height ≥ 1.24 (İ/Ö/Ü çarpışması) */
  line-height:1.24; margin:0;
}
h1{font-size:clamp(30px,5.2vw,54px)}
h2{font-size:clamp(24px,3.6vw,38px)}
h3{font-size:clamp(18px,2.2vw,23px)}
h4{font-size:16px; letter-spacing:.02em}
p{margin:0 0 var(--sp-4)}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--sp-5)}
/* Bölüm dolgusu referansla eşitlendi (satenuykubandi `section{padding:var(--s9) 0}`,
   --s9=88px). Bende --sp-9=96px olduğu için iki bölüm arası 192px'e çıkıyordu ve
   "anlamsız büyük boşluk" olarak okunuyordu. 88 → arası 176px. */
.section{padding:88px 0}
.section-tight{padding:var(--sp-8) 0}
.section-raised{background:var(--surface-raised)}
/* Karşıt yüzeyler: .section-inverse, .hero ve .cta-band HER İKİ MODDA da koyudur.
   Bu yüzden üçü de aynı "ters yüzey" kurallarını paylaşır — açık modda
   --text-primary/--action-text kullanırlarsa lacivert üstünde lacivert yazı çıkar. */
.section-inverse{background:var(--surface-inverse); color:var(--text-on-inverse)}
/* .cta-band her iki modda koyudur, .hero DEĞİL (referansla birebir: --surface-raised).
   Bu yüzden hero normal jetonları kullanır; yalnız cta-band ters yüzey kuralında. */
.section-inverse h1,.section-inverse h2,.section-inverse h3,
.cta-band h1,.cta-band h2,.cta-band h3{color:var(--text-on-inverse)}
.section-inverse p,.cta-band p{color:var(--text-on-inverse-soft)}
/* :not(.btn) ŞART. Yoksa bu kural (.section-inverse a = özgüllük 0,1,1)
   .btn-accent'i (0,1,0) ezer ve turuncu buton turuncu yazı taşır: ölçüldü 1,2:1.
   Marka kılavuzu §2: turuncu yüzey navy-900 yazı taşır, turuncu yazı değil. */
.section-inverse a:not(.btn),.cta-band a:not(.btn){color:var(--action-text-on-inverse)}

.eyebrow{
  font-family:var(--font-display); font-size:13px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--action-text);
  margin:0 0 var(--sp-3); display:block;
}
.section-inverse .eyebrow,.cta-band .eyebrow{color:var(--action-text-on-inverse)}
.lead{font-size:clamp(16px,1.9vw,19px); color:var(--text-secondary); max-width:62ch}
.section-inverse .lead{color:var(--text-on-inverse-soft)}
.muted{color:var(--text-muted); font-size:14px}

/* ---------- navigasyon ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--surface-base) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-in{display:flex; align-items:center; gap:var(--sp-4); height:68px}
/* min-width:0 + shrink: dar ekranda marka bloğu küçülsün, CTA'yı dışarı itmesin */
/* min-height: WCAG 2.5.8 dokunma hedefi. Dar ekranda logo 21px'e inince
   marka linki 137x21 kalıyordu. */
.brand{display:flex; align-items:center; gap:10px; min-width:0; flex:0 1 auto;
  overflow:hidden; min-height:26px}
.brand:hover{text-decoration:none}
/* Satır içi SVG: renk currentColor'dan gelir, yükseklik CSS'ten.
   width/height niteliği YOK — viewBox oranı (6,5:1) kendi işini görür. */
.nav-logo{height:24px; width:auto; flex-shrink:0; color:var(--text-primary);
  transition:color .2s var(--ease-spring)}
.brand:hover .nav-logo{color:var(--action)}
/* Ayraç, wordmark gizlendiğinde BİRLİKTE gizlenir; yoksa hiçbir şeyi ayırmayan
   boş bir çizgi kalır (satenuykubandi'de 420px altında yaşandı). */
.brand-sep{display:none; width:1px; align-self:stretch; margin:6px 2px;
  background:var(--border); flex-shrink:0}
.brand-name .accent{color:var(--action-text)}
/* Marka adı da logoyla BİRLİKTE turuncuya döner (satenuykubandi ile aynı davranış).
   Metinde --action değil --action-text: --action düz zeminde AA'yı geçmiyor. */
.brand-name{transition:color .2s var(--ease-spring)}
.brand:hover .brand-name,.brand:focus-visible .brand-name{color:var(--action-text)}
.brand-txt{display:flex; flex-direction:column; line-height:1.24; min-width:0}
.brand-txt > span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Dar ekranda alan adı düşer; 640px altında marka metni tamamen kalkar.
   Kırpılmış "T." göstermektense logoyu tek başına bırakmak daha temiz —
   kimliği zaten sayfa H1'i taşıyor. */
@media(max-width:1199px){ .brand-dom{display:none} }
@media(max-width:640px){
  .brand-txt,.brand-sep{display:none}
  .nav-logo{height:22px}
  .nav-in{gap:var(--sp-3)}
}
@media(max-width:480px){ .wrap{padding:0 var(--sp-4)} }
@media(max-width:420px){ .nav-logo{height:18px} }
/* 1000–1149px: masaüstü menü açılır ama daraldır — marka metni yer bırakmaz */
@media(min-width:1000px) and (max-width:1149px){ .brand-txt,.brand-sep{display:none} }
@media(min-width:641px) and (max-width:999px){ .brand-sep{display:block} }
@media(min-width:1150px){ .brand-sep{display:block} }
.brand-name{font-family:var(--font-display); font-size:16px; font-weight:600;
  letter-spacing:.01em; color:var(--text-primary); text-transform:uppercase}
.brand-dom{font-size:10px; letter-spacing:.08em; color:var(--text-muted)}
/* Boşluk --sp-5 (24px) iken menü 655px istiyordu ve marka onun için sıkışıp
   site adını ellipsis ile kırpıyordu (ölçüldü: 1150pxte ad 117px istiyor, 97px alıyor).
   18px, 6 boşlukta 36px kazandırıyor; marka artık kırpılmıyor. */
.nav-links{display:none; gap:18px; margin-left:auto; align-items:center}
.nav-link{
  /* WCAG 2.2 AA 2.5.8: dokunma hedefi ≥24px. 14px yazı tek başına 21px kalıyordu. */
  display:inline-flex; align-items:center; min-height:26px;
  font-size:14px; font-weight:500; color:var(--text-secondary); white-space:nowrap;
  transition:color .2s var(--ease-spring), transform .2s var(--ease-spring);
}
.nav-link:hover{color:var(--action-text); text-decoration:none; transform:translateY(-1px)}
.nav-link[aria-current="page"]{color:var(--text-primary); font-weight:600}
.nav-cta{margin-left:auto; flex-shrink:0; display:flex; gap:10px; align-items:center}
@media(min-width:1000px){
  .nav-links{display:flex}
  .nav-cta{margin-left:0}
  .hamburger{display:none}
}

.hamburger{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; padding:0 9px; border:1px solid var(--border);
  border-radius:10px; background:var(--surface-base); cursor:pointer;
  transition:transform .2s var(--ease-spring), box-shadow .2s var(--ease-spring);
}
.hamburger span{display:block; height:2px; background:var(--text-primary); border-radius:2px}
.hamburger:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm)}
.hamburger:active{transform:scale(.95)}
/* Masaüstünde gizle. Bu kural .hamburger{display:flex} tanımından SONRA gelmeli,
   yoksa aynı özgüllükte sonraki kural kazanır ve düğme 1440px'te de görünür. */
@media(min-width:1000px){ .hamburger{display:none} }

.mnav{
  display:none; border-top:1px solid var(--border); background:var(--surface-base);
  padding:var(--sp-3) 0 var(--sp-5);
}
.mnav.open{display:block}
.mnav a{
  display:block; padding:12px var(--sp-5); font-size:15px; font-weight:500;
  color:var(--text-primary); border-radius:8px;
}
.mnav a:hover{background:var(--surface-raised); text-decoration:none}
@media(min-width:1000px){ .mnav{display:none !important} }

/* ---------- butonlar ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-display); font-size:14px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  /* TR kuralı: buton yazısı büyük harf ve mobilde sarıyor → 1.24 alt sınır */
  line-height:1.24;
  padding:15px 26px; border-radius:10px; border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:transform .22s var(--ease-spring), box-shadow .22s var(--ease-spring),
             background-color .22s var(--ease-spring), color .22s var(--ease-spring);
}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn:focus-visible{outline:3px solid var(--focus-ring); outline-offset:3px}

/* Turuncu zemin ASLA beyaz yazı taşımaz — navy-900 (MARKA-KILAVUZU §2) */
.btn-accent{background:var(--action); color:#141C36; box-shadow:var(--shadow-ember)}
.btn-accent:hover{background:var(--ember-400); box-shadow:0 6px 16px rgba(240,128,37,.3), 0 18px 40px rgba(240,128,37,.28)}

.btn-solid{background:var(--navy-800); color:var(--navy-50); box-shadow:var(--shadow)}
.btn-solid:hover{background:var(--navy-700)}

.btn-outline{background:transparent; color:var(--text-primary); border-color:var(--border-strong)}
.btn-outline:hover{background:var(--surface-raised)}
.btn-ghost{background:transparent; color:var(--text-primary); border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--surface-raised); border-color:var(--text-primary)}
.section-inverse .btn-ghost,.cta-band .btn-ghost{
  color:var(--text-on-inverse); border-color:rgba(242,243,248,.38)}
.section-inverse .btn-ghost:hover,.cta-band .btn-ghost:hover{
  background:rgba(242,243,248,.12); border-color:var(--text-on-inverse)}

.btn-sm{padding:11px 18px; font-size:12px}

/* ---------- hero ---------- */
/* ===== HERO — satenuykubandi.com ile BİREBİR aynı =====
   Zemin `--surface-raised`: açık modda #F6F7F9, karanlık modda #141C36.
   Yani hero LACİVERT DEĞİL, sayfanın yükseltilmiş yüzeyi. Üstüne iki çok düşük
   yoğunluklu radyal gradyan biniyor (turuncu %12, navy-500 %16).
   Burada `background` kısayolu bilerek kullanılıyor: son katman zaten zemin
   rengini veriyor, ayrı `background-color` gereksiz. */
.hero{
  position:relative; overflow:hidden;
  padding:var(--sp-7) 0 var(--sp-8);
  background:
    radial-gradient(1100px 620px at 88% -8%, color-mix(in srgb,var(--action) 12%,transparent), transparent 62%),
    radial-gradient(820px 520px at 4% 4%, color-mix(in srgb,var(--navy-500) 16%,transparent), transparent 60%),
    var(--surface-raised);
}
/* Referansta bu kırılmada `padding:var(--s9) 0 var(--s9)` var ve --s9 = 88px.
   Bizim --sp-9 96px olduğu için jeton yerine referans değeri birebir yazıldı. */
@media(min-width:900px){ .hero{padding:88px 0;} }
/* katmanlı radyal gradyanlar + ince ızgara dokusu (jenerik düz zemin değil) */
.hero .wrap{position:relative; z-index:1}
.hero h1{max-width:16ch}
.hero .lead{margin-top:var(--sp-5)}
.hero-grid{display:grid; gap:var(--sp-7); align-items:center}
@media(min-width:920px){ .hero-grid{grid-template-columns:1.08fr .92fr; gap:var(--sp-8)} }
/* iç sayfa hero'su: görsel daha dar, metin nefes alsın */
@media(min-width:920px){ .hero-grid-sm{grid-template-columns:1.35fr .65fr} }
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-6)}

/* --- editoryal görsel (üretim hattı, belge): gradyan örtü + renk katmanı --- */
.hero-media{position:relative; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg)}
.hero-media img{width:100%; aspect-ratio:3/1; object-fit:cover}
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(13,18,38,.6), transparent 58%);
}
.hero-media::before{
  content:''; position:absolute; inset:0; z-index:1; mix-blend-mode:multiply;
  background:linear-gradient(120deg, rgba(26,37,72,.34), rgba(240,128,37,.12));
}

/* --- ÜRÜN FOTOĞRAFI (beyaz zemin): örtü YOK, ürün kartta yüzer --- */
.pshot{
  position:relative; border-radius:18px; overflow:hidden; background:#fff;
  box-shadow:var(--shadow-lg); padding:var(--sp-4);
  border:1px solid rgba(13,18,38,.06);
}
.pshot img{width:100%; height:auto; border-radius:10px; display:block}
.pshot::after,.pshot::before{content:none}
/* koyu bölümde ürün kartı hafif sıcak bir hâle alır */
.section-inverse .pshot{
  box-shadow:0 4px 14px rgba(0,0,0,.28), 0 30px 70px rgba(0,0,0,.42),
             0 0 0 1px rgba(255,255,255,.08);
}
.pshot-cap{
  display:block; margin-top:var(--sp-3); font-size:12px; letter-spacing:.05em;
  text-transform:uppercase; font-family:var(--font-display); color:var(--steel-500);
  text-align:center;
}
/* ızgarada ürün kartı */
.pgrid{display:grid; gap:var(--sp-5); grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){ .pgrid{grid-template-columns:repeat(4,1fr)} }
.pgrid .pshot{padding:var(--sp-3); box-shadow:var(--shadow-sm)}
.pgrid .pshot img{aspect-ratio:1/1; object-fit:cover}

/* rakam şeridi */
/* Rakam şeridi KART hâline getirildi (kullanıcı: "hero'daki rakamsal göstergeler çok
   belli değil"). Çıplak metin hero'nun gradyanı üzerinde eriyordu; her rakam artık
   kendi yüzeyinde, ince çerçeve + hafif gölgeyle. */
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); margin-top:var(--sp-7)}
/* Hero'da şerit iki sütunlu düzenin SOL kolonunda; dörde bölününce kart 130px'e
   düşüyor ve "Adetten üretim" gibi etiketler ikiye kırılıyor. Hero 2x2 kalır,
   dörtlü sıra yalnız tek başına duran şeritte (hakkımızda) kullanılır. */
@media(min-width:640px){ .section-tight .stats{grid-template-columns:repeat(4,1fr)} }
.stats > div{
  padding:var(--sp-4) var(--sp-5);
  background:color-mix(in srgb, var(--surface-base) 62%, transparent);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow-sm), var(--elevate-inset);
}
/* Hakkımızda: şerit kendi yüzeyinde (section-raised) duruyor; kartlar bir tık daha
   açık olsun ki şeridin içinde de ayrışsınlar. Aksi hâlde şerit ile altındaki bölüm
   aynı renkte kalıp geçiş kayboluyordu (kullanıcı bildirdi). */
.section-tight .stats > div{background:var(--surface-base)}
.section-tight.section-raised{border-bottom:1px solid var(--border)}
.stat-n{font-family:var(--font-display); font-size:clamp(26px,3.4vw,36px); font-weight:600;
  /* muaf: yalnız rakam, tek satır, Türkçe aksan işareti yok */
  line-height:1.15; color:var(--action-text)}
.stat-l{font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-muted); margin-top:2px}

/* ---------- kartlar / ızgara ---------- */
.grid{display:grid; gap:var(--sp-5)}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1000px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

/* yükseklik sistemi: taban → yükseltilmiş → yüzen */
.card{
  background:var(--surface-base); border:1px solid var(--border); border-radius:14px;
  padding:var(--sp-5); box-shadow:var(--shadow-sm), var(--elevate-inset);
  transition:transform .26s var(--ease-spring), box-shadow .26s var(--ease-spring),
             border-color .26s var(--ease-spring);
}
.section-raised .card{background:var(--surface-base)}
a.card:hover{transform:translateY(-4px); box-shadow:var(--shadow), var(--elevate-inset);
  border-color:var(--ember-200); text-decoration:none}
a.card:active{transform:translateY(-1px) scale(.995)}
a.card:focus-visible{outline:3px solid var(--focus-ring); outline-offset:3px}
.card h3{margin-bottom:var(--sp-2); color:var(--text-primary)}
.card p{font-size:15px; color:var(--text-secondary); margin:0}
.card-media{
  margin:calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-5);
  border-radius:14px 14px 0 0; overflow:hidden; position:relative;
}
.card-media img{width:100%; aspect-ratio:16/7; object-fit:cover;
  transition:transform .5s var(--ease-spring)}
.card-media::after{content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(13,18,38,.34), transparent 62%)}
a.card:hover .card-media img{transform:scale(1.045)}
/* ürün fotoğrafı kart başlığında: beyaz zemin, örtü yok, kare oran */
.card-media.is-product{background:#fff}
.card-media.is-product img{aspect-ratio:4/3; object-fit:contain; padding:10px}
.card-media.is-product::after{content:none}

.tag{
  display:inline-block; font-family:var(--font-display); font-size:11px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:6px;
  background:var(--tag-bg); color:var(--tag-fg); margin-bottom:var(--sp-3);
}

/* ---------- özellik listesi ---------- */
/* Madde arası 12px, 15px/1.7 metinde satırlar birbirine giriyordu → 16px.
   ÖLÇÜM: madde listesi kendinden önceki bloğa 0px yapışıyordu (`.ticks{margin:0}`);
   varyant çipleriyle ilk madde arasında hiç boşluk yoktu — kullanıcı bildirdi. */
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-4)}
.varyant-blok + .ticks,.varyantlar + .ticks{margin-top:var(--sp-5)}
.ticks li{position:relative; padding-left:30px; font-size:15px; color:var(--text-secondary)}
.ticks li::before{
  content:''; position:absolute; left:0; top:8px; width:16px; height:16px;
  border-radius:4px; background:var(--action);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='%23000' stroke-width='3.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='%23000' stroke-width='3.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}
.section-inverse .ticks li{color:var(--text-on-inverse-soft)}

/* ---------- teknik tablo ---------- */
.spec{width:100%; border-collapse:collapse; font-size:15px}
.spec th,.spec td{text-align:left; padding:13px var(--sp-4); border-bottom:1px solid var(--border)}
.spec th{font-family:var(--font-display); font-weight:500; text-transform:uppercase;
  letter-spacing:.05em; font-size:13px; color:var(--text-muted); width:44%}
.spec td{color:var(--text-primary); font-weight:500}
.spec tr:nth-child(even){background:var(--surface-raised)}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ---------- SSS ---------- */
.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{
  cursor:pointer; padding:var(--sp-5) 0; font-family:var(--font-display);
  font-size:17px; font-weight:500; list-style:none; display:flex;
  align-items:flex-start; justify-content:space-between; gap:var(--sp-4);
  color:var(--text-primary); line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  /* muaf: metin değil işaret (+), sarmaz */
  content:'+'; font-size:24px; line-height:1; color:var(--action-text); flex-shrink:0;
  transition:transform .26s var(--ease-spring);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--action-text)}
.faq-body{padding:0 0 var(--sp-5); color:var(--text-secondary); font-size:15px; max-width:72ch}

/* ---------- adım şeridi ---------- */
.steps{counter-reset:s; display:grid; gap:var(--sp-5)}
@media(min-width:800px){ .steps{grid-template-columns:repeat(4,1fr)} }
.step{position:relative; padding-top:var(--sp-6)}
.step::before{
  counter-increment:s; content:counter(s,decimal-leading-zero);
  position:absolute; top:0; left:0; font-family:var(--font-display);
  /* muaf: iki haneli sayaç (01..04), sarmaz */
  font-size:30px; font-weight:600; line-height:1; color:var(--action);
  opacity:.9;
}
.step h3{font-size:17px; margin-bottom:var(--sp-2)}
.step p{font-size:14px; color:var(--text-secondary); margin:0}

/* ---------- CTA bandı ---------- */
.cta-band{
  position:relative; overflow:hidden; border-radius:18px;
  color:var(--text-on-inverse);
  padding:var(--sp-8) var(--sp-6); box-shadow:var(--shadow-lg);
  background-color:var(--navy-800);          /* kısayol kullanılmaz, bkz. .hero */
  background-image:
    radial-gradient(680px 320px at 88% 0%, color-mix(in srgb, var(--action) 24%, transparent), transparent 62%),
    radial-gradient(520px 300px at 4% 100%, color-mix(in srgb, var(--navy-500) 40%, transparent), transparent 60%);
}
.cta-band > *{position:relative; z-index:1}
.cta-band h2{color:var(--text-on-inverse); max-width:20ch}
.cta-band p{color:var(--text-on-inverse-soft); max-width:56ch}

/* ---------- footer ---------- */
.footer{background:var(--navy-950); color:var(--navy-200); padding:var(--sp-8) 0 var(--sp-6)}
.footer h4{color:var(--navy-50); font-size:13px; letter-spacing:.1em; margin-bottom:var(--sp-4)}
.footer a{color:var(--navy-200); font-size:14px; display:inline-flex; align-items:center; min-height:26px}
.footer a:hover{color:var(--ember-400)}
.footer-grid{display:grid; gap:var(--sp-6); grid-template-columns:1fr}
@media(min-width:760px){ .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr} }
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.footer-bottom{
  margin-top:var(--sp-7); padding-top:var(--sp-5); border-top:1px solid rgba(242,243,248,.12);
  display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:space-between;
  font-size:13px; color:var(--navy-300);
}
.footer-mark{font-family:var(--font-display); letter-spacing:.06em; text-transform:uppercase}

/* ---------- kırıntı ---------- */
.crumb{font-size:13px; color:var(--text-muted); padding:var(--sp-5) 0 0}
.crumb a{color:var(--text-muted); display:inline-flex; align-items:center; min-height:26px}
.crumb a:hover{color:var(--action-text)}
.crumb span{margin:0 6px; opacity:.5}

/* ---------- WhatsApp yüzen ---------- */
.wa{
  position:fixed; right:18px; bottom:18px; z-index:70;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#0B3D22; box-shadow:var(--shadow-lg);
  transition:transform .24s var(--ease-spring), box-shadow .24s var(--ease-spring);
}
.wa:hover{transform:translateY(-3px) scale(1.05); text-decoration:none}
.wa:active{transform:scale(.94)}

/* ---------- kaydırma açığa çıkarma ----------
   İlerlemeli geliştirme: içerik VARSAYILAN OLARAK GÖRÜNÜR.
   Yalnız <html class="js"> varsa gizlenir — JS hata verirse/kapalıysa
   sayfa boş kalmaz. (Bu olmadan tüm kartlar görünmez oluyordu.) */
.js .reveal{opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease-spring), transform .6s var(--ease-spring)}
.js .reveal.in{opacity:1; transform:none}

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

/* ---------- yardımcılar ---------- */
.stack-5 > * + *{margin-top:var(--sp-5)}
.stack-6 > * + *{margin-top:var(--sp-6)}
.center{text-align:center}
.mx-auto{margin-left:auto; margin-right:auto}
/* BAŞLIK RİTMİ. `h1,h2,h3,h4{margin:0}` kuralı yüzünden başlık ile hemen altındaki
   metin arasında ÖLÇÜLEN boşluk 0px'ti — başlık metne yapışıyordu (kullanıcı bildirdi,
   4 sayfada 15 örnekte de 0). Referans sitede karşılığı `.section-head h2{margin-bottom}`. */
.head-block{max-width:70ch; margin-bottom:var(--sp-7)}
.head-block h1,.head-block h2,.head-block h3{margin-bottom:var(--sp-3)}
.head-block .eyebrow + h1,.head-block .eyebrow + h2{margin-top:0}
.head-block.center{margin-left:auto; margin-right:auto}
/* Akış metninde başlık: ÜSTTE daha çok boşluk, altta daha az (tipografi kuralı —
   başlık kendinden sonraki metne ait görünmeli, öncekine değil). */
.prose h2,.prose h3{margin:var(--sp-6) 0 var(--sp-3)}
.prose > h2:first-child,.prose > h3:first-child{margin-top:0}
.prose{max-width:72ch}
.prose h2{margin-top:var(--sp-7)}
.prose h3{margin-top:var(--sp-6); margin-bottom:var(--sp-3)}
.prose p{color:var(--text-secondary)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Sayaç önündeki "+" işareti: rakamın kendisinden ayrı bir eleman, çünkü sayaç
   her karede textContent'i yeniden yazıyor; içeride olsaydı ilk karede silinirdi. */
.stat-art{opacity:.75; margin-right:1px}

/* ============================================================
   BİLEŞENLER — galeri · üretim · grup şeridi · footer sahnesi · hero-boxes
   ============================================================ */

/* Ürün fotoğrafı plakası: karanlık modda fotoğraf ve plaka BİRLİKTE kısılır.
   Filtre yalnız <img>'e verilirse plaka saf beyaz kalıp grileşen fotoğrafın
   çevresinde beyaz çerçeve oluşturuyor. */
.plaka{background:var(--surface-photo); filter:var(--photo-dim);
  border-radius:10px; overflow:hidden;}
.plaka img{width:100%; height:auto; display:block;}
/* Belge şeridi saydamlaştırılamadı (beyaz nesne, taşma yöntemi nesneyi yerdi):
   yalnız o görsele beyaz plaka verilir. */
.plaka-beyaz,.foto-beyaz .plaka{background:#FFFFFF;}

/* ---------- çok açılı galeri ---------- */
.galeri{display:grid; gap:var(--sp-4); min-width:0;}
.galeri > *{min-width:0;}
.galeri-sahne{
  position:relative; margin:0; background:var(--sahne-zemin); filter:var(--photo-dim);
  border:1px solid var(--border); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow), var(--elevate-inset);
  aspect-ratio:4/3; display:grid; place-items:center;
  cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none;
}
.galeri-sahne.sururken{cursor:grabbing;}
.galeri-sahne:focus-visible{outline:3px solid var(--focus-ring); outline-offset:3px;}
/* TUZAK 3: height:100% burada ÇÖZÜLEMEZ (kap grid + aspect-ratio + overflow:hidden)
   → auto'ya düşer, görsel kabı taşıp kesilir. absolute + inset:0 tek doğru yol. */
.galeri-sahne img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain;            /* TUZAK 1: ürün ASLA kırpılmaz */
  padding:var(--sp-5); pointer-events:none; -webkit-user-drag:none;
  transition:opacity .28s ease;
}
.sahne-rozet{
  position:absolute; top:var(--sp-4); left:var(--sp-4); z-index:2;
  font-family:var(--font-body); font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; line-height:1.5;
  padding:6px 11px; border-radius:100px;
  background:var(--surface-inverse); color:var(--text-on-inverse);
}
.galeri-thumbs{max-width:100%; display:flex; gap:var(--sp-2);}
.thumb{
  flex:1 1 0; min-width:0; max-width:74px; aspect-ratio:1; padding:0;
  background:var(--surface-base); border:1.5px solid var(--border);
  border-radius:10px; cursor:pointer; overflow:hidden;
  transition:transform .2s var(--ease-spring), border-color .2s ease, box-shadow .2s ease;
}
.thumb img{width:100%; height:100%; object-fit:contain; padding:4px;
  background:var(--surface-photo); filter:var(--photo-dim);}
.thumb:hover{transform:translateY(-2px); border-color:var(--border-strong);}
.thumb:focus-visible{outline:3px solid var(--focus-ring); outline-offset:2px;}
.thumb[aria-current="true"]{border-color:var(--action);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--action) 40%, transparent);}
.thumb:active{transform:scale(.96);}
.galeri-not{font-size:13px; margin:0;}
/* Beyaz zeminli galeri: ana sayfadaki referans galerisi. `body.anasayfa` jetonları
   saydam yapıyor; burada zemin ürün fotoğrafının parçası gibi okunması için beyaz
   kalmalı — bu galeri eskiden beyaz `.pshot` kartlarının yerinde duruyor. */
.galeri-beyaz .galeri-sahne{background:#FFFFFF;}
.galeri-beyaz .thumb{background:#FFFFFF;}
.galeri-beyaz .thumb img{background:#FFFFFF;}

/* ---------- varyant seçici ---------- */
.varyant-blok{display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-6);}
.varyant-etiket{font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-muted); line-height:1.5;}
.varyant-etiket [data-varyant-ad]{color:var(--text-primary);}
.varyantlar{display:flex; flex-wrap:wrap; gap:var(--sp-2);}
.varyant{
  display:inline-flex; align-items:center; gap:8px;
  min-height:40px; padding:8px 14px 8px 10px;   /* WCAG 2.5.8: dokunma hedefi ≥24px */
  border-radius:100px; cursor:pointer;
  background:var(--surface-base); border:1.5px solid var(--border);
  font-family:var(--font-body); font-size:13px; font-weight:600;
  color:var(--text-secondary); line-height:1.4;
  transition:transform .2s var(--ease-spring), border-color .2s ease,
             box-shadow .2s ease, color .2s ease;
}
.varyant-nokta{width:16px; height:16px; border-radius:50%; flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(13,18,38,.22);}
.varyant:hover{transform:translateY(-1px); border-color:var(--border-strong); color:var(--text-primary);}
.varyant:active{transform:scale(.97);}
.varyant:focus-visible{outline:3px solid var(--focus-ring); outline-offset:3px;}
.varyant[aria-pressed="true"]{
  border-color:var(--action); color:var(--text-primary);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--action) 32%, transparent);
}

/* ---------- üretim kapasitesi ---------- */
/* Tek ölçüde eşit kareler. Önceki tam genişlik 16/10 "hero" kaldırıldı —
   fotoğraf çok büyük duruyordu ve bölümün tamamını yutuyordu. */
.uretim-serit{display:grid; gap:var(--sp-4); grid-template-columns:repeat(2,1fr);}
@media(min-width:640px){ .uretim-serit{grid-template-columns:repeat(3,1fr);} }
@media(min-width:1000px){ .uretim-serit{grid-template-columns:repeat(4,1fr);} }
.uretim-serit figure{margin:0;}
.uretim-serit .plaka{border:1px solid var(--border); box-shadow:var(--shadow-sm);}
.uretim-serit img{aspect-ratio:4/3; object-fit:contain; padding:var(--sp-3);}
.uretim-not{margin:var(--sp-4) 0 0; font-size:14px; color:var(--text-muted); line-height:1.7;}

/* ---------- grup siteleri şeridi ---------- */
.grup-serit{margin-top:var(--sp-7); padding-top:var(--sp-5);
  border-top:1px solid rgba(242,243,248,.12);}
.grup-serit h4{font-size:12px; letter-spacing:.12em; color:var(--navy-200);
  margin-bottom:var(--sp-4); line-height:1.5;}
.grup-linkler{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5);}
.grup-linkler a{font-size:13px; color:var(--navy-300); line-height:1.9;
  transition:color .2s var(--ease-spring);}
.grup-linkler a:hover{color:var(--ember-400); text-decoration:underline;}
.grup-linkler a:focus-visible{outline:2px solid var(--ember-400); outline-offset:3px;}

/* ===== ALTBİLGİ ÜSTÜ SAHNE — satenuykubandi ile birebir =====
   Üç yüzey birbirine akmalı, yoksa her ekte yatay çizgi görünür:
     MAKER bandı  --sahne-gok (görselin gökyüzü rengi)
     kapanış CTA  --surface-inverse'ten aşağı doğru --sahne-gok'e kararır
     sahne bandı  görselin kendisi
     altbilgi     --surface-footer = görselin en alt satırı
   DİKKAT: `background` KISAYOLU KULLANILMAZ; kısayol background-color'ı transparent'a
   çeker, koyu zemin kaybolur ve gradyan boyanmayan durumda açık yazılar beyaz
   zeminde kalır (referansta doğrulayıcı 1,11:1 ölçmüştü). */
.footer-sahne{
  position:relative; background:var(--sahne-gok);
  line-height:0;                 /* satır içi görselin altında boşluk kalmasın */
  margin-bottom:-1px;            /* alt piksel yuvarlaması ek yerinde çizgi bırakmasın */
}
.footer-sahne picture,
.footer-sahne>picture img{display:block; width:100%;}
/* GÖRSEL ASLA KIRPILMAZ: doğal oranında, tam genişlikte.
   Referansta önce min(20vh, genişlik/oran) denenmiş; pencere kısa ve genişse
   (1600x800, 1920x900, 2560x1080 ...) 20vh bağlayıcı olup yükseklik genişlik/oranın
   altına düşüyor ve cover DİKEYDE kesiyordu, tam bacaların olduğu yerden.
   Doğal oran korunduğunda kırpma matematiksel olarak imkânsız. */
.footer-sahne>picture img{height:auto;}

/* Araç ayrı katman; konum ve yol _footer-sahne.json'dan gelen yüzdelerle.
   --sahne-*-sol : sayfa sonundaki DURUŞ noktası (solda)
   --sahne-*-yol : oradan başlangıca (fabrikanın yanına) kadar olan yol.
                   translateX yüzdesi öğenin KENDİ genişliğine göre olduğu için
                   üretici bant yüzdesini araç genişliğine bölerek veriyor. */
.footer-arac{
  position:absolute;
  left:var(--sahne-d-sol); top:var(--sahne-d-ust); width:var(--sahne-d-en);
  height:auto;
  /* Kaynak beyaz stüdyo render'ı; bu koyu monokrom sahnede olduğu gibi bırakılınca
     yapıştırılmış gibi parlıyor. Hafif kısma sahneye oturtuyor. */
  filter:brightness(.66) saturate(.8) contrast(1.06);
  transform:translateX(var(--sahne-d-yol));
  opacity:0; transition:opacity .6s var(--ease-spring);
}
@media (min-width:768px){
  .footer-arac{
    left:var(--sahne-g-sol); top:var(--sahne-g-ust); width:var(--sahne-g-en);
    transform:translateX(var(--sahne-g-yol));
  }
}
.footer-sahne.in .footer-arac{opacity:1;}

/* KAYDIRMAYA BAĞLI HAREKET — tarayıcının kendi zaman çizelgesiyle, JS'siz.
   Scroll dinleyicisi eklenmiyor (sitenin kuralı: yalnız IntersectionObserver).
   Aralık referansta ÖLÇÜMLE seçilmiş: sayfa sonuna inildiğinde sahnenin cover
   ilerlemesi 1920x1200 %45,4 · 1920x1080 %50,2 · 2560x1080 %51,2 · 1600x1000 %53,5 ·
   1440x900 %58,9 · 2560x1440 %67,4 · telefon %100. %45 seçilmiş: 2560x1440 dışındaki
   her ekranda araç duruş noktasına tam varıyor.
   KURAL: aralığı genişletmek hızlandırır (kaydırma bütçesi sabit), daraltmak
   yavaşlatır ama yolu yarıda bırakır. */
@keyframes arac-yolda{
  from{transform:translateX(var(--yol));}
  to{transform:translateX(0);}
}
@supports (animation-timeline: view()){
  .footer-arac{
    /* Opaklık reveal'a BAĞLANMAZ. Reveal gözlemcisi eleman %12 görünür olunca
       tetikleniyor; sahne ilk göründüğü anda araç henüz saydam kalıyor ve
       "ilk görünüşte fabrikanın yanında dursun" isteği gerçekleşmiyordu.
       Kaydırma animasyonu konumu zaten yönettiği için araç hep görünür. */
    opacity:1; transition:none;
    --yol:var(--sahne-d-yol);
    animation:arac-yolda linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 45%;
  }
  @media (min-width:768px){ .footer-arac{--yol:var(--sahne-g-yol);} }
}
/* Sahnenin kendisi kaymasın, sadece araç hareket etsin. */
.footer-sahne.reveal{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  /* Hareket yok: araç duruş noktasında sabit. */
  .footer-arac{transform:none; opacity:1; transition:none; animation:none;}
}

/* Sahnenin üstündeki iki bölüm: renk sıçraması olmasın diye zeminleri sahneye bağlanır. */
.maker-son{background:var(--sahne-gok); padding:var(--sp-8) 0 var(--sp-9);}
.maker-son .maker{
  background:color-mix(in srgb, var(--surface-inverse) 62%, var(--sahne-gok));
  border-color:color-mix(in srgb, var(--navy-50) 12%, transparent);
}
.maker-son .maker-logo{color:var(--navy-50);}
.maker-son .maker-mark p{color:var(--text-on-inverse-soft);}
.maker-son .maker-mark .line{color:var(--action-text-on-inverse);}
.maker-son .maker-links a{color:var(--action-text-on-inverse);}
.maker-son .maker-facts{border-color:color-mix(in srgb, var(--navy-50) 14%, transparent);}
.maker-son .maker-facts .n{color:var(--text-on-inverse);}
.maker-son .maker-facts .l{color:var(--text-on-inverse-soft);}

/* Kapanış CTA'sı — satenuykubandi  ile aynı: tam genişlik, ORTALI.
   Zemin ayrı, gradyan ayrı yazılır;  kısayolu background-color'ı
   transparent'a çeker ve .section-inverse'ten gelen lacivert kaybolur. */
/* Referansta bölüm dolgusu `section{padding:var(--s9) 0}` genel kuralından gelir;
   burada .section sınıfı kullanıldığı için CTA dolgusu açıkça yazılır (--s9 = 88px). */
.cta-final{text-align:center; padding:88px 0;}
.cta-final h2{margin-bottom:var(--sp-4);}
.cta-final .lead{margin:0 auto var(--sp-6);}
.cta-final .hero-actions{justify-content:center;}
.cta-final .accent{color:var(--action-text-on-inverse);}
.cta-final{
  background-color:var(--surface-inverse);
  background-image:linear-gradient(to bottom, var(--surface-inverse) 58%, var(--sahne-gok));
}
/* Karşıt yüzey üzerindeki ikincil buton */
.on-inverse .btn-outline{color:var(--text-on-inverse); border-color:rgba(242,243,248,.42);}
.on-inverse .btn-outline:hover{background:rgba(242,243,248,.10); border-color:rgba(242,243,248,.72);}
.footer{background:var(--surface-footer);}


/* ---------- hero-boxes ---------- */
.hb-host{position:relative; isolation:isolate;}
/* TUZAK 7: ızgara tıklamaları yutmasın. */
.hb-host > .wrap{position:relative; z-index:1;}
/* Kenar maskesi: ızgara ortadan kenarlara doğru siliniyor. */
.hero-boxes{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 115% 100% at 50% 50%,#000 0%,#000 48%,transparent 90%);
  mask-image:radial-gradient(ellipse 115% 100% at 50% 50%,#000 0%,#000 48%,transparent 90%);}
.hero-boxes-inner{position:absolute; left:25%; top:-25%; width:100%; height:100%; display:flex;
  transform:translate(-30%,-34%) skewX(-44deg) skewY(12deg) scale(.78);
  transform-origin:50% 50%; pointer-events:auto;}
.hb-col{flex:0 0 96px; width:96px; border-left:1px solid var(--hb-line);}
.hb-cell{position:relative; width:96px; height:48px;
  background-color:transparent; transition:background-color 1.8s ease;
  border-right:1px solid var(--hb-line); border-top:1px solid var(--hb-line);}
.hb-col:nth-child(2n+1) .hb-cell:nth-child(2n+1)::after{content:'+'; position:absolute; top:-10px; left:-7px;
  font:300 13px/1 var(--font-body); color:var(--hb-plus); pointer-events:none;}
/* Logomark maskeyle basılır: renk jetondan gelir, sabit beyaz değil. */
.hb-cell::before{content:''; position:absolute; inset:3px; pointer-events:none;
  background-color:var(--hb-mark);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27100 250 94 98%27%3E%3Cpath d=%27M145.3,252.5l-42.4,43.1c-1.3,1.3-1.3,3.3,0,4.6l42.5,42.5c2.1,2.1,5.6.6,5.6-2.3v-23.8c0-.8-.3-1.6-.9-2.2l-13.6-14.4c-1.2-1.3-1.2-3.2,0-4.5l13.3-14.4c.6-.6.9-1.4.9-2.2l.2-24.1c0-2.9-3.5-4.4-5.6-2.3h0Z%27/%3E%3Cpath d=%27M162.1,275.5v44.4c0,2.9,3.6,4.4,5.6,2.3l21.9-22.4c1.3-1.3,1.2-3.3,0-4.6l-21.9-22c-2.1-2.1-5.6-.6-5.6,2.3h0Z%27/%3E%3C/svg%3E") center/auto 64% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27100 250 94 98%27%3E%3Cpath d=%27M145.3,252.5l-42.4,43.1c-1.3,1.3-1.3,3.3,0,4.6l42.5,42.5c2.1,2.1,5.6.6,5.6-2.3v-23.8c0-.8-.3-1.6-.9-2.2l-13.6-14.4c-1.2-1.3-1.2-3.2,0-4.5l13.3-14.4c.6-.6.9-1.4.9-2.2l.2-24.1c0-2.9-3.5-4.4-5.6-2.3h0Z%27/%3E%3Cpath d=%27M162.1,275.5v44.4c0,2.9,3.6,4.4,5.6,2.3l21.9-22.4c1.3-1.3,1.2-3.3,0-4.6l-21.9-22c-2.1-2.1-5.6-.6-5.6,2.3h0Z%27/%3E%3C/svg%3E") center/auto 64% no-repeat;
  transform:matrix(1,-0.2493,1.1106,0.7231,0,0); opacity:0; transition:opacity 1.8s ease;}
/* Yanan hücre: rastgele ton + logomark, ikisi de anında gelir, 1,8 sn'de söner. */
.hb-cell.lit{background-color:rgba(var(--c) / var(--hb-tint)); transition:background-color 0s;}
.hb-cell.lit::before{opacity:var(--hb-mark-lit); transition:opacity 0s;}
/* Hero içeriği fareyi geçirsin ki arkadaki hücreler hover alsın;
   etkileşimli öğeler tıklanabilir kalsın (TUZAK 7). */
.hb-host>*:not(.hero-boxes){pointer-events:none;}
.hb-host a,.hb-host button,.hb-host input,.hb-host select,.hb-host textarea,.hb-host label,
.hb-host [role=button],.hb-host .thumb,.hb-host .varyant,
.hb-host .galeri-sahne,.hb-host .galeri-thumbs{pointer-events:auto;}
@media (prefers-reduced-motion:reduce){ .hero-boxes{display:none;} }

/* ---------- kategori şeridi ve rozeti (MARKA-KILAVUZU §5) ---------- */
.cat-strip{height:3px; background:var(--cat-bandana);}
.cat-badge{
  display:inline-flex; align-items:center; gap:7px; margin-top:var(--sp-4);
  font-family:var(--font-body); font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; line-height:1.5;
  color:var(--navy-200);
}
.cat-badge::before{content:''; width:6px; height:6px; border-radius:50%;
  background:var(--cat-bandana);}

/* footer logosu: koyu zeminde açık renk, currentColor'dan */
.footer-logo{height:26px; width:auto; color:var(--navy-50); opacity:.92; display:block}

/* ---------- üretici bandı (MAKER) ---------- */
.maker-son{padding:var(--sp-8) 0 0;}
.maker{
  display:grid; gap:var(--sp-6); align-items:center;
  background-color:var(--surface-raised);
  border:1px solid var(--border); border-radius:18px;
  padding:var(--sp-7) var(--sp-6);
  box-shadow:var(--shadow-sm), var(--elevate-inset);
}
@media(min-width:860px){ .maker{grid-template-columns:1.25fr .75fr; gap:var(--sp-8);} }
.maker-logo{height:30px; width:auto; color:var(--text-primary); display:block;}
.maker-mark .line{
  display:block; margin-top:var(--sp-4);
  font-family:var(--font-display); font-size:15px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; line-height:1.4;
  color:var(--action-text);
}
.maker-mark p{margin-top:var(--sp-3); font-size:15px; color:var(--text-secondary); max-width:62ch;}
.maker-links{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); margin-top:var(--sp-4);}
.maker-links a{
  display:inline-flex; align-items:center; min-height:26px;
  font-size:14px; font-weight:600; color:var(--action-text);
}
.maker-links a:hover{text-decoration:underline;}
.maker-facts{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5);
  border-top:1px solid var(--border); padding-top:var(--sp-5);
}
@media(min-width:860px){
  .maker-facts{border-top:0; border-left:1px solid var(--border);
    padding-top:0; padding-left:var(--sp-7);}
}
.maker-facts .n{
  font-family:var(--font-display); font-size:clamp(24px,2.8vw,32px); font-weight:600;
  line-height:1.15; color:var(--text-primary);   /* muaf: rakam, tek satır */
}
.maker-facts .l{font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-muted); line-height:1.5; margin-top:2px;}

/* ---------- tekil destek fotoğrafı ve şerit ---------- */
.foto{margin:0;}
.foto .plaka{border:1px solid var(--border); box-shadow:var(--shadow-sm); border-radius:14px;}
.foto img{aspect-ratio:4/3; object-fit:contain; padding:var(--sp-4);}
.foto figcaption{margin-top:var(--sp-3); font-size:13px; color:var(--text-muted); line-height:1.7;}
.foto-serit{display:grid; gap:var(--sp-4); grid-template-columns:repeat(2,1fr);}
@media(min-width:900px){ .foto-serit{grid-template-columns:repeat(3,1fr);} }
.foto-serit .foto img{aspect-ratio:1/1; padding:var(--sp-3);}
/* ürün kartında fotoğraf */
.card-foto{margin:calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-5);
  border-radius:14px 14px 0 0; overflow:hidden; background:var(--surface-photo);
  filter:var(--photo-dim);}
.card-foto img{width:100%; aspect-ratio:16/10; object-fit:contain; padding:var(--sp-3);
  transition:transform .5s var(--ease-spring);}
a.card:hover .card-foto img{transform:scale(1.04);}

/* ---------- tema düğmesi ---------- */
.tema-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex-shrink:0; padding:0; cursor:pointer;
  border:1px solid var(--border); border-radius:10px;
  background:var(--surface-base); color:var(--text-secondary);
  transition:transform .2s var(--ease-spring), color .2s ease,
             border-color .2s ease, box-shadow .2s ease;
}
.tema-btn svg{width:18px; height:18px;}
.tema-btn:hover{transform:translateY(-1px); color:var(--action-text);
  border-color:var(--border-strong); box-shadow:var(--shadow-sm);}
.tema-btn:active{transform:scale(.94);}
.tema-btn:focus-visible{outline:3px solid var(--focus-ring); outline-offset:3px;}
/* Açık temada ay, koyu temada güneş görünür */
.tema-btn .i-gunes{display:none;}
:root[data-theme="dark"] .tema-btn .i-ay{display:none;}
:root[data-theme="dark"] .tema-btn .i-gunes{display:block;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tema-btn .i-ay{display:none;}
  :root:not([data-theme="light"]) .tema-btn .i-gunes{display:block;}
}

/* ===== KÜNYE KARTLARI + DEPARTMAN IZGARASI =====
   satenuykubandi hakkımızda kalıbından port edildi (kullanıcı isteği: aynı format).
   Ölçüler referanstakiyle aynı; yalnız jeton adları bu sitenin ölçeğine çevrildi
   (--s5 → --sp-5 gibi). Kırılım noktası da referansla aynı: 900px. */
.spec-groups{display:grid; grid-template-columns:1fr; gap:var(--sp-5);}
.spec-group{padding:var(--sp-6);}
.spec-group h3{font-family:var(--font-display); font-size:13px; line-height:1.35;
  letter-spacing:.06em; text-transform:uppercase; color:var(--action-text); margin-bottom:var(--sp-4);}
.spec-group dl{display:grid; gap:var(--sp-3); margin:0;}
.spec-group .row{display:flex; justify-content:space-between; gap:var(--sp-4); align-items:baseline;}
.spec-group dt{font-size:13px; color:var(--text-muted); flex:0 0 auto;}
.spec-group dd{font-size:14px; font-weight:600; color:var(--text-primary); text-align:right; margin:0;}

.aud{display:grid; grid-template-columns:1fr; gap:var(--sp-5);}
.aud-col{display:grid; gap:var(--sp-5);}
.aud-item{display:flex; gap:var(--sp-4); align-items:flex-start;}
.aud-item .ico{width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  flex:0 0 auto; background:color-mix(in srgb, var(--action) 14%, transparent); color:var(--action-text);}
.aud-item .ico svg{width:17px; height:17px;}
.aud-item h3{font-size:15px; margin-bottom:4px;}
.aud-item p{font-size:14px; margin:0;}

@media(min-width:900px){
  .spec-groups{grid-template-columns:repeat(3,1fr);}
  .aud{grid-template-columns:repeat(2,1fr); gap:var(--sp-8);}
}

/* ===== ADET ŞERİDİ (fiyat kademesi yerine) =====
   Dört satırlık tablo yerine rakamı öne çıkaran küçük infografik. Bar yalnız
   görsel bir sıralama ipucu; fiyat ya da oran iddiası taşımaz (aria-hidden). */
.adet-serit{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5);}
@media(min-width:820px){ .adet-serit{grid-template-columns:repeat(4,1fr);} }
.adet{padding:var(--sp-5); border:1px solid var(--border); border-radius:14px;
  background:var(--surface-raised); box-shadow:var(--shadow-sm);}
.adet-n{font-family:var(--font-display); font-weight:600; line-height:1.15;
  font-size:clamp(26px,3.2vw,34px); color:var(--action-text);}
.adet-n span{font-family:var(--font-body); font-size:12px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-left:6px;}
.adet-bar{height:5px; border-radius:100px; margin:var(--sp-4) 0 var(--sp-3);
  background:color-mix(in srgb, var(--action) 16%, transparent); overflow:hidden;}
.adet-bar i{display:block; height:100%; border-radius:100px; background:var(--action);}
.adet-l{font-size:13px; color:var(--text-secondary); line-height:1.6;}

/* Yan sütundaki tek ürün görseli: kaynak kare olduğu için iki sütunlu düzende
   dikeyde metnin çok üstüne çıkıyordu (kullanıcı: "çok büyük, çok yer kaplıyor").
   Sabit oran + contain: ürün kırpılmadan makul yükseklikte duruyor. */
.plaka-oranli{display:grid; place-items:center; padding:var(--sp-4);}
.plaka-oranli img{width:auto; max-width:100%; height:auto; max-height:300px;}
@media(min-width:900px){ .plaka-oranli img{max-height:380px;} }

/* ===== SORU-CEVAP KART IZGARASI =====
   Ajans sayfasındaki altı soru ve hakkımızdaki "ne yapmıyoruz" maddeleri düz dikey
   metin yığınıydı. Aynı içerik iki sütunda, her biri kendi yüzeyinde. */
.qa-grid{display:grid; grid-template-columns:1fr; gap:var(--sp-4);}
@media(min-width:820px){ .qa-grid{grid-template-columns:repeat(2,1fr); gap:var(--sp-5);} }
.qa{padding:var(--sp-5) var(--sp-6); border:1px solid var(--border); border-radius:16px;
  background:var(--surface-raised); box-shadow:var(--shadow-sm), var(--elevate-inset);}
.section-raised .qa{background:var(--surface-base);}
.qa h3{font-size:clamp(16px,1.6vw,18px); margin-bottom:var(--sp-3);}
.qa p{font-size:15px; color:var(--text-secondary); margin:0; line-height:1.7;}
.qa strong{color:var(--text-primary);}