/* ============================================================
   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:#1E2954; --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:#1E2954;
  --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:#1E2954;
    --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:#1E2954;
  --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)}
}
/* 1000–1149px: masaüstü menü açılır ama daraldır — marka metni yer bırakmaz */
@media(max-width:480px){ .wrap{padding:0 var(--sp-4)} }
@media(max-width:420px){ .nav-logo{height:18px} }
@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}
/* Alan adı bu sitede 22 karakter (toptanbandana 21). Harf aralığı .08em iken
   26px taşıp ellipsis yiyordu; .05em fark kapatıyor. */
.brand-dom{font-size:10px; letter-spacing:.05em; color:var(--text-muted)}
/* Boşluk --sp-5 (24px) iken menü çok yer istiyor ve marka onun için sıkışıp
   site adını ellipsis ile KIRPIYOR (pilotta ölçüldü: 1150px'te ad 117px istiyor,
   97px alıyor). 18px, altı boşlukta 36px kazandırı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. Çı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);
}
/* Tek başına duran şeritte (hakkımızda, üretim kapasitesi) kartlar bir tık daha
   açık olsun ki şeridin içinde de ayrışsınlar. */
.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,.footer .footer-baslik{color:var(--navy-50); font-size:13px; letter-spacing:.1em; margin:0 0 var(--sp-4); font-family:var(--font-display); font-weight:600; text-transform:uppercase}
.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 AYRI 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;}
/* YAN YANA DÜZENDE YÜKSEKLİK SINIRI (metin + görsel iki kolon).
   Portre kareler kolonu aşırı uzatıyordu: house-of-the-dragon-03 789x1200 (oran 0,66)
   yanındaki metnin iki katı yükseklik alıyor ve bölüm boşluk gibi görünüyordu.
   object-fit CONTAIN şart - cover ürünü kırpar (tuzak #1). Plaka zemini zaten var,
   dolayısıyla kalan boşluk mektup kutusu değil, tasarımın parçası. */
.grid-2 .plaka img{max-height:min(48vh,420px); object-fit:contain;}
/* 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);} }
}
/* Araç bağlantı (3 Kas, kullanıcı): tıklanınca /iletisim. Kaydırma animasyonu <a>'da, tepki içteki görselde (transform). */
a.footer-arac{display:block;cursor:pointer;border-radius:10px;-webkit-tap-highlight-color:transparent}
.footer-arac img{display:block;width:100%;height:auto;transform-origin:50% 90%;transition:transform .45s var(--ease-spring)}
a.footer-arac:hover img{transform:translateY(-4%) scale(1.04)}
a.footer-arac:active img{transform:scale(.97)}
a.footer-arac:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}
/* 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;}
  .footer-arac img{transition: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:0; object-fit:cover;}   /* kareyi doldurur: üstte/altta beyaz bant kalmaz */
.foto-serit .plaka{overflow:hidden;}
/* ürün kartında fotoğraf */
.card-foto{display:block;   /* span: blok olmazsa negatif pay işlemez, görsel kenara uzanmaz */
  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);}
/* görsel kartın üst kısmını kenardan kenara doldurur (23 Eki); odak üst-orta: model fotoğrafında bant alında */
.card-foto img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:50% 22%; padding:0;
  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);}
}

/* ===== konserbandi: toplu üretim bölümü (ana sayfa) ===== */
.tu-ust .head-block{margin-bottom:0}
.tu-izgara{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(150px,16vw,240px);gap:var(--sp-3)}
.tu-kare{margin:0;position:relative;border-radius:16px;overflow:hidden;box-shadow:0 2px 6px rgba(13,18,38,.12),0 18px 40px -16px rgba(13,18,38,.45)}
.tu-kare img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.tu-kare:hover img{transform:scale(1.04)}
.tu-kare figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 10px;font-size:12.5px;font-weight:600;color:#fff;background:linear-gradient(to top,rgba(10,14,30,.78),rgba(10,14,30,0))}
.tu-buyuk{grid-column:span 2;grid-row:span 2}
.tu-dikey{grid-row:span 2}
.tu-izgara > :nth-child(4){grid-column:1 / span 2;grid-row:3}
.tu-izgara > :nth-child(5){grid-column:3;grid-row:3 / span 1}
@media(max-width:900px){.tu-izgara{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(130px,34vw,220px)}.tu-buyuk{grid-column:span 2;grid-row:span 2}.tu-dikey{grid-row:span 1}.tu-izgara > :nth-child(4),.tu-izgara > :nth-child(5){grid-column:auto;grid-row:auto}.tu-kare figcaption{font-size:11px;line-height:1.35;padding:22px 10px 8px}}
@media(prefers-reduced-motion:reduce){.tu-kare img{transition:none}}

/* İlgili sayfalar: aile listesi ve ilgili aramalar (yetim sayfa kalmasın) */
.ilgili-liste{margin-top:var(--sp-6)}
.ilgili-liste h3{font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--sp-3)}
.tum-liste{list-style:none;margin:0;padding:0;columns:3 220px;column-gap:var(--sp-5)}
.tum-liste li{break-inside:avoid;padding:4px 0}
.tum-liste a,.arama-liste a{color:inherit;text-decoration:none;transition:color .2s cubic-bezier(.22,1,.36,1)}
.tum-liste a:hover,.tum-liste a:focus-visible{color:var(--accent,#F08025);text-decoration:underline;text-underline-offset:3px}
.arama-liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.arama-liste a{display:inline-block;padding:6px 12px;border:1px solid var(--line,rgba(30,41,84,.18));border-radius:999px;font-size:13.5px;transition:transform .2s cubic-bezier(.22,1,.36,1),border-color .2s}
.arama-liste a:hover{border-color:var(--accent,#F08025);transform:translateY(-1px)}
.arama-liste a:focus-visible,.tum-liste a:focus-visible{outline:2px solid var(--accent,#F08025);outline-offset:2px}
.arama-liste a:active{transform:scale(.97)}

/* Görsel arşivi (canlı sitenin görselleri) */
/* duvar düzeni: her görsel kendi oranında; kare kutu yok, beyaz bant ve kırpma yok */
.cg-izgara{columns:4;column-gap:var(--sp-3)}
.cg-kare{margin:0 0 var(--sp-3);break-inside:avoid;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(13,18,38,.10),0 10px 24px -14px rgba(13,18,38,.35)}
.cg-kare img{display:block;width:100%;height:auto;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.cg-kare:hover img{transform:scale(1.04)}
@media(max-width:900px){.cg-izgara{columns:3;column-gap:var(--sp-2)}.cg-kare{margin-bottom:var(--sp-2)}}
@media(max-width:520px){.cg-izgara{columns:2}}
@media(prefers-reduced-motion:reduce){.cg-kare img{transition:none}}

/* Görsel büyütme penceresi (site.js) */
.cg-kare,.tu-kare,.tp-kare,.tp-serit-kare,.ld-kare .ld-sahne,.tp-hero-ana,.tp-hero-kucuk,.av-govde .pshot,.hero .pshot{cursor:zoom-in}
.cg-kare:focus-within,.tu-kare:focus-within{outline:3px solid var(--accent,#F08025);outline-offset:3px}.cg-kare img:focus,.tu-kare img:focus{outline:none}
.cg-kare:active img,.tu-kare:active img{transform:scale(.98)}
.lb{border:0;padding:56px 72px;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:transparent;color:#fff;box-sizing:border-box}
.lb[open]{display:grid;place-items:center;animation:lbAc .32s cubic-bezier(.22,1,.36,1)}
.lb::backdrop{background:rgba(6,9,20,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@keyframes lbAc{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:min(1280px,100%)}
.lb-fig img{display:block;max-width:100%;max-height:calc(100dvh - 160px);width:auto;height:auto;object-fit:contain;border-radius:12px;background:#0D1226;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);opacity:1;transition:opacity .25s ease}
.lb-fig img.yukleniyor{opacity:0}
.lb-fig img.saydam{background:radial-gradient(90% 70% at 50% 30%,#FFFFFF,#DDE1EE);padding:4% 8%;box-sizing:border-box}
.lb-fig figcaption{font-size:14px;line-height:1.5;text-align:center;max-width:70ch;color:rgba(255,255,255,.85)}
.lb-btn{position:fixed;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(20,26,52,.8);color:#fff;font-size:28px;line-height:1;cursor:pointer;transition:transform .2s cubic-bezier(.22,1,.36,1),opacity .2s}
.lb-btn:hover{transform:scale(1.08)}
.lb-btn:active{transform:scale(.94)}
.lb-btn:focus-visible{outline:3px solid var(--accent,#F08025);outline-offset:2px}
.lb-kapat{top:16px;right:16px}
.lb-onceki{left:16px;top:50%;margin-top:-23px}
.lb-sonraki{right:16px;top:50%;margin-top:-23px}
.lb.tek .lb-onceki,.lb.tek .lb-sonraki{display:none}
.lb-sayac{position:fixed;left:20px;top:28px;font-size:13px;color:rgba(255,255,255,.75)}
@media(max-width:700px){.lb{padding:64px 8px 88px}.lb-fig img{max-height:calc(100dvh - 210px);border-radius:8px}.lb-fig figcaption{font-size:13px;padding:0 8px}.lb-onceki,.lb-sonraki{top:auto;bottom:20px;margin-top:0}.lb-onceki{left:calc(50% - 58px)}.lb-sonraki{right:calc(50% - 58px)}}
@media(prefers-reduced-motion:reduce){.lb[open]{animation:none}.lb-btn{transition:none}}

/* Menüde tasarlayıcı girişi: sitenin amiral özelliği, diğer menü öğelerinden ayrı görünür.
   Turuncu zemin + navy-900 yazı (MARKA-KILAVUZU §2: turuncu beyaz yazı taşımaz). Parıltı yalnız transform ile. */
.nav-tasarla{position:relative;display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 8px;border-radius:14px;overflow:hidden;
  background:linear-gradient(135deg,#F59A4A 0%,#F08025 55%,#E06F14 100%);color:var(--navy-900);text-decoration:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 6px 18px -6px rgba(240,128,37,.65),0 2px 4px rgba(13,18,38,.25);
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.nav-tasarla:hover{transform:translateY(-2px)}
.nav-tasarla:active{transform:scale(.97)}
.nav-tasarla:focus-visible{outline:3px solid var(--navy-300);outline-offset:3px}
.nt-ikon{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--navy-900);color:#F59A4A;flex:none}
.nt-ikon svg{width:17px;height:17px}
.nt-metin{display:flex;flex-direction:column;line-height:1.05}
.nt-metin b{font-family:var(--font-display,'Oswald'),sans-serif;font-weight:600;font-size:15px;letter-spacing:.04em;text-transform:uppercase}
.nt-metin small{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.78;margin-top:2px}
.nt-isik{position:absolute;top:0;bottom:0;left:-40%;width:35%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(0) skewX(-18deg);animation:ntIsik 4.5s cubic-bezier(.22,1,.36,1) 1.2s infinite;pointer-events:none}
@keyframes ntIsik{0%{transform:translateX(0) skewX(-18deg)}35%,100%{transform:translateX(480%) skewX(-18deg)}}
@media(prefers-reduced-motion:reduce){.nt-isik{animation:none;opacity:0}.nav-tasarla{transition:none}}
@media(max-width:640px){.nav-tasarla{padding:6px 12px 6px 6px;gap:8px}.nt-ikon{width:28px;height:28px}.nt-metin small{display:none}.nt-metin b{font-size:13px}}
@media(max-width:380px){.nt-metin{display:none}.nav-tasarla{padding:6px}}
/* mobil menüde en üstte, vurgulu */
.mnav .mnav-tasarla{display:flex;flex-direction:column;gap:2px;margin:6px 0 8px;padding:14px 16px;border-radius:12px;background:#F08025;color:var(--navy-900);font-weight:700}
.mnav .mnav-tasarla small{font-weight:600;font-size:12px;opacity:.8}
.mnav .mnav-tasarla:active{transform:scale(.98)}
.mnav .mnav-tasarla:focus-visible{outline:3px solid var(--navy-300);outline-offset:2px}

/* Tasarlayıcı vitrini (ana sayfa, konser bandı): katmanlı ışık + ince ızgara + doku ile derinlik; adımlar tam genişlikte kartlar.
   Katmanlar: zemin (lacivert) → ışık lekeleri → ızgara/doku → kartlar (yükseltilmiş) → ekran görüntüsü (yüzen). */
.arac-vitrin{position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(900px 520px at 8% 0%,rgba(67,89,163,.42),transparent 62%),
    radial-gradient(700px 480px at 92% 100%,rgba(240,128,37,.16),transparent 60%),
    radial-gradient(600px 420px at 70% 30%,rgba(105,125,191,.18),transparent 65%),
    linear-gradient(180deg,#1E2954 0%,#172046 55%,#121A3A 100%);}
.arac-vitrin::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(242,243,248,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(242,243,248,.045) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 75% 70% at 35% 45%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 75% 70% at 35% 45%,#000 30%,transparent 80%);}
.arac-vitrin::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.arac-vitrin .steps{grid-template-columns:1fr !important;gap:var(--sp-3);margin:0}
.arac-vitrin .step{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:var(--sp-4);align-items:start;padding:18px 22px 18px 18px;border-radius:16px;
  background:linear-gradient(155deg,rgba(242,243,248,.085) 0%,rgba(242,243,248,.025) 100%);border:1px solid rgba(193,200,226,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(5,8,20,.35),0 14px 30px -14px rgba(5,8,20,.75),0 22px 44px -28px rgba(240,128,37,.28);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.arac-vitrin .step:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 2px 4px rgba(5,8,20,.35),0 22px 40px -16px rgba(5,8,20,.8),0 28px 54px -28px rgba(240,128,37,.4)}
.arac-vitrin .step::before{position:static;grid-row:1 / span 2;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;font-size:22px;color:#F6984C;opacity:1;
  background:linear-gradient(160deg,rgba(240,128,37,.22),rgba(240,128,37,.08));border:1px solid rgba(240,128,37,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.arac-vitrin .step h3{grid-column:2;font-size:17px;margin:4px 0 4px;line-height:1.3}
.arac-vitrin .step p{grid-column:2;font-size:14.5px;line-height:1.65;color:var(--text-on-inverse-soft)}
.arac-vitrin .pshot{position:relative;border-radius:16px;box-shadow:0 2px 6px rgba(5,8,20,.4),0 30px 60px -24px rgba(5,8,20,.85),0 40px 80px -40px rgba(240,128,37,.35)}

@media(prefers-reduced-motion:reduce){.arac-vitrin .step{transition:none}.arac-vitrin .step:hover{transform:none}}
.arac-vitrin .pshot{background:linear-gradient(155deg,rgba(242,243,248,.12),rgba(242,243,248,.04));border:1px solid rgba(193,200,226,.18)}   /* beyaz çerçeve yerine koyu zemine uyan cam çerçeve */
/* vitrin düzeni (hiyerarşi + hiza): üst şerit başlık/çağrı; gövde iki sütun aynı yükseklikte, kartlar görselin üst ve alt kenarına hizalı */
.arac-vitrin .av-ust{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-6);margin-bottom:var(--sp-6)}
.arac-vitrin .av-ust .head-block{margin-bottom:0;max-width:62ch}
.arac-vitrin .av-cta{flex:none}
.arac-vitrin .av-cta-alt{display:none}
.arac-vitrin .av-govde{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--sp-5);align-items:stretch}
.arac-vitrin .av-govde .pshot{margin:0;align-self:stretch;display:flex;align-items:center}
.arac-vitrin .av-govde .steps{grid-template-rows:repeat(3,1fr)}
.arac-vitrin .av-govde .step{align-content:center}
@media(max-width:999px){
  .arac-vitrin .av-ust{flex-direction:column;align-items:flex-start;gap:var(--sp-4)}
  .arac-vitrin .av-ust .av-cta{display:none}
  .arac-vitrin .av-cta-alt{display:block;margin-top:var(--sp-5)}
  .arac-vitrin .av-govde{grid-template-columns:1fr}
  .arac-vitrin .av-govde .steps{grid-template-rows:none}
}

/* "Neden bizimle" (ana sayfa): maddeler kart. Tema değişkenleriyle: açık ve koyu temada aynı katman mantığı
   (zemin section-raised → kart yükseltilmiş yüzey + kenar + katmanlı gölge; ikon kutusu turuncu tonlu). */
.neden-kart .aud{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.neden-kart .aud-col{display:contents}
.neden-kart .aud-item{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:var(--sp-4);align-items:center;padding:22px 24px 22px 20px;border-radius:16px;
  background:var(--surface-base);border:1px solid var(--border);
  box-shadow:var(--elevate-inset),0 1px 2px rgba(13,18,38,.08),0 14px 30px -16px rgba(13,18,38,.35),0 22px 44px -30px rgba(240,128,37,.28);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.neden-kart .aud-item:hover{transform:translateY(-3px);box-shadow:var(--elevate-inset),0 2px 4px rgba(13,18,38,.1),0 22px 40px -18px rgba(13,18,38,.45),0 28px 54px -28px rgba(240,128,37,.38)}
.neden-kart .aud-item .ico{width:52px;height:52px;border-radius:14px;color:#F08025;
  background:linear-gradient(160deg,rgba(240,128,37,.2),rgba(240,128,37,.07));border:1px solid rgba(240,128,37,.34)}
.neden-kart .aud-item .ico svg{width:22px;height:22px}
.neden-kart .aud-item h3{font-size:17px;margin:0 0 4px;line-height:1.3}
.neden-kart .aud-item p{font-size:14.5px;line-height:1.65}
@media(max-width:760px){.neden-kart .aud{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.neden-kart .aud-item{transition:none}.neden-kart .aud-item:hover{transform:none}}
.grup-alan{display:inline-block;margin-top:var(--sp-3);font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--action-text)}

/* Toplu üretim (hiyerarşi): başlık → üç rakam kartı (fotoğraf ızgarasının 3 sütunuyla aynı hizada) → fotoğraf mozaiği */
.tu-ust{margin-bottom:var(--sp-6)}
.tu-ust .head-block{max-width:64ch}
.tu-rakam{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);margin-bottom:var(--sp-5)}
.tu-rakam-kart{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:var(--sp-4);align-items:center;padding:20px 22px 20px 18px;border-radius:16px;
  background:var(--surface-base);border:1px solid var(--border);
  box-shadow:var(--elevate-inset),0 1px 2px rgba(13,18,38,.08),0 14px 30px -16px rgba(13,18,38,.35),0 22px 44px -30px rgba(240,128,37,.28);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.tu-rakam-kart:hover{transform:translateY(-3px)}
.tu-rakam-kart .ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;color:#F08025;
  background:linear-gradient(160deg,rgba(240,128,37,.2),rgba(240,128,37,.07));border:1px solid rgba(240,128,37,.34)}
.tu-rakam-kart .ico svg{width:22px;height:22px}
.tu-rakam-kart b{display:block;font-family:var(--font-display,'Oswald'),sans-serif;font-weight:600;font-size:38px;line-height:1;color:var(--action-text)}
.tu-rakam-kart .tu-l{display:block;margin-top:4px;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-primary)}
.tu-rakam-kart p{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--text-muted)}
@media(max-width:900px){.tu-rakam{grid-template-columns:1fr}.tu-rakam-kart{padding:16px 18px 16px 14px}.tu-rakam-kart b{font-size:32px}}
@media(prefers-reduced-motion:reduce){.tu-rakam-kart{transition:none}.tu-rakam-kart:hover{transform:none}}

/* Stok saten renkleri: kart üstü bant kesiti (4:1, pay bant rengiyle dolu) → renk noktası + ad + baskı notu; altta tek baskı alanı şeridi */
.renk-izgara{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.renk-kart{margin:0;border-radius:16px;overflow:hidden;background:var(--surface-base);border:1px solid var(--border);
  box-shadow:var(--elevate-inset),0 1px 2px rgba(13,18,38,.08),0 14px 30px -16px rgba(13,18,38,.35),0 22px 44px -30px rgba(240,128,37,.22);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.renk-kart:hover{transform:translateY(-3px)}
.renk-bant{position:relative;aspect-ratio:4/1;overflow:hidden}
/* mutlak konum: yüzde yükseklik çözülsün, contain bandı kesmeden sığdırsın (pay bant rengiyle dolu) */
.renk-bant img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.renk-kart:hover .renk-bant img{transform:scale(1.04)}
.renk-kart figcaption{display:flex;align-items:center;gap:10px;padding:14px 18px}
.renk-nokta{width:18px;height:18px;border-radius:50%;flex:none;box-shadow:0 0 0 2px var(--surface-base),0 0 0 3px var(--border)}
.renk-kart figcaption b{font-family:var(--font-display,'Oswald'),sans-serif;font-weight:600;font-size:17px;letter-spacing:.02em;text-transform:uppercase;color:var(--text-primary)}
.renk-not{margin-left:auto;font-size:12.5px;color:var(--text-muted)}
.renk-serit{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-5);padding:18px 22px;border-radius:16px;background:var(--surface-base);border:1px solid var(--border);box-shadow:var(--elevate-inset),0 14px 30px -18px rgba(13,18,38,.3)}
.renk-serit .ico{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:13px;color:#F08025;background:linear-gradient(160deg,rgba(240,128,37,.2),rgba(240,128,37,.07));border:1px solid rgba(240,128,37,.34)}
.renk-serit .ico svg{width:20px;height:20px}
.renk-serit p{margin:0;flex:1;font-size:15px;color:var(--text-secondary)}
.renk-serit p b{color:var(--text-primary)}
@media(max-width:900px){.renk-izgara{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}.renk-not{display:none}.renk-serit{flex-wrap:wrap}.renk-serit .btn{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.renk-kart,.renk-bant img{transition:none}.renk-kart:hover{transform:none}}
@media(max-width:900px){.renk-kart:last-child:nth-child(odd){grid-column:1 / -1}}   /* 2 sütunda tek kalan son kart tam genişlik */

/* renk kartelası: bandın tamamı satır satır (eski 3'lü kesit kartlarının yerine) */
.renk-liste{display:grid;gap:10px}
.renk-satir{margin:0;display:grid;grid-template-columns:210px minmax(0,1fr);align-items:center;gap:var(--sp-5);padding:12px 20px 12px 16px;border-radius:14px;
  background:var(--surface-base);border:1px solid var(--border);
  box-shadow:var(--elevate-inset),0 1px 2px rgba(13,18,38,.08),0 10px 24px -16px rgba(13,18,38,.32);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.renk-satir:hover{transform:translateX(4px)}
.renk-satir figcaption{display:flex;align-items:center;gap:12px}
.renk-ad{display:flex;flex-direction:column;line-height:1.2}
.renk-ad b{font-family:var(--font-display,'Oswald'),sans-serif;font-weight:600;font-size:17px;letter-spacing:.02em;text-transform:uppercase;color:var(--text-primary)}
.renk-ad .renk-not{margin:2px 0 0;font-size:12px;color:var(--text-muted)}
.renk-tam img{display:block;width:100%;height:auto;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.18),0 6px 14px -8px rgba(0,0,0,.35)}
@media(max-width:760px){.renk-satir{grid-template-columns:1fr;gap:10px;padding:12px 14px}.renk-satir:hover{transform:none}.renk-ad{flex-direction:row;align-items:baseline;gap:10px}.renk-ad .renk-not{display:inline}}
@media(prefers-reduced-motion:reduce){.renk-satir{transition:none}.renk-satir:hover{transform:none}}

/* ===== Tüm sayfalar (ana sayfa revizyonunun mantığı, 23 Eki) =====
   1) Hero ürün fotoğrafı: beyaz çerçeve/iç boşluk yok, kutuyu doldurur, katmanlı gölge.
   2) Kartlar: yüzey + ince kenar + katmanlı (turuncu tonlu) gölge, bağlantı kartında hafif yükselme.
   3) Izgara: 2 ya da 4 kart 3 sütunda boşluk bırakmaz (2 sütuna geçer).
   4) Özellik tablosu kart yüzeyinde. */
.hero .pshot{padding:0;background:var(--surface-base);border:1px solid var(--border);border-radius:18px;
  box-shadow:0 2px 6px rgba(5,8,20,.25),0 30px 60px -24px rgba(5,8,20,.6),0 40px 80px -40px rgba(240,128,37,.3)}
.hero .pshot img{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;object-position:50% 22%;border-radius:0}
.card{box-shadow:var(--elevate-inset),0 1px 2px rgba(13,18,38,.08),0 14px 30px -16px rgba(13,18,38,.35),0 22px 44px -30px rgba(240,128,37,.22);border-radius:16px}
a.card:hover{transform:translateY(-3px);box-shadow:var(--elevate-inset),0 2px 4px rgba(13,18,38,.1),0 22px 40px -18px rgba(13,18,38,.45),0 28px 54px -28px rgba(240,128,37,.34)}
a.card:active{transform:translateY(-1px) scale(.99)}
a.card:focus-visible{outline:3px solid var(--action);outline-offset:3px}
@media(min-width:1100px){
  .grid-3:has(> :nth-child(2):last-child),.grid-3:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
.table-scroll{border-radius:16px;border:1px solid var(--border);background:var(--surface-base);overflow:hidden;
  box-shadow:var(--elevate-inset),0 1px 2px rgba(13,18,38,.08),0 14px 30px -16px rgba(13,18,38,.35)}
.table-scroll .spec tr:last-child th,.table-scroll .spec tr:last-child td{border-bottom:0}
@media(prefers-reduced-motion:reduce){a.card:hover,a.card:active{transform:none}}
/* galeri sütunu görsel sayısına göre (az görselde boş sütun kalmasın) */
.cg-izgara.cg-1{columns:1;max-width:560px}.cg-izgara.cg-2{columns:2}.cg-izgara.cg-3{columns:3}
@media(max-width:520px){.cg-izgara.cg-3{columns:2}}
/* sayfa galerisi (23 Eki son): duvar yerine eşit oranlı ızgara; görsel kutuyu doldurur, satırlar hizalı */
.cg-izgara{columns:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3)}
.cg-izgara.cg-1{grid-template-columns:minmax(0,560px)}.cg-izgara.cg-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cg-izgara.cg-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cg-izgara .cg-kare{margin:0;aspect-ratio:4/3}
.cg-izgara .cg-kare img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
@media(max-width:900px){.cg-izgara,.cg-izgara.cg-3{grid-template-columns:repeat(2,minmax(0,1fr))}.cg-izgara.cg-1{grid-template-columns:1fr}}
@media(max-width:900px){.cg-izgara.cg-3:not(:has(> :nth-child(6))) > :first-child{grid-column:1 / -1;aspect-ratio:16/9}}   /* mobilde 3 görsel: ilki geniş, altında ikisi yan yana */
@media(max-width:900px){.cg-izgara.cg-3:not(:has(> :nth-child(6))) > :first-child img{object-position:50% 18%}}
.renk-dipnot{margin:var(--sp-3) 0 0;font-size:12.5px;color:var(--text-muted)}
/* metin içindeki bağlantılar renkten başka bir işaretle de ayrışsın (erişilebilirlik: link-in-text-block) */
.ticks a:not(.btn),.card p a:not(.btn),.prose a:not(.btn),p.muted a:not(.btn){text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media(min-width:1000px){.neden-kart .aud.aud-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ===================== buffimalati.com (2 Kas 2026) =====================
   Ana mesaj başlığı + tasarlayıcı vitrin parçaları. Kural: yalnız transform/opacity animasyonu, TR büyük harf başlıkta line-height ≥ 1.24. */
/* Ana mesaj: üst satır (kime) küçük ve yumuşak, ana satır (ne) büyük. İki satır da tek H1'in parçası. */
.hero h1.h1-mesaj{max-width:22ch;line-height:1.24;letter-spacing:-.02em}
.h1-mesaj .h1-ust{display:block;font-size:clamp(15px,1.7vw,21px);font-weight:500;letter-spacing:.04em;line-height:1.4;color:var(--text-secondary);margin-bottom:var(--sp-3);max-width:34ch}
.h1-mesaj .h1-ana{display:block;font-size:clamp(38px,6.2vw,72px);font-weight:600;line-height:1.24;letter-spacing:-.03em}

/* Kullanımda: yatay sahne şeridi (kaydırmalı, kenarlar solar) */
.ks-ust{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-5);margin-bottom:var(--sp-5)}
.ks-ust .head-block{margin-bottom:0;max-width:60ch}
/* Kullanımda kaydırıcısı (3 Kas): kendiliğinden kayan, sürüklenen ray. Katman: ray (yükseltilmiş kartlar) → kontrol çubuğu. */
.ks-kay{position:relative;overflow:hidden;padding:10px 0 26px;margin:0 calc(-1 * var(--sp-3));touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 72px),transparent)}
.ks-kay.surukleniyor{cursor:grabbing}
.ks-kay:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:16px}
.ks-ray{display:flex;gap:var(--sp-4);width:max-content;padding:0 var(--sp-3);will-change:transform}
.ks-kare{position:relative;margin:0;flex:none;width:clamp(220px,23vw,292px);border-radius:18px;overflow:hidden;aspect-ratio:3/4;background:var(--navy-800);
  box-shadow:0 1px 3px rgba(13,18,38,.12),0 18px 36px -18px rgba(13,18,38,.5),0 26px 52px -34px rgba(240,128,37,.34);transition:transform .5s var(--ease-spring)}
.ks-kare:hover{transform:translateY(-6px)}
.ks-kay.surukleniyor .ks-kare:hover{transform:none}
.ks-kare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;pointer-events:none;transition:transform .7s var(--ease-spring)}
.ks-kare:hover img{transform:scale(1.05)}
.ks-kare img:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
.ks-kare::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(242,243,248,.10);pointer-events:none}
.ks-kare::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(to top,rgba(13,18,38,.84),rgba(13,18,38,0));pointer-events:none}
.ks-no{position:absolute;left:14px;top:12px;z-index:1;font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.08em;color:#F2F3F8;
  padding:3px 8px 3px 10px;border-radius:7px;background:rgba(13,18,38,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-left:3px solid #F08025}
.ks-kare figcaption{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:flex;flex-direction:column;line-height:1.3;color:#F2F3F8}
.ks-kare figcaption b{font-family:var(--font-display),sans-serif;font-weight:600;font-size:20px;letter-spacing:.03em;text-transform:uppercase;line-height:1.24}
.ks-kare figcaption span{font-size:12.5px;opacity:.85}
.ks-kontrol{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-2)}
.ks-btn{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;border:1px solid var(--border);background:var(--surface-base);color:var(--text-primary);cursor:pointer;
  box-shadow:0 1px 2px rgba(13,18,38,.06),0 8px 18px -10px rgba(13,18,38,.35);transition:transform .35s var(--ease-spring),background-color .2s,color .2s,border-color .2s}
.ks-btn svg{width:20px;height:20px}
.ks-btn:hover{transform:translateY(-2px);background:#F08025;border-color:#F08025;color:var(--navy-900)}
.ks-btn:active{transform:scale(.93)}
.ks-btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.ks-dur .i-oynat,.ks-dur[aria-pressed="true"] .i-dur{display:none}
.ks-dur[aria-pressed="true"] .i-oynat{display:block}
.ks-ilerleme{position:relative;flex:1;height:3px;border-radius:3px;background:var(--border);overflow:hidden;margin:0 var(--sp-2)}
.ks-ilerleme span{position:absolute;inset:0;background:linear-gradient(90deg,#F08025,#F6984C);transform-origin:left;transform:scaleX(.08)}
.ks-sayac{font-family:var(--font-display);font-size:14px;letter-spacing:.08em;color:var(--text-muted);min-width:64px;text-align:right}
.ks-sayac b{color:var(--text-primary);font-weight:600;font-size:18px}
.ks-not{margin:var(--sp-2) 0 0;font-size:12.5px;color:var(--text-muted)}
@media(max-width:999px){.ks-ust{flex-direction:column;align-items:flex-start}}
@media(max-width:700px){.ks-kare{width:64vw}.ks-btn{width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){.ks-kare,.ks-kare img,.ks-btn{transition:none}}

/* Logo deseni: 8 düzen (düz baskı 1:2) + 360° ve hazır desen kartları */
.ld-serit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-5)}
.ld-kare{margin:0;text-align:center}
/* 3B tüp mockup (tasarlayıcının 360° görünümünden, saydam): lacivert sahne + zemin gölgesi */
.ld-sahne{position:relative;display:grid;place-items:center;aspect-ratio:4/5;padding:7% 15%;border-radius:18px;overflow:hidden;isolation:isolate;border:1px solid #E7E9EE;
  background:radial-gradient(90% 70% at 50% 30%,#FFFFFF 0%,#F2F3F8 55%,#DDE1EE 100%);box-shadow:0 1px 3px rgba(13,18,38,.08),0 20px 40px -22px rgba(13,18,38,.4)}
.ld-sahne::before{content:"";position:absolute;left:24%;right:24%;bottom:14%;height:7%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(13,18,38,.45),transparent)}
.ld-sahne::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 35% at 50% 100%,rgba(240,128,37,.16),transparent 70%)}
.ld-kare img{display:block;width:100%;height:auto;transition:transform .6s var(--ease-spring)}
.ld-kare:hover img{transform:translateY(-6px) rotate(-2deg)}
.ld-kare figcaption{margin-top:var(--sp-3);font-family:var(--font-display);text-transform:uppercase;font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--text-secondary);line-height:1.4}
.ld-alt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-6)}
.ld-kart{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--sp-5);align-items:center;padding:var(--sp-4);border-radius:18px;background:var(--surface-base);border:1px solid var(--border);
  box-shadow:var(--elevate-inset),0 1px 2px rgba(13,18,38,.08),0 14px 30px -16px rgba(13,18,38,.35),0 22px 44px -30px rgba(240,128,37,.22)}
.ld-kart h3{font-size:19px;margin:0 0 var(--sp-2)}
.ld-kart p{margin:0;font-size:14.5px;line-height:1.65;color:var(--text-secondary)}
.ld-360{position:relative;border-radius:12px;overflow:hidden;background:#F2F3F5;box-shadow:inset 0 0 0 1px rgba(13,18,38,.06)}
.ld-360 img,.ld-video{display:block;width:100%;height:auto}
.ld-video{aspect-ratio:3/4;object-fit:cover}
/* video oynat/durdur: hareket azaltılmışsa kendiliğinden oynamaz, düğme "oynat" gösterir */
.ld-oynat{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(20,28,54,.82);color:#F2F3F8;box-shadow:0 6px 16px -6px rgba(13,18,38,.5);transition:transform .35s var(--ease-spring)}
.ld-oynat svg{width:18px;height:18px}
.ld-oynat:hover{transform:scale(1.08)}
.ld-oynat:active{transform:scale(.92)}
.ld-oynat:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.ld-oynat .i-oynat,.ld-oynat[aria-pressed="true"] .i-dur{display:none}
.ld-oynat[aria-pressed="true"] .i-oynat{display:block}
.ld-rozet{position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:999px;background:#F08025;color:#141C36;font-family:var(--font-display),sans-serif;font-weight:600;font-size:13px;letter-spacing:.04em}
.ld-ikili{display:grid;grid-template-columns:.62fr 1fr;gap:var(--sp-2);align-items:stretch}
.ld-ikili img{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px}
.ld-cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;margin-top:var(--sp-6)}
@media(max-width:1000px){.ld-serit{grid-template-columns:repeat(2,minmax(0,1fr))}.ld-alt{grid-template-columns:1fr}}
@media(max-width:560px){.ld-kart{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.ld-kare img{transition:none}.ld-kare:hover img{transform:none}}

/* Kimler için kartları: görsel üstte, "Sayfaya git" oku */
.kitle .card-foto img{aspect-ratio:4/3;object-fit:cover;object-position:50% 28%}
.kitle-ok{display:inline-flex;align-items:center;gap:6px;margin-top:var(--sp-3);font-size:13px;font-weight:600;color:var(--action-text)}
.kitle-ok::after{content:"→";transition:transform .25s cubic-bezier(.22,1,.36,1)}
.kitle-kart:hover .kitle-ok::after{transform:translateX(4px)}

/* Akış: Tasarla → Kullanımda gör → Teklif → Üretim */
.akis{list-style:none;margin:var(--sp-6) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);counter-reset:none}
.akis-adim{position:relative;padding:22px 20px 20px;border-radius:16px;background:var(--surface-base);border:1px solid var(--border);
  box-shadow:var(--elevate-inset),0 1px 2px rgba(13,18,38,.08),0 14px 30px -16px rgba(13,18,38,.35);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.akis-adim:hover{transform:translateY(-3px)}
.akis-adim .ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;color:#F08025;background:linear-gradient(160deg,rgba(240,128,37,.2),rgba(240,128,37,.07));border:1px solid rgba(240,128,37,.34)}
.akis-adim .ico svg{width:22px;height:22px}
.akis-no{position:absolute;top:16px;right:18px;font-family:var(--font-display),sans-serif;font-weight:600;font-size:34px;line-height:1;color:var(--border-strong);opacity:.35}
.akis-adim h3{font-size:18px;margin:var(--sp-4) 0 var(--sp-2);line-height:1.3}
.akis-adim p{margin:0;font-size:14.5px;line-height:1.65;color:var(--text-secondary)}
@media(max-width:1000px){.akis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.akis{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.akis-adim{transition:none}.akis-adim:hover{transform:none}}

/* Tasarla şeridi: canlı metinli buff sayfaları ve arşivler */
.ts-serit{display:flex;align-items:center;gap:var(--sp-5);padding:16px 22px 16px 16px;border-radius:18px;
  background:linear-gradient(120deg,var(--navy-800),#172046);color:var(--text-on-inverse);
  box-shadow:0 2px 6px rgba(5,8,20,.25),0 24px 48px -24px rgba(5,8,20,.6),0 30px 60px -36px rgba(240,128,37,.35)}
.ts-serit p{margin:0;flex:1;font-size:15px;line-height:1.6;color:var(--text-on-inverse-soft)}
.ts-serit p b{color:var(--text-on-inverse)}
.ts-gorsel{display:flex;gap:8px;flex:none}
.ts-gorsel img{display:block;height:84px;width:auto;border-radius:10px;object-fit:cover}
.ts-gorsel img:first-child{width:64px}
.ts-gorsel img:last-child{width:42px}
@media(max-width:760px){.ts-serit{flex-wrap:wrap}.ts-serit .btn{width:100%;justify-content:center}}
/* mobil üst çubuk: "Hemen Tasarla" + logo sığsın (tema düğmesi dar ekranda gizli; tema sistem tercihini izler) */
@media(max-width:460px){.nav .tema-btn{display:none}.nav-cta{gap:6px !important}}

/* ===== TOPTAN ÖZEL ÜRETİM (3 Kas): atölyeden gerçek toplu sipariş fotoğrafları =====
   Amaç: siteye girildiği anda ve devamında "toptan özel üretici" hissi.
   Katmanlar: üst şerit (taban) → fotoğraf kareleri (yükseltilmiş) → kahraman rozetleri (yüzen). Yalnız transform/opacity animasyonu. */
.tp-ust-serit{background:var(--navy-950);color:#C1C8E2;font-family:var(--font-display);font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase}
.tp-ust-serit .wrap{display:flex;justify-content:center;gap:var(--sp-5);height:32px;align-items:center;white-space:nowrap;overflow:hidden}
.tp-ust-serit span{display:inline-flex;align-items:center;gap:var(--sp-5)}
.tp-ust-serit span + span::before{content:"";width:5px;height:5px;border-radius:50%;background:#F08025;flex:none}
.tp-ust-serit span:first-child{color:#F6984C}
@media(max-width:899px){.tp-us-genis{display:none!important}.tp-ust-serit{font-size:11px;letter-spacing:.06em}.tp-ust-serit .wrap{gap:var(--sp-3)}.tp-ust-serit span{gap:var(--sp-3)}}

/* kahraman: ana fotoğraf + atölye karesi + kapasite rozeti */
.tp-hero{position:relative;margin:0 0 var(--sp-6) var(--sp-5)}
.tp-hero-ana{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 2px 6px rgba(13,18,38,.10),0 28px 60px -18px rgba(13,18,38,.45),0 0 0 1px rgba(13,18,38,.06)}
.tp-hero-ana img{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover}
.tp-hero-ana::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,18,38,.42),rgba(13,18,38,0) 42%);pointer-events:none}
.tp-hero-kucuk{position:absolute;left:calc(-1 * var(--sp-6));bottom:calc(-1 * var(--sp-6));width:44%;margin:0;border-radius:14px;overflow:hidden;border:5px solid var(--surface-base);
  box-shadow:0 2px 6px rgba(13,18,38,.14),0 22px 44px -14px rgba(13,18,38,.5)}
.tp-hero-kucuk img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.tp-hero-kucuk figcaption{position:absolute;left:8px;top:8px;padding:3px 9px;border-radius:6px;background:#F08025;color:var(--navy-900);font-family:var(--font-display);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.tp-hero-cip{position:absolute;right:calc(-1 * var(--sp-4));top:var(--sp-5);display:grid;gap:2px;padding:var(--sp-3) var(--sp-4);border-radius:12px;background:var(--navy-800);color:#F2F3F8;
  box-shadow:0 2px 6px rgba(13,18,38,.2),0 18px 36px -12px rgba(13,18,38,.55);border:1px solid rgba(242,243,248,.12)}
.tp-hero-cip b{font-family:var(--font-display);font-size:26px;font-weight:600;line-height:1.1;color:#F6984C;letter-spacing:-.01em}
.tp-hero-cip span{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#C1C8E2}
@media(max-width:919px){.tp-hero{margin:var(--sp-2) 0 var(--sp-6) 0}.tp-hero-kucuk{left:var(--sp-3);bottom:calc(-1 * var(--sp-5));width:46%}.tp-hero-cip{right:var(--sp-3);top:var(--sp-3)}.tp-hero-cip b{font-size:21px}}

/* atölyeden ızgara */
.tp-bolum{position:relative}
.tp-izgara{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,15vw,230px);gap:var(--sp-3);margin-top:var(--sp-6)}
.tp-kare{margin:0;position:relative;border-radius:14px;overflow:hidden;background:var(--navy-900);box-shadow:0 1px 3px rgba(13,18,38,.10),0 16px 36px -16px rgba(13,18,38,.42)}
.tp-kare img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-spring)}
.tp-kare:hover img{transform:scale(1.045)}
.tp-kare::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,14,30,.62),rgba(10,14,30,0) 46%);pointer-events:none}
.tp-kare figcaption{position:absolute;left:var(--sp-4);bottom:var(--sp-3);z-index:1;display:flex;align-items:center;gap:8px;color:#fff;font-family:var(--font-display);font-size:13.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.tp-kare figcaption::before{content:"";width:16px;height:3px;border-radius:2px;background:#F08025}
.tp-buyuk{grid-column:span 2;grid-row:span 2}
.tp-buyuk figcaption{font-size:16px}
@media(max-width:699px){.tp-izgara{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:130px}}
.tp-olgu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-5)}
.tp-olgu-k{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4);border-radius:14px;background:var(--surface-raised);border:1px solid var(--border);box-shadow:var(--elevate-inset)}
.tp-olgu-k .ico{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:12px;color:#F08025;background:linear-gradient(160deg,rgba(240,128,37,.2),rgba(240,128,37,.07));border:1px solid rgba(240,128,37,.34)}
.tp-olgu-k .ico svg{width:22px;height:22px}
.tp-olgu-k b{display:block;font-family:var(--font-display);font-size:17px;font-weight:600;text-transform:uppercase;letter-spacing:.01em;line-height:1.24;color:var(--text-primary)}
.tp-olgu-k span{display:block;font-size:13.5px;line-height:1.5;color:var(--text-secondary);margin-top:2px}
@media(max-width:899px){.tp-olgu{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:479px){.tp-olgu{grid-template-columns:1fr}}

/* kayan şerit */
.tp-serit-bolum{padding:0 0 var(--sp-8);overflow:hidden}
.tp-serit{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tp-serit-ic{display:flex;gap:var(--sp-3);width:max-content;animation:tpKay 90s linear infinite}
.tp-serit:hover .tp-serit-ic{animation-play-state:paused}
.tp-serit-kare{position:relative;margin:0;width:300px;height:190px;flex:none;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(13,18,38,.10),0 12px 26px -14px rgba(13,18,38,.4)}
.tp-serit-kare img{width:100%;height:100%;object-fit:cover;display:block}
.tp-serit-kare::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,14,30,.6),rgba(10,14,30,0) 50%)}
.tp-serit-kare figcaption{position:absolute;left:12px;bottom:9px;z-index:1;color:#fff;font-family:var(--font-display);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
@keyframes tpKay{to{transform:translateX(-50%)}}
@media(max-width:699px){.tp-serit-kare{width:220px;height:140px}}
@media(prefers-reduced-motion:reduce){.tp-serit-ic{animation:none}.tp-serit{overflow-x:auto}.tp-kare img{transition:none}}

/* tam genişlik üretici bandı */
.tp-bant{position:relative;isolation:isolate;padding:var(--sp-10) 0;overflow:hidden}
.tp-bant-foto{position:absolute;inset:0;z-index:-1}
.tp-bant-foto img{width:100%;height:100%;object-fit:cover;display:block}
.tp-bant-foto::before{content:"";position:absolute;inset:0;z-index:1;background:#1E2954;mix-blend-mode:multiply;opacity:.3}
.tp-bant-foto::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(13,18,38,.92) 0%,rgba(13,18,38,.66) 45%,rgba(13,18,38,.08) 100%),linear-gradient(to top,rgba(13,18,38,.6),rgba(13,18,38,0) 50%)}
.tp-bant-ic > *{max-width:640px}
.tp-bant h2{font-size:clamp(28px,4.4vw,48px);line-height:1.24;letter-spacing:-.02em;margin:var(--sp-3) 0 var(--sp-4)}
.tp-bant .accent,.tp-bant .eyebrow{color:#F6984C}
.tp-bant p{font-size:17px;line-height:1.7}
@media(max-width:699px){.tp-bant{padding:var(--sp-9) 0}.tp-bant-foto::after{background:linear-gradient(to top,rgba(13,18,38,.95),rgba(13,18,38,.72))}}

/* çekirdek sayfalar: dörtlü */
.tp-dortlu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3)}
.tp-dortlu .tp-kare{aspect-ratio:4/3}
@media(max-width:699px){.tp-dortlu{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tp-kare img:focus-visible,.tp-serit-kare img:focus-visible,.ld-kare img:focus-visible,.tp-hero-ana img:focus-visible,.tp-hero-kucuk img:focus-visible,.av-govde .pshot img:focus-visible,.hero .pshot img:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:10px}

/* ===== Kişiye özel buff (3 Kas) ===== */
.ko-izgara{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--sp-8);align-items:center}
.ko-liste{margin:var(--sp-4) 0 var(--sp-5)}
.ko-gorsel{position:relative;display:block;max-width:400px;justify-self:end;width:100%}
.ko-gorsel .ld-360{border-radius:18px;box-shadow:0 1px 3px rgba(13,18,38,.08),0 22px 44px -22px rgba(13,18,38,.45)}
.ko-gorsel .ld-sahne{aspect-ratio:4/5;padding:6% 22% 8%}
.ko-gorsel img{display:block;width:100%;height:auto}
.ko-etiket{position:absolute;left:16px;bottom:16px;transition:transform .35s var(--ease-spring);padding:7px 14px;border-radius:999px;background:#F08025;color:var(--navy-900);font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;box-shadow:var(--shadow-ember)}
.ko-etiket:hover{transform:translateY(-2px)}
.ko-etiket:active{transform:scale(.96)}
.ko-etiket:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
@media(max-width:899px){.ko-izgara{grid-template-columns:1fr;gap:var(--sp-6)}.ko-gorsel{max-width:340px;justify-self:start}}

/* ===== Toptan adet kademeleri ===== */
.ak-izgara{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
.ak-kart{position:relative;display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5);border-radius:16px;background:var(--surface-base);border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(13,18,38,.05),0 14px 30px -18px rgba(13,18,38,.3),var(--elevate-inset)}
.ak-basamak{display:flex;align-items:flex-end;gap:4px;height:28px;margin-bottom:var(--sp-2)}
.ak-basamak i{width:10px;border-radius:3px;background:#F08025}
.ak-basamak i:nth-child(1){height:30%}.ak-basamak i:nth-child(2){height:55%}.ak-basamak i:nth-child(3){height:78%}.ak-basamak i:nth-child(4){height:100%}
.ak-adet{font-family:var(--font-display);font-size:32px;font-weight:600;line-height:1.1;letter-spacing:-.02em;color:var(--text-primary)}
.ak-adet small{font-size:15px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.ak-kim{font-size:13.5px;font-weight:600;color:var(--action-text)}
.ak-kart ul{list-style:none;margin:var(--sp-2) 0 0;padding:var(--sp-3) 0 0;border-top:1px solid var(--border);display:grid;gap:6px}
.ak-kart ul li{position:relative;padding-left:18px;font-size:14px;line-height:1.5;color:var(--text-secondary)}
.ak-kart ul li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:2px;background:var(--navy-300)}
@media(max-width:999px){.ak-izgara{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:519px){.ak-izgara{grid-template-columns:1fr}}

/* ===== Ambalaj seçenekleri ===== */
.amb-izgara{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}   /* 3 seçenek: etiket takma yok (kullanıcı 3 Kas) */
.amb-kart .tp-kare{aspect-ratio:4/3;margin-bottom:var(--sp-3)}
.amb-kart h3{font-size:19px;margin-bottom:var(--sp-1)}
.amb-kart p{margin:0;font-size:14.5px;line-height:1.6;color:var(--text-secondary)}
.amb-kart .tp-kare figcaption{left:auto;right:10px;top:10px;bottom:auto;padding:3px 9px;border-radius:6px;background:#F08025;color:var(--navy-900);font-size:12px}
.amb-kart .tp-kare figcaption::before{display:none}
@media(max-width:999px){.amb-izgara{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:519px){.amb-izgara{grid-template-columns:1fr}}

/* ===== Referans şeridi (3 Kas, 2. sürüm) =====
   Hiyerarşi: başlık (sol) → logo karoları (sağ, iki sıra karşılıklı kayar). Karolar her temada beyaz: logolar beyaz zemine göre çizilmiş.
   Varsayılan gri ton, üzerine gelince renk; dokunmatikte renkli. Yalnız transform/opacity/filter. */
.ref-bolum{position:relative;padding:var(--sp-5) 0 var(--sp-6);background:var(--surface-raised);border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden}
.ref-etiket{display:block;margin-bottom:var(--sp-3);font-family:var(--font-display);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.ref-siralar{display:grid;gap:var(--sp-3);min-width:0}
.ref-serit{overflow:hidden;padding:6px 0 10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ref-ic{list-style:none;margin:0;padding:0;display:flex;gap:var(--sp-3);width:max-content;animation:tpKay 90s linear infinite}
.ref-ters{animation-direction:reverse;animation-duration:80s}
.ref-serit:hover .ref-ic,.ref-serit:has(.ref-oge:focus-visible) .ref-ic{animation-play-state:paused}   /* tıklamadan kalan odak durdurmaz; yalnız fare üstünde ve klavye odağında */
.ref-ic li{flex:none}
.ref-oge{display:grid;place-items:center;width:184px;height:92px;padding:16px 22px;border-radius:14px;border:1px solid rgba(13,18,38,.07);background:#FFFFFF;cursor:zoom-in;
  box-shadow:0 1px 2px rgba(13,18,38,.06),0 10px 22px -14px rgba(13,18,38,.35);transition:transform .4s var(--ease-spring),box-shadow .3s}
.ref-oge img{width:100%;height:calc(58px * var(--s,1));object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter .3s,opacity .3s}
.ref-oge:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(13,18,38,.08),0 18px 32px -16px rgba(13,18,38,.45),0 12px 30px -20px rgba(240,128,37,.45)}
.ref-oge:hover img,.ref-oge:focus-visible img{filter:none;opacity:1}
.ref-oge:active{transform:scale(.96)}
.ref-oge:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.ref-yazi span{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.24;text-align:center;color:#484C5B;opacity:.8}
.ref-yazi:hover span{opacity:1;color:#141C36}
@media(hover:none){.ref-oge img{filter:none;opacity:1}}
@media(max-width:699px){.ref-bolum{padding:var(--sp-4) 0 var(--sp-5)}.ref-oge{width:148px;height:78px;padding:14px 18px}}
@media(prefers-reduced-motion:reduce){.ref-ic{animation:none}.ref-serit{overflow-x:auto}.ref-oge,.ref-oge img{transition:none}}

/* Ana sayfa kahramanı sıkılaştırıldı (3 Kas, kullanıcı onayı): referans şeridinin ilk sırası 1440×900 ve üstü ekranlarda kaydırmadan görünsün.
   Rakam kartları tek sırada (kompakt; etiket iki satıra kırılabilir), üst-alt boşluk daraldı. */
@media(min-width:900px){ .hero-ana{padding:48px 0 36px} }
@media(min-width:1100px){
  .hero-ana .stats{grid-template-columns:repeat(4,1fr);gap:var(--sp-3);margin-top:var(--sp-5)}
  .hero-ana .stats > div{padding:var(--sp-3) var(--sp-4)}
  .hero-ana .stat-n{font-size:30px}
  .hero-ana .stat-l{font-size:10.5px;line-height:1.35}
}
.ref-bolum{padding-top:var(--sp-4)}
@media(min-width:920px){ .hero-ana .hero-grid{grid-template-columns:1.22fr .78fr;gap:var(--sp-7)} .hero-ana .lead{max-width:60ch} }
@media(min-width:900px){ .hero-ana{padding-bottom:24px} }
.ref-bolum{padding-top:var(--sp-3)}
.ref-etiket{margin-bottom:var(--sp-2)}

/* ===== ORTAK KART HOVER (3 Kas, kullanıcı: "her kartın hover efekti olsun, hepsinde aynı") =====
   Tek efekt: 4 px yükselme + katmanlı lacivert gölge + hafif turuncu ışık; kenarlı kartlarda kenar turuncuya döner.
   Tıklanabilir kartlarda basılma (active). Klavye odağında da aynı yükselme. Kart içi görsel yakınlaştırma/döndürme kaldırıldı (tek tip).
   İSTİSNA (kullanıcı 3 Kas): "8 Düzen" tüp kartları kendi animasyonunu korur (tüp kalkıp hafif eğilir, .ld-kare:hover img).
   Tasarlayıcı sayfası (/buff-tasarla/) aynı değerleri _arac.mjs ile alır; değişirse orayı da güncelle. */
:root{--kart-yuksel:translateY(-4px);
  --kart-golge:0 2px 4px rgba(13,18,38,.08),0 20px 38px -16px rgba(13,18,38,.38),0 16px 34px -22px rgba(240,128,37,.5);
  --kart-kenar:rgba(240,128,37,.5)}
:is(.card,.aud-item,.arac-vitrin .step,.akis-adim,.tp-olgu-k,.ak-kart,.amb-kart,.ld-kart,.ref-oge,.ks-kare,.tp-kare,.tp-serit-kare,.cg-kare,.hero .stats > div,.ko-gorsel .ld-360){
  transition:transform .45s var(--ease-spring),box-shadow .45s var(--ease-spring),border-color .3s ease}
:is(.card,.aud-item,.arac-vitrin .step,.akis-adim,.tp-olgu-k,.ak-kart,.amb-kart,.ld-kart,.ref-oge,.ks-kare,.tp-kare,.tp-serit-kare,.cg-kare,.hero .stats > div,.ko-gorsel .ld-360):is(:hover,:has(:focus-visible),:focus-visible){
  transform:var(--kart-yuksel);box-shadow:var(--kart-golge);border-color:var(--kart-kenar)}
:is(a.card,.ref-oge,.ks-kare,.tp-kare,.tp-serit-kare,.cg-kare):active{transform:translateY(-1px) scale(.985)}
.arac-vitrin .step:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 2px 4px rgba(5,8,20,.35),0 22px 40px -16px rgba(5,8,20,.7),0 16px 34px -22px rgba(240,128,37,.55)}
/* kart içi ek hareketler tek tipe indirildi */
:is(a.card,.tp-kare,.ks-kare,.cg-kare,.tu-kare,.renk-kart):hover :is(img,.card-media img,.card-foto img){transform:none}
.amb-kart .tp-kare:hover{transform:none;box-shadow:0 1px 3px rgba(13,18,38,.10),0 16px 36px -16px rgba(13,18,38,.42)}   /* iç içe kartta yalnız dış kart kalkar */
.ks-kay.surukleniyor .ks-kare:hover{transform:none;box-shadow:none}
@media(prefers-reduced-motion:reduce){:is(.card,.aud-item,.arac-vitrin .step,.akis-adim,.tp-olgu-k,.ak-kart,.amb-kart,.ld-kart,.ref-oge,.ks-kare,.tp-kare,.tp-serit-kare,.cg-kare,.hero .stats > div,.ko-gorsel .ld-360){transition:box-shadow .2s,border-color .2s}
  :is(.card,.aud-item,.arac-vitrin .step,.akis-adim,.tp-olgu-k,.ak-kart,.amb-kart,.ld-kart,.ref-oge,.ks-kare,.tp-kare,.tp-serit-kare,.cg-kare,.hero .stats > div,.ko-gorsel .ld-360):hover{transform:none}}
.hb-host .stats > div{pointer-events:auto}   /* kahraman içeriği ızgara efekti için pointer-events:none; rakam kartları ortak kart hover'ını alsın */

/* Referans karoları: tıklanabilir olduğunu belli eden ipuçları (3 Kas). Rozet: fotoğraf ikonu + sayı (hep görünür); üzerine gelince alt şerit "Fotoğrafları gör". */
.ref-oge{position:relative;overflow:hidden}
.ref-rozet{position:absolute;top:7px;right:7px;display:inline-flex;align-items:center;gap:3px;padding:2px 6px 2px 5px;border-radius:999px;background:#FFF4EB;color:#B25910;font:600 10.5px/1.3 var(--font-body);border:1px solid rgba(240,128,37,.3)}
.ref-rozet svg{width:11px;height:11px}
.ref-gor{position:absolute;left:0;right:0;bottom:0;padding:5px 0 6px;background:#F08025;color:#141C36;font:600 11px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;transform:translateY(100%);opacity:0;transition:transform .35s var(--ease-spring),opacity .2s}
.ref-oge:hover .ref-gor,.ref-oge:focus-visible .ref-gor{transform:none;opacity:1}
.ref-ipucu{margin-left:var(--sp-3);font-family:var(--font-body);font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-muted)}
.ref-ipucu svg{width:13px;height:13px;vertical-align:-2px;margin-right:4px;color:#F08025}
@media(hover:none){.ref-gor{display:none}}
@media(prefers-reduced-motion:reduce){.ref-gor{transition:none}}

/* ===== REFERANSLAR SAYFASI (3 Kas) =====
   Kahraman her temada koyu: lacivert sahne, katmanlı radyal ışık. Solda 3B buff (canvas), sağda başlık + marka paneli. */
.r3-hero{position:relative;overflow:hidden;isolation:isolate;color:#F2F3F8;padding:var(--sp-7) 0 var(--sp-8);
  background:radial-gradient(60% 70% at 28% 45%,rgba(67,89,163,.55),transparent 70%),radial-gradient(40% 50% at 30% 92%,rgba(240,128,37,.22),transparent 70%),radial-gradient(50% 60% at 90% 10%,rgba(48,66,126,.6),transparent 70%),#0D1226}
.r3-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(70% 70% at 40% 50%,#000,transparent);mask-image:radial-gradient(70% 70% at 40% 50%,#000,transparent)}
.r3-izgara{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--sp-7);align-items:center}
.r3-sahne{position:relative;height:clamp(460px,72vh,720px);border-radius:24px;cursor:grab;touch-action:pan-y}
.r3-sahne:active{cursor:grabbing}
.r3-sahne canvas{display:block;width:100%!important;height:100%!important;opacity:0;transition:opacity .8s ease}
.r3-sahne.hazir canvas{opacity:1}
.r3-ipucu{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;white-space:nowrap;
  background:rgba(13,18,38,.72);border:1px solid rgba(242,243,248,.14);font-size:12.5px;font-weight:500;color:#C1C8E2;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none}
.r3-ipucu svg{width:14px;height:14px;color:#F6984C}
.r3-yan h1{color:#F2F3F8;font-size:clamp(36px,4.6vw,58px);letter-spacing:-.02em;margin:var(--sp-2) 0 var(--sp-3)}
.r3-yan .eyebrow{color:#F6984C}
.r3-yan .lead{color:#C1C8E2;margin:0 0 var(--sp-5)}
.r3-panel{position:relative;padding:var(--sp-5);border-radius:18px;background:linear-gradient(160deg,rgba(48,66,126,.45),rgba(20,28,54,.6));border:1px solid rgba(242,243,248,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 48px -24px rgba(0,0,0,.6);min-height:260px}
.r3-panel.r3-gir{animation:r3gir .45s cubic-bezier(.22,1,.36,1)}
@keyframes r3gir{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.r3-sektor{display:inline-block;margin-bottom:var(--sp-2);padding:3px 10px;border-radius:999px;background:rgba(240,128,37,.16);border:1px solid rgba(240,128,37,.35);color:#F6984C;font:600 11px/1.4 var(--font-display);letter-spacing:.1em;text-transform:uppercase}
.r3-ad{margin:0 0 var(--sp-2);font:600 clamp(24px,2.4vw,32px)/1.24 var(--font-display);text-transform:uppercase;letter-spacing:-.01em;color:#F2F3F8}
.r3-ozet{margin:0 0 var(--sp-4);font-size:15px;line-height:1.7;color:#C1C8E2}
.r3-foto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2);margin-bottom:var(--sp-4)}
.r3-kucuk{display:block;padding:0;border:0;border-radius:10px;overflow:hidden;cursor:zoom-in;aspect-ratio:4/3;background:#141C36;transition:transform .35s var(--ease-spring)}
.r3-kucuk img{width:100%;height:100%;object-fit:cover;display:block}
.r3-kucuk:hover{transform:translateY(-3px)}
.r3-kucuk:active{transform:scale(.97)}
.r3-kucuk:focus-visible{outline:3px solid #F08025;outline-offset:2px}
.r3-detay{font-size:14px;font-weight:600;color:#F6984C}
.r3-detay:hover{text-decoration:underline}
.r3-detay:focus-visible{outline:3px solid #F08025;outline-offset:3px;border-radius:4px}
@media(max-width:999px){.r3-izgara{grid-template-columns:1fr;gap:var(--sp-5)}.r3-sahne{height:clamp(380px,62vh,520px)}.r3-panel{min-height:0}}
@media(prefers-reduced-motion:reduce){.r3-panel.r3-gir{animation:none}}

/* sektör listesi ve marka bölümleri */
.r3-sektor-satir{display:grid;grid-template-columns:220px 1fr;gap:var(--sp-5);align-items:center;padding:var(--sp-4) 0;border-top:1px solid var(--border)}
.r3-sektor-satir:first-of-type{border-top:0}
.r3-sektor-ad{font:600 15px/1.3 var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--text-primary)}
.r3-liste{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.r3-liste-oge{cursor:pointer}
/* sektör bantları (2. sürüm, 3 Kas): ardışık bantlar farklı zeminde; koyu temada hafif ışık hüzmesi + ince ızgara (düz lacivert sıkıcı kalıyordu) */
.r3-sek{position:relative;isolation:isolate;overflow:hidden;padding:var(--sp-8) 0}
.r3-sek::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(45% 55% at 92% 8%,rgba(240,128,37,.09),transparent 70%),radial-gradient(50% 60% at 4% 96%,rgba(67,89,163,.14),transparent 70%)}
.r3-sek-b::before{background:radial-gradient(45% 55% at 6% 6%,rgba(240,128,37,.08),transparent 70%),radial-gradient(50% 60% at 96% 94%,rgba(67,89,163,.16),transparent 70%)}
.r3-sek::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 45%);mask-image:linear-gradient(180deg,#000,transparent 45%)}
.r3-sek-ust{position:relative;margin-bottom:var(--sp-6)}
.r3-sek-ust .head-block{margin-bottom:0}
.r3-sek-no{position:absolute;right:0;top:-18px;font:700 clamp(72px,9vw,128px)/1 var(--font-display);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(240,128,37,.35);pointer-events:none}
.r3-kartlar{display:grid;gap:var(--sp-5)}
.r3-marka{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:var(--sp-6);align-items:center;padding:var(--sp-5);border-radius:20px;scroll-margin-top:120px;
  background:var(--surface-base);border:1px solid var(--border);box-shadow:var(--elevate-inset),0 1px 2px rgba(13,18,38,.05),0 14px 32px -20px rgba(13,18,38,.35)}
.section-raised .r3-marka{background:var(--surface-base)}
.r3-sek-a .r3-marka{background:var(--surface-raised)}
.r3-logo-rozet{display:inline-grid;place-items:center;width:150px;height:68px;padding:10px 16px;margin-bottom:var(--sp-4);border-radius:14px;background:#FFFFFF;border:1px solid rgba(13,18,38,.08);box-shadow:0 8px 20px -14px rgba(13,18,38,.45)}
.r3-logo-rozet img{width:100%;height:calc(44px * var(--s,1));object-fit:contain}
.r3-logo-rozet b{font:600 14px/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.06em;color:#141C36;text-align:center}
.r3-marka h3{font-size:clamp(22px,2.3vw,28px);margin-bottom:var(--sp-2)}
.r3-marka p{margin:0 0 var(--sp-3);color:var(--text-secondary);line-height:1.7}
.r3-ilgili{font-weight:600;color:var(--action-text)}
.r3-ilgili::after{content:" →"}
.r3-ilgili:hover{text-decoration:underline}
.r3-ilgili:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:4px}
.r3-marka-foto{display:grid;gap:var(--sp-3)}
.r3-marka-foto.r3-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.r3-marka-foto.r3-n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.r3-marka-foto.r3-n1{grid-template-columns:1fr}
.r3-marka-foto .tp-kare{aspect-ratio:4/3}
.r3-marka-foto.r3-n1 .tp-kare{aspect-ratio:3/1}
@media(max-width:899px){.r3-sektor-satir{grid-template-columns:1fr;gap:var(--sp-3)}.r3-marka{grid-template-columns:1fr;gap:var(--sp-4);padding:var(--sp-4)}.r3-sek{padding:var(--sp-7) 0}.r3-sek-no{top:-6px}}
@media(max-width:519px){.r3-marka-foto.r3-n3{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* menüye "Referanslar" eklendi (3 Kas): marka bloğu sıkışmasın, bağlantı aralığı orta genişlikte daralır */
.nav-in .brand{flex:none}
@media(min-width:1000px) and (max-width:1499px){.nav-links{gap:12px}.nav-link{font-size:14px}}
.r3-yol{display:flex;gap:8px;align-items:center;margin-bottom:var(--sp-4);font-size:13px;color:#95A3D0}
.r3-yol a{color:#C1C8E2}
.r3-yol a:hover{color:#F6984C}
.r3-yol a:focus-visible{outline:3px solid #F08025;outline-offset:3px;border-radius:4px}
@media(min-width:1200px) and (max-width:1499px){.brand-dom{display:none}}
.r3-dokun{display:none}
@media(hover:none){.r3-fare{display:none}.r3-dokun{display:inline}}
/* 3B yüklenene kadar (ya da WebGL yoksa) buffun kapak görüntüsü; 3B hazır olunca söner */
.r3-kapak{position:absolute;left:50%;top:46%;height:82%;width:auto;max-width:90%;object-fit:contain;transform:translate(-50%,-50%);pointer-events:none;transition:opacity .8s ease}
.r3-sahne.hazir .r3-kapak{opacity:0}
.r3-yedek .r3-ipucu{display:none}.r3-yedek{cursor:default}
.ref-bolum > .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.ref-tumu{font-size:13px;font-weight:600;color:var(--action-text);margin-bottom:var(--sp-2)}
.ref-tumu::after{content:" →"}
.ref-tumu:hover{text-decoration:underline}
.ref-tumu:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:4px}
.r3-marka{transition:transform .45s var(--ease-spring),box-shadow .45s var(--ease-spring),border-color .3s ease}
.r3-marka:is(:hover,:has(:focus-visible)){transform:var(--kart-yuksel);box-shadow:var(--kart-golge);border-color:var(--kart-kenar)}
.r3-marka .tp-kare:hover{transform:none;box-shadow:0 1px 3px rgba(13,18,38,.10),0 16px 36px -16px rgba(13,18,38,.42)}   /* iç içe kartta yalnız dış kart kalkar */
@media(prefers-reduced-motion:reduce){.r3-marka:hover{transform:none}}

/* İletişim kahramanı: fotoğraf yerine logomuz (bandanaimalati.com/iletisim kalıbı, 3 Kas) */
.il-logo{display:grid;place-items:center;gap:var(--sp-4);padding:var(--sp-8) var(--sp-7);border-radius:20px;background:radial-gradient(80% 90% at 30% 20%,#30427E,#1E2954 60%,#141C36);
  box-shadow:0 2px 6px rgba(13,18,38,.15),0 28px 56px -24px rgba(13,18,38,.55);color:#F2F3F8}
.il-logo .il-logo-svg{width:100%;max-width:340px;height:auto;color:#FFFFFF}
.il-logo span{font:500 12px/1.3 var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:#F6984C}
.il-tesis{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:699px){.il-tesis{grid-template-columns:1fr}}

/* ara genişliklerde menü sığsın (4 Kas): önce marka yazısı, sonra "Hemen Tasarla" yazısı gizlenir; logo ve bağlantılar kalır. İngilizce etiketler uzun: eşikler daha geniş. */


/* ===== Üst şerit ayar grubu (4 Kas, 3. sürüm): dil + tema yan yana, aynı biçim, şeridin sağ ucunda =====
   Menü yalnız logo + bağlantılar + tasarla düğmesi: sayfa ızgarasına (1.132 px) sığar, sağ uç alttaki içerikle hizalı. */
.tp-ust-serit .wrap{justify-content:flex-start}
.tp-ust-serit .wrap > span{flex-shrink:0}   /* kesilmez: sığmayan öğe bütün olarak gizlenir */
.tp-ust-serit .wrap > span:first-child{margin-left:auto}
.serit-arac{margin-left:auto;flex:none;display:flex;align-items:center;gap:6px;padding-left:var(--sp-4)}
.serit-arac .dil-sec,.serit-arac .tema-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:24px;border-radius:7px;border:1px solid rgba(242,243,248,.24);
  background:transparent;color:#DDE1EE;font:600 11px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease}
.serit-arac .dil-sec{padding:0 8px}
.serit-arac .tema-btn{width:26px;padding:0}
.serit-arac svg{width:13px;height:13px}
.serit-arac .dil-sec:hover,.serit-arac .tema-btn:hover{border-color:#F08025;color:#F6984C;background:rgba(240,128,37,.10);text-decoration:none;transform:none;box-shadow:none}
.serit-arac .dil-sec:active,.serit-arac .tema-btn:active{background:rgba(240,128,37,.2)}
.serit-arac .dil-sec:focus-visible,.serit-arac .tema-btn:focus-visible{outline:2px solid #F08025;outline-offset:2px}
.nav-links{gap:16px}
@media(max-width:899px){.tp-ust-serit .wrap > span:first-child{margin-left:0}}
.serit-arac .dil-kisa{display:none}
@media(max-width:1199px){.tp-ust-serit .tp-us-genis{display:none!important}}
@media(max-width:1599px){html[lang="en"] .tp-ust-serit .tp-us-genis{display:none!important}}
@media(max-width:1099px){html[lang="en"] .tp-ust-serit .wrap > span:nth-of-type(3){display:none}}
@media(max-width:620px){.tp-ust-serit .wrap > span:nth-of-type(3){display:none}.serit-arac .dil-uzun{display:none}.serit-arac .dil-kisa{display:inline}}
@media(max-width:620px){html[lang="en"] .tp-ust-serit .wrap > span:nth-of-type(2){display:none}}
@media(max-width:460px){.tp-ust-serit .serit-arac .tema-btn{display:inline-flex}}
@media(min-width:1000px) and (max-width:1099px){.nav .brand-txt,.nav .brand-sep{display:none}.nav-links{gap:11px}.nav-link{font-size:13.5px}}

/* ===== Kompakt sabit menü (4 Kas): şerit ekrandan çıkınca menü inceleşir, dil + tema menüde belirir =====
   Yer: marka yazısı gizlenir (logo kalır), dil kısaltma "EN/TR". Yalnız transform/opacity animasyonu. */
.nav .nav-arac{display:none;padding-left:0;margin-right:2px}
.nav .nav-arac .dil-sec,.nav .nav-arac .tema-btn{height:34px;border-radius:9px;border:1px solid var(--border);background:var(--surface-base);color:var(--text-secondary);font-size:12px}
.nav .nav-arac .tema-btn{width:34px}
.nav .nav-arac .dil-uzun{display:none}.nav .nav-arac .dil-kisa{display:inline}
.nav .nav-arac .dil-sec:hover,.nav .nav-arac .tema-btn:hover{border-color:var(--border-strong);color:var(--action-text);background:var(--surface-base)}
@media(min-width:1200px){   /* 1000-1199: sığmaz, dil + tema yalnız üst şeritte */
  .nav.kaydi .nav-arac{display:flex;animation:navAracGir .35s var(--ease-spring)}
  .nav.kaydi .brand-txt,.nav.kaydi .brand-sep{display:none}
}
.nav .nav-in{transition:height .3s var(--ease-spring)}
@media(min-width:1000px){.nav.kaydi .nav-in{height:58px}}
@keyframes navAracGir{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.nav.kaydi .nav-arac{animation:none}.nav .nav-in{transition:none}}
/* alt bilgide dil bağlantısı */
.footer-dil a{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:underline;text-underline-offset:3px}
.footer-dil a:hover{color:#F6984C}
.footer-dil a:focus-visible{outline:2px solid #F08025;outline-offset:3px;border-radius:3px}
.footer-dil svg{width:14px;height:14px}

/* arşiv desenli temiz tüp (filigran temizliği 4 Kas): tüp kesilmesin, altında desen adı + tasarlayıcı bağlantısı */
.cg-izgara .cg-arsiv{aspect-ratio:auto;display:flex;flex-direction:column;background:#fff}
.cg-izgara .cg-arsiv img{aspect-ratio:4/3;height:auto;object-fit:contain;object-position:50% 50%}
.cg-arsiv figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex:1;padding:10px 14px;border-top:1px solid rgba(30,41,84,.08);font:500 .85rem/1.4 Montserrat,sans-serif;color:#1E2954;cursor:default}
.cg-arsiv figcaption a{font-weight:700;color:#1E2954;text-decoration:none;border-bottom:2px solid #F08025;white-space:nowrap;transition:opacity .2s}
.cg-arsiv figcaption a:hover{opacity:.7}.cg-arsiv figcaption a:focus-visible{outline:2px solid #F08025;outline-offset:3px}.cg-arsiv figcaption a:active{opacity:.5}
[data-theme=dark] .cg-arsiv figcaption,[data-theme=dark] .cg-arsiv figcaption a{color:#1E2954}