/* ==========================================================================
   SICAKLIK İNİŞİ — site geneli tasarım katmanı
   --------------------------------------------------------------------------
   sahne.css'in üstüne biner. Omurga: sayfa yukarıdan aşağı 90 °C'den 8 °C'ye
   soğur; aksan rengi, ısı hattı ve okuma bunu birlikte izler.

   Kural: GÖRSEL BÜYÜK VE BOZULMAZ. Her fotoğraf object-fit:cover ile kendi
   oranını korur; hiçbir yerde germe (stretch) yok.
   ========================================================================== */


/* --------------------------------------------------------------- tipografi
   Barlow Condensed sportif bir grotesk; spa/longevity tarafında yanlış ses
   veriyordu. Görüntü fontu yüksek kontrastlı serife çevrildi — bu segmentin
   (Aman, Six Senses, longevity klinikleri) ortak dili. Barlow yalnızca
   mikro tipografide kalıyor: etiket, künye, buton, rakam altı. */
/* 16.9.26 — görüntü fontu da Inter. Serif tamamen kalktı. */
:root{--t:JO,Jost,'Futura PT',Futura,Avenir Next,-apple-system,sans-serif}
h1,h2,h3,.display,.thesis__text,.hero__ic h1,.khero__ic h1,
.dizi__bas h2,.krakam h2,.kapanis h2,.hacim__sol h3,.sec-head h2{
  font-family:var(--t)!important;font-weight:500!important;
  text-transform:none!important;letter-spacing:-.012em!important}
.display{line-height:1.02!important}
.eyebrow,.etiket,.btn,.kat__no,.sayilar s,.hacim__isi s,
*[hidden],.khero__kunye,.isiray__o{font-family:var(--d)!important}
.it{font-family:var(--t);font-style:normal;font-weight:300;
  letter-spacing:-.01em}
.sf{font-family:var(--t);font-style:normal;font-weight:500}

:root{
  --ac:#c9954a;   /* SICAKLIK verisi — JS yazar. MARKA DEĞİL:
                     marka rengi --brand (#1b8fc4, logo #00B7DF). */
  --kg:clamp(20px,4vw,72px);    /* kolaj gutter */
  --mikro:11px;
}

/* ---------------------------------------------------------------- ısı hattı */
.isiray{position:fixed;left:clamp(10px,1.5vw,24px);top:15vh;bottom:15vh;width:2px;z-index:70;
  background:rgba(255,255,255,.08);pointer-events:none}
.isiray__d{position:absolute;inset:0 0 auto 0;height:100%;transform-origin:top;
  transform:scaleY(var(--sp,0));
  background:linear-gradient(180deg,#c9954a 0%,#c9b493 34%,#9fb8c4 56%,#3fa7c9 78%,#7fd4ef 100%)}
.isiray__o{position:absolute;left:11px;top:calc(var(--sp,0) * 100%);transform:translateY(-50%);
  font-family:var(--d);font-weight:600;font-size:var(--mikro);letter-spacing:.09em;
  white-space:nowrap;font-variant-numeric:tabular-nums;color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.85)}
.isiray__o b{font-size:15px}
@media(max-width:1100px){.isiray{display:none}}

/* ---------------------------------------------------------------- kahraman */
.khero{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:flex-end;
  overflow:hidden}
/* İmleci izleyen ısı probu KALDIRILDI (19.8.26) — her fare hareketinde
   tam ekran maske yeniden boyandığı için sayfa gözle görülür yavaşlıyordu.
   Kahraman artık düz bir fotoğraf: sıfır JS, sıfır sürekli boyama. */
.khero__foto{position:absolute;inset:0}
.khero__foto img,.khero__foto video{width:100%;height:100%;object-fit:cover;
  display:block}
/* Video kahraman — 11.9.26, /urunler/. Hareket hassasiyeti açık olan
   kullanıcıda video duruyor, poster kalıyor. */
@media(prefers-reduced-motion:reduce){.khero__vid{display:none}
  .khero__foto{background-size:cover;background-position:center}}
.khero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,9,11,.6) 0%,transparent 30%,rgba(6,9,11,.92) 100%)}
.khero__ic{position:relative;z-index:3;width:100%;
  padding:clamp(96px,14vh,160px) var(--kg) clamp(74px,12vh,130px)}
.khero__ic h1{font-family:var(--t);font-size:clamp(29px,4.3vw,64px);line-height:1.14;
  font-weight:400;letter-spacing:-.025em;max-width:19ch;text-transform:none}
.khero__ic h1 .it{font-size:1em;line-height:1}
.khero__lede{margin-top:16px;max-width:48ch;font-size:clamp(12.5px,1vw,15px);
  line-height:1.62;color:var(--muted)}
.khero__eylem{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap}
.khero__kunye{position:absolute;left:var(--kg);right:var(--kg);bottom:20px;z-index:3;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.13);padding-top:11px;
  font-family:var(--d);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.44)}

/* ---------------------------------------------- hacim dizisi (BÜYÜK GÖRSEL) */
.dizi{position:relative}
.dizi__bas{padding:clamp(56px,10vh,130px) var(--kg) clamp(26px,4vh,52px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:clamp(28px,5vw,90px);align-items:end}
.dizi__sol{max-width:38ch}
.dizi__bas h2{font-family:var(--t);font-size:clamp(24px,3.2vw,46px);line-height:1.16;
  font-weight:400;letter-spacing:-.025em;text-transform:none}
.dizi__bas h2 .it{font-size:1em}
.dizi__bas p{margin-top:12px;font-size:13.5px;line-height:1.65;color:var(--muted)}

/* Görsel tam genişlik ve YÜKSEK; metin üstüne biniyor, fotoğraf kırpılmıyor */
.hacim{position:relative;min-height:clamp(420px,86vh,900px);display:flex;align-items:flex-end;
  overflow:hidden;border-top:1px solid rgba(255,255,255,.07)}
.hacim__foto{position:absolute;inset:0}
.hacim__foto img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(calc(1.07 - var(--v,0) * .07));transition:transform .12s linear}
.hacim::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,9,11,.42) 0%,transparent 34%,rgba(6,9,11,.88) 100%)}
.hacim__yazi{position:relative;z-index:2;width:100%;
  padding:0 var(--kg) clamp(30px,6vh,66px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hacim__sol{max-width:44ch}
/* 12.9.26 (kullanıcı): "sauna veya buhar odası yazılarına gelince
   tıklanıyor, görsel üzerine gelince de tıklanmalı mı?" — evet. Tek link
   kalıyor (iç içe bağlantı yok, ekran okuyucu da doğru okuyor), ama
   başlığın bağlantısı `::after` ile bandın tamamına yayılıyor. */
.hacim__ort{position:absolute;inset:0;z-index:4;display:block}
.hacim--bagli{cursor:pointer}
.hacim--bagli:hover .hacim__foto img{transform:scale(1.04)}
.hacim--bagli:hover h3 a{color:var(--brand-lt)}
.hacim__sol .etiket{font-family:var(--d);font-size:var(--mikro);letter-spacing:.17em;
  text-transform:uppercase;color:var(--brand-lt);display:block;margin-bottom:12px}
.hacim__sol h3{font-family:var(--t);font-size:clamp(22px,2.6vw,40px);font-weight:400;
  letter-spacing:-.02em;line-height:1.12;text-transform:none}
.hacim__sol p{margin-top:10px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.62)}
.hacim__isi{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;text-align:right}
.hacim__isi b{font-family:var(--t);font-style:normal;font-weight:600;
  font-size:clamp(52px,8vw,132px);line-height:.82;letter-spacing:-.03em}
.hacim__isi em{font-style:normal;font-size:clamp(14px,1.4vw,22px);color:var(--muted)}
.hacim__isi s{text-decoration:none;display:block;width:100%;margin-top:9px;
  font-family:var(--d);font-size:var(--mikro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}

/* ızgara + artı */
.kizgara{position:absolute;inset:0;pointer-events:none;z-index:1}
.kizgara .d{position:absolute;top:0;height:100%;width:1px;background:rgba(255,255,255,.05)}
.kizgara .y{position:absolute;left:0;width:100%;height:1px;background:rgba(255,255,255,.05)}
.kizgara .a i,.kizgara .a u{position:absolute;background:rgba(255,255,255,.55);
  transform:translate(-50%,-50%);display:block}
.kizgara .a i{width:9px;height:1px}.kizgara .a u{width:1px;height:9px}

/* ------------------------------------------------------------- rakam + kemer */
.krakam{padding:clamp(56px,10vh,130px) 0 0}
.krakam__ic{display:grid;gap:clamp(28px,5vw,72px);padding:0 var(--kg);grid-template-columns:1fr}
@media(min-width:900px){.krakam__ic{grid-template-columns:1fr 1fr;align-items:center}}
.krakam h2{font-family:var(--t);font-size:clamp(24px,3.2vw,46px);line-height:1.16;
  font-weight:400;letter-spacing:-.025em;max-width:16ch;text-transform:none}
.krakam h2 .it{font-size:1em}
.krakam__lede{margin-top:15px;max-width:52ch;font-size:13.5px;line-height:1.68;color:var(--muted)}
.sayilar{margin-top:clamp(26px,5vh,52px);display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(18px,3vw,40px) clamp(22px,4vw,60px);max-width:520px}
.sayilar b{display:block;font-family:var(--t);font-style:normal;font-weight:600;
  font-size:clamp(30px,3.4vw,50px);line-height:1;letter-spacing:-.02em}
.sayilar s{display:block;text-decoration:none;margin-top:7px;font-family:var(--d);
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.42)}
/* kemer: maske gerilir ama içindeki fotoğraf object-fit:cover — BOZULMAZ */
/* Kemer maskesi kaldırıldı: sayfadaki tek "kesilmiş şekil" oydu ve dile
   yabancı duruyordu. Sitenin dili metin-fotoğrafın-üstünde; rakam bölümü de
   artık öyle — tam genişlik fotoğraf, rakamlar üstünde. Görsel BÜYÜK ve
   object-fit:cover ile bozulmuyor. */
.krakam{position:relative;padding:0}
.krakam__foto{position:absolute;inset:0}
.krakam__foto img{width:100%;height:100%;object-fit:cover;display:block}
.krakam::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(6,9,11,.94) 0%,rgba(6,9,11,.86) 42%,
    rgba(6,9,11,.35) 72%,rgba(6,9,11,.15) 100%)}
.krakam__ic{position:relative;z-index:2;display:block;
  padding:clamp(56px,11vh,140px) var(--kg) clamp(46px,9vh,120px);
  max-width:min(760px,62vw)}
@media(max-width:900px){
  .krakam::after{background:linear-gradient(180deg,rgba(6,9,11,.8),rgba(6,9,11,.95))}
  .krakam__ic{max-width:100%}}

.kmarka{margin-top:clamp(40px,7vh,90px);border-top:1px solid rgba(255,255,255,.08);
  padding:clamp(20px,3.6vh,40px) var(--kg);display:flex;align-items:center;
  justify-content:space-between;gap:clamp(16px,3vw,48px);flex-wrap:wrap}
.kmarka img{height:clamp(14px,1.4vw,22px);width:auto;opacity:.4;
  filter:grayscale(1) brightness(2.4);transition:opacity .3s}
.kmarka img:hover{opacity:.78}

/* --------------------------------------------------------------- kapanış */
.kapanis{padding:clamp(56px,10vh,140px) var(--kg) clamp(46px,8vh,100px);
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap}
.kapanis h2{font-family:var(--t);font-size:clamp(25px,3.5vw,50px);line-height:1.14;
  font-weight:400;letter-spacing:-.025em;max-width:18ch;text-transform:none}
.kapanis h2 .it{font-size:1em}

/* MARKA RENGİ ≠ SICAKLIK AKSANI (21.8.26 düzeltmesi).
   --ac sayfa boyunca 90 °C'den 8 °C'ye değişen bir VERİ rengi; butonu ve
   etiketleri ona bağlamak markayı turuncu gösteriyordu. Sauna Dekor'un
   rengi camgöbeği #1b8fc4 (logo #00B7DF). Arayüz markaya, yalnız sıcaklık
   okumaları --ac'ye bağlı. */
.btn--solid{background:var(--brand);border-color:var(--brand);color:#fff}
.btn--solid:hover{background:var(--brand-lt);border-color:var(--brand-lt);
  color:#04212f}
.eyebrow{color:var(--brand-lt)}
@media(prefers-reduced-motion:reduce){
  .hacim__foto img{transform:none}}
@media(max-width:900px){
  .hacim__foto img{transform:none}
  .hacim{min-height:clamp(360px,64vh,620px)}
  .hacim__yazi{flex-direction:column;align-items:flex-start}
  .hacim__isi{text-align:left}}

/* ---- İç sayfalar: kolaj dili -------------------------------------------- */
/* Kahraman kısa varyantı. Anasayfa 100vh; iç sayfada içerik daha önemli. */
.khero--ic{min-height:clamp(460px,72vh,720px)}
.khero--ic .khero__ic{max-width:min(880px,72vw)}
.khero--ic h1{font-size:clamp(38px,5.4vw,84px);line-height:.99}
.khero__et{display:block;margin-top:0;font-family:var(--d);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand-lt);margin-bottom:clamp(12px,1.6vh,22px)}

/* Tam genişlik fotoğraf bandı — görsel BÜYÜK, GENİŞ, bozulmadan. */
.fbant{position:relative;display:block;width:100%;
  height:clamp(320px,62vh,760px);overflow:hidden;background:#06090b}
.fbant>img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.04);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.fbant:hover>img{transform:scale(1)}
.fbant--yazili::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,9,11,.06) 0%,rgba(6,9,11,.10) 46%,
    rgba(6,9,11,.78) 100%)}
.fbant__ic{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(22px,4vh,58px) var(--kg);max-width:min(720px,68vw)}
.fbant__ic .etiket{display:block;margin-bottom:8px}
.fbant__ic p{font-size:clamp(15px,1.5vw,22px);line-height:1.42;color:var(--bas-fg);margin:0}
.fbant__isi{position:absolute;top:clamp(16px,3vh,38px);right:var(--kg);z-index:2;
  font-family:var(--t);font-size:clamp(28px,4vw,64px);line-height:1;
  color:var(--ac,#c9954a);opacity:.92}   /* SICAKLIK = veri rengi */
@media(max-width:760px){
  .fbant{height:clamp(240px,46vh,420px)}
  .fbant__ic{max-width:none}
  .fbant>img{transform:none}
}
@media(prefers-reduced-motion:reduce){.fbant>img{transform:none;transition:none}}

/* ---- Klasik hero'yu kolaj diline çek ------------------------------------ */
/* 17 sayfa hâlâ hero() kullanıyor; çağrı yerlerini değiştirmek yerine
   görünümü buradan hizalıyoruz. Görsel tam genişlik ve bozulmuyor. */
.hero__bg img{object-fit:cover!important}
.hero .display{letter-spacing:-.024em!important;line-height:.98!important}
.hero .display .it{display:inline}
.hero .eyebrow{color:var(--brand-lt)!important;letter-spacing:.16em}
/* İçi boş kontur artık kullanılmıyor — kalıntı kuralı etkisizleştir. */
.hero .display .outline{-webkit-text-stroke:0!important;color:inherit!important}
.hero__vig{background:linear-gradient(180deg,rgba(6,9,11,.30) 0%,
  rgba(6,9,11,.14) 34%,rgba(6,9,11,.52) 74%,rgba(6,9,11,.86) 100%)!important}
.hero__meta{font-family:var(--d);font-size:var(--mikro);letter-spacing:.13em;
  text-transform:uppercase}

/* Klasik hero'yu kolajla aynı hizaya çek: SOLA DAYALI, ortalı değil.
   Sitedeki her başlık aynı kenardan başlamalı; ortalı blok kolaj dilini kırıyor. */
.hero__inner{text-align:left!important;align-items:flex-start!important;
  margin-left:0!important;margin-right:auto!important;
  padding-left:var(--kg)!important;padding-right:var(--kg)!important;
  max-width:min(1000px,80vw)!important}
.hero__inner .eyebrow,.hero__inner .hero__sub{margin-left:0!important;
  margin-right:0!important;max-width:min(560px,58vw)}
.hero__inner .btn-row{justify-content:flex-start!important}
/* Açık/parlak fotoğraflarda başlık okunmuyordu — soldan koyulaşan perde.
   Fotoğrafın kendisine dokunmaz, üstüne biner. */
.hero__pin::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,rgba(6,9,11,.90) 0%,rgba(6,9,11,.74) 34%,
    rgba(6,9,11,.30) 66%,rgba(6,9,11,.10) 100%)}
.hero__inner,.hero__meta,.hero__foot{position:relative;z-index:2}
@media(max-width:760px){
  .hero__inner{max-width:none!important}
  .hero__pin::after{background:linear-gradient(180deg,rgba(6,9,11,.62) 0%,
    rgba(6,9,11,.80) 60%,rgba(6,9,11,.92) 100%)}
}

/* Isı hattı SABİT ve okuması kaydırmayla dikey hareket ediyor; sola dayalı
   metinle her yükseklikte çakışabilir. Doğru çözüm: hatta ayrılmış sol boşluk.
   Geniş sol pay zaten referans dilin (Vesper, LŪMEN) belirgin özelliği. */
@media(min-width:900px){
  :root{--kg:clamp(82px,7vw,132px)}
}

/* Prob kaldırılınca fotoğraf tam parlaklığa çıktı; başlığın okunabilirliği
   artık tek başına bu perdeye bağlı. hero__pin ile aynı reçete. */
.khero::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,rgba(6,9,11,.90) 0%,rgba(6,9,11,.72) 32%,
    rgba(6,9,11,.28) 64%,rgba(6,9,11,.08) 100%)}
@media(max-width:760px){
  .khero::before{background:linear-gradient(180deg,rgba(6,9,11,.55) 0%,
    rgba(6,9,11,.78) 58%,rgba(6,9,11,.93) 100%)}
}

/* ---- sıcaklık merdiveni -------------------------------------------------- */
/* Giriş bloğunun sağı boştu. Merdiven hem boşluğu dolduruyor hem sayfanın
   omurgasını (90 °C → 8 °C) tek bakışta gösteriyor. Çubuk uzunluğu = oran. */
.merd{display:grid;gap:2px;min-width:min(420px,42vw)}
.merd>.etiket{margin-bottom:10px;color:var(--ac,#c9954a)}
.merd__s{display:grid;grid-template-columns:minmax(7ch,15ch) minmax(40px,1fr) auto;align-items:center;
  gap:14px;padding:9px 0;text-decoration:none;color:inherit;
  border-top:1px solid rgba(255,255,255,.08);transition:opacity .2s}
.merd__s:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.merd__ad{font-family:var(--d);font-size:11.5px;letter-spacing:.05em;line-height:1.25;
  text-transform:uppercase;color:var(--fg-2)}
.merd__c{position:relative;height:2px;background:rgba(255,255,255,.09);overflow:hidden}
.merd__c>i{position:absolute;inset:0 auto 0 0;width:calc(var(--o) * 100%);
  background:linear-gradient(90deg,color-mix(in srgb,var(--ac,#c9954a) 35%,transparent),
    var(--ac,#c9954a));   /* SICAKLIK = veri rengi */
  transform-origin:left;transform:scaleX(var(--g,1))}
.merd__d{font-family:var(--t);font-size:clamp(19px,2vw,30px);line-height:1;
  color:var(--bas-fg);white-space:nowrap;font-variant-numeric:tabular-nums}
.merd__d b{font-weight:400}
.merd__alt{grid-column:2/4;font-family:var(--d);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:-4px}
.merd__s:hover{opacity:.72}
@media(max-width:980px){
  .dizi__bas{grid-template-columns:1fr}
  .merd{min-width:0}
}

/* ---- yana kayan logo şeridi ---------------------------------------------- */
/* Beyaz tam genişlik bant sayfayı ikiye kesiyordu. Zemin koyu kaldı; her logo
   kendi AÇIK PLAKETİNDE duruyor — arka planı saydam olmayan logolar (NATO,
   Emirates, kulüp armaları) da böylece gerçek renginde ve bozulmadan çıkıyor. */
.ser{padding:clamp(46px,7vh,86px) 0 clamp(30px,5vh,58px);
  border-top:1px solid rgba(255,255,255,.07)}
.ser__bas{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;
  padding:0 var(--kg);margin-bottom:clamp(22px,3.4vh,38px)}
.ser__bas .etiket{color:var(--brand-lt);white-space:nowrap}
.ser__not{margin:0;font-size:12.5px;line-height:1.6;color:var(--muted);max-width:54ch}

/* Kenarlarda yumuşak kesim: şerit sayfayı kesmiyor, içinden akıyor. */
.ser__p{position:relative;overflow:hidden;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ser__t{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);width:max-content;
  animation:kay var(--sure,52s) linear infinite;will-change:transform}
.ser--ters .ser__t{animation-direction:reverse}
.ser__p:hover .ser__t{animation-play-state:paused}
@keyframes kay{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.ser__l{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:clamp(150px,15vw,210px);height:clamp(84px,9vw,112px);
  padding:14px clamp(16px,1.8vw,26px);border-radius:3px;
  background:#f3efe9;text-decoration:none;
  transition:background .25s,transform .25s}
a.ser__l:hover{background:#fff;transform:translateY(-2px)}
/* Plaket GRID iken height:100% 84 px'lik kutuda 105 px'e çözülüp taşıyordu.
   Flex + max-* ölçüldü: taşma sıfır, oran korunuyor. */
.ser__l img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}

@media(max-width:760px){
  .ser__l{width:132px;height:76px;padding:11px 16px}
  .ser__not{max-width:none}
}
/* Hareket kapalıysa şerit durur, kullanıcı elle kaydırır. */
@media(prefers-reduced-motion:reduce){
  .ser__t{animation:none;width:auto;overflow-x:auto;padding:0 var(--kg)}
  .ser__p{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
}

/* ---- referans kütüğü ----------------------------------------------------- */
.kut{padding:clamp(46px,7vh,88px) var(--kg) clamp(56px,9vh,110px);
  border-top:1px solid rgba(255,255,255,.07)}
.kut__bas{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;
  margin-bottom:clamp(20px,3vh,32px)}
.kut__bas .etiket{color:var(--brand-lt);white-space:nowrap}
.kut__bas p{margin:0;font-size:12.5px;line-height:1.6;color:var(--muted);max-width:58ch}
.kut__araclar{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;
  justify-content:space-between;margin-bottom:clamp(14px,2vh,22px)}
.kut__cipler{display:flex;flex-wrap:wrap;gap:7px}
.kut__c{font-family:var(--d);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-2);background:transparent;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);border-radius:2px;padding:7px 12px;
  transition:color .2s,border-color .2s,background .2s}
.kut__c i{font-style:normal;opacity:.5;margin-left:5px}
.kut__c:hover{color:var(--bas-fg);border-color:rgba(255,255,255,.34)}
.kut__c.on{color:var(--yuzey);background:var(--brand-lt);border-color:var(--brand-lt)}
.kut__c.on i{opacity:.7}
.kut__ara input{font-family:var(--d);font-size:12.5px;color:var(--bas-fg);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:2px;padding:9px 13px;min-width:min(280px,64vw);outline:none}
.kut__ara input:focus{border-color:var(--brand-lt)}
.kut__ara .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.kut__l{list-style:none;margin:0;padding:0;
  column-width:min(420px,90vw);column-gap:clamp(24px,4vw,64px)}
.kut__s{display:grid;grid-template-columns:1fr auto;gap:2px 14px;
  break-inside:avoid;padding:9px 0;border-top:1px solid rgba(255,255,255,.07)}
.kut__ad{grid-column:1;font-size:13.5px;line-height:1.35;color:var(--bas-fg-2)}
.kut__loc{grid-column:1;grid-row:2;font-family:var(--d);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
/* grid-column yazılmazsa otomatik yerleşim etiketi 1. sütuna koyup adı
   sağa itiyordu. Sütun AÇIKÇA verilmeli. */
.kut__t{grid-column:2;grid-row:1/3;align-self:center;justify-self:end;font-family:var(--d);font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.kut__yok{font-size:13px;color:var(--muted);padding-top:18px}
@media(max-width:600px){
  .kut__l{column-width:auto}
  .kut__t{display:none}
  .kut__ara input{min-width:0;width:100%}
  .kut__ara{flex:1 1 100%}
}

/* ---- kurumsal: malzeme / belge / garanti / rol -------------------------- */
/* auto-fit geniş ekranda 5 sütun açıp 6. kalemi tek başına bırakıyordu.
   Sütun sayısı sabit: 6 kalem → 2 sıra × 3. */
.kizg{display:grid;grid-template-columns:1fr;gap:1px;background:none}
@media(min-width:640px){.kizg{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.kizg{grid-template-columns:repeat(3,1fr)}}
.kizg>article{background:var(--yuzey);padding:clamp(20px,2.6vw,32px);
  box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.kizg__n{display:block;font-family:var(--d);font-size:10.5px;letter-spacing:.18em;
  color:var(--brand-lt);margin-bottom:12px}
.kizg>article h3{font-family:var(--t);font-size:clamp(18px,1.9vw,25px);
  font-weight:400;line-height:1.18;letter-spacing:-.02em;margin:0 0 9px;color:var(--bas-fg)}
.kizg>article p{margin:0;font-size:13.5px;line-height:1.62;color:var(--muted)}

.lizg{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(20px,3vw,46px)}
.lizg h4{font-family:var(--d);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brand-lt);margin:0 0 12px;
  padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.12)}
.lizg ul{list-style:none;margin:0;padding:0}
.lizg li{font-size:13px;line-height:1.5;color:var(--muted);padding:6px 0 6px 15px;
  position:relative}
.lizg li::before{content:'';position:absolute;left:0;top:14px;width:6px;height:1px;
  background:var(--brand-lt);opacity:.8}

.gtab{overflow-x:auto}
.gtab table{width:100%;border-collapse:collapse;min-width:620px}
.gtab th,.gtab td{text-align:left;vertical-align:top;padding:13px 16px 13px 0;
  border-bottom:1px solid rgba(255,255,255,.08)}
.gtab thead th{font-family:var(--d);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);padding-top:0}
.gtab tbody th{font-size:14px;font-weight:400;color:var(--bas-fg);width:31%}
.gtab td{font-size:13px;line-height:1.55;color:var(--muted)}
.gtab td b{font-family:var(--t);font-size:17px;font-weight:400;color:var(--brand-lt);
  white-space:nowrap}

.roll{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;
  background:rgba(255,255,255,.08)}
.roll__k{display:block;background:var(--yuzey);padding:clamp(24px,3.2vw,44px);
  text-decoration:none;transition:background .25s}
.roll__k:hover{background:var(--yuzey-2)}
.roll__k h3{font-family:var(--t);font-size:clamp(21px,2.4vw,32px);font-weight:400;
  line-height:1.14;letter-spacing:-.022em;margin:0 0 12px;color:var(--bas-fg)}
.roll__k p{margin:0 0 18px;font-size:13.5px;line-height:1.65;color:var(--muted)}
.roll__o{display:inline-flex;align-items:center;gap:9px;font-family:var(--d);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-lt)}
.roll__o i{width:16px;height:1px;background:currentColor;transition:width .22s}
.roll__k:hover .roll__o i{width:28px}
@media(max-width:600px){.gtab table{min-width:480px}}

/* ---- kurumsal: hizmet blokları ------------------------------------------ */
.hizb-g{display:grid;gap:1px;background:rgba(255,255,255,.08)}
.hizb{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  background:var(--yuzey);align-items:stretch}
.hizb--ters .hizb__f{order:2}
.hizb__f{position:relative;min-height:clamp(240px,38vh,440px)}
.hizb__f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block}
.hizb__y{padding:clamp(24px,3.4vw,52px);display:flex;flex-direction:column;
  justify-content:center}
.hizb__y .etiket{color:var(--muted);margin-bottom:6px}
.hizb__y h3{font-family:var(--t);font-size:clamp(21px,2.5vw,34px);font-weight:400;
  line-height:1.14;letter-spacing:-.022em;margin:0 0 12px;color:var(--bas-fg)}
.hizb__y>p{margin:0 0 18px;font-size:14px;line-height:1.68;color:var(--muted);
  max-width:52ch}
.hizb__l{list-style:none;margin:0;padding:0;
  columns:2;column-gap:26px}
.hizb__l li{break-inside:avoid;font-family:var(--d);font-size:11.5px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  padding:5px 0 5px 14px;position:relative}
.hizb__l li::before{content:'';position:absolute;left:0;top:12px;width:6px;height:1px;
  background:var(--brand-lt);opacity:.85}
@media(max-width:900px){
  .hizb{grid-template-columns:1fr}
  .hizb--ters .hizb__f{order:0}
  .hizb__l{columns:1}
}

/* ---- wellness sözlüğü ---------------------------------------------------- */
/* 15.9.26: ızgara → tek sıra karusel (bkz. build.sozluk_izgarasi). */
.szl{position:relative}
/* 15.9.26 (kullanıcı): "hamam tipleri altında yan boş kalmış."
   3 kartlı karusel sola dayanıyordu. `width:fit-content + margin-inline:auto`
   az kartta ORTALIYOR, çok kartta rayı dolduruyor.
   `justify-content:center` KULLANMA — taşınca baştaki kartları kırpıyor. */
.szl__ray{display:flex;gap:1px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab;
  width:fit-content;max-width:100%;margin-inline:auto;
  background:rgba(255,255,255,.08)}
.szl__ray::-webkit-scrollbar{display:none}
.szl__ray:active{cursor:grabbing}
.szl__k{flex:0 0 clamp(210px,19vw,280px);scroll-snap-align:start;
  display:block;background:var(--yuzey);text-decoration:none;
  transition:background .22s}
.szl__o{position:absolute;top:38%;transform:translateY(-50%);z-index:4;
  width:42px;height:42px;border:1px solid var(--line);cursor:pointer;
  background:rgba(6,9,11,.78);backdrop-filter:blur(5px);opacity:0;
  border-radius:50%;transition:opacity .3s var(--ease),background .3s}
.szl.kaydirilabilir .szl__o{opacity:1}
.szl__o:hover{background:var(--brand)}
.szl__o:disabled{opacity:.25;pointer-events:none}
.szl__o::before{content:"";position:absolute;left:50%;top:50%;width:9px;
  height:9px;border-right:1px solid #fff;border-top:1px solid #fff}
.szl__o--sol{left:-14px}
.szl__o--sol::before{transform:translate(-30%,-50%) rotate(-135deg)}
.szl__o--sag{right:-14px}
.szl__o--sag::before{transform:translate(-70%,-50%) rotate(45deg)}
a.szl__k:hover{background:var(--yuzey-2)}
.szl__f{display:block;position:relative;aspect-ratio:4/3;overflow:hidden}
.szl__f img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
a.szl__k:hover .szl__f img{transform:scale(1.05)}
.szl__k h4{font-family:var(--t);font-size:17px;font-weight:400;line-height:1.2;
  text-transform:none;
  letter-spacing:-.018em;margin:14px 16px 6px;color:var(--bas-fg)}
.szl__k p{margin:0 16px 16px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.szl__k--yok h4{color:var(--fg-2)}

/* ---- bakım paketleri ----------------------------------------------------- */
.pkt{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  background:rgba(255,255,255,.08)}
.pkt__k{background:var(--yuzey);padding:clamp(22px,2.8vw,36px);display:flex;
  flex-direction:column;gap:14px}
.pkt__k h4{font-family:var(--t);font-size:clamp(22px,2.4vw,30px);font-weight:400;
  text-transform:none;
  letter-spacing:-.02em;margin:0;color:var(--bas-fg)}
.pkt__k ul{list-style:none;margin:0;padding:0;flex:1}
.pkt__k li{font-size:13px;line-height:1.5;color:var(--muted);padding:6px 0 6px 15px;
  position:relative}
.pkt__k li::before{content:'';position:absolute;left:0;top:14px;width:6px;height:1px;
  background:var(--brand-lt);opacity:.85}
.pkt__k .btn{align-self:flex-start}

/* ---- sıkça sorulanlar ---------------------------------------------------- */
.sss{border-top:1px solid rgba(255,255,255,.10)}
.sss details{border-bottom:1px solid rgba(255,255,255,.10)}
.sss summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 0;cursor:pointer;list-style:none;
  font-family:var(--t);font-size:clamp(17px,1.9vw,24px);font-weight:400;
  letter-spacing:-.018em;color:var(--bas-fg);transition:color .2s}
.sss summary::-webkit-details-marker{display:none}
.sss summary:hover{color:var(--brand-lt)}
.sss summary i{position:relative;flex:0 0 auto;width:14px;height:14px}
.sss summary i::before,.sss summary i::after{content:'';position:absolute;
  background:currentColor;transition:transform .24s var(--ease)}
.sss summary i::before{left:0;right:0;top:6.5px;height:1px}
.sss summary i::after{top:0;bottom:0;left:6.5px;width:1px}
.sss details[open] summary i::after{transform:scaleY(0)}
.sss details>p{margin:0 0 20px;max-width:70ch;font-size:14px;line-height:1.7;
  color:var(--muted)}

/* ---- iklim zarfı (anasayfa 3B bölümü) ------------------------------------
   Kesit bileşeninin yerine geçti. Kartlar başta derinlemesine YIĞILI;
   --p ilerledikçe ayrılıp okunur hâle geliyor. "Ayrı iklimler" fikri
   hareketin kendisi. Sadece transform + opacity. */
.iklim{position:relative;height:240vh}
.iklim__pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  justify-content:center;gap:clamp(20px,3.4vh,44px);
  padding:clamp(70px,10vh,120px) var(--kg) clamp(30px,5vh,60px);
  perspective:1400px;perspective-origin:50% 42%;overflow:hidden}
.iklim__bas{max-width:60ch;flex:0 0 auto;
  transform:translateY(calc((1 - var(--gir,1)) * 18px));opacity:var(--gir,1)}
.iklim__bas .etiket{color:var(--brand-lt)}
.iklim__bas h2{font-family:var(--t);font-size:clamp(26px,3.6vw,52px);font-weight:400;
  line-height:1.1;letter-spacing:-.025em;text-transform:none;margin:10px 0 12px;
  color:var(--bas-fg)}
.iklim__bas p{margin:0;font-size:clamp(13px,1.15vw,16px);line-height:1.68;
  color:var(--muted);max-width:64ch}

/* align-items:stretch kartları satır yüksekliğine yayıyordu; metin üstte
   kalıp altta yarım ekran boşluk kalıyordu. İçeriğe göre boyutlansınlar. */
.iklim__sahne{position:relative;flex:1 1 auto;transform-style:preserve-3d;
  display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1vw,18px);
  align-items:start;align-content:center;min-height:0}
/* a = bu kartın açılma oranı. p .06→.62 arasında sırayla açılıyorlar. */
  .ikz-yer{}
.ikz{
  --a:clamp(0, calc((var(--p,1) - .06 - var(--i) * .055) / .30), 1);
  position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;
  padding:clamp(14px,1.3vw,22px);background:var(--yuzey);
  border-top:2px solid var(--c);
  transform:
    translate3d(calc((1 - var(--a)) * (var(--i) - 2.5) * -7%), 0,
                calc((1 - var(--a)) * -240px))
    scale(calc(.86 + var(--a) * .14));
  opacity:calc(.12 + var(--a) * .88);
  transform-origin:50% 100%}
.ikz__ust{display:flex;align-items:baseline;gap:9px;min-width:0}
.ikz__no{font-family:var(--d);font-size:10px;letter-spacing:.14em;color:var(--c);
  flex:0 0 auto}
.ikz h3{font-family:var(--t);font-size:clamp(15px,1.35vw,21px);font-weight:400;
  line-height:1.14;letter-spacing:-.018em;text-transform:none;margin:0;color:var(--bas-fg)}
.ikz__d{display:flex;flex-direction:column;gap:3px}
.ikz__d b{font-family:var(--t);font-size:clamp(19px,1.9vw,28px);font-weight:400;
  line-height:1;color:var(--c);font-variant-numeric:tabular-nums}
.ikz__d s{text-decoration:none;font-family:var(--d);font-size:9.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.ikz>p{margin:0;font-size:12px;line-height:1.55;color:var(--muted)}

.iklim__kural{padding:clamp(34px,6vh,72px) var(--kg);
  border-top:1px solid rgba(255,255,255,.08)}
.iklim__kg{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));
  gap:clamp(20px,3vw,48px)}
.iklim__kg h4{font-family:var(--d);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brand-lt);margin:0 0 10px;
  padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.12)}
.iklim__kg p{margin:0;font-size:12.5px;line-height:1.62;color:var(--muted)}

@media(max-width:1100px){
  .iklim{height:auto}
  .iklim__pin{position:static;height:auto;perspective:none;display:block}
  .iklim__sahne{grid-template-columns:repeat(2,1fr);margin-top:26px}
  .ikz{transform:none;opacity:1}
}
@media(max-width:600px){.iklim__sahne{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.ikz{transform:none;opacity:1}}

/* Ticari / konut karşılaştırma satırları (iklim kartı içi) */
.ikz__kar{display:flex;flex-direction:column;gap:9px}
.ikz__t,.ikz__k{display:flex;flex-direction:column;gap:2px;
  padding-left:10px;border-left:2px solid}
.ikz__t{border-color:var(--c)}
.ikz__k{border-color:rgba(255,255,255,.18)}
.ikz__kar s{text-decoration:none;font-family:var(--d);font-size:9px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.ikz__t b{font-family:var(--t);font-size:clamp(15px,1.35vw,20px);font-weight:400;
  line-height:1.14;color:var(--c)}
.ikz__k b{font-family:var(--t);font-size:clamp(14px,1.2vw,18px);font-weight:400;
  line-height:1.14;color:var(--fg-2)}
.iklim__kural>.etiket{display:block;color:var(--brand-lt);margin-bottom:18px}

/* ---- Uygulamalar: görsel odaklı yatay 3B şerit --------------------------
   Eskiden 15 kutuluk düz metin ızgarasıydı, sayfanın en durgun yeriydi.
   Sürüş SAF CSS: track genişliği W, ekran vw ise calc(100vw - 100%) tam
   olarak istediğimiz negatif ötelemedir; --p (0..1) ile çarpılıyor.
   JS'in --tx mekanizmasına dokunulmadı, o tek şeride bağlıydı. */
.uyss{position:relative;height:250vh}
.uyss__pin{position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(18px,3vh,38px);padding:clamp(74px,10vh,120px) 0 clamp(26px,4vh,54px);
  perspective:1500px}
.uyss__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;padding:0 var(--kg);flex:0 0 auto}
.uyss__head .eyebrow{color:var(--brand-lt)}
.uyss__head h2{font-family:var(--t);font-size:clamp(26px,3.8vw,58px);font-weight:400;
  line-height:1.06;letter-spacing:-.025em;text-transform:none;margin:8px 0 0;
  color:var(--bas-fg)}
.uyss__lede{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted);
  max-width:52ch}
.uyss__track{display:flex;gap:clamp(10px,1.2vw,20px);padding:0 var(--kg);
  width:max-content;transform-style:preserve-3d;
  transform:translate3d(calc(var(--p,0) * (100vw - 100%)),0,0);
  will-change:transform}

.uys{position:relative;flex:0 0 auto;width:clamp(210px,20vw,320px);
  display:flex;flex-direction:column;text-decoration:none;background:var(--yuzey);
  transition:background .25s}
.uys:hover{background:#131719}
.uys__f{position:relative;display:block;aspect-ratio:3/4;overflow:hidden}
.uys__f img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.04);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.uys:hover .uys__f img{transform:scale(1)}
.uys__f::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,9,11,.05),rgba(6,9,11,.62))}
.uys__i{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--t);
  font-size:clamp(18px,1.7vw,26px);line-height:1;color:var(--bas-fg);
  text-shadow:0 1px 12px rgba(0,0,0,.7)}
.uys__y{display:block;padding:14px clamp(12px,1.1vw,18px) 18px}
.uys__y h3{font-family:var(--t);font-size:clamp(15px,1.35vw,20px);font-weight:400;
  line-height:1.16;letter-spacing:-.018em;text-transform:none;margin:0 0 6px;
  color:var(--bas-fg)}
.uys__y p{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}

.uyss__bar{height:1px;background:rgba(255,255,255,.10);margin:0 var(--kg);
  flex:0 0 auto}
.uyss__bar>i{display:block;height:1px;width:18%;background:var(--brand-lt);
  transform:translateX(calc(var(--p,0) * (100 / 18 - 1) * 100%));
  transform-origin:left}

/* Derinlik: kart ekranı yatay geçerken hafifçe yatıyor. Native
   scroll-driven; desteklenmiyorsa şerit düz akar, kayıp yok. */
@supports (animation-timeline: view()) {
  .uys{animation:uysYat linear both;animation-timeline:view(inline);
    animation-range:entry 0% exit 100%}
  @keyframes uysYat{
    0%   {transform:rotateY(-13deg) translateZ(-70px)}
    50%  {transform:rotateY(0deg)   translateZ(0)}
    100% {transform:rotateY(13deg)  translateZ(-70px)}
  }
}
@media(max-width:1100px){
  .uyss{height:auto}
  .uyss__pin{position:static;height:auto;perspective:none;padding:0}
  .uyss__track{width:auto;transform:none;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:14px;-webkit-overflow-scrolling:touch}
  .uys{scroll-snap-align:start;width:min(64vw,260px);animation:none!important;
    transform:none!important}
  .uyss__bar{display:none}
}
@media(prefers-reduced-motion:reduce){
  .uys{animation:none!important;transform:none!important}
}

/* ---- Sauna Dekor hakkında: satır satır yazılan blok ---------------------
   Metin eski sitenin gövdesi, aynen korunuyor (anasayfa SEO'da sayılıyor).
   Değişen yalnız sunum: başlık altındaki çizgi soldan sağa çiziliyor,
   paragraf altından yükseliyor; sıra --p'ye bağlı. transform + opacity. */
.hkk{padding:clamp(56px,9vh,110px) var(--kg);
  border-top:1px solid rgba(255,255,255,.07)}
.hkk__bas{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(26px,4vh,52px)}
.hkk__bas .eyebrow{color:var(--brand-lt)}
.hkk__bas h2{font-family:var(--t);font-size:clamp(26px,3.8vw,56px);font-weight:400;
  line-height:1.06;letter-spacing:-.025em;text-transform:none;margin:8px 0 0;
  color:var(--bas-fg)}
.hkk__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:clamp(22px,3vw,54px) clamp(24px,3.4vw,64px)}
.hkk__s{
  --a:clamp(0, calc((var(--p,1) - .04 - var(--i) * .035) / .26), 1);
  display:flex;flex-direction:column;gap:9px}
.hkk__s h3{font-family:var(--t);font-size:clamp(17px,1.6vw,23px);font-weight:400;
  line-height:1.16;letter-spacing:-.02em;text-transform:none;margin:0;
  color:var(--bas-fg);
  transform:translateY(calc((1 - var(--a)) * 12px));opacity:var(--a)}
.hkk__c{display:block;height:1px;background:var(--brand-lt);
  transform:scaleX(var(--a));transform-origin:left;opacity:.75}
.hkk__s p{margin:0;font-size:13.5px;line-height:1.68;color:var(--muted);
  transform:translateY(calc((1 - var(--a)) * 16px));
  opacity:calc(var(--a) * var(--a))}
@media(prefers-reduced-motion:reduce){
  .hkk__s h3,.hkk__s p{transform:none;opacity:1}
  .hkk__c{transform:none}
}

/* ---- teknik künye şeridi (kategori sayfaları) --------------------------- */
.kns{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,3vw,56px);
  padding:clamp(24px,3.6vh,44px) var(--kg);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08)}
.kns__i{flex:0 0 auto;display:flex;flex-direction:column;gap:2px;
  padding-right:clamp(18px,2.4vw,40px);border-right:1px solid rgba(255,255,255,.12)}
.kns__i b{font-family:var(--t);font-size:clamp(30px,3.6vw,54px);font-weight:400;
  line-height:.95;color:var(--ac,#c9954a);font-variant-numeric:tabular-nums}
.kns__i s{text-decoration:none;font-family:var(--d);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.kns__g{flex:1 1 340px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(14px,2vw,34px)}
.kns__g>div{display:flex;flex-direction:column;gap:3px}
.kns__g s{text-decoration:none;font-family:var(--d);font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.kns__g b{font-size:14px;font-weight:400;line-height:1.3;color:var(--bas-fg-2)}
@media(max-width:700px){
  .kns__i{border-right:0;padding-right:0;width:100%}
}

/* ---- proje dizini (derli toplu ızgara + segment filtresi) --------------- */
.pf{padding:clamp(50px,8vh,96px) var(--kg) clamp(56px,9vh,110px);
  border-top:1px solid rgba(255,255,255,.07)}
.pf__bas{margin-bottom:clamp(20px,3vh,32px)}
.pf__bas .eyebrow{color:var(--brand-lt)}
.pf__bas h2{font-family:var(--t);font-size:clamp(26px,3.8vw,56px);font-weight:400;
  line-height:1.06;letter-spacing:-.025em;text-transform:none;margin:8px 0 0;
  color:var(--bas-fg)}
.pf__lede{margin:12px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted);max-width:60ch}
.pf__cipler{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:clamp(18px,2.6vh,28px)}
.pf__c{font-family:var(--d);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-2);background:transparent;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);border-radius:2px;padding:7px 12px;
  transition:color .2s,border-color .2s,background .2s}
.pf__c i{font-style:normal;opacity:.5;margin-left:5px}
.pf__c:hover{color:var(--bas-fg);border-color:rgba(255,255,255,.34)}
.pf__c.on{color:#04212f;background:var(--brand-lt);border-color:var(--brand-lt)}

.pf__g{display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(190px,17vw,260px);gap:1px;background:rgba(255,255,255,.08)}
/* Kart = tek bir fotoğraf. Metin üstünde, alttan koyulaşan perdenin içinde.
   Ayrı metin kutusu YOK — kutu görüntüsünü o yaratıyordu. */
.pk{position:relative;display:block;overflow:hidden;background:var(--yuzey);
  text-decoration:none;grid-column:span 1;grid-row:span 1}
.pk--gen{grid-column:span 2}
.pk--uzun{grid-row:span 2}
.pk>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;transform:scale(1.03);
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.pk:hover>img{transform:scale(1.09)}
.pk::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,9,11,.05) 0%,rgba(6,9,11,.12) 42%,
    rgba(6,9,11,.86) 100%);transition:background .35s}
.pk:hover::after{background:linear-gradient(180deg,rgba(6,9,11,.10) 0%,
  rgba(6,9,11,.34) 42%,rgba(6,9,11,.92) 100%)}
.pk__y{position:absolute;left:0;right:0;bottom:0;z-index:2;display:block;
  padding:clamp(13px,1.2vw,20px)}
.pk__t{display:block;font-family:var(--d);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-lt);margin-bottom:5px}
.pk__y h3{font-family:var(--t);font-size:clamp(15px,1.35vw,20px);font-weight:400;
  line-height:1.16;letter-spacing:-.018em;text-transform:none;margin:0;
  color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.pk--gen .pk__y h3{font-size:clamp(18px,1.8vw,26px)}
.pk__l{display:block;margin-top:4px;font-family:var(--d);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
/* Kapsam yalnız üzerine gelince — kart sakin dursun. */
.pk__k{display:block;font-size:12px;line-height:1.4;color:var(--muted);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .35s cubic-bezier(.2,.7,.2,1),opacity .3s,margin-top .35s}
.pk:hover .pk__k,.pk:focus-visible .pk__k{max-height:3.2em;opacity:1;margin-top:6px}
@media(max-width:900px){
  .pf__g{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(150px,32vw,210px)}
  .pk--gen{grid-column:span 2}
  .pk--uzun{grid-row:span 1}
  .pk__k{display:none}
}
.pf__yok{font-size:13px;color:var(--muted);padding-top:20px}
@media(max-width:520px){.pf__g{grid-template-columns:repeat(2,1fr)}
  .pk__b{padding:10px 11px 14px}.pk__b p{display:none}}

/* ---- segment grafiği (rakam kutularının yerine) -------------------------
   Sütun yüksekliği paya orantılı; kaydırdıkça sırayla derinlikten yükseliyor.
   Yalnız transform + opacity. */
.sgraf{padding:clamp(52px,8vh,104px) var(--kg) clamp(46px,7vh,90px);
  border-top:1px solid rgba(255,255,255,.07);perspective:1200px}
.sgraf__bas{margin-bottom:clamp(26px,4vh,48px)}
.sgraf__bas .eyebrow{color:var(--brand-lt)}
.sgraf__bas h2{font-family:var(--t);font-size:clamp(26px,3.8vw,54px);font-weight:400;
  line-height:1.06;letter-spacing:-.025em;text-transform:none;margin:8px 0 0;
  color:var(--bas-fg)}
.sgraf__lede{margin:12px 0 0;font-size:13.5px;line-height:1.62;color:var(--muted);
  max-width:60ch}
.sgraf__g{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:clamp(6px,.9vw,16px);align-items:end;
  min-height:clamp(190px,26vh,320px);transform-style:preserve-3d}
.sgs{
  --a:clamp(0, calc((var(--p,1) - .04 - var(--i) * .05) / .28), 1);
  display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-width:0;
  transform:translate3d(0,calc((1 - var(--a)) * 26px),calc((1 - var(--a)) * -120px));
  opacity:calc(.15 + var(--a) * .85)}
.sgs__n{font-family:var(--t);font-size:clamp(19px,2.4vw,38px);line-height:1;
  color:var(--bas-fg);font-variant-numeric:tabular-nums}
.sgs__c{display:block;position:relative;
  height:calc(var(--o) * clamp(96px,15vh,190px));min-height:3px;
  background:rgba(255,255,255,.06);overflow:hidden}
.sgs__c>i{position:absolute;inset:auto 0 0 0;height:100%;transform-origin:bottom;
  transform:scaleY(var(--a));
  background:linear-gradient(180deg,var(--brand-lt),var(--brand))}
.sgs__a{font-family:var(--d);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);line-height:1.3}
.sgs__p{font-family:var(--d);font-size:10px;letter-spacing:.1em;color:var(--muted)}
.sgraf__top{display:flex;align-items:baseline;gap:12px;
  margin-top:clamp(22px,3.4vh,40px);padding-top:18px;
  border-top:1px solid rgba(255,255,255,.10)}
.sgraf__top b{font-family:var(--t);font-size:clamp(28px,3.4vw,50px);font-weight:400;
  line-height:1;color:var(--brand-lt);font-variant-numeric:tabular-nums}
.sgraf__top s{text-decoration:none;font-family:var(--d);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media(max-width:760px){
  .sgraf__g{grid-auto-flow:row;grid-auto-columns:auto;min-height:0;
    gap:14px;align-items:stretch}
  .sgs{display:grid;grid-template-columns:5ch 1fr auto;align-items:center;gap:12px;
    transform:none;opacity:1}
  .sgs__c{height:2px!important;min-height:2px}
  .sgs__c>i{inset:0 auto 0 0;width:calc(var(--o) * 100%);height:2px;
    transform:none}
  .sgs__a{grid-column:2}
}
@media(prefers-reduced-motion:reduce){.sgs{transform:none;opacity:1}}

/* ---- referans kayıt notu (görselsiz) ------------------------------------
   Eskiden iki paragraf tam ekran `kitap_sahne` olarak, alakasız CTA
   zeminleriyle basılıyordu. Not, not gibi durmalı. */
.rnot{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(22px,3.4vw,64px);
  padding:clamp(34px,5vh,64px) var(--kg);
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07)}
.rnot .etiket{display:block;color:var(--brand-lt);margin-bottom:10px}
.rnot p{margin:0;font-size:13.5px;line-height:1.7;color:var(--muted);max-width:56ch}

/* ---- rakam şeridi (kutulu ızgaranın yerine) -----------------------------
   Kullanıcı: "yan yana kutu kutu güzel değil". Kutu ve çerçeve yok;
   serif rakam, altında soldan sağa çizilen saç teli çizgi, sırayla
   derinlikten yükselen hücreler. Yalnız transform + opacity. */
.rkband{padding:clamp(46px,7vh,92px) var(--kg);perspective:1100px;
  border-top:1px solid rgba(255,255,255,.07)}
.rkband__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(20px,3vw,54px);transform-style:preserve-3d}
.rks{
  --a:clamp(0, calc((var(--p,1) - .05 - var(--i) * .06) / .30), 1);
  display:flex;flex-direction:column;gap:9px;min-width:0;
  transform:translate3d(0,calc((1 - var(--a)) * 20px),calc((1 - var(--a)) * -90px));
  opacity:calc(.12 + var(--a) * .88)}
.rks b{font-family:var(--t);font-weight:400;
  font-size:clamp(34px,4.6vw,72px);line-height:.92;letter-spacing:-.03em;
  color:var(--bas-fg);font-variant-numeric:tabular-nums}
.rks__c{display:block;height:1px;background:var(--brand-lt);
  transform:scaleX(var(--a));transform-origin:left;opacity:.75}
.rks u{text-decoration:none;font-family:var(--d);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.35}
@media(prefers-reduced-motion:reduce){.rks{transform:none;opacity:1}}

/* ---- galeri: ritimli düzen + büyüteç ------------------------------------
   Eskiden eşit kutular yan yanaydı, tıklanamıyordu. Her beşlide bir kare
   geniş, biri dikey — ızgara kutu kutu görünmüyor. */
/* 12.9.26 (kullanıcı): "dikdörtgen kolaj değil karusel formatına adapte et,
   sayfayı uzatıyor." Geniş/dikey karışık ızgara 4 sütun bekliyordu; 3-5
   kareli galerilerde satır yarım kalıyor ve koca boşluk bırakıyordu.
   Artık tek sıra yatay karusel: yükseklik sabit, boşluk yok, sayfa kısa. */
.gal[data-galeri]{position:relative}
.gal__ray{display:flex;gap:2px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;
  width:fit-content;max-width:100%;margin-inline:auto;
  background:rgba(255,255,255,.08);padding:1px}
.gal__ray:active{cursor:grabbing}
.gal__ray::-webkit-scrollbar{display:none}
.gal__k{position:relative;display:block;padding:0;border:0;cursor:zoom-in;
  background:var(--yuzey);overflow:hidden;scroll-snap-align:start;
  flex:0 0 clamp(230px,26vw,360px);height:clamp(180px,23vw,300px)}
.gal__k img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.03);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gal__k:hover img{transform:scale(1)}
/* Oklar — yalnız taşan raylarda görünür (JS `.kaydirilabilir` ekliyor) */
.gal__o{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;border:1px solid var(--line);cursor:pointer;
  background:rgba(6,9,11,.72);backdrop-filter:blur(4px);opacity:0;
  transition:opacity .3s var(--ease),background .3s var(--ease)}
.gal[data-galeri].kaydirilabilir .gal__o{opacity:1}
.gal__o:hover{background:var(--brand)}
.gal__o:disabled{opacity:.25;pointer-events:none}
.gal[data-galeri].kaydirilabilir .gal__o:disabled{opacity:.22}
.gal__o::before{content:"";position:absolute;left:50%;top:50%;width:9px;
  height:9px;border-right:1px solid #fff;border-top:1px solid #fff}
.gal__o--sol{left:8px}
.gal__o--sol::before{transform:translate(-30%,-50%) rotate(-135deg)}
.gal__o--sag{right:8px}
.gal__o--sag::before{transform:translate(-70%,-50%) rotate(45deg)}
/* Büyüteç imi — üzerine gelince beliren artı */
.gal__z{position:absolute;right:12px;bottom:12px;width:26px;height:26px;
  opacity:0;transition:opacity .22s;pointer-events:none}
.gal__z::before,.gal__z::after{content:'';position:absolute;background:#fff;
  box-shadow:0 1px 6px rgba(0,0,0,.6)}
.gal__z::before{left:0;right:0;top:12.5px;height:1px}
.gal__z::after{top:0;bottom:0;left:12.5px;width:1px}
.gal__k:hover .gal__z,.gal__k:focus-visible .gal__z{opacity:.95}
@media(max-width:900px){
  .gal__k{flex:0 0 78vw;height:clamp(190px,52vw,280px)}
  .gal__o{display:none}
}

/* ---- büyüteç (lightbox) -------------------------------------------------- */
.byt{position:fixed;inset:0;z-index:200;display:none;
  background:rgba(4,6,8,.94);backdrop-filter:blur(6px)}
/* minmax(0,1fr) ŞART: düz `1fr` satırının otomatik alt sınırı var, dikey
   bir fotoğraf satırı ekranın dışına itiyor ve `max-height:100%` hiçbir şeyi
   sınırlamıyordu (843x1500 kare 854 px'lik ekranda 1500 px yer kaplıyordu). */
.byt.on{display:grid;grid-template-rows:minmax(0,1fr) auto}
.byt__r{display:grid;place-items:center;min-height:0;padding:clamp(44px,6vh,80px)
  clamp(44px,7vw,110px) 8px}
/* YÜZDE YÜKSEKLİK KULLANMA. `max-height:100%` ızgara satırında belirsiz
   sayılıp yok sayılıyordu (843x1500 kare 854 px'lik ekranda 1500 px yer
   kaplıyordu); `height:100%` ise görseli 3.245 px'e şişirdi. Katman
   `position:fixed` ve tam ekran olduğu için viewport birimi kesin sonuç
   veriyor. Çıkarılan 150 px: üst dolgu (80) + alt şerit (54) + boşluk. */
.byt__r img{max-width:100%;max-height:calc(100vh - 150px);
  max-height:calc(100dvh - 150px);width:auto;height:auto;display:block;
  object-fit:contain;box-shadow:0 30px 90px -40px #000;
  cursor:grab;touch-action:none;user-select:none;-webkit-user-drag:none}
.byt__r img:active{cursor:grabbing}
.byt__alt{padding:10px clamp(44px,7vw,110px) clamp(20px,3vh,34px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-family:var(--d);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.byt__k,.byt__o,.byt__x{position:absolute;background:none;border:0;cursor:pointer;
  color:var(--bas-fg);padding:14px;line-height:0}
.byt__k{left:clamp(6px,1.4vw,22px);top:50%;transform:translateY(-50%)}
.byt__o{right:clamp(6px,1.4vw,22px);top:50%;transform:translateY(-50%)}
.byt__x{right:clamp(6px,1.4vw,22px);top:clamp(6px,1.4vh,18px)}
.byt__k svg,.byt__o svg,.byt__x svg{width:22px;height:22px;stroke:currentColor;
  stroke-width:1.4;fill:none}
.byt__k:hover,.byt__o:hover,.byt__x:hover{color:var(--brand-lt)}
@media(prefers-reduced-motion:no-preference){
  /* Animasyon GÖRSELİN KENDİSİNDE değil kapsayıcıda: `both` dolgusuyla
     biten bir animasyon transform'u kilitliyor ve parmakla kaydırmanın
     yazdığı satır içi transform yok sayılıyordu. */
  .byt.on .byt__r{animation:bytGir .3s cubic-bezier(.2,.7,.2,1) both}
  @keyframes bytGir{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
}

/* ---- çözüm ortakları: logolu kart ızgarası -----------------------------
   Eski `.uyg` düz kutulardı: logo yok, tek satır açıklama, çerçeveli.
   Logo açık plakette (marka renkleri korunsun), altında ne tedarik ettiği. */
/* auto-fill 9 kartı 5 sütuna dökünce sonda boş hücre kalıyordu.
   Sütun sayısı sabit: 9 ortak → 3 sıra × 3. */
.okg{display:grid;grid-template-columns:1fr;gap:1px;background:transparent}
@media(min-width:620px){.okg{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.okg{grid-template-columns:repeat(3,1fr)}}
.okg{perspective:1200px}
.ok{display:flex;flex-direction:column;background:var(--yuzey);text-decoration:none;
  transform-style:preserve-3d;box-shadow:0 0 0 1px rgba(255,255,255,.08);
  transition:background .25s,transform .5s cubic-bezier(.2,.8,.24,1),
             box-shadow .5s var(--ease)}
a.ok:hover{background:var(--yuzey-2);
  transform:translateZ(24px) rotateX(2deg) rotateY(-2deg);
  box-shadow:0 0 0 1px rgba(92,187,230,.35),
             0 38px 66px -34px rgba(0,0,0,.95);z-index:2}
/* Logolar KOYU zeminde ve TEK RENK (beyaz). Krem kutular sayfanın siyah
   bütünlüğünü bozuyordu; her logonun kendi rengi de ayrı bir gürültüydü.
   `brightness(0) invert(1)` hepsini beyaza indiriyor. */
.ok__p{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(168deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  height:clamp(84px,9vw,110px);padding:16px clamp(18px,2vw,30px);
  border-bottom:1px solid rgba(255,255,255,.07)}
.ok__p img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  filter:brightness(0) invert(1);opacity:.62;
  transition:opacity .25s,transform .4s var(--ease)}
a.ok:hover .ok__p img{opacity:1;transform:scale(1.04)}
.ok__b{display:flex;flex-direction:column;gap:5px;flex:1;
  padding:16px clamp(14px,1.3vw,20px) 18px}
.ok__u{font-family:var(--d);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand-lt)}
.ok__b h3{font-family:var(--t);font-size:clamp(16px,1.4vw,21px);font-weight:400;
  line-height:1.16;letter-spacing:-.018em;text-transform:none;margin:0;color:var(--bas-fg)}
.ok__b p{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);flex:1}
.ok__o{display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  font-family:var(--d);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-lt)}
.ok__o i{width:14px;height:1px;background:currentColor;transition:width .22s}
a.ok:hover .ok__o i{width:26px}

/* Kapanış bloğu: iki eylem + not (üst üste iki dev CTA'nın yerine) */
.kapanis__y{max-width:34ch}
.kapanis__n{margin:14px 0 0;font-size:13.5px;line-height:1.62;color:var(--muted);
  max-width:52ch}
.kapanis__e{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* Proje dizininde ritim: her yedilide bir geniş kart. Eşit kutuların
   sıralanması "kutu kutu" duruyordu. Filtrelemede gizlenen kartlar
   ızgarayı bozmasın diye vurgu sadece geniş ekranda. */
@media(min-width:1000px){
  .pk--gen{grid-column:span 2}
  /* İki sütun genişliğinde 16:9 komşulardan 1,5 kat yüksek çıkıyor ve
     yanlarında boşluk bırakıyordu. 8:3 ise tam olarak tek kartın görsel
     yüksekliğini veriyor (2W ÷ 8/3 = 0,75W). */
  .pk--gen .pk__f{aspect-ratio:8/3}
  .pk--gen .pk__b h3{font-size:clamp(18px,1.7vw,24px)}
}
/* Kartın kendisi de kutudan çıksın: çerçeve yerine üstte ince aksan. */
.pk{position:relative}
.pk::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--brand-lt);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);z-index:2}
.pk:hover::before{transform:scaleX(1)}

/* ---- bölüm sahneleri: daha dinamik, daha derin --------------------------
   24.8.26 (kullanıcı): uygulama alt sayfaları durgun duruyordu. Üç sorun:
   metin dar bir sütuna sıkışmıştı, plaka çok az dönüyordu ve 15 blok aynı
   kalıpla art arda geliyordu. */

/* 1) Ölçü dengesi: metin 46ch'e sıkışıp yanında dev görsel duruyordu. */
.kitap .stage{grid-template-columns:1.15fr .85fr;
  gap:clamp(28px,5vw,88px);perspective:1200px}
.kitap .copy p{max-width:60ch;font-size:clamp(14.5px,1.2vw,17px);
  line-height:1.72;margin-bottom:20px}
.kitap .copy h2{max-width:20ch}

/* 2) Derinlik: dönüş ve Z aralığı genişledi, altına gölge geldi. */
.kitap .slab{
  transform:rotateY(calc((.5 - var(--p,0)) * 34deg))
            rotateX(calc((var(--p,0) - .5) * 10deg))
            translateY(calc((var(--p,0) - .5) * -62px))
            translateZ(calc(var(--gir,1) * 150px - 60px))
            scale(calc(.90 + var(--gir,1) * .12))}
.kitap .slab__frame{aspect-ratio:3/4;
  box-shadow:0 calc(30px + var(--gir,1) * 40px)
             calc(60px + var(--gir,1) * 60px) -40px rgba(0,0,0,.9)}
/* Görsel çerçevenin İÇİNDE ters yönde kayıyor — gerçek parallaks. */
.kitap .slab__frame img{
  transform:scale(calc(1.22 - var(--gir,1) * .14))
            translateY(calc(var(--p,0) * -46px + 23px))}

/* 3) Ghost numara: bölüm sırası arkada dev serif rakam olarak duruyor. */
.kitap .copy{position:relative}
.kitap .kitap__no{position:absolute;left:-.06em;top:-.62em;z-index:-1;
  font-family:var(--t);font-weight:400;
  font-size:clamp(120px,15vw,240px);line-height:.8;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.10);
  transform:translateY(calc((1 - var(--gir,1)) * 26px));
  opacity:calc(.3 + var(--gir,1) * .7);pointer-events:none}

@media(max-width:900px){
  .kitap .stage{grid-template-columns:1fr;perspective:none}
  .kitap .slab{transform:none}
  .kitap .slab__frame{aspect-ratio:16/10;box-shadow:none}
  .kitap .slab__frame img{transform:none}
  .kitap .kitap__no{position:static;font-size:clamp(56px,16vw,88px);
    display:block;margin-bottom:-.2em;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .kitap .slab,.kitap .slab__frame img,.kitap .kitap__no{transform:none!important}
}

/* ---- tam genişlik bölüm sahnesi (ritim kırıcı) -------------------------- */
.ktam{position:relative;overflow:hidden;
  min-height:clamp(420px,72vh,760px);display:flex;align-items:center;
  border-top:1px solid rgba(255,255,255,.07)}
.ktam__f{position:absolute;inset:0}
.ktam__f img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(calc(1.14 - var(--p,0) * .12))
            translateY(calc(var(--p,0) * -30px + 15px))}
/* Perde SOLDAN koyulaşmalı: metin solda ve yukarıda başlıyor, alttan
   koyulaşan gradyan onu karşılamıyordu. */
.ktam::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(96deg,rgba(6,9,11,.94) 0%,rgba(6,9,11,.86) 38%,
    rgba(6,9,11,.52) 66%,rgba(6,9,11,.22) 100%)}
.ktam__ic{position:relative;z-index:2;width:100%;
  padding:clamp(60px,10vh,140px) var(--kg) clamp(34px,6vh,72px);
  max-width:min(860px,68vw);
  transform:translateY(calc((1 - var(--gir,1)) * 26px));opacity:var(--gir,1)}
.ktam__no{display:block;font-family:var(--t);font-size:clamp(52px,7vw,120px);
  line-height:.8;letter-spacing:-.04em;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.22);margin-bottom:8px}
.ktam h2{font-family:var(--t);font-size:clamp(24px,3.4vw,48px);font-weight:400;
  line-height:1.1;letter-spacing:-.025em;text-transform:none;margin:0 0 14px;
  color:#fff;max-width:20ch}
.ktam .kitap__metin{color:var(--fg)}
.ktam .kitap__metin p{max-width:62ch;font-size:clamp(14px,1.15vw,16.5px);
  line-height:1.72;margin:0 0 16px;color:var(--fg-2)}
@media(max-width:760px){
  .ktam__ic{max-width:none;padding-top:clamp(40px,8vh,90px)}
  .ktam__f img{transform:none}
}
@media(prefers-reduced-motion:reduce){.ktam__f img,.ktam__ic{transform:none}}

/* ---- kart destesi sahnesi (gerçek 3B öge) ------------------------------
   Fotoğraflar Z ekseninde üst üste duruyor; kaydırdıkça yelpaze gibi
   ayrılıp öne geliyorlar. Yalnız transform + opacity. */
.kdeste{position:relative;padding:clamp(56px,9vh,120px) 0;overflow:hidden}
.kdeste__ic{max-width:var(--max);margin:0 auto;padding:0 var(--kg);
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:clamp(30px,5vw,86px);perspective:1300px;perspective-origin:60% 45%}
.kdeste--ters .kdeste__ic{direction:rtl}
.kdeste--ters .kdeste__y,.kdeste--ters .dst{direction:ltr}
.kdeste__y{position:relative;
  transform:translateY(calc((1 - var(--gir,1)) * 24px));opacity:var(--gir,1)}
.kdeste__no{position:absolute;left:-.06em;top:-.66em;z-index:-1;
  font-family:var(--t);font-size:clamp(110px,14vw,220px);line-height:.8;
  letter-spacing:-.04em;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.10);pointer-events:none}
.kdeste h2{font-family:var(--t);font-size:clamp(24px,3.2vw,46px);font-weight:400;
  line-height:1.1;letter-spacing:-.025em;text-transform:none;margin:0 0 16px;
  color:var(--bas-fg);max-width:20ch}
.kdeste .kitap__metin p{max-width:58ch;font-size:clamp(14.5px,1.2vw,17px);
  line-height:1.72;margin:0 0 18px;color:var(--muted)}

.dst{position:relative;transform-style:preserve-3d;
  aspect-ratio:4/5;min-height:clamp(280px,42vh,520px);
  margin-right:clamp(10px,6vw,90px)}
.dst__k{position:absolute;inset:0;border-radius:3px;overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95);
  /* a: bu kartın açılma oranı — sırayla desteden çıkıyorlar */
  --a:clamp(0, calc((var(--p,0) - .06 - var(--i) * .10) / .34), 1);
  /* Öndeki kart baştan opak; arkadakiler açıldıkça beliriyor. Hepsini
     birden yarı saydam bırakmak bulanık bir yığın gösteriyordu. */
  transform:
    translate3d(calc(var(--a) * var(--i) * 11%),
                calc(var(--a) * var(--i) * -6%),
                calc(var(--i) * -60px + var(--a) * var(--i) * 60px))
    rotateY(calc((1 - var(--a)) * -10deg + var(--i) * 3deg))
    rotateZ(calc((1 - var(--a)) * var(--i) * 3deg))
    scale(calc(.92 + var(--a) * .08));
  opacity:calc(1 - var(--i) * .45 + var(--a) * var(--i) * .45);
  z-index:calc(10 - var(--i))}
.dst__k img{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:900px){
  .kdeste__ic{grid-template-columns:1fr;perspective:none}
  .kdeste--ters .kdeste__ic{direction:ltr}
  .dst{aspect-ratio:16/10;min-height:0}
  .dst__k{position:relative;inset:auto;transform:none;opacity:1;margin-bottom:8px}
  .dst__k:not(:first-child){display:none}
  .kdeste__no{position:static;display:block;font-size:clamp(56px,16vw,88px);
    margin-bottom:-.16em}
}
@media(prefers-reduced-motion:reduce){.dst__k{transform:none;opacity:1}}

/* ---- uygulama sayfası içerik gövdesi: editoryal düzen -------------------
   Eski kurgu her bölümü metin + yanında fotoğraf olarak basıyordu; 15 kez
   tekrarlayınca hem durgun hem okunmaz oluyordu. Artık metin tek sütunda
   ve okunur ölçüde, fotoğraflar bölümlerin ARASINDA tam genişlik. */
.mk{padding:clamp(46px,7vh,96px) 0 clamp(56px,9vh,120px)}
/* 1440'lık kapta metin solda sıkışıp sağda koca boşluk kalıyordu.
   Kap daraltıldı ve ortalandı; metin sütunu artık gerçekten merkezde. */
.mk__ic{max-width:1180px;margin:0 auto;padding:0 var(--kg);
  display:grid;grid-template-columns:minmax(170px,215px) minmax(0,1fr);
  gap:clamp(28px,4.5vw,72px);align-items:start}

/* Sabit içindekiler */
.mk__i{position:sticky;top:clamp(88px,12vh,120px);display:flex;
  flex-direction:column;gap:2px;
  max-height:calc(100vh - 180px);overflow-y:auto;
  border-left:1px solid rgba(255,255,255,.10);padding-left:16px}
.mk__i .etiket{color:var(--brand-lt);margin-bottom:12px}
.mk__i a{display:grid;grid-template-columns:2.4em 1fr;gap:8px;align-items:baseline;
  padding:7px 0;text-decoration:none;color:var(--muted);
  font-size:13px;line-height:1.35;transition:color .2s}
.mk__i a s{text-decoration:none;font-family:var(--d);font-size:9.5px;
  letter-spacing:.12em;color:var(--muted)}
.mk__i a:hover{color:var(--bas-fg-2)}
.mk__i a.on{color:var(--bas-fg)}
.mk__i a.on s{color:var(--brand-lt)}

/* Metin: tek sütun, okunur ölçü */
.mk__b{scroll-margin-top:110px;margin:0 0 clamp(30px,4.5vh,58px)}
.mk__b h2{font-family:var(--t);font-size:clamp(24px,3vw,42px);font-weight:400;
  line-height:1.12;letter-spacing:-.025em;text-transform:none;
  margin:0 0 clamp(14px,2vh,22px);color:var(--bas-fg);max-width:22ch}
.mk__m{max-width:70ch}
.mk__m p{margin:0 0 1.15em;font-size:clamp(15px,1.25vw,17.5px);line-height:1.78;
  color:var(--muted)}
.mk__m p:last-child{margin-bottom:0}
.mk__m ul{margin:0 0 1.3em;padding:0;list-style:none}
.mk__m li{position:relative;padding:5px 0 5px 18px;
  font-size:clamp(14px,1.15vw,16px);line-height:1.62;color:var(--fg-2)}
.mk__m li::before{content:'';position:absolute;left:0;top:15px;width:8px;height:1px;
  background:var(--brand-lt);opacity:.85}
.mk__m strong,.mk__m b{color:var(--bas-fg-2);font-weight:400}

/* Bölümler arası nefes: tam genişlik fotoğraf */
.mk__f{margin:clamp(34px,5vh,72px) 0;position:relative}
.mk__f img{width:100%;height:clamp(240px,44vh,540px);object-fit:cover;display:block}
.mk__f figcaption{margin-top:10px;font-family:var(--d);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

@media(max-width:960px){
  .mk__ic{grid-template-columns:1fr;gap:22px}
  .mk__i{position:static;max-height:none;border-left:0;padding-left:0;
    border-bottom:1px solid rgba(255,255,255,.10);padding-bottom:14px}
  .mk__i a{padding:5px 0}
}

/* ---- katmanlı 3B bölüm sahnesi -----------------------------------------
   Metin ve görsel BİRLİKTE hareket eder. Fotoğraf YAPIŞKAN: metin akarken
   yerinde kalıp derinlikte döner, panel onun üstüne biner.
   (Mutlak konumda tutulunca uzun bölümlerde fotoğraf absürt uzuyordu.) */
.s3{position:relative;padding:clamp(30px,5vh,72px) 0;overflow:hidden}
.s3__ic{position:relative;max-width:1400px;margin:0 auto;padding:0 var(--kg);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  align-items:start;gap:0;perspective:1500px;perspective-origin:60% 40%}
.s3--ters .s3__ic{grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  perspective-origin:40% 40%}

/* Fotoğraf: yapışkan, derinlikte, hafif dönüyor */
.s3__f{grid-column:2;grid-row:1;position:sticky;top:clamp(84px,13vh,132px);
  height:clamp(300px,62vh,640px);border-radius:3px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 60px 130px -60px rgba(0,0,0,.95);
  transform:translateZ(calc(-160px + var(--gir,1) * 160px))
            rotateY(calc((.5 - var(--p,0)) * 16deg));
  opacity:calc(.35 + var(--gir,1) * .65)}
.s3--ters .s3__f{grid-column:1;
  transform:translateZ(calc(-160px + var(--gir,1) * 160px))
            rotateY(calc((var(--p,0) - .5) * 16deg))}
.s3__f img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(calc(1.18 - var(--p,0) * .14))}
.s3__f::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,9,11,.80),rgba(6,9,11,.14) 58%,transparent)}
.s3--ters .s3__f::after{background:linear-gradient(270deg,rgba(6,9,11,.80),
  rgba(6,9,11,.14) 58%,transparent)}
.s3__isi{position:absolute;right:16px;top:14px;font-family:var(--t);
  font-size:clamp(22px,2.4vw,38px);line-height:1;color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.7)}

/* Dev numara — panelin arkasında, ters yönde kayıyor */
.s3__no{grid-column:1;grid-row:1;justify-self:start;align-self:start;
  z-index:1;pointer-events:none;margin:-.16em 0 0 -.05em;
  font-family:var(--t);font-size:clamp(130px,18vw,300px);line-height:.72;
  letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.12);
  transform:translate3d(calc((var(--p,0) - .5) * 60px),
                        calc((.5 - var(--p,0)) * 34px),-90px)}
.s3--ters .s3__no{grid-column:2;justify-self:end;margin-right:-.05em}

/* Metin paneli: fotoğrafın ÜSTÜNE binen cam yüzey */
.s3__y{grid-column:1;grid-row:1;z-index:3;position:relative;
  width:min(112%,660px);margin-top:clamp(40px,7vh,90px);
  padding:clamp(24px,2.8vw,42px);
  background:rgba(9,13,15,.80);backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  border:1px solid rgba(255,255,255,.10);border-radius:3px;
  transform:translateZ(calc(var(--gir,1) * 70px))
            translateY(calc((1 - var(--gir,1)) * 26px));
  opacity:var(--gir,1)}
.s3--ters .s3__y{grid-column:2;justify-self:end}
.s3__y h2{font-family:var(--t);font-size:clamp(22px,2.9vw,42px);font-weight:400;
  line-height:1.1;letter-spacing:-.025em;text-transform:none;margin:0 0 16px;
  color:var(--bas-fg);max-width:22ch}
.s3__m{max-width:62ch}
/* Paragraf açılımı bölümün --p'sine bağlıydı: uzun bölümde alttaki
   paragraflar EKRANDA GÖRÜNÜRKEN hâlâ soluk kalıyordu. Artık her paragraf
   KENDİ görünürlüğüne bağlı (native scroll-driven). Desteklenmiyorsa
   hepsi baştan okunur — kayıp yok. */
.s3__p{opacity:1}
@supports (animation-timeline: view()) {
  .s3__p{animation:s3Gir linear both;animation-timeline:view();
    animation-range:entry 10% cover 26%}
  @keyframes s3Gir{
    from{opacity:.18;transform:translateY(20px)}
    to{opacity:1;transform:none}
  }
}
.s3__p p{margin:0 0 .95em;font-size:clamp(14.5px,1.18vw,17px);line-height:1.74;
  color:var(--fg-2)}
.s3__p ul{margin:0 0 1em;padding:0;list-style:none}
.s3__p li{position:relative;padding:4px 0 4px 16px;font-size:14px;
  line-height:1.6;color:var(--fg-2)}
.s3__p li::before{content:'';position:absolute;left:0;top:13px;width:8px;height:1px;
  background:var(--brand-lt);opacity:.85}

@media(max-width:960px){
  .s3__ic{min-height:0;perspective:none;display:block;padding-top:0}
  .s3__f{position:relative;grid-column:1;width:auto;
    height:clamp(200px,42vw,320px);transform:none;opacity:1;margin-bottom:-40px}
  .s3__f img{transform:none}
  .s3__y{grid-column:1;width:auto;transform:none;margin-top:0}
  .s3--ters .s3__f,.s3--ters .s3__y,.s3--ters .s3__no{grid-column:1}
  .s3__p{transform:none;opacity:1}
  .s3__no{grid-column:1;display:block;font-size:clamp(60px,17vw,96px);
    transform:none;margin:0 0 -.14em}
}
@media(prefers-reduced-motion:reduce){
  .s3__f,.s3__y,.s3__no,.s3__p,.s3__f img{transform:none!important;opacity:1!important}
}

/* ============================================================ BENTO IZGARA
   Kart neredeyse tamamen fotoğraf; hover'da arka plan bulanıklaşıp ortada
   "Görün — Ad" hapı beliriyor. */
.bento{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,1.6vw,24px)}
.bt{position:relative;display:block;overflow:hidden;border-radius:22px;
  background:var(--yuzey);border:1px solid rgba(255,255,255,.08);
  text-decoration:none;aspect-ratio:16/11}
.bt--7{grid-column:span 7}
.bt--5{grid-column:span 5}
.bt>img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.bt:hover>img{transform:scale(1.06)}
/* Yarım ton dokusu — referanstaki gibi */
/* Nokta dokusu fazla belirgindi; fotoğrafın önüne geçiyordu. */
.bt__hf{position:absolute;inset:0;pointer-events:none;opacity:.09;
  mix-blend-mode:multiply;
  background-image:radial-gradient(circle,#000 1px,transparent 1px);
  background-size:4px 4px}
.bt__ort{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(6,9,11,.62);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  opacity:0;transition:opacity .32s cubic-bezier(.2,.7,.2,1)}
.bt:hover .bt__ort,.bt:focus-visible .bt__ort{opacity:1}
.bt__hap{display:inline-block;padding:11px 22px;border-radius:999px;
  background:var(--bas-fg);color:var(--yuzey);font-family:var(--d);font-size:12px;
  letter-spacing:.06em;transform:translateY(8px);transition:transform .32s}
.bt:hover .bt__hap{transform:none}
.bt__hap em{font-family:var(--t);font-style:italic;font-size:15px}
.bt__alt{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(14px,1.4vw,22px);
  background:linear-gradient(180deg,transparent,rgba(6,9,11,.92));
  transition:opacity .3s}
.bt:hover .bt__alt{opacity:0}
.bt__alt s{display:block;text-decoration:none;font-family:var(--d);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-lt);margin-bottom:4px}
.bt__alt b{font-family:var(--t);font-weight:400;
  font-size:clamp(17px,1.6vw,24px);letter-spacing:-.018em;color:#fff}
@media(max-width:820px){
  .bento{grid-template-columns:1fr}
  .bt--7,.bt--5{grid-column:span 1}
  .bt{aspect-ratio:16/10;border-radius:16px}
}

/* ========================================================= PARALAKS GALERİ
   Ortada SABİT başlık; iki yanda fotoğraf sütunları farklı hızda akıyor. */
.px{position:relative;min-height:300vh}
.px__pin{position:sticky;top:0;height:100vh;z-index:10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:0 var(--kg);pointer-events:none}
.px__pin .eyebrow{color:var(--brand-lt)}
.px__pin>*{pointer-events:auto}
.px__pin h2{font-family:var(--t);font-size:clamp(30px,5.4vw,84px);font-weight:400;
  line-height:1.02;letter-spacing:-.03em;text-transform:none;margin:0;color:var(--bas-fg)}
.px__pin h2 .it{font-size:1.06em}
.px__lede{margin:0;max-width:44ch;font-size:13.5px;line-height:1.62;color:var(--muted)}
.px__g{position:absolute;inset:0;z-index:20;display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(24px,10vw,180px);
  max-width:1400px;margin:0 auto;padding:22vh var(--kg)}
.px__s{display:flex;flex-direction:column;gap:clamp(60px,14vh,180px);
  will-change:transform}
/* İki sütun farklı hızda: derinlik hissi buradan geliyor. */
.px__s--a{transform:translate3d(0,calc(var(--p,0) * -46vh),0)}
.px__s--b{transform:translate3d(0,calc(14vh + var(--p,0) * -74vh),0)}
.px__s figure{margin:0;aspect-ratio:1/1;width:min(100%,320px);overflow:hidden;
  border-radius:14px;border:1px solid rgba(255,255,255,.09);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95);
  transform:rotate(calc((var(--i) - 1) * 2.2deg))}
.px__s--b figure{margin-left:auto;
  transform:rotate(calc((1 - var(--i)) * 2.6deg))}
.px__s img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){
  .px{min-height:0}
  .px__pin{position:static;height:auto;padding:clamp(40px,8vh,80px) var(--kg)}
  .px__g{position:static;padding:0 var(--kg) clamp(40px,8vh,80px);
    gap:14px;transform:none}
  .px__s{gap:14px;transform:none!important}
  .px__s figure{width:auto;transform:none}
}
@media(prefers-reduced-motion:reduce){.px__s{transform:none!important}}

/* ============================================================ KONU LİSTESİ
   Uzun metin duvar olarak değil, açılır satırlar olarak. Metin HTML'de
   duruyor (SEO), yalnız görsel olarak katlanıyor. */
.kl{padding:clamp(50px,8vh,104px) var(--kg)}
.kl__bas{margin-bottom:clamp(22px,3.4vh,38px)}
.kl__bas .eyebrow{color:var(--brand-lt)}
.kl__bas h2{font-family:var(--t);font-size:clamp(26px,3.8vw,54px);font-weight:400;
  line-height:1.06;letter-spacing:-.025em;text-transform:none;margin:8px 0 0;
  color:var(--bas-fg)}
.kl__g{max-width:980px}
.kl__s{border-top:1px solid rgba(255,255,255,.10)}
.kl__s:last-child{border-bottom:1px solid rgba(255,255,255,.10)}
.kl__s summary{display:grid;grid-template-columns:3.2em 1fr auto 20px;
  align-items:center;gap:14px;padding:clamp(16px,2.2vh,24px) 0;cursor:pointer;
  list-style:none;transition:color .2s}
.kl__s summary::-webkit-details-marker{display:none}
.kl__s summary s{text-decoration:none;font-family:var(--d);font-size:10px;
  letter-spacing:.12em;color:var(--brand-lt)}
.kl__s summary span{font-family:var(--t);font-size:clamp(17px,2vw,27px);
  font-weight:400;line-height:1.16;letter-spacing:-.02em;color:var(--bas-fg)}
.kl__s summary u{text-decoration:none;font-family:var(--d);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.kl__s summary i{position:relative;width:16px;height:16px;justify-self:end}
.kl__s summary i::before,.kl__s summary i::after{content:'';position:absolute;
  background:var(--muted);transition:transform .26s var(--ease)}
.kl__s summary i::before{left:0;right:0;top:7.5px;height:1px}
.kl__s summary i::after{top:0;bottom:0;left:7.5px;width:1px}
.kl__s[open] summary i::after{transform:scaleY(0)}
.kl__s summary:hover span{color:var(--brand-lt)}
.kl__m{padding:0 0 clamp(22px,3vh,34px);max-width:70ch}
.kl__m p{margin:0 0 1.1em;font-size:clamp(14.5px,1.18vw,16.5px);line-height:1.76;
  color:var(--muted)}
.kl__m ul{margin:0 0 1.2em;padding:0;list-style:none}
.kl__m li{position:relative;padding:4px 0 4px 17px;font-size:14.5px;
  line-height:1.62;color:var(--fg-2)}
.kl__m li::before{content:'';position:absolute;left:0;top:14px;width:8px;height:1px;
  background:var(--brand-lt);opacity:.85}
@media(max-width:600px){
  .kl__s summary{grid-template-columns:2.4em 1fr 16px}
  .kl__s summary u{display:none}
}


/* ---- kesit: kademeli açılım ---------------------------------------------
   24.8.26 (kullanıcı): "bir anda açılıp kapanıyor, kademeli olmalı".
   Sebep: katmanlar bölümün --p'sine bağlıydı; blok ekrandan geçerken
   --p hızla 0→1 gidiyor ve beş katman neredeyse aynı anda açılıp
   kapanıyordu. Artık her katman KENDİ görünürlüğüne bağlı. */
@supports (animation-timeline: view()) {
  .kesit__kat{
    opacity:1;transform:none;
    animation:kesitGir linear both;
    animation-timeline:view();
    animation-range:entry 6% cover 22%}
  @keyframes kesitGir{
    from{opacity:.14;transform:translate3d(-30px,0,0)}
    to{opacity:1;transform:none}
  }
  /* Katman çizgisi de kendi sırasında çiziliyor */
  .kesit__cizgi{transform:scaleY(1);
    animation:kesitCiz linear both;animation-timeline:view();
    animation-range:entry 6% cover 20%}
  @keyframes kesitCiz{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}

/* ---- akan görsel şeridi (kutu ızgaranın yerine) -------------------------
   Referans dili: sonsuz marquee, büyük yuvarlatılmış kareler. Liste iki kez
   basılıp %50 kaydırılıyor → kesintisiz. Üzerine gelince şerit durur ve o
   kare büyür. Tıklanınca büyüteç açılır. */
.sg{padding:clamp(46px,7vh,96px) 0 clamp(52px,8vh,110px);overflow:hidden}
.sg__bas{padding:0 var(--kg);margin-bottom:clamp(22px,3.4vh,40px)}
.sg__bas .eyebrow{color:var(--brand-lt)}
.sg__bas h2{font-family:var(--t);font-size:clamp(26px,3.8vw,54px);font-weight:400;
  line-height:1.06;letter-spacing:-.025em;text-transform:none;margin:8px 0 0;
  color:var(--bas-fg)}
.sg__p{position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
/* 15.9.26: otomatik marquee kalktı — elle kaydırılan gerçek şerit.
   `scroll-padding` ilk karenin maskenin altında kalmasını engelliyor. */
.sg__t{display:flex;align-items:center;gap:clamp(12px,1.4vw,22px);
  padding:22px var(--kg);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-left:var(--kg);
  scrollbar-width:none;cursor:grab}
.sg__t::-webkit-scrollbar{display:none}
.sg__t:active{cursor:grabbing}
.sg__o{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:46px;height:46px;border:1px solid var(--line);cursor:pointer;
  background:rgba(6,9,11,.78);backdrop-filter:blur(5px);opacity:0;
  border-radius:50%;transition:opacity .3s var(--ease),background .3s}
.sg[data-galeri].kaydirilabilir .sg__o{opacity:1}
.sg__o:hover{background:var(--brand)}
.sg__o:disabled{opacity:.25;pointer-events:none}
.sg__o::before{content:"";position:absolute;left:50%;top:50%;width:9px;
  height:9px;border-right:1px solid #fff;border-top:1px solid #fff}
.sg__o--sol{left:calc(var(--kg) - 10px)}
.sg__o--sol::before{transform:translate(-30%,-50%) rotate(-135deg)}
.sg__o--sag{right:calc(var(--kg) - 10px)}
.sg__o--sag::before{transform:translate(-70%,-50%) rotate(45deg)}
.sg__k{flex:0 0 auto;display:block;padding:0;border:0;cursor:zoom-in;
  scroll-snap-align:start;
  width:clamp(230px,26vw,430px);height:clamp(180px,30vh,330px);
  border-radius:18px;overflow:hidden;background:var(--yuzey);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 70px -45px rgba(0,0,0,.95);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),
             box-shadow .45s,border-color .3s}
.sg__k img{width:100%;height:100%;object-fit:cover;display:block}
/* BÜYÜMECE: üzerine gelen kare öne çıkıyor */
.sg__k:hover,.sg__k:focus-visible{transform:scale(1.14);z-index:2;
  border-color:rgba(255,255,255,.22);
  box-shadow:0 50px 110px -40px rgba(0,0,0,1)}
@media(max-width:760px){
  .sg__k{width:clamp(180px,62vw,260px);height:clamp(150px,34vw,210px)}
}
@media(prefers-reduced-motion:reduce){
  .sg__k:hover{transform:none}
}

/* ---- konu listesi: iki sütun + yelpaze kart destesi ---------------------
   24.8.26 (kullanıcı): "yan tarafı ne kadar boş". Sağ tarafa referanstaki
   yelpaze dizilimi geldi: eğik kartlar üst üste, kaydırdıkça ayrılıyor. */
.kl__ic{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);
  gap:clamp(30px,5vw,90px);align-items:start}
.kl__g{max-width:none}

/* Sadece aspect-ratio ile kutu 0×0 çıkıyordu (çocukların hepsi mutlak
   konumda, yükseklik türetilemiyor). Açık ölçü şart. */
.yp{position:sticky;top:clamp(96px,15vh,150px);
  width:100%;max-width:420px;height:clamp(340px,40vw,520px);
  margin:clamp(18px,3vh,44px) 0 0 auto;   /* eğik kartlar başlığa değiyordu */
  perspective:1200px;transform-style:preserve-3d}
.yp__k{position:absolute;inset:0;margin:0;border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 50px 110px -55px rgba(0,0,0,.98);
  /* a: kaydırdıkça yelpaze açılıyor */
  --a:clamp(0, calc((var(--p,0) - .04 - var(--i) * .07) / .34), 1);
  transform:
    translate3d(calc(var(--a) * var(--i) * -9%), calc(var(--a) * var(--i) * -5%),
                calc(var(--i) * -70px + var(--a) * var(--i) * 70px))
    rotate(calc((1 - var(--a)) * var(--i) * 3deg + var(--i) * -4deg))
    scale(calc(.93 + var(--a) * .07));
  opacity:calc(1 - var(--i) * .38 + var(--a) * var(--i) * .38);
  z-index:calc(10 - var(--i))}
.yp__k img{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:1000px){
  .kl__ic{grid-template-columns:1fr}
  .yp{position:relative;top:auto;max-width:none;aspect-ratio:16/10;
    margin:26px 0 0;perspective:none}
  .yp__k{transform:none;opacity:1}
  .yp__k:not(:first-child){display:none}
}
@media(prefers-reduced-motion:reduce){.yp__k{transform:none;opacity:1}}

/* ---- birlikte çalıştığımız kurumlar: logolu plaket ızgarası ------------
   Eskiden düz metin haplarıydı. Logosu olan logoyla, olmayan tipografik
   plaketle — ızgara tek düzende kalıyor. */
.kr{padding:clamp(48px,7vh,100px) var(--kg)}
.kr__bas{margin-bottom:clamp(24px,3.6vh,42px)}
.kr__bas .eyebrow{color:var(--brand-lt)}
.kr__bas h2{font-family:var(--t);font-size:clamp(26px,3.8vw,54px);font-weight:400;
  line-height:1.06;letter-spacing:-.025em;text-transform:none;margin:8px 0 0;
  color:var(--bas-fg)}
.kr__lede{margin:12px 0 0;font-size:13.5px;line-height:1.62;color:var(--muted);
  max-width:58ch}
/* KARUSEL: iki sıra, ters yönlerde, kesintisiz akış. */
.kr__p{position:relative;display:flex;flex-direction:column;gap:1px;
  background:rgba(255,255,255,.08);padding:1px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.kr__t{display:flex;gap:1px;width:max-content;
  animation:krKay var(--sure,64s) linear infinite;will-change:transform}
.kr__t--ters{animation-direction:reverse}
.kr__p:hover .kr__t{animation-play-state:paused}
@keyframes krKay{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.kr__h{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:#f3efe9;min-height:clamp(84px,8vw,108px);
  width:clamp(150px,15vw,200px);
  padding:16px clamp(14px,1.6vw,24px);transition:background .25s}
.kr__h:hover{background:#fff}
.kr__h img{max-width:100%;max-height:clamp(40px,4.4vw,58px);width:auto;height:auto;
  display:block;opacity:.84;transition:opacity .25s}
.kr__h:hover img{opacity:1}
/* Logosu olmayan marka: tipografik plaket.
   15.9.26 (kullanıcı): "burada arka planları siyah, o üçü, onları revize
   etmek lazım." Şeritte 21 hücre açık krem, 3 hücre koyuydu — beyaz SVG'li
   iki logo ve logosuz bir marka. Artık HEPSİ aynı krem plakette; beyaz
   logolar filtreyle koyulaştırılıyor, tipografik plaket de koyu metin. */
.kr__h--yazi{background:#f3efe9}
.kr__h--yazi:hover{background:#fff}
.kr__y{font-family:var(--t);font-size:clamp(15px,1.5vw,21px);line-height:1.15;
  letter-spacing:-.01em;color:var(--fg);text-align:center}
@media(max-width:520px){
  .kr__h{min-height:76px;width:132px}
}
@media(prefers-reduced-motion:reduce){
  .kr__t{animation:none;width:auto;overflow-x:auto}
  .kr__p{-webkit-mask-image:none;mask-image:none}
}

/* ---- iletişim: hızlı kanal şeridi --------------------------------------- */
.kn{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px;background:rgba(255,255,255,.08);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08)}
.kn__k{display:flex;align-items:center;gap:14px;background:var(--yuzey);
  padding:clamp(18px,2.4vh,26px) clamp(16px,1.8vw,26px);text-decoration:none;
  transition:background .25s}
.kn__k:hover{background:var(--yuzey-2)}
.kn__i{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;
  border-radius:50%;background:rgba(92,187,230,.12);color:var(--brand-lt)}
.kn__y{display:flex;flex-direction:column;gap:2px;min-width:0}
.kn__y s{text-decoration:none;font-family:var(--d);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.kn__y b{font-family:var(--t);font-weight:400;font-size:clamp(15px,1.4vw,20px);
  letter-spacing:-.01em;color:var(--bas-fg);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.kn__o{margin-left:auto;width:16px;height:1px;background:var(--brand-lt);
  opacity:.7;transition:width .25s}
.kn__k:hover .kn__o{width:28px}

/* ---- immo ürün ızgarası ------------------------------------------------
   Ürün fotoğrafları beyaz zeminli katalog kesimleri; koyu kartta yamalık
   duruyordu. Açık plakette gerçek renginde, metin altta. */
/* Izgara arka planı BOŞ HÜCRELERDE gri blok olarak sızıyordu (1 ürünlü
   kategoride yanı komple gri kalıyordu). Çizgi artık kartın kendisinde. */
.ur{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));
  gap:1px;background:transparent;perspective:1200px}
.ur__k{display:flex;flex-direction:column;background:var(--yuzey);
  text-decoration:none;transform-style:preserve-3d;
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
  transition:background .25s,transform .5s cubic-bezier(.2,.8,.24,1),
             box-shadow .5s var(--ease)}
.ur__k:hover{background:var(--yuzey-2);
  transform:translateZ(26px) rotateX(2.4deg) rotateY(-2.4deg);
  box-shadow:0 0 0 1px rgba(92,187,230,.35),
             0 40px 70px -34px rgba(0,0,0,.95);z-index:2}
/* 4.9.26 — KREM PLAKET KALKTI. IMMO ürün render'larının çoğu koyu
   zeminli; krem plakete oturunca kutu içinde kutu görünüyordu ve sayfanın
   siyah bütünlüğü bozuluyordu (kullanıcı: "görseller kutu kutu, arkaları
   beyaz, saçma olmuş"). Artık kare çerçeveyi DOLDURUYOR. */
.ur__f{position:relative;display:block;overflow:hidden;
  background:linear-gradient(168deg,var(--yuzey-2),var(--yuzey-d));
  height:clamp(160px,16vw,215px)}
.ur__f img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s var(--ease);
  filter:brightness(.92)}
/* Beyaz zeminli birkaç kare için: köşeleri karartan iç gölge, koyu
   kartlarla aynı ağırlıkta dursunlar. */
.ur__f::after{content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 60px 18px rgba(8,11,13,.55);
  background:linear-gradient(to top,rgba(8,11,13,.5),transparent 46%)}
.ur__k:hover .ur__f img{transform:scale(1.05);filter:brightness(1.02)}
.ur__b{display:flex;flex-direction:column;gap:5px;flex:1;
  padding:15px clamp(14px,1.3vw,20px) 18px}
.ur__b s{text-decoration:none;font-family:var(--d);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brand-lt)}
.ur__b b{font-family:var(--t);font-weight:400;
  font-size:clamp(16px,1.4vw,21px);line-height:1.16;letter-spacing:-.018em;
  color:var(--bas-fg)}
.ur__b p{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);flex:1}
.ur__o{display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  font-family:var(--d);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-lt)}
.ur__o i{width:14px;height:1px;background:currentColor;transition:width .22s}
.ur__k:hover .ur__o i{width:26px}

/* ---- ürün plaketi (immo ürün sayfaları) --------------------------------
   Katalog kesimleri beyaz stüdyo zeminli; koyu sayfada yamalık duruyordu.
   Açık plakette gerçek renginde, yanında çerçeve metni. */
.up{padding:clamp(34px,5vh,72px) var(--kg)}
.up__ic{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(24px,4vw,70px);align-items:center;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:clamp(22px,3.4vh,44px) 0}
.up__f{display:grid;place-items:center;background:#f3efe9;border-radius:4px;
  min-height:clamp(230px,26vw,360px);padding:clamp(20px,2.6vw,40px)}
.up__f img{max-width:100%;max-height:clamp(190px,22vw,300px);width:auto;
  height:auto;object-fit:contain;display:block}
.up__y .etiket{color:var(--brand-lt)}
.up__y h2{font-family:var(--t);font-size:clamp(24px,3.2vw,44px);font-weight:400;
  line-height:1.1;letter-spacing:-.025em;text-transform:none;margin:10px 0 14px;
  color:var(--bas-fg);max-width:20ch}
.up__y p{margin:0;font-size:clamp(14px,1.18vw,16.5px);line-height:1.72;
  color:var(--muted);max-width:56ch}
@media(max-width:820px){.up__ic{grid-template-columns:1fr}}
/* Beyaz üretilmiş logolar (Tryp by Wyndham, NYX) açık plakette
   görünmüyordu — koyu plakete alındılar. */
/* Beyaz (koyu zemin için üretilmiş) SVG'ler krem plakette görünmüyordu;
   ayrı koyu hücre yerine logonun kendisi çevriliyor. */
.kr__h--koyu{background:#f3efe9}
.kr__h--koyu:hover{background:#fff}
.kr__h--koyu img{filter:invert(1) grayscale(1) contrast(1.15);opacity:.78}
.kr__h--koyu:hover img{opacity:.95}
/* Temsilî görsel etiketi — kare o projeye ait değilse. */
.gal__t{position:absolute;left:10px;top:10px;z-index:2;
  font-family:var(--d);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bas-fg-2);background:rgba(6,9,11,.72);backdrop-filter:blur(6px);
  padding:4px 8px;border-radius:2px}

/* ============================================================== MAKALE
   Blog makalesi düzeni: künye şeridi · kısa cevap (AEO) · gövde. */
.mkm{padding:clamp(20px,2.6vh,32px) var(--kg);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08)}
.mkm__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:clamp(14px,2vw,34px)}
.mkm__g>div{display:flex;flex-direction:column;gap:3px}
.mkm__g s{text-decoration:none;font-family:var(--d);font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.mkm__g b{font-size:14px;font-weight:400;line-height:1.3;color:var(--bas-fg-2)}

/* Kısa cevap — öne çıkan snippet ve YZ cevapları buradan alıyor */
.mkc{padding:clamp(34px,5vh,64px) var(--kg) 0}
.mkc__ic{max-width:74ch;padding:clamp(20px,2.6vw,32px);
  border-left:2px solid var(--brand-lt);background:rgba(92,187,230,.05)}
.mkc__ic .etiket{color:var(--brand-lt)}
.mkc__ic p{margin:10px 0 0;font-size:clamp(15px,1.3vw,18.5px);line-height:1.68;
  color:var(--bas-fg-2)}

.mk2{padding:clamp(30px,4vh,60px) 0 clamp(46px,7vh,90px)}
.mk2__ic{max-width:1080px;margin:0 auto;padding:0 var(--kg)}
.mkb{margin:0 0 clamp(26px,4vh,48px);scroll-margin-top:110px}
.mkb h2{font-family:var(--t);font-size:clamp(23px,2.9vw,40px);font-weight:400;
  line-height:1.12;letter-spacing:-.025em;text-transform:none;
  margin:0 0 clamp(12px,1.8vh,20px);color:var(--bas-fg);max-width:24ch}
.mkb__m{max-width:72ch}
.mkb__m p{margin:0 0 1.1em;font-size:clamp(15px,1.25vw,17.5px);line-height:1.78;
  color:var(--muted)}
.mkb__f{margin:clamp(30px,4.5vh,64px) 0}
.mkb__f img{width:100%;height:clamp(220px,42vh,500px);object-fit:cover;display:block}

/* İç link şeridi */
.ilk{padding:clamp(30px,4.5vh,64px) var(--kg);
  border-top:1px solid rgba(255,255,255,.08)}
.ilk .etiket{display:block;color:var(--brand-lt);margin-bottom:14px}
.ilk__g{display:flex;flex-wrap:wrap;gap:8px}
.ilk__k{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:9px 16px;font-size:13.5px;color:var(--fg-2);transition:.22s}
.ilk__k i{width:14px;height:1px;background:var(--brand-lt);transition:width .22s}
.ilk__k:hover{color:#fff;border-color:var(--brand-lt)}
.ilk__k:hover i{width:24px}
@media(prefers-reduced-motion:no-preference){
  .mkb{animation:mkGir linear both;animation-timeline:view();
    animation-range:entry 8% cover 22%}
  @keyframes mkGir{from{opacity:.2;transform:translateY(22px)}to{opacity:1;transform:none}}
}

/* --------------------------------------------------------------------
   Blog dizini — konu kümeleri ve atlama şeridi (26.8.26)
   30 yeni makale eklendi; tek ızgara okunmuyordu, konu kümelerine
   bölündü ve üstüne yapışkan bir atlama şeridi kondu.
   -------------------------------------------------------------------- */
.atla{display:flex;flex-wrap:wrap;gap:8px;padding:18px 0 4px;
  position:sticky;top:clamp(56px,8vh,76px);z-index:6;background:var(--ink);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
[id^="k-"]{scroll-margin-top:clamp(120px,20vh,170px)}
.atla a{display:inline-flex;align-items:baseline;gap:7px;
  padding:9px 15px;border:1px solid var(--line);border-radius:999px;
  font:600 13px/1 var(--d);letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  transition:background .22s ease,color .22s ease,border-color .22s ease,
    transform .22s ease}
.atla a b{font:600 11px/1 var(--d);color:var(--brand-lt);
  font-variant-numeric:tabular-nums}
.atla a:hover{background:var(--brand);border-color:var(--brand);
  color:#fff;transform:translateY(-2px)}
.atla a:hover b{color:#fff}
.atla a:focus-visible{color:var(--fg)}
.lede--s{max-width:52ch;margin-top:6px}
@media(max-width:640px){
  .atla{gap:6px;padding:14px 0 2px}
  .atla a{padding:8px 12px;font-size:12px}
}

/* ==================================================================
   KURUMSAL — kutu ızgaralarının yerine geçen dinamik bileşenler
   26.8.26 (kullanıcı: "kutu kutu tasarımları da artık dinamik hale
   getir, kutu kutu olmayacak artık"). Altı ardışık kart/liste
   ızgarası vardı; her biri kendi hareketi olan bir bileşene taşındı.

   DİKKAT: palet KOYU. theme.css YÜKLENMİYOR — canlı tokenlar
   sahne.css'te: --ink (zemin) · --ink-2/-3 · --fg · --muted ·
   --line · --brand · --brand-lt. --paper*, --r, --sh*, --dark YOK.
   ================================================================== */

/* ---------------------------------------------- ortak bölüm başlığı */
.kry__bas,.sdf__bas,.sug__bas,.kdm__bas,.ikp__bas{
  padding:0 var(--pad);max-width:var(--max);margin:0 auto clamp(26px,4vh,52px)}
.kry__bas{margin-bottom:0;flex:0 0 auto;width:100%}
.kry__ray{flex:0 0 auto}
.kry__bas .eyebrow,.sdf__bas .eyebrow,.sug__bas .eyebrow,
.kdm__bas .eyebrow,.ikp__bas .eyebrow{color:var(--brand-lt);
  font-family:var(--d);font-size:var(--mikro);letter-spacing:.16em;
  text-transform:uppercase;margin:0}
.kry__bas h2,.sdf__bas h2,.sug__bas h2,.kdm__bas h2,.ikp__bas h2{
  font-family:var(--t);font-weight:400;text-transform:none;color:var(--fg);
  font-size:clamp(28px,4vw,58px);line-height:1.05;letter-spacing:-.026em;
  margin:10px 0 0;max-width:18ch}
.kry__bas h2 .it,.sdf__bas h2 .it,.sug__bas h2 .it,
.kdm__bas h2 .it,.ikp__bas h2 .it{font-size:1em}
.kry__lede,.sdf__lede,.sug__lede,.kdm__lede,.ikp__lede{
  margin:16px 0 0;max-width:56ch;color:var(--muted);
  font-size:clamp(16px,1.25vw,18px);line-height:1.65}

/* ------------------------------------------------------ yatay ray
   Sabitlenmiş kurgu. Dış kabuk ekrandan UZUN olmak zorunda: JS motoru
   kısa bloklarda --p'yi blok ekranın ortasına gelmeden 1 yapıyor ve ray
   hiç kaymıyordu. Çalışan örnek `.uyss` ile aynı iskelet. */
/* Yükseklik kart sayısıyla ölçekleniyor: 6 kartta ~178vh (eski sabit
   185vh'ye yakın), 14 kartta ~282vh. Yoksa uzun şeritte ray uçuyor. */
.kry{position:relative;height:calc(100vh + var(--kn,6) * 13vh);
  background:var(--ink)}
.kry__pin{position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(18px,3vh,38px);
  padding:clamp(74px,10vh,120px) 0 clamp(26px,4vh,54px)}
.kry__ip{display:block;height:2px;width:min(300px,40vw);margin-top:26px;
  background:var(--line-2);position:relative;overflow:hidden}
.kry__ip i{position:absolute;inset:0 auto 0 0;background:var(--brand-lt);
  width:calc(14% + var(--p,0) * 86%)}
.kry__ray{overflow:hidden;padding:6px 0 10px}
.kry__i{will-change:transform;display:flex;gap:clamp(14px,1.6vw,26px);padding:0 var(--pad);
  width:max-content;
  /* Saf CSS yatay kayma: 100% burada kendi max-content genişliği,
     fark negatif olduğu için ray sola akıyor. */
  transform:translate3d(calc(var(--p,0) * (100vw - 100%)),0,0)}
.kry__k{position:relative;flex:0 0 clamp(280px,26vw,400px);
  padding:clamp(24px,2.4vw,34px);background:var(--ink-2);
  border:1px solid var(--line-2);
  display:flex;flex-direction:column;gap:12px;
  transition:transform .4s var(--ease),background .4s var(--ease),
    border-color .4s var(--ease)}
.kry__k:hover{transform:translateY(-8px);background:var(--ink-3);
  border-color:var(--line)}
.kry__n{font-family:var(--t);font-size:clamp(34px,3.4vw,52px);
  line-height:.9;color:var(--brand-lt);opacity:.55}
.kry__k h3{font-family:var(--t);font-weight:400;color:var(--fg);
  font-size:clamp(20px,1.6vw,25px);line-height:1.14;letter-spacing:-.02em;
  margin:0;text-transform:none}
.kry__k p{margin:0;color:var(--muted);font-size:15px;line-height:1.62}
.kry__c{position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--brand-lt);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)}
.kry__k:hover .kry__c{transform:scaleX(1)}
.kry--koyu{background:var(--ink-2)}
.kry--koyu .kry__k{background:rgba(234,241,244,.045)}
.kry--koyu .kry__k:hover{background:rgba(234,241,244,.085)}

/* ------------------------------------------ şartname defteri (satır) */
.sdf{padding:clamp(56px,8vw,110px) 0;background:var(--ink)}
.sdf--2{background:var(--ink-2)}
.sdf__g{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sdf__s{display:grid;grid-template-columns:clamp(64px,7vw,120px) 1fr;
  gap:clamp(16px,2.4vw,44px);align-items:start;
  padding:clamp(24px,3vh,40px) 0;border-top:1px solid var(--line-2)}
.sdf__s:last-child{border-bottom:1px solid var(--line-2)}
.sdf__n{font-family:var(--t);font-size:clamp(30px,3.6vw,58px);line-height:.88;
  color:var(--brand-lt);opacity:.45}
.sdf__y h3{font-family:var(--t);font-weight:400;text-transform:none;
  color:var(--fg);font-size:clamp(21px,2vw,31px);line-height:1.1;
  letter-spacing:-.022em;margin:0 0 10px}
.sdf__y p{margin:0;color:var(--muted);max-width:68ch;line-height:1.68}
.sdf__l{margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:8px 26px;max-width:80ch}
.sdf__l li{position:relative;padding-left:20px;color:var(--muted);
  font-size:15px;line-height:1.6}
.sdf__l li::before{content:"";position:absolute;left:0;top:.68em;
  width:8px;height:1px;background:var(--brand-lt)}
.sdf--dar .sdf__y p{max-width:60ch}
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .sdf__s{animation:sdfGir linear both;animation-timeline:view();
      animation-range:entry 4% cover 20%}
    @keyframes sdfGir{from{opacity:0;transform:translateY(26px)}
      to{opacity:1;transform:none}}
  }
}

/* --------------------------------------------- garanti süre çubukları */
.sug{padding:clamp(56px,8vw,110px) 0;background:var(--ink)}
.sug__g{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid}
.sug__s{display:grid;grid-template-columns:minmax(150px,1.1fr)
  minmax(130px,1.3fr) minmax(0,2.2fr);gap:clamp(14px,2vw,34px);
  align-items:center;padding:clamp(16px,2.1vh,24px) 0;
  border-top:1px solid var(--line-2)}
.sug__s:last-child{border-bottom:1px solid var(--line-2)}
.sug__k{font-family:var(--t);color:var(--fg);
  font-size:clamp(17px,1.35vw,21px);line-height:1.2;letter-spacing:-.018em}
.sug__c{position:relative;display:flex;align-items:center;gap:12px;height:26px}
.sug__c i{display:block;height:8px;
  background:linear-gradient(90deg,var(--brand),var(--brand-lt));
  width:calc(var(--o) * 100%);transform:scaleX(0);transform-origin:left}
.sug__c b{font-family:var(--d);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand-lt);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.sug__a{color:var(--muted);font-size:15px;line-height:1.6}
/* Sayısal olmayan kalem (Opsiyonel): dolu çubuk değil kesikli çerçeve. */
.sug__s--acik .sug__c i{background:none;border:1px dashed var(--line);
  height:10px}
.sug__s--acik .sug__c b{color:var(--muted)}
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* Sıralı açılım: her satır bir öncekinden biraz sonra doluyor. */
    .sug__c i{animation:sugBuyu linear both;animation-timeline:view();
      animation-range:entry calc(6% + var(--i,0) * 2.5%)
                      cover calc(24% + var(--i,0) * 2.5%)}
    @keyframes sugBuyu{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}
@supports not (animation-timeline:view()){.sug__c i{transform:none}}
@media(prefers-reduced-motion:reduce){.sug__c i{transform:none}}

/* ------------------------------------------------- kademe panoları */
.kdm{padding:clamp(56px,8vw,110px) 0;background:var(--ink-2)}
.kdm__g{max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(14px,1.6vw,26px);align-items:stretch}
/* "Kademe" gerçekten kademeli olsun: öne çıkan pano yukarı taşar. */
@media(min-width:900px){
  .kdm__g{align-items:center}
  .kdm__p--one{transform:scale(1.055);z-index:2}
  .kdm__g:hover .kdm__p--one{transform:scale(1.04)}
  .kdm__g .kdm__p--one:hover{transform:scale(1.075) translateY(-6px)}
}
.kdm__p{position:relative;display:flex;flex-direction:column;gap:14px;
  padding:clamp(26px,2.6vw,40px);background:rgba(234,241,244,.045);
  border:1px solid var(--line-2);
  transition:transform .45s var(--ease),opacity .45s var(--ease),
    background .45s var(--ease)}
.kdm__p--one{background:var(--brand);border-color:var(--brand);
  padding-top:clamp(38px,3.6vw,56px);padding-bottom:clamp(38px,3.6vw,56px)}
.kdm__p--one .kdm__n{color:#fff;opacity:.72}
.kdm__p--one h3{color:#fff}
.kdm__p--one li{color:#fff;opacity:.96}
.kdm__p--one li::before{background:rgba(255,255,255,.8)}
.kdm__g:hover .kdm__p{transform:scale(.985);opacity:.88}
/* 11.9.26 (kullanıcı): mavi vurgu ORTADAKİ panoya sabitlenmişti.
   Artık imleç hangisinin üstündeyse o maviye dönüyor; ortadaki ise
   yalnız hiçbirinin üstünde değilken mavi kalıyor. */
.kdm__g:hover .kdm__p--one:not(:hover){
  background:rgba(234,241,244,.045);border-color:var(--line-2)}
.kdm__g:hover .kdm__p--one:not(:hover) .kdm__n{
  color:var(--brand-lt);opacity:.55}
.kdm__g:hover .kdm__p--one:not(:hover) h3{color:var(--fg)}
.kdm__g:hover .kdm__p--one:not(:hover) li{color:var(--fg)}
.kdm__g:hover .kdm__p--one:not(:hover) li::before{background:var(--brand-lt)}
.kdm__g .kdm__p:hover{transform:translateY(-10px) scale(1.04);opacity:1;
  background:var(--brand);border-color:var(--brand);z-index:3}
.kdm__g .kdm__p:hover .kdm__n{color:#fff;opacity:.8}
.kdm__g .kdm__p:hover h3{color:#fff}
.kdm__g .kdm__p:hover li{color:#fff;opacity:.96}
.kdm__g .kdm__p:hover li::before{background:#fff}
.kdm__n{font-family:var(--t);font-size:clamp(30px,3vw,46px);line-height:.9;
  color:var(--brand-lt);opacity:.55}
.kdm__p h3{font-family:var(--t);font-weight:400;text-transform:none;
  color:var(--fg);font-size:clamp(22px,1.9vw,30px);line-height:1.1;margin:0}
.kdm__p ul{margin:0;padding:0;list-style:none;display:grid;gap:9px;flex:1}
/* 11.9.26 (kullanıcı, ikinci kez): "gri olanlar okunmuyor".
   Madde metni `--muted` (#8a989f) 15 px ile hem koyu hem mavi zeminde
   zayıf kalıyordu. Taban renk artık `--fg`; `--muted` bu bileşende
   HİÇBİR durumda kullanılmıyor. */
.kdm__p li{position:relative;padding-left:20px;font-size:15px;
  line-height:1.58;color:var(--fg);opacity:.88}
.kdm__p li::before{content:"";position:absolute;left:0;top:.66em;
  width:8px;height:1px;background:var(--brand-lt)}

/* MAVİ PANODA OKUNURLUK — 11.9.26.
   `.kdm__p--one li` (0,2,0) ile `.kdm__p li` (0,2,0) aynı özgüllükte ve
   ikincisi dosyada SONRA geldiği için kazanıyordu; mavi panonun listesi
   `var(--muted)` kalıp okunmuyordu. Kurallar artık taban kuralların
   ARKASINDA ve daha yüksek özgüllükte. */
.kdm__g .kdm__p--one li,
.kdm__g .kdm__p:hover li{color:#fff;opacity:.96}
.kdm__g .kdm__p--one li::before,
.kdm__g .kdm__p:hover li::before{background:#fff;opacity:.9}
.kdm__g .kdm__p--one h3,
.kdm__g .kdm__p:hover h3{color:#fff}
.kdm__g .kdm__p--one .kdm__n,
.kdm__g .kdm__p:hover .kdm__n{color:#fff;opacity:.78}
/* Mavi zeminde çerçeveli düğme okunsun. */
.kdm__g .kdm__p--one .btn,
.kdm__g .kdm__p:hover .btn{border-color:rgba(255,255,255,.65);color:#fff}
.kdm__g .kdm__p--one .btn:hover,
.kdm__g .kdm__p:hover .btn:hover{background:#fff;color:var(--brand)}
/* İmleç başka panodayken ortadaki mavi DEĞİL — onun da yazısı geri dönsün.
   Geri dönüş `--fg`'ye; eski `--muted` mavi zemin kalıntısıyla birleşince
   okunmaz bir ara durum bırakıyordu. */
.kdm__g:hover .kdm__p--one:not(:hover) li{color:var(--fg);opacity:.88}
.kdm__g:hover .kdm__p--one:not(:hover) li::before{
  background:var(--brand-lt);opacity:1}
.kdm__g:hover .kdm__p--one:not(:hover) h3{color:var(--fg)}
.kdm__g:hover .kdm__p--one:not(:hover) .kdm__n{
  color:var(--brand-lt);opacity:.55}

.kdm__p .btn{align-self:flex-start;margin-top:6px}

/* ----------------------------------------------------- ikili panolar */
.ikp{padding:clamp(56px,8vw,110px) 0;background:var(--ink)}
.ikp__g{max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(14px,1.6vw,26px)}
.ikp__p{position:relative;overflow:hidden;display:flex;flex-direction:column;
  gap:14px;padding:clamp(30px,3vw,52px);text-decoration:none;
  background:var(--ink-2);border:1px solid var(--line-2);color:inherit;
  transition:background .45s var(--ease),transform .45s var(--ease),
    border-color .45s var(--ease)}
.ikp__p:hover{background:var(--ink-3);transform:translateY(-8px);
  border-color:var(--line);text-decoration:none}
.ikp__n{font-family:var(--t);font-size:clamp(34px,3.4vw,56px);line-height:.9;
  color:var(--brand-lt);opacity:.6}
.ikp__p h3{font-family:var(--t);font-weight:400;text-transform:none;
  font-size:clamp(23px,2.2vw,34px);line-height:1.08;letter-spacing:-.022em;
  margin:0;color:var(--fg)}
.ikp__p p{margin:0;color:var(--fg);opacity:.84;line-height:1.66;max-width:52ch}

/* Zemin fotoğraflı varyant — 11.9.26, /iletisim/ "üç yol" bölümü için.
   Fotoğraf çok silik duruyor; kart hâlâ tipografi kartı, hover'da
   fotoğraf biraz öne çıkıyor. Metin her durumda zeminden ayrı. */
.ikp__p--fotolu{min-height:clamp(300px,30vw,420px);justify-content:flex-end}
.ikp__f{position:absolute;inset:0;z-index:0;overflow:hidden}
.ikp__f img{width:100%;height:100%;object-fit:cover;opacity:.26;
  filter:grayscale(.35);transform:scale(1.04);
  transition:opacity .6s var(--ease),transform .9s var(--ease)}
.ikp__p--fotolu:hover .ikp__f img{opacity:.4;transform:scale(1.1)}
.ikp__p--fotolu::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,9,11,.35) 0%,
    rgba(6,9,11,.72) 52%,rgba(6,9,11,.94) 100%)}
.ikp__p--fotolu>*:not(.ikp__f){position:relative;z-index:2}
.ikp__o{display:inline-flex;align-items:center;gap:10px;margin-top:6px;
  font-family:var(--d);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-lt)}
.ikp__o i{width:24px;height:1px;background:currentColor;
  transition:width .35s var(--ease)}
.ikp__p:hover .ikp__o i{width:44px}
.ikp__c{position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--brand-lt);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)}
.ikp__p:hover .ikp__c{transform:scaleX(1)}

@media(max-width:760px){
  .kry{height:auto}
  .kry__pin{position:static;height:auto;padding:clamp(48px,9vw,80px) 0}
  .kry__ray{overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory}
  .kry__i{transform:none;width:max-content}
  .kry__k{scroll-snap-align:start}
  .sdf__s{grid-template-columns:1fr;gap:10px}
  .sug__s{grid-template-columns:1fr;gap:8px}
  .sug__a{font-size:14px}
  .kry__k{flex-basis:min(78vw,300px)}
}

/* ==================================================================
   ÜRÜN KARTI — beyaz fonlu ürün kesiti için açık plaka (1.9.26)
   Wellis kataloğundaki 81 karenin 64'ü stüdyo kesiti (beyaz fon).
   Koyu zeminde doğrudan basılınca beyaz dikdörtgen gibi duruyordu.
   ================================================================== */
/* min-width:0 ŞART: ızgara hücresinin oto asgari genişliği, içindeki
   büyük görselin min-content genişliğine şişip sütunu patlatıyordu
   (kartlar farklı genişlikte çıkıyordu). */
.ukart{position:relative;display:flex;flex-direction:column;min-width:0;
  background:rgba(234,241,244,.045);border:1px solid var(--line);
  text-decoration:none;color:inherit;overflow:hidden;
  transition:transform .4s var(--ease),border-color .4s var(--ease),
    background .4s var(--ease)}
.ukart:hover{transform:translateY(-8px);border-color:var(--brand-lt);
  background:rgba(234,241,244,.085);text-decoration:none}
.ukart__f{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(160deg,#f4f6f7,#dfe6ea)}
.ukart__f img{width:100%;height:100%;max-width:100%;object-fit:contain;display:block;
  padding:clamp(10px,1.6vw,22px);
  transition:transform .6s var(--ease)}
.ukart:hover .ukart__f img{transform:scale(1.05)}
.ukart__et{position:absolute;top:10px;left:10px;z-index:2;
  font:600 10px/1 var(--d);letter-spacing:.14em;text-transform:uppercase;
  padding:6px 10px;background:var(--ink);color:var(--fg)}
.ukart__b{display:flex;flex-direction:column;gap:8px;flex:1;
  padding:clamp(18px,2vw,26px)}
.ukart__b h3{font-family:var(--t);font-weight:400;text-transform:none;
  color:var(--fg);font-size:clamp(18px,1.5vw,23px);line-height:1.14;
  letter-spacing:-.02em;margin:0}
.ukart__b p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}
.ukart__m{font:600 11px/1.5 var(--d);letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand-lt);
  font-variant-numeric:tabular-nums}
.ukart__o{display:inline-flex;align-items:center;gap:9px;margin-top:auto;
  padding-top:10px;font:600 11px/1 var(--d);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.ukart__o i{width:20px;height:1px;background:currentColor;
  transition:width .35s var(--ease)}
.ukart:hover .ukart__o{color:var(--brand-lt)}
.ukart:hover .ukart__o i{width:38px}

/* ==================================================================
   ÜRÜN KÜNYE TABLOSU — solda plaka, sağda değerler (1.9.26)
   ================================================================== */
.ktab{padding:clamp(56px,8vw,110px) 0;background:var(--ink-2)}
.ktab__bas{padding:0 var(--pad);max-width:var(--max);margin:0 auto
  clamp(26px,4vh,52px)}
.ktab__bas .eyebrow{color:var(--brand-lt);font-family:var(--d);
  font-size:var(--mikro);letter-spacing:.16em;text-transform:uppercase;
  margin:0}
.ktab__bas h2{font-family:var(--t);font-weight:400;text-transform:none;
  color:var(--fg);font-size:clamp(28px,4vw,54px);line-height:1.05;
  letter-spacing:-.026em;margin:10px 0 0;max-width:18ch}
.ktab__bas h2 .it{font-size:1em}
.ktab__lede{margin:16px 0 0;max-width:60ch;color:var(--muted);
  font-size:clamp(15px,1.2vw,17px);line-height:1.65}
.ktab__g{max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,3.4vw,64px);align-items:start}
.ktab__p{position:relative;display:block;
  background:linear-gradient(160deg,#f4f6f7,#dfe6ea);
  padding:clamp(18px,2.4vw,36px);min-width:0}
.ktab__p img{width:100%;height:auto;display:block;object-fit:contain}
.ktab__p span{position:absolute;left:12px;bottom:10px;
  font:600 10px/1 var(--d);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted)}
.ktab__l{margin:0;display:grid;gap:0;min-width:0}
.ktab__s{display:grid;grid-template-columns:minmax(120px,.8fr) minmax(0,1.6fr);
  gap:clamp(12px,2vw,32px);align-items:baseline;
  padding:clamp(13px,1.7vh,19px) 0;border-top:1px solid var(--line-2)}
.ktab__s:last-child{border-bottom:1px solid var(--line-2)}
.ktab__s dt{font:600 11px/1.4 var(--d);letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin:0}
.ktab__s dd{margin:0;font-family:var(--t);color:var(--fg);
  font-size:clamp(16px,1.35vw,21px);line-height:1.3;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .ktab__s{animation:sdfGir linear both;animation-timeline:view();
      animation-range:entry 4% cover 18%}
  }
}
@media(max-width:820px){
  .ktab__g{grid-template-columns:1fr}
  .ktab__s{grid-template-columns:1fr;gap:4px}
}

/* ==================================================================
   ÜRÜN KAHRAMANI + YAPIŞKAN ŞERİT — Wellis'in ürün sayfası kurgusu
   1.9.26 (kullanıcı: "onların tasarım ögeleri önemli").
   Alınan ögeler: dikey görsel rayı + büyük ürün plakası + sağda iki
   tonlu başlık, hızlı künye ve renk seçenekleri; üstte yüzen ürün
   şeridi. Görsel geçişi SAF CSS (radio + :checked), JS yok.
   ================================================================== */
/* Üstteki yapışkan şeridin altında kalmasın: başlık kırpılıyordu. */
.ukh{padding:clamp(38px,5vw,72px) 0 clamp(40px,5vw,72px);
  background:var(--ink)}
.ukh__r{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.ukh__ic{max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,4vw,72px);align-items:start}
.ukh__sol{display:grid;grid-template-columns:clamp(56px,6vw,86px) minmax(0,1fr);
  gap:clamp(10px,1.2vw,18px);min-width:0}
.ukh__ray{display:flex;flex-direction:column;gap:8px;max-height:520px;
  overflow-y:auto;scrollbar-width:thin}
.ukh__t{display:block;aspect-ratio:1/1;cursor:pointer;overflow:hidden;
  background:linear-gradient(160deg,#f4f6f7,#dfe6ea);
  border:1px solid transparent;opacity:.58;
  transition:opacity .25s var(--ease),border-color .25s var(--ease)}
.ukh__t img{width:100%;height:100%;object-fit:contain;padding:5px;
  display:block}
.ukh__t:hover{opacity:.85}
.ukh__sahne{position:relative;min-width:0;
  background:linear-gradient(160deg,#f4f6f7,#dfe6ea);
  aspect-ratio:4/3;overflow:hidden}
.ukh__b{position:absolute;inset:0;margin:0;opacity:0;
  transition:opacity .35s var(--ease);display:grid;place-items:center;
  padding:clamp(14px,2vw,34px)}
.ukh__b img{width:100%;height:100%;object-fit:contain;display:block}
.ukh__uyari{grid-column:2;margin:8px 0 0;font:600 10px/1 var(--d);
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
/* radio → hangi büyük kare görünsün, hangi thumb işaretli olsun */
.ukh__r:nth-of-type(1):checked~.ukh__ic .ukh__b[data-i="0"],
.ukh__r:nth-of-type(2):checked~.ukh__ic .ukh__b[data-i="1"],
.ukh__r:nth-of-type(3):checked~.ukh__ic .ukh__b[data-i="2"],
.ukh__r:nth-of-type(4):checked~.ukh__ic .ukh__b[data-i="3"],
.ukh__r:nth-of-type(5):checked~.ukh__ic .ukh__b[data-i="4"],
.ukh__r:nth-of-type(6):checked~.ukh__ic .ukh__b[data-i="5"]{opacity:1}
.ukh__r:nth-of-type(1):checked~.ukh__ic .ukh__t:nth-of-type(1),
.ukh__r:nth-of-type(2):checked~.ukh__ic .ukh__t:nth-of-type(2),
.ukh__r:nth-of-type(3):checked~.ukh__ic .ukh__t:nth-of-type(3),
.ukh__r:nth-of-type(4):checked~.ukh__ic .ukh__t:nth-of-type(4),
.ukh__r:nth-of-type(5):checked~.ukh__ic .ukh__t:nth-of-type(5),
.ukh__r:nth-of-type(6):checked~.ukh__ic .ukh__t:nth-of-type(6){
  opacity:1;border-color:var(--brand-lt)}
.ukh__r:focus-visible~.ukh__ic .ukh__ray{outline:2px solid var(--brand);
  outline-offset:3px}

.ukh__sag{min-width:0;padding-top:clamp(4px,1vw,14px)}
.ukh__bas{font-family:var(--t);font-weight:400;text-transform:none;
  color:var(--fg);font-size:clamp(32px,4.2vw,60px);line-height:1.02;
  letter-spacing:-.028em;margin:0}
.ukh__bas span{color:var(--muted);margin-left:.34em}
.ukh__alt{margin:14px 0 0;font:600 12px/1 var(--d);letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand-lt)}
.ukh__mt{margin:22px 0 0;color:var(--muted);max-width:56ch;
  font-size:clamp(15px,1.2vw,17px);line-height:1.68}
.ukh__hl{margin:26px 0 0;display:grid;border-top:1px solid var(--line-2)}
.ukh__h{display:grid;grid-template-columns:minmax(96px,.6fr) minmax(0,1.4fr);
  gap:clamp(10px,1.6vw,26px);align-items:baseline;padding:11px 0;
  border-bottom:1px solid var(--line-2)}
.ukh__h dt{margin:0;font:600 10.5px/1.4 var(--d);letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.ukh__h dd{margin:0;font-family:var(--t);color:var(--fg);
  font-size:clamp(15px,1.2vw,19px);line-height:1.3;
  font-variant-numeric:tabular-nums}
.ukh__rn{margin:22px 0 0}
.ukh__rn>span{display:block;font:600 10.5px/1 var(--d);letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.ukh__rn ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;
  gap:8px 16px}
.ukh__rn li{display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;color:var(--fg)}
.ukh__rn i{width:22px;height:22px;border-radius:50%;display:block;
  border:1px solid var(--line)}
.ukh__cta{margin-top:28px}
.ukh__ref{margin:16px 0 0;font:600 10.5px/1 var(--d);letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}

/* yapışkan ürün şeridi */
.userit{position:sticky;top:clamp(54px,7.5vh,72px);z-index:8;
  padding:10px var(--pad) 0}
.userit__ic{max-width:var(--max);margin:0 auto;display:flex;
  align-items:center;gap:clamp(12px,1.6vw,24px);
  padding:9px 10px 9px 9px;background:rgba(11,16,19,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:999px}
.userit__ic>img{width:44px;height:44px;object-fit:contain;flex:0 0 auto;
  background:linear-gradient(160deg,#f4f6f7,#dfe6ea);border-radius:50%;
  padding:4px}
.userit__ad{font-family:var(--t);font-size:clamp(15px,1.2vw,19px);
  color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.userit__n{display:flex;gap:clamp(10px,1.4vw,22px);margin-left:auto;
  overflow-x:auto;scrollbar-width:none}
.userit__n::-webkit-scrollbar{display:none}
.userit__n a{font:600 11px/1 var(--d);letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
  padding:8px 0;text-decoration:none;transition:color .22s}
.userit__n a:hover{color:var(--brand-lt);text-decoration:none}
.userit .btn{flex:0 0 auto}
[id^="u-"]{scroll-margin-top:clamp(120px,18vh,160px)}

@media(max-width:900px){
  .ukh__ic{grid-template-columns:1fr;gap:26px}
  .userit__ad{display:none}
}
@media(max-width:640px){
  .ukh__sol{grid-template-columns:1fr}
  .ukh__ray{flex-direction:row;max-height:none;overflow-x:auto;order:2}
  .ukh__t{flex:0 0 62px}
  .ukh__uyari{grid-column:1}
  .userit__n{gap:14px}
}

/* Fotoğraf varyantı: EOS'ta beyaz fonlu ürün kesiti yok, kendi proje
   fotoğraflarımız kullanılıyor — açık plaka yerine koyu çerçeve. */
.ukh--foto .ukh__sahne,
.ukh--foto .ukh__t{background:var(--ink-2)}
.ukh--foto .ukh__sahne{aspect-ratio:16/10}
.ukh--foto .ukh__b{padding:0}
.ukh--foto .ukh__b img,
.ukh--foto .ukh__t img{object-fit:cover;padding:0}
.ukh--foto .ukh__t{opacity:.45}
.ukh--foto .ukh__t:hover{opacity:.8}

/* Görseli olmayan ürün: yanlış fotoğraf yerine tipografik plaka (1.9.26) */
.ukart__f--yazi{display:grid;place-items:center;padding:18px}
.ukart__yz{font-family:var(--t);font-size:clamp(17px,1.6vw,24px);
  line-height:1.15;text-align:center;color:var(--muted);letter-spacing:-.02em}
/* Görselsiz ürün: rayı olmadığı için sol sütun tek parça olmalı. */
.ukh--yazi .ukh__sol{grid-template-columns:1fr}
.ukh__sahne--yazi{display:grid;place-items:center;aspect-ratio:4/3;
  padding:clamp(24px,4vw,60px);width:100%}
.ukh__sahne--yazi span{font-family:var(--t);color:var(--muted);text-align:center;
  font-size:clamp(24px,3vw,44px);line-height:1.1;letter-spacing:-.025em}

/* Koyu fonlu ürün render'ı (IMMO) açık plakada yamalık duruyordu.
   Fon tipi data/gorsel_fon.json'da ölçülü; çerçeve ona göre seçiliyor. */
.ukart__f--koyu{background:linear-gradient(160deg,var(--yuzey-2),var(--yuzey-d))}
.ukart__f--koyu img{padding:0;object-fit:cover}
.ktab__p--koyu{background:linear-gradient(160deg,var(--yuzey-2),var(--yuzey-d))}

/* ------------------------------------------------------------------
   FONU KALDIRILMIŞ ÜRÜN KESİTLERİ — 11.9.26
   EOS ve Wellis kesitlerinin beyaz fonu arac/urun_kare_temizle.py ile
   kaldırıldı (saydam WebP). Beyaz plakaya artık gerek yok: ürün koyu
   sahnede duruyor, arkasında yumuşak bir ışık halesi, altında düşen
   gölge var. Bütün kareler kare tuvale eşit boşlukla oturtulduğu için
   kartlar arasında ölçek de tutuyor.
   ------------------------------------------------------------------ */
.sahne-saydam{
  background:
    radial-gradient(118% 86% at 50% 30%,rgba(92,187,230,.13) 0%,
      rgba(10,14,16,0) 64%),
    linear-gradient(168deg,var(--yuzey-2) 0%,var(--yuzey-d) 100%)}
.kesit-golge{filter:drop-shadow(0 22px 26px rgba(0,0,0,.62))}

.ktab__p--saydam{
  background:
    radial-gradient(118% 86% at 50% 30%,rgba(92,187,230,.13) 0%,
      rgba(10,14,16,0) 64%),
    linear-gradient(168deg,var(--yuzey-2) 0%,var(--yuzey-d) 100%)}
.ktab__p--saydam img{filter:drop-shadow(0 22px 26px rgba(0,0,0,.62))}
.ktab__p--saydam span{color:var(--muted)}

.ukart__f--saydam{
  background:
    radial-gradient(120% 90% at 50% 28%,rgba(92,187,230,.12) 0%,
      rgba(10,14,16,0) 66%),
    linear-gradient(168deg,var(--yuzey-2) 0%,var(--yuzey-d) 100%)}
.ukart__f--saydam img{object-fit:contain;padding:5%;
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.6));
  transition:transform .6s var(--ease)}
.ukart:hover .ukart__f--saydam img{transform:translateY(-6px) scale(1.04)}

.ukh--saydam .ukh__sahne,
.ukh--saydam .ukh__t{
  background:
    radial-gradient(118% 86% at 50% 30%,rgba(92,187,230,.13) 0%,
      rgba(10,14,16,0) 64%),
    linear-gradient(168deg,var(--yuzey-2) 0%,var(--yuzey-d) 100%)}
.ukh--saydam .ukh__sahne{aspect-ratio:4/3}
.ukh--saydam .ukh__b img{object-fit:contain;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.62))}
.ukh--saydam .ukh__t{opacity:.5;border-color:var(--line-2)}
.ukh--saydam .ukh__t:hover{opacity:.9}
.ukh--saydam .ukh__t img{padding:6%}
.ukh--saydam .ukh__uyari{color:var(--muted)}
/* Seçili küçük kare belli olsun — açık plakada kontrast kendiliğinden
   vardı, koyu sahnede çerçeve gerekiyor. */
.ukh--saydam .ukh__r:nth-of-type(1):checked~.ukh__ic .ukh__ray .ukh__t:nth-child(1),
.ukh--saydam .ukh__r:nth-of-type(2):checked~.ukh__ic .ukh__ray .ukh__t:nth-child(2),
.ukh--saydam .ukh__r:nth-of-type(3):checked~.ukh__ic .ukh__ray .ukh__t:nth-child(3),
.ukh--saydam .ukh__r:nth-of-type(4):checked~.ukh__ic .ukh__ray .ukh__t:nth-child(4),
.ukh--saydam .ukh__r:nth-of-type(5):checked~.ukh__ic .ukh__ray .ukh__t:nth-child(5),
.ukh--saydam .ukh__r:nth-of-type(6):checked~.ukh__ic .ukh__ray .ukh__t:nth-child(6){
  opacity:1;border-color:var(--brand)}
/* Yapışkan ürün şeridindeki minik kare de saydam olabiliyor. */
.userit__ic img[src$=".webp"]{object-fit:contain;background:transparent}

/* ==================================================================
   WELLNESS SÖZLÜĞÜ — 3B perspektifli çift sıra kayan şerit (2.9.26)
   Kullanıcı: "kutu kutu çok statik, slide/carousel olsun."
   39 kalem için sabitlenmiş dikey kaydırma ~12.000 px ray demekti;
   onun yerine kendi kendine akan iki sıra. Üzerine gelince duruyor.
   ================================================================== */
.szs{padding:clamp(56px,8vw,110px) 0;background:var(--ink-2);
  overflow:hidden}
.szs__bas{padding:0 var(--pad);max-width:var(--max);margin:0 auto
  clamp(28px,4vh,54px)}
.szs__bas .eyebrow{color:var(--brand-lt);font-family:var(--d);
  font-size:var(--mikro);letter-spacing:.16em;text-transform:uppercase;
  margin:0}
.szs__bas h2{font-family:var(--t);font-weight:400;text-transform:none;
  color:var(--fg);font-size:clamp(28px,4vw,56px);line-height:1.05;
  letter-spacing:-.026em;margin:10px 0 0;max-width:18ch}
.szs__bas h2 .it{font-size:1em}
.szs__lede{margin:16px 0 0;max-width:56ch;color:var(--muted);
  font-size:clamp(15px,1.2vw,18px);line-height:1.65}
.szs__ip{margin:12px 0 0;font:600 11px/1 var(--d);letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-lt)}

/* overflow:hidden BURADA da olmalı: ray üstteki .szs klipsini bazı
   motorlarda aşıyordu (506 px yatay taşma). */
.szs__sahne{display:grid;gap:clamp(12px,1.4vw,22px);overflow:hidden}
/* Perspektif RAYA DEĞİL karta veriliyor. 4.700 px genişliğindeki bir
   düzleme rotateX + perspective uygulanınca kenardaki kartlar 275 px'ten
   519 px'e kadar çarpılıyordu; kartlar farklı boyda görünüyordu.
   Derinlik artık yalnız hover'daki translateZ'den geliyor. */
.szs__ray{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,
    transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}

.szs__i{display:flex;gap:clamp(12px,1.3vw,20px);width:max-content;
  will-change:transform;perspective:900px}
/* Akış sahne.js'te (rAF): otomatik ilerleme + elle sürükleme aynı ofseti
   yazıyor. CSS animasyonu kaldırıldı, yoksa iki kaynak transform'u
   dövüşürdü. JS yoksa şerit sabit durur — içerik yine okunur. */
.szs__ray{cursor:grab;touch-action:pan-y;user-select:none;
  -webkit-user-select:none}
.szs__ray--tut{cursor:grabbing}
.szs__ray--tut .szs__k{pointer-events:none}

/* min-width:0 olmadan uzun bir kelime kartı 272'nin üstüne itiyor ve
   kartlar farklı genişlikte çıkıyor (esnek öğede min-width:auto). */
.szs__k{position:relative;flex:0 0 auto;min-width:0;
  width:clamp(212px,19vw,272px);
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:rgba(234,241,244,.045);border:1px solid var(--line-2);
  transition:transform .45s var(--ease),background .45s var(--ease),
    border-color .45s var(--ease)}
.szs__k:hover{transform:translateZ(46px) translateY(-6px);
  background:rgba(234,241,244,.10);border-color:var(--brand-lt);
  text-decoration:none;z-index:3}
.szs__f{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--ink)}
.szs__f img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.05);transition:transform .7s var(--ease)}
.szs__k:hover .szs__f img{transform:scale(1)}
.szs__b{display:flex;flex-direction:column;gap:7px;
  padding:clamp(14px,1.5vw,20px)}
.szs__b h4{margin:0;overflow-wrap:anywhere;font-family:var(--t);font-weight:400;
  text-transform:none;color:var(--fg);letter-spacing:-.02em;
  font-size:clamp(16px,1.35vw,21px);line-height:1.14}
.szs__b p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55}
.szs__k--yok{opacity:.72}
.szs__k--yok .szs__b h4{color:var(--muted)}

@media(prefers-reduced-motion:reduce){
  /* Otomatik akış JS tarafında kapatılıyor; sürükleme çalışmaya devam. */
  .szs__ray{-webkit-mask-image:none;mask-image:none}
}
@media(max-width:760px){
  .szs__k{width:min(66vw,240px)}
}

/* Kapanış bloğunda fotoğraf fonu (2.9.26) — önce düz siyahtı. */
.kapanis--fotolu{position:relative;isolation:isolate;overflow:hidden}
.kapanis__bg{position:absolute;inset:0;z-index:-1}
.kapanis__bg img{width:100%;height:100%;object-fit:cover;display:block}
.kapanis__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,9,11,.94) 0%,
    rgba(6,9,11,.86) 42%,rgba(6,9,11,.62) 100%)}
@media(max-width:760px){
  .kapanis__bg::after{background:linear-gradient(180deg,
    rgba(6,9,11,.88),rgba(6,9,11,.94))}
}

/* ==========================================================================
   PROJE SAYFASI — 2.9.26 yeniden tasarım (.pj*)
   Eski düzende üç sorun vardı: kahraman fotoğrafını yutan koyu perde,
   850-1100 px yer kaplayıp içeriği üçte birine sıkıştıran `kitap` sahneleri
   ve 3.947 px'lik tek tip galeri ızgarası. Burada sabit yükseklik yok.
   ========================================================================== */

/* --- Kahraman ------------------------------------------------------------ */
.pjh{position:relative;min-height:min(86vh,880px);display:flex;
  flex-direction:column;justify-content:flex-end;isolation:isolate;
  background:var(--ink)}
.pjh__foto{position:absolute;inset:0;z-index:0}
.pjh__foto img{width:100%;height:100%;object-fit:cover;display:block}
/* Perde ağırlıklı olarak alttan: fotoğrafın orta bandı açık kalıyor.
   Üstteki ince şerit MENÜ İÇİN şart — açık renkli bir kahraman fotoğrafında
   (Gümüş Residence saunası) menü yazıları okunmuyordu. */
.pjh::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--ink) 72%, transparent) 0%,
    color-mix(in srgb, var(--ink) 34%, transparent) 8%,
    transparent 17%),
   linear-gradient(to top,
    var(--ink) 0%,
    color-mix(in srgb, var(--ink) 88%, transparent) 18%,
    color-mix(in srgb, var(--ink) 46%, transparent) 42%,
    transparent 72%),
   linear-gradient(to right,
    color-mix(in srgb, var(--ink) 58%, transparent) 0%,
    transparent 46%)}
.pjh__ic{position:relative;z-index:2;padding:0 0 clamp(28px,4vh,48px)}
.pjh__et{font-family:var(--b);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brand-lt);margin:0 0 14px}
.pjh h1{font-family:var(--d);font-weight:400;line-height:.98;margin:0;
  font-size:clamp(34px,5.6vw,84px);letter-spacing:-.015em;color:#fff;
  max-width:16ch;text-wrap:balance}
.pjh__yer{margin:16px 0 0;font-size:clamp(15px,1.3vw,19px);color:var(--fg);
  letter-spacing:.02em}
.pjh__eylem{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.pjh__kunye{position:relative;z-index:2;
  border-top:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px);background:rgba(6,9,11,.34)}
.pjh__kg{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:4px 28px;padding:16px 0}
.pjh__kg div{min-width:0}
.pjh__kg s{display:block;text-decoration:none;font-family:var(--b);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2);margin-bottom:4px}
.pjh__kg b{display:block;font-weight:500;font-size:14px;color:var(--bas-fg);
  line-height:1.35}

/* --- Giriş: yapışkan künye + anlatı -------------------------------------- */
.pjg{padding:clamp(56px,8vh,96px) 0 clamp(24px,4vh,44px);background:var(--ink)}
/* Künye kartı SAĞDA: anlatı 60ch'de bittiği için kart solda olunca sağda
   500 px'lik başıboş boşluk kalıyordu. Sağa alınca boşluk ikisinin arasına
   düşüyor ve kasıtlı görünüyor. Mobilde sıra metin → kart. */
.pjg__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:clamp(28px,5vw,72px);align-items:start}
.pjg__k{order:2}
.pjg__m{order:1}
.pjg__ks{position:sticky;top:110px;display:grid;gap:18px;
  padding:22px 22px 24px;border:1px solid var(--line);border-radius:2px;
  background:var(--ink-2)}
.pjg__ks div{min-width:0}
.pjg__ks s{display:block;text-decoration:none;font-family:var(--b);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.pjg__ks b{display:block;font-weight:500;font-size:15px;color:var(--fg);
  line-height:1.45}
.pjg__rozet{margin:2px 0 0;font-size:12px;line-height:1.5;color:var(--muted);
  padding-top:14px;border-top:1px solid var(--line)}
.pjg__lede{margin:0;font-size:clamp(18px,1.75vw,26px);line-height:1.5;
  color:var(--bas-fg);font-weight:300;letter-spacing:-.005em;max-width:60ch}
.pjg__cip{list-style:none;display:flex;flex-wrap:wrap;gap:8px;
  margin:30px 0 0;padding:0}
.pjg__cip li{font-family:var(--b);font-size:11.5px;letter-spacing:.06em;
  color:var(--fg-2);border:1px solid var(--line-2);border-radius:99px;
  padding:7px 15px;background:var(--ink-2)}

/* --- Fotoğraf sekansı ---------------------------------------------------- */
.pjs{padding:clamp(48px,7vh,84px) 0 clamp(20px,3vh,36px);background:var(--ink)}
.pjs h2{font-family:var(--d);font-weight:400;font-size:clamp(24px,3vw,44px);
  line-height:1.02;margin:10px 0 clamp(28px,4vh,44px);color:var(--fg)}
.pjs__s{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(10px,1.4vw,20px);margin-bottom:clamp(10px,1.4vw,20px)}
.pjs__f{margin:0;position:relative;overflow:hidden;background:var(--ink-2);
  border:1px solid var(--line)}
.pjs__f img{width:100%;height:100%;object-fit:cover;display:block;
  aspect-ratio:var(--o,3/2);
  transition:transform .8s var(--ease,cubic-bezier(.2,.7,.2,1))}
.pjs__f:hover img{transform:scale(1.035)}
@media(prefers-reduced-motion:reduce){
  .pjs__f img{transition:none}
  .pjs__f:hover img{transform:none}}
.pjs__f--tam{grid-column:span 12}
.pjs__f--genis{grid-column:span 8}
.pjs__f--yarim{grid-column:span 6}
.pjs__f--dar{grid-column:span 4}
.pjs__f figcaption{position:absolute;left:0;bottom:0;right:0;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:34px 16px 13px;
  background:linear-gradient(to top,rgba(6,9,11,.86),transparent)}
.pjs__et{font-family:var(--b);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bas-fg)}
.pjs__tem{font-family:var(--b);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-2);border:1px solid rgba(255,255,255,.24);
  border-radius:99px;padding:3px 8px}

/* --- Yapım bölümleri ----------------------------------------------------- */
.pjb{padding:clamp(56px,8vh,100px) 0;background:var(--ink-2)}
.pjb h2{font-family:var(--d);font-weight:400;font-size:clamp(24px,3vw,44px);
  line-height:1.02;margin:10px 0 clamp(30px,4.5vh,52px);color:var(--fg)}
.pjb__b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:center;
  padding:clamp(26px,4vh,44px) 0;border-top:1px solid var(--line)}
.pjb__b--ters .pjb__m{order:2}
.pjb__b--ters .pjb__g{order:1}
.pjb__n{display:block;font-family:var(--d);font-weight:700;font-size:13px;
  letter-spacing:.16em;color:var(--brand-lt);margin-bottom:14px}
.pjb__m h3{font-family:var(--d);font-weight:400;font-size:clamp(21px,2.2vw,32px);
  line-height:1.1;margin:0 0 14px;color:var(--fg)}
.pjb__m p{margin:0;font-size:clamp(15px,1.2vw,17.5px);line-height:1.72;
  color:var(--fg);max-width:52ch}
.pjb__g{overflow:hidden;border:1px solid var(--line);background:var(--ink-3)}
.pjb__g img{width:100%;height:100%;object-fit:cover;display:block;
  aspect-ratio:4/3}

/* --- Önceki / sonraki proje ---------------------------------------------- */
.pjn{padding:0 0 clamp(40px,6vh,72px);background:var(--ink)}
.pjn__g2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,22px);
  padding-top:clamp(32px,5vh,56px);border-top:1px solid var(--line)}
.pjn__b{display:flex;align-items:center;gap:18px;padding:16px;
  border:1px solid var(--line);background:var(--ink-2);text-decoration:none;
  transition:border-color .3s,background .3s}
.pjn__b:hover{border-color:var(--brand);background:var(--ink-3)}
.pjn__b--bos{border-style:dashed;opacity:.25;pointer-events:none}
.pjn__b--s{flex-direction:row-reverse;text-align:right}
.pjn__g{flex:0 0 auto;width:88px;height:66px;overflow:hidden;
  background:var(--ink-3)}
.pjn__g img{width:100%;height:100%;object-fit:cover;display:block}
.pjn__t{min-width:0}
.pjn__t s{display:block;text-decoration:none;font-family:var(--b);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  margin-bottom:6px}
.pjn__t b{display:block;font-weight:500;font-size:16px;color:var(--fg);
  line-height:1.25}
.pjn__t i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);
  margin-top:4px}

@media (max-width:900px){
  .pjg__g{grid-template-columns:1fr}
  .pjg__ks{position:static}
  .pjg__k{order:2;margin-top:8px}
  .pjb__b{grid-template-columns:1fr;gap:22px}
  .pjb__b--ters .pjb__m{order:1}
  .pjb__b--ters .pjb__g{order:2}
  .pjs__f--genis,.pjs__f--dar{grid-column:span 6}
  .pjn__g2{grid-template-columns:1fr}
  .pjn__b--s{flex-direction:row;text-align:left}
}
@media (max-width:600px){
  .pjs__f--yarim,.pjs__f--genis,.pjs__f--dar{grid-column:span 12}
  .pjs__f img{aspect-ratio:4/3}
  .pjh__kg{grid-template-columns:1fr 1fr}
}
/* Dondurulmuş eski gövde metni: anlatının altında, daha küçük punto. */
.pjg__eski{margin-top:26px;max-width:62ch}
.pjg__eski p{margin:0 0 1em;font-size:15.5px;line-height:1.75;color:var(--fg-2)}
.pjg__eski p:last-child{margin-bottom:0}
.pjg__eski h2,.pjg__eski h3{font-family:var(--d);font-weight:400;
  font-size:19px;margin:1.4em 0 .5em;color:var(--fg)}
/* Sekansın kuyruğu: JS'siz açılır. 52 kareli projede sayfa 18.863 px
   uzunluğunda bir yığına dönüşüyordu. */
.pjs__tetik{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.pjs__gizli{display:none}
.pjs__tetik:checked ~ .pjs__gizli{display:block}
.pjs__tetik:checked ~ .pjs__daha{display:none}
.pjs__daha{display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:clamp(14px,2vw,24px);padding:20px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--ink-2);
  font-family:var(--b);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-2);transition:border-color .3s,color .3s}
.pjs__daha:hover{border-color:var(--brand);color:var(--fg)}
.pjs__daha::after{content:'';width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.pjs__tetik:focus-visible ~ .pjs__daha{outline:2px solid var(--brand-lt);
  outline-offset:2px}

/* --- Görsel büyüteci (lightbox) ------------------------------------------ */
.pjs__ac{display:block;width:100%;padding:0;border:0;background:none;
  cursor:zoom-in;position:relative;line-height:0;color:inherit}
.pjs__ac:focus-visible{outline:2px solid var(--brand-lt);outline-offset:3px}
/* Büyüteç ikonu: köşede, sadece üzerine gelince. */
.pjs__zoom{position:absolute;top:12px;right:12px;width:34px;height:34px;
  border-radius:50%;background:rgba(6,9,11,.62);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.22);opacity:0;transform:scale(.85);
  transition:opacity .28s,transform .28s}
.pjs__zoom::before,.pjs__zoom::after{content:'';position:absolute;
  background:#eaf1f4}
.pjs__zoom::before{left:11px;top:16px;width:12px;height:1.5px}
.pjs__zoom::after{left:16.25px;top:11px;width:1.5px;height:12px}
.pjs__f:hover .pjs__zoom,.pjs__ac:focus-visible .pjs__zoom{opacity:1;
  transform:scale(1)}



/* ==========================================================================
   TAM EKRAN GALERİ (.gsl) — /urunler/
   Tam ekran yüksekliğinde, yatay kaydırmalı, filtreli. Kaydırma CSS
   scroll-snap ile: dokunmatikte ve trackpad'de yerel akıcılık.
   ========================================================================== */
.gsl{position:relative;height:100vh;height:100dvh;min-height:580px;
  display:flex;flex-direction:column;overflow:hidden;background:var(--ink-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Başlık bloğu OLABİLDİĞİNCE ALÇAK: bu bir tam ekran galeri, yer
   fotoğrafın. İlk denemede başlık 278 px alıyor ve şeride 854'ten
   yalnız 486 px kalıyordu. Başlık ile açıklama yan yana. */
.gsl__ust{flex:0 0 auto;padding:clamp(18px,2.8vh,34px) 0 clamp(8px,1.2vh,14px)}
.gsl__bas{display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,4vw,64px);flex-wrap:wrap}
.gsl h2{font-family:var(--d);font-weight:400;line-height:1.04;
  font-size:clamp(22px,2.7vw,38px);margin:8px 0 0;color:var(--fg)}
.gsl h2 .it{font-style:italic}
.gsl__lede{margin:0;font-size:clamp(13.5px,1.05vw,15.5px);line-height:1.55;
  color:var(--muted);max-width:46ch;flex:0 1 auto}
.gsl__filtre{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(12px,1.8vh,20px)}
.gsl__f{font-family:var(--b);font-size:12px;letter-spacing:.05em;
  color:var(--fg-2);background:var(--ink-3);border:1px solid var(--line-2);
  border-radius:99px;padding:8px 15px;cursor:pointer;display:inline-flex;
  align-items:center;gap:8px;transition:border-color .25s,color .25s,background .25s}
.gsl__f i{font-style:normal;font-size:10.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.gsl__f:hover{border-color:var(--brand);color:var(--fg)}
.gsl__f.on{background:var(--brand);border-color:var(--brand);color:#fff}
.gsl__f.on i{color:rgba(255,255,255,.72)}
.gsl__f:focus-visible{outline:2px solid var(--brand-lt);outline-offset:2px}

/* snap-align:START (center DEĞİL): ortalamada ilk kart hiçbir zaman
   ortaya gelemiyor, sayaç "2 / 128" diye açılıyor ve `mandatory` snap
   programatik kaydırmayı en yakın geçerli noktaya geri çekiyordu.
   scroll-padding-left rayın kendi dolgusuyla aynı olmalı. */
.gsl__ray{flex:1 1 auto;min-height:0;display:flex;align-items:stretch;
  gap:clamp(10px,1.2vw,18px);overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;
  scroll-padding-left:clamp(20px,5vw,90px);
  padding:0 clamp(20px,5vw,90px);scrollbar-width:none;-ms-overflow-style:none}
.gsl__ray::-webkit-scrollbar{display:none}
.gsl__ray:focus-visible{outline:2px solid var(--brand-lt);outline-offset:-4px}
/* Kart yüksekliği rayı dolduruyor, genişliği orandan geliyor: tam ekran
   yüksekliğinde büyük kareler, sabit piksel yok. */
.gsl__k{flex:0 0 auto;scroll-snap-align:start;margin:0;height:100%;
  aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--ink-3);
  border:1px solid var(--line)}
.gsl__k[hidden]{display:none}
.gsl__ac{display:block;width:100%;height:100%;padding:0;border:0;
  background:none;cursor:zoom-in;line-height:0}
.gsl__ac:focus-visible{outline:2px solid var(--brand-lt);outline-offset:-4px}
.gsl__k img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--ease,cubic-bezier(.2,.7,.2,1))}
.gsl__k:hover img{transform:scale(1.04)}
.gsl__k figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:40px 18px 16px;pointer-events:none;
  background:linear-gradient(to top,rgba(6,9,11,.9),rgba(6,9,11,.5) 45%,transparent)}
.gsl__k figcaption b{display:block;font-family:var(--b);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brand-lt);
  font-weight:500;margin-bottom:5px}
.gsl__k figcaption span{display:block;font-size:14.5px;line-height:1.35;
  color:var(--bas-fg)}

.gsl__alt{flex:0 0 auto;padding:clamp(10px,1.5vh,18px) 0 clamp(14px,2.2vh,26px)}
.gsl__alt .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap}
.gsl__nav{display:flex;align-items:center;gap:12px}
.gsl__o,.gsl__s{width:46px;height:46px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line-2);background:var(--ink-3);position:relative;
  transition:border-color .25s,background .25s}
.gsl__o:hover,.gsl__s:hover{border-color:var(--brand);background:var(--ink)}
.gsl__o:disabled,.gsl__s:disabled{opacity:.3;cursor:default}
.gsl__o:focus-visible,.gsl__s:focus-visible{outline:2px solid var(--brand-lt);
  outline-offset:2px}
.gsl__o::before,.gsl__s::before{content:'';position:absolute;top:16px;
  width:12px;height:12px;border-top:1.5px solid #eaf1f4;
  border-left:1.5px solid #eaf1f4}
.gsl__o::before{left:19px;transform:rotate(-45deg)}
.gsl__s::before{right:19px;transform:rotate(135deg)}
.gsl__say{font-family:var(--b);font-size:12px;letter-spacing:.12em;
  color:var(--muted);font-variant-numeric:tabular-nums;margin-left:6px}
.gsl__bag{font-family:var(--b);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand-lt);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:3px;transition:border-color .25s}
.gsl__bag:hover{border-color:var(--brand-lt)}

@media (max-width:900px){
  .gsl{height:auto;min-height:0;padding-bottom:4px}
  .gsl__ray{height:58vh;flex:0 0 auto}
  .gsl__k{aspect-ratio:3/4}
}
@media (max-width:600px){
  .gsl__ray{height:52vh;padding:0 16px}
  .gsl__k{aspect-ratio:3/4}
  .gsl__filtre{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-right:calc(var(--pad) * -1);padding-right:var(--pad)}
  .gsl__filtre::-webkit-scrollbar{display:none}
  .gsl__f{flex:0 0 auto}
}
@media(prefers-reduced-motion:reduce){
  .gsl__ray{scroll-behavior:auto}
  .gsl__k img{transition:none}
  .gsl__k:hover img{transform:none}
}

/* ==========================================================================
   UYGULAMA BENTO (.ub) — "teknik bilgi" alanı, 4.9.26
   Deneme sayfasının kurgusu; yalnız ORTADAKİ YAZI ALANINA uygulanıyor.
   Referans dili: koyu cam kartlar, ● + minik etiket, İRİ RAKAM, küçük not.
   ========================================================================== */
.ub{background:var(--ink);padding:clamp(44px,6.5vh,88px) 0}
.ub__bas{margin-bottom:clamp(22px,3vh,38px)}
.ub__bas h2{font-family:var(--b);font-weight:300;margin:10px 0 0;
  font-size:clamp(25px,3vw,44px);line-height:1.06;letter-spacing:-.03em;
  color:var(--bas-fg);text-transform:none}
.ub__g{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(10px,1.1vw,16px);align-items:start}

.ubk{position:relative;border-radius:15px;padding:18px 20px 17px;
  grid-column:span 3;
  background:linear-gradient(168deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 22px 50px -30px #000, inset 0 1px 0 rgba(255,255,255,.06);
  transition:opacity .5s var(--ease),transform .6s var(--ease);
  transition-delay:calc(var(--n,0) * 50ms)}
/* GÜVENLİ DESEN: kartlar ve metin VARSAYILAN OLARAK GÖRÜNÜR. Gizleme
   yalnız JS `.canli` işaretini koyduğunda başlar. Aksi hâlde betik
   çalışmazsa GÖVDE METNİ GÖRÜNMEZ KALIYOR — bir kez oldu. */
.ub.canli .ubk{opacity:0;transform:translateY(18px)}
.ub.canli.gor .ubk{opacity:1;transform:none}
.ubk__e{margin:0;display:flex;align-items:center;gap:7px;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
.ubk__e i{width:5px;height:5px;border-radius:50%;background:#dfe6ea;flex:0 0 auto}
.ubk__s{margin:13px 0 0;display:flex;align-items:baseline;gap:6px}
.ubk__s b{font-weight:400;font-size:clamp(28px,3vw,44px);line-height:1;
  letter-spacing:-.03em;color:var(--bas-fg);font-variant-numeric:tabular-nums;
  font-family:var(--b)}
.ubk__s u{text-decoration:none;font-size:14px;color:var(--fg-2)}
.ubk__a{margin:11px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.ub__g .ubk--gen{grid-column:span 6}
.ub__g .ubk--bag{grid-column:span 12}
.ub__g .ubk--rit{grid-column:span 7}
.ub__g .ubk--malz{grid-column:span 5}
.ub__g .ubk--foto{grid-column:span 12;padding:0;overflow:hidden;
  min-height:clamp(200px,26vh,320px)}
.ub__g .ubk--foto img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}

.ubg{list-style:none;margin:16px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:0}
.ubg li{padding:0 22px 0 0}
.ubg li+li{padding-left:24px;border-left:1px solid rgba(255,255,255,.09)}
.ubg b{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-lt);margin-bottom:9px}
.ubg span{display:block;font-size:14px;line-height:1.62;color:var(--fg-2)}

.ubr{list-style:none;margin:16px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:0}
.ubr li{padding:0 12px 0 0}
.ubr li+li{padding-left:14px;border-left:1px solid rgba(255,255,255,.09)}
.ubr s{display:block;text-decoration:none;font-size:9.5px;letter-spacing:.16em;
  color:var(--brand-lt);margin-bottom:7px;font-variant-numeric:tabular-nums}
.ubr b{display:block;font-weight:500;font-size:15px;color:var(--bas-fg);margin-bottom:4px}
.ubr span{display:block;font-size:11.5px;line-height:1.45;color:var(--muted)}

.ubm{list-style:none;margin:15px 0 0;padding:0;display:grid;gap:0}
.ubm li{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.ubm li:last-child{border-bottom:0;padding-bottom:0}
.ubm b{font-weight:500;font-size:13px;color:var(--bas-fg)}
.ubm span{font-size:12px;color:var(--fg-2);text-align:right;max-width:62%}

/* --- metin blokları --- */
.ub__y{margin-top:clamp(12px,1.4vw,18px)}
.ubb{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(22px,3vw,54px);align-items:start;
  padding:clamp(24px,3.2vh,42px);border-radius:15px;
  background:linear-gradient(168deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.08);
  margin-bottom:clamp(10px,1.1vw,16px);
  transition:opacity .55s var(--ease),transform .65s var(--ease)}
.ub.canli .ubb{opacity:0;transform:translateY(20px)}
.ub.canli.gor .ubb{opacity:1;transform:none}
.ubb__e{margin:0;display:flex;align-items:center;gap:7px;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ubb__e i{width:5px;height:5px;border-radius:50%;background:var(--brand-lt)}
.ubb h3{font-family:var(--b);font-weight:300;margin:12px 0 16px;
  font-size:clamp(21px,2.3vw,33px);line-height:1.09;letter-spacing:-.028em;
  color:var(--bas-fg);text-transform:none}
.ubb__t p{margin:0 0 1em;font-size:clamp(14.5px,1.08vw,16.5px);line-height:1.76;
  color:var(--fg-2)}
.ubb__t p:last-child{margin-bottom:0}
.ubb__g{border-radius:11px;overflow:hidden;aspect-ratio:4/5;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  position:sticky;top:96px}
.ubb__g img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:1000px){
  .ub__g .ubk,.ub__g .ubk--gen,.ub__g .ubk--rit,.ub__g .ubk--malz{
    grid-column:span 6}
  .ubg,.ubr{grid-template-columns:1fr 1fr;gap:14px 0}
  .ubg li+li,.ubr li+li{border-left:0;padding-left:0}
  .ubb{grid-template-columns:1fr}
  .ubb__g{position:static;aspect-ratio:16/10}
}
@media (max-width:620px){
  .ub__g .ubk,.ub__g .ubk--gen,.ub__g .ubk--rit,.ub__g .ubk--malz,
  .ub__g .ubk--bag,.ub__g .ubk--foto{grid-column:span 12}
  .ubg,.ubr{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .ub.canli .ubk,.ub.canli .ubb{transition:none;opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .ur__k:hover,a.ok:hover{transform:none}
  .ur__f img,.ok__p img{transition:none}
}

/* ==========================================================================
   KARUSEL (.krs) — ürün ve çözüm ortağı şeritleri, 4.9.26
   Az kart ortada durur, çok kart kaydırılır. Oklar yalnız taşma varsa.
   ========================================================================== */
.krs{position:relative;perspective:1200px}
.krs__ray{display:flex;gap:1px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  /* Az kartta ORTALANIR, çok kartta rayı doldurur.
     `justify-content:center` KULLANMA — taşınca baştaki kartları kırpıyor. */
  width:fit-content;max-width:100%;margin-inline:auto;
  padding-bottom:2px;scrollbar-width:none;-ms-overflow-style:none}
.krs__ray::-webkit-scrollbar{display:none}
.krs__ray > *{flex:0 0 auto;scroll-snap-align:start;
  width:clamp(224px,21vw,286px)}
.krs--ok .krs__ray > *{width:clamp(240px,23vw,320px)}

.krs__o,.krs__s{position:absolute;top:38%;z-index:5;width:44px;height:44px;
  border-radius:50%;cursor:pointer;border:1px solid var(--line-2);
  background:rgba(10,13,15,.86);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;
  transition:opacity .28s var(--ease),visibility .28s,
             border-color .25s,background .25s}
.krs.kaydirilabilir .krs__o,.krs.kaydirilabilir .krs__s{
  opacity:1;visibility:visible}
.krs__o:hover,.krs__s:hover{border-color:var(--brand);background:var(--ink)}
.krs__o:disabled,.krs__s:disabled{opacity:.24;cursor:default}
.krs__o{left:-14px}
.krs__s{right:-14px}
.krs__o::before,.krs__s::before{content:'';position:absolute;top:15px;
  width:12px;height:12px;border-top:1.5px solid #eaf1f4;
  border-left:1.5px solid #eaf1f4}
.krs__o::before{left:18px;transform:rotate(-45deg)}
.krs__s::before{right:18px;transform:rotate(135deg)}

/* Dolgulu zeminli logo (Harvia'nın kırmızı karesi): beyaza indirme
   filtresi onu düz bir bloğa çeviriyordu. */
.ok--dolgu .ok__p img{filter:grayscale(1) brightness(1.05);opacity:.85}
a.ok--dolgu:hover .ok__p img{filter:grayscale(.15) brightness(1);opacity:1}

@media (max-width:760px){
  .krs__o,.krs__s{display:none}
  .krs__ray{padding-right:16px}
}
@media(prefers-reduced-motion:reduce){
  .krs__ray{scroll-behavior:auto}
}

/* ==================================================================
   TESİSAT ŞEMASI — 12.9.26
   Üreticinin interaktif şemasının JS'siz karşılığı: radio + :checked.
   Çizim beyaz zeminli çizgi çizim olduğu için `invert` ile koyu temaya
   çevriliyor; mavi işaretler bizim `--brand` rengimize dönüyor.
   ================================================================== */
.tsm{padding:clamp(56px,8vw,110px) 0;background:var(--ink-2);overflow:hidden}
.tsm__bas{max-width:var(--max);margin:0 auto clamp(24px,3vw,46px);
  padding:0 var(--pad)}
.tsm__bas .eyebrow{color:var(--brand-lt);margin:0 0 12px}
.tsm__bas h2{font-family:var(--t);font-weight:400;text-transform:none;
  font-size:clamp(28px,3.6vw,54px);line-height:1.04;letter-spacing:-.026em;
  margin:0;color:var(--fg)}
.tsm__lede{margin:14px 0 0;color:var(--fg);opacity:.84;line-height:1.66;
  max-width:62ch}
.tsm__f{max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:grid;gap:clamp(18px,2.4vw,34px);position:relative}
.tsm__r{position:absolute;opacity:0;pointer-events:none}
.tsm__g{position:relative;background:var(--ink-3);
  border:1px solid var(--line-2);padding:clamp(6px,1vw,16px)}
/* 12.9.26 (kullanıcı): "bu alanda daha büyük ve daha belirgin olmalı."
   Çizim ince kontur; invert sonrası koyu zeminde soluk kalıyordu.
   Kontrast yükseltildi ve çizim tam genişliğe yayıldı. */
.tsm__g img{width:100%;height:auto;display:block;
  filter:invert(1) hue-rotate(180deg) saturate(.55) brightness(1.12)
         contrast(1.35)}
.tsm__n{position:absolute;left:var(--x);top:var(--y);cursor:pointer;
  transform:translate(-50%,-50%);display:grid;place-items:center;
  width:42px;height:42px;z-index:2}
.tsm__n i{width:16px;height:16px;border-radius:50%;background:var(--brand-lt);
  box-shadow:0 0 0 5px rgba(92,187,230,.18);
  transition:transform .3s var(--ease),box-shadow .5s var(--ease)}
.tsm__n:hover i{transform:scale(1.35)}
.tsm__ad{position:absolute;left:50%;top:calc(100% + 5px);
  transform:translateX(-50%);white-space:nowrap;pointer-events:none;
  font:600 10px/1 var(--d);letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg);opacity:0;transition:opacity .3s var(--ease);
  background:rgba(6,9,11,.86);padding:5px 8px}
.tsm__n:hover .tsm__ad{opacity:1}
.tsm__k{display:none;border-left:3px solid var(--brand);
  padding:clamp(18px,2.2vw,30px) clamp(20px,2.4vw,34px);
  background:linear-gradient(150deg,var(--yuzey-2),#0a0e11)}
.tsm__k b{display:block;font-family:var(--t);font-weight:400;
  font-size:clamp(19px,1.8vw,26px);line-height:1.1;letter-spacing:-.02em;
  color:var(--fg);margin:0 0 6px}
.tsm__k span{color:var(--fg);opacity:.84;line-height:1.62}
/* Seçili nokta ve onun açıklaması */
.tsm__r:nth-of-type(1):checked~.tsm__k[data-i="0"],
.tsm__r:nth-of-type(2):checked~.tsm__k[data-i="1"],
.tsm__r:nth-of-type(3):checked~.tsm__k[data-i="2"],
.tsm__r:nth-of-type(4):checked~.tsm__k[data-i="3"],
.tsm__r:nth-of-type(5):checked~.tsm__k[data-i="4"],
.tsm__r:nth-of-type(6):checked~.tsm__k[data-i="5"]{display:block}
.tsm__r:nth-of-type(1):checked~.tsm__g .tsm__n:nth-of-type(1) i,
.tsm__r:nth-of-type(2):checked~.tsm__g .tsm__n:nth-of-type(2) i,
.tsm__r:nth-of-type(3):checked~.tsm__g .tsm__n:nth-of-type(3) i,
.tsm__r:nth-of-type(4):checked~.tsm__g .tsm__n:nth-of-type(4) i,
.tsm__r:nth-of-type(5):checked~.tsm__g .tsm__n:nth-of-type(5) i,
.tsm__r:nth-of-type(6):checked~.tsm__g .tsm__n:nth-of-type(6) i{
  background:#fff;transform:scale(1.2);
  box-shadow:0 0 0 7px rgba(92,187,230,.28)}
.tsm__r:nth-of-type(1):checked~.tsm__g .tsm__n:nth-of-type(1) .tsm__ad,
.tsm__r:nth-of-type(2):checked~.tsm__g .tsm__n:nth-of-type(2) .tsm__ad,
.tsm__r:nth-of-type(3):checked~.tsm__g .tsm__n:nth-of-type(3) .tsm__ad,
.tsm__r:nth-of-type(4):checked~.tsm__g .tsm__n:nth-of-type(4) .tsm__ad,
.tsm__r:nth-of-type(5):checked~.tsm__g .tsm__n:nth-of-type(5) .tsm__ad,
.tsm__r:nth-of-type(6):checked~.tsm__g .tsm__n:nth-of-type(6) .tsm__ad{
  opacity:1}
/* Geniş ekranda çizim TAM GENİŞLİK; açıklama kutusu çizimin üstünde
   sağ alta oturuyor. Böylece şema küçülmüyor, kutu da onu kesmiyor. */
@media(min-width:1000px){
  .tsm__f{grid-template-columns:1fr}
  .tsm__g{padding:clamp(8px,1vw,18px)}
  .tsm__k{position:absolute;right:calc(var(--pad) + clamp(10px,1.4vw,26px));
    bottom:clamp(18px,2.4vw,40px);width:min(30vw,360px);
    box-shadow:0 22px 50px rgba(0,0,0,.5);z-index:3}
}
@media(min-width:640px) and (max-width:999px){
  .tsm__f{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
    align-items:center}
  .tsm__k{grid-column:2;grid-row:1}
}
@media(max-width:520px){
  .tsm__n{width:26px;height:26px}
  .tsm__ad{display:none}
}

/* ==================================================================
   KARŞILAŞTIRMA TABLOSU — 15.9.26
   Sitede hiç tablo yoktu; SEO/GEO için eklendi (LLM'lerin en çok
   alıntıladığı format). Geniş tablo KENDİ kutusunda kayar, sayfa
   gövdesi yatay kaymaz.
   ================================================================== */
.ktb{padding:clamp(48px,7vw,96px) 0;background:var(--ink-2)}
.ktb__bas{max-width:var(--max);margin:0 auto clamp(20px,2.8vw,38px);
  padding:0 var(--pad)}
.ktb__bas .eyebrow{color:var(--brand-lt);margin:0 0 12px}
.ktb__bas h2{font-family:var(--t);font-weight:400;text-transform:none;
  font-size:clamp(26px,3.4vw,50px);line-height:1.05;letter-spacing:-.026em;
  margin:0;color:var(--bas-fg)}
.ktb__giris{margin:14px 0 0;color:var(--fg);opacity:.86;line-height:1.66;
  max-width:68ch;font-size:clamp(15px,1.25vw,17.5px)}
.ktb__kutu{max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.ktb__t{width:100%;border-collapse:collapse;min-width:640px;
  font-size:clamp(13.5px,1.05vw,15.5px)}
.ktb__t th,.ktb__t td{text-align:left;vertical-align:top;
  padding:clamp(11px,1.15vw,17px) clamp(12px,1.3vw,20px);
  border-bottom:1px solid var(--line-2)}
.ktb__t thead th{font-family:var(--d);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--brand-lt);font-weight:600;
  border-bottom:1px solid var(--line);white-space:nowrap}
.ktb__t tbody th{font-family:var(--t);font-weight:400;font-size:1.12em;
  color:var(--fg);letter-spacing:-.01em;white-space:nowrap}
.ktb__t tbody td{color:var(--fg);opacity:.84;line-height:1.5}
.ktb__t tbody tr:hover{background:var(--yuzey-2)}
.ktb__not{max-width:var(--max);margin:clamp(14px,1.8vw,22px) auto 0;
  padding:0 var(--pad);color:var(--muted);font-size:13.5px;line-height:1.6}
@media(max-width:620px){
  .ktb__kutu::after{content:"← kaydırın →";display:block;
    font:600 10px/1 var(--d);letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);padding:10px 0 0}
}

/* Soru başlığının altındaki doğrudan cevap — GEO/AEO bloğu */
.dcevap{
  margin:.7rem 0 1.1rem;
  padding:.85rem 1.05rem;
  border-left:3px solid var(--brand);
  background:var(--yuzey-2);
  color:var(--fg);
  font-size:1.02rem;
  line-height:1.7;
  border-radius:0 8px 8px 0;
}

/* Ürün sayfalarının modele özgü anlatısı */
.urm{padding:clamp(44px,6vw,86px) 0;background:var(--ink)}
.urm__i{max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,54px);align-items:start}
.urm__m .eyebrow{color:var(--brand-lt);margin:0 0 12px}
.urm__m h2{font-family:var(--t);font-weight:400;text-transform:none;
  font-size:clamp(24px,3vw,42px);line-height:1.08;letter-spacing:-.024em;
  margin:0 0 16px;color:var(--bas-fg)}
.urm__m p{margin:0;color:var(--fg);opacity:.88;line-height:1.74;
  font-size:clamp(15px,1.2vw,17px)}
.urm__s{border:1px solid var(--line);border-radius:14px;
  padding:clamp(18px,1.9vw,26px);background:var(--yuzey-2)}
.urm__s .eyebrow{color:var(--brand-lt);margin:0 0 10px}
.urm__s p{margin:0;color:var(--fg);opacity:.9;line-height:1.7;
  font-size:clamp(14px,1.1vw,15.5px)}
@media(max-width:860px){.urm__i{grid-template-columns:1fr}}

/* ==================================================================
   ÜRETİCİNİN STÜDYO KESİTİ KIRPILMAZ — 16.9.26
   Kullanıcı: "EOS, Wellis, wedi ve Condair görsellerinin bazılarının
   kesildiği belli oluyor çok — mesela wedi'lerdekinde."

   Sebep tek cümle: üreticinin tekdüze (beyaz/krem) fonlu ürün kareleri
   mekân fotoğrafıyla aynı kutuya, aynı `object-fit: cover` ile
   basılıyordu. Kutu 16/10, kare 1/1 ya da 3/4 olunca yapı levhasının
   altı üstü, duş teknesinin kenarı, sauna kapısının yarısı kadrajın
   dışında kalıyordu.

   Ayrım KARE KARE veriliyor: `arac/urun_kesiti.py` her karenin dış
   çerçevesini ve dört köşesini ölçüyor, `data/urun_kesiti.json`'a
   yazıyor, `build.kesit_mi()` de işaretli karelere `--kesit` sınıfını
   basıyor. Listede olmayan her kare GERÇEK MEKÂN fotoğrafıdır ve
   `cover` ile basılmaya devam eder — orada kırpma istenen şeydir.

   Kesit olan kare: kırpılmıyor (`contain`), üreticinin beyaz fonuyla
   sürekli görünen AÇIK PLAKAYA oturuyor, kenarına nefes payı alıyor.
   ================================================================== */
/* --- ürün kahramanı: büyük sahne ---------------------------------- */
.ukh--foto .ukh__b--kesit{
  background:linear-gradient(160deg,#f4f6f7,#dfe6ea);
  padding:clamp(12px,2.2vw,34px)}
.ukh--foto .ukh__b--kesit img{object-fit:contain;padding:0;
  width:100%;height:100%}

/* --- ürün kahramanı: sol taraftaki küçük kare rayı ---------------- */
.ukh--foto .ukh__t--kesit{
  background:linear-gradient(160deg,#f4f6f7,#dfe6ea);opacity:.6}
.ukh--foto .ukh__t--kesit:hover{opacity:.95}
.ukh--foto .ukh__t--kesit img{object-fit:contain;padding:8%}

/* --- galeri karuseli ---------------------------------------------- */
/* `.gal__k img` sürekli scale(1.03) duruyor (cover'da hoş bir sıcaklık
   veriyor); kesitte bu, ürünün kenarını kutunun dışına taşırıyor. */
.gal__k--kesit{background:linear-gradient(160deg,#f4f6f7,#dfe6ea)}
.gal__k--kesit img{object-fit:contain;padding:clamp(10px,1.6vw,22px);
  transform:none}
.gal__k--kesit:hover img{transform:none}
/* Büyüteç imi beyaz fonda kayboluyordu. */
.gal__k--kesit .gal__z::before,
.gal__k--kesit .gal__z::after{background:#2a3338;
  box-shadow:0 1px 6px rgba(255,255,255,.7)}

/* Fonu kaldırılmış kesit (EOS/Wellis) açık plakaya değil, sitenin kendi
   koyu `--saydam` sahnesine oturuyor — ürün kartlarıyla aynı dil.
   Bu blok `--kesit`ten SONRA gelmeli: zemini ve büyüteç imini ezer. */
.gal__k--saydam{
  background:
    radial-gradient(118% 86% at 50% 30%,rgba(92,187,230,.13) 0%,
      rgba(10,14,16,0) 64%),
    linear-gradient(168deg,var(--yuzey-2) 0%,var(--yuzey-d) 100%)}
.gal__k--saydam img{filter:drop-shadow(0 18px 22px rgba(0,0,0,.6))}
.gal__k--saydam .gal__z::before,
.gal__k--saydam .gal__z::after{background:#fff;
  box-shadow:0 1px 6px rgba(0,0,0,.6)}

/* ==================================================================
   TEK PLAKA DİLİ — 16.9.26
   Kullanıcı: "eos'ta hâlâ görseller bu âlemde neden" (EOS kartlarında
   kötü kaldırılmış fon, koyu zeminde beyaz hale) + "Condair'de jeneratör
   koyu sayfanın ortasında beyaz bir kutu" (fon hiç kaldırılmamış).

   Aynı şikâyetin iki ucu: ızgara ALACALI. 11.9.26'da kurulan koyu
   `--saydam` plaka 689 kartta, açık plaka 431 kartta, koyu `cover`
   215 kartta basılıyordu — yan yana üç ayrı dil.

   Ölçüm (arac/kare_hale_olc.py): 267 saydam karenin 186'sı (%70)
   halelenmiş. Üç fon-kaldırma algoritması denendi, üçü de kaybetti
   (bkz. site/build.py `_SAYDAM`). Üreticinin beyaz stüdyo fonu ile
   beyaz/gümüş ürün gövdesi eşikle ayrılmıyor.

   Karar: plaka dili İKİYE indi ve karenin TÜRÜNE göre seçiliyor —
     · üreticinin stüdyo kesiti → AÇIK plaka, `contain`, nefes payı
     · gerçek mekân fotoğrafı   → KOYU plaka, `cover`, kadrajı doldurur
   Ayrım `build.kesit_mi()`'den geliyor (data/urun_kesiti.json +
   data/kesit_elle.json). EOS, Condair, wedi, Andres ve Wellis artık
   tek dil konuşuyor.

   Plakanın merkezi BEYAZ: üreticinin kendi beyaz fonu plakaya karışsın,
   kutunun içinde ikinci bir dikdörtgen görünmesin. Kenarları hafif
   soğuyor ve saç teli kadar bir iç çizgi alıyor ki koyu sayfada
   "sızmış beyaz kutu" değil, kasıtlı bir ürün plakası okunsun.
   ================================================================== */
:root{
  /* Dış uç bilerek ÇOK açık (#f3f6f7): üreticinin beyaz fonu plakanın
     üstünde ayrı bir dikdörtgen olarak belirmesin. Ölçüldü — beyazla
     farkı 12/255, kart boyunda gözle seçilmiyor. */
  --plaka:radial-gradient(122% 96% at 48% 38%,
            #ffffff 0%,#fcfdfe 52%,#f3f6f7 100%);
  --plaka-cizgi:inset 0 0 0 1px rgba(10,14,16,.075);
  --plaka-yazi:#5d6a72}

/* --- 1) üreticinin stüdyo kesiti: AÇIK PLAKA ---------------------- */
.ukart__f,
.ukart__f--kesit,
.ukh__sahne,
.ukh__t,
.ukh__b--kesit,
.ukh__t--kesit,
.ukh--foto .ukh__b--kesit,
.ukh--foto .ukh__t--kesit,
.gal__k--kesit,
.ktab__p,
.ktab__p--kesit{background:var(--plaka)}

.ukart__f--kesit,
.ukh__sahne,
.ktab__p--kesit,
.gal__k--kesit{box-shadow:var(--plaka-cizgi)}

.ukart__f--kesit img{object-fit:contain;padding:clamp(10px,1.6vw,22px)}
.ukart:hover .ukart__f--kesit img{transform:scale(1.05)}

.ukh__b--kesit{padding:clamp(14px,2vw,34px)}
.ukh__b--kesit img{object-fit:contain;width:100%;height:100%}
.ukh__t--kesit img{object-fit:contain;padding:8%}

.ktab__p--kesit{padding:clamp(18px,2.4vw,36px)}
.ktab__p--kesit img{object-fit:contain}
/* Açık plakada `--muted` etiketi okunmuyordu. */
.ktab__p span,.ktab__p--kesit span{color:var(--plaka-yazi)}

/* --- 2) gerçek mekân fotoğrafı: KOYU PLAKA, kadrajı doldurur ------ */
.ukart__f--koyu,
.ukh__b--foto,
.ukh__t--foto,
.ktab__p--koyu{background:linear-gradient(160deg,var(--yuzey-2),var(--yuzey-d));
  box-shadow:none}
.ukart__f--koyu img{object-fit:cover;padding:0}
.ukh__b--foto{padding:0}
.ukh__b--foto img,.ukh__t--foto img{object-fit:cover;padding:0;
  width:100%;height:100%}
.ktab__p--koyu span{color:var(--muted)}

/* --- 3) 11.9.26'nın koyu saydam plakası EMEKLİ -------------------- */
/* Sınıflar artık hiç basılmıyor (build._SAYDAM boş). Kuralları silmek
   yerine etkisizleştiriyoruz: eski bir çıktı elde kalırsa da yeni dile
   uysun, sayfa alacalı görünmesin. */
.ukart__f--saydam,
.ktab__p--saydam,
.gal__k--saydam,
.ukh--saydam .ukh__sahne,
.ukh--saydam .ukh__t{background:var(--plaka);box-shadow:var(--plaka-cizgi)}
.ukart__f--saydam img,
.ktab__p--saydam img,
.gal__k--saydam img,
.ukh--saydam .ukh__b img{filter:none}
.ktab__p--saydam span{color:var(--plaka-yazi)}

/* ==========================================================================
   CANLI İLETİŞİM — sağ altta sabit WhatsApp + telefon  (16.9.26, kullanıcı)
   Mobilde alttaki `.mbar` zaten aynı işi yapıyor; iki sabit çubuk üst üste
   binmesin diye orada gizleniyor.
   ========================================================================== */
.cnl{position:fixed;right:clamp(14px,1.6vw,26px);bottom:clamp(14px,1.8vw,28px);
  z-index:60;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.cnl__b{display:inline-flex;align-items:center;gap:0;
  height:52px;width:52px;padding:0;border-radius:999px;overflow:hidden;
  text-decoration:none;color:#fff;font:600 13.5px/1 var(--d);
  letter-spacing:.012em;white-space:nowrap;
  box-shadow:0 6px 22px rgba(0,0,0,.34);
  transition:width .26s cubic-bezier(.22,.7,.3,1),background .2s,
             box-shadow .2s,transform .2s}
.cnl__b svg{flex:0 0 52px;width:22px;height:22px;margin:0 15px}
.cnl__b span{opacity:0;padding-right:20px;transition:opacity .16s .06s}
.cnl__b--wa{background:#1fa855}
.cnl__b--wa:hover,.cnl__b--wa:focus-visible{background:#18904a}
.cnl__b--tel{background:var(--brand)}
.cnl__b--tel:hover,.cnl__b--tel:focus-visible{background:var(--brand-lt);
  color:#04212f}
.cnl__b:hover,.cnl__b:focus-visible{width:auto;transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(0,0,0,.42)}
.cnl__b:hover span,.cnl__b:focus-visible span{opacity:1}
/* Dokunmatikte hover yok: etiketler baştan açık dursun. */
@media(hover:none){
  .cnl__b{width:auto}
  .cnl__b span{opacity:1}
}
@media(max-width:860px){ .cnl{display:none} }
@media(prefers-reduced-motion:reduce){ .cnl__b{transition:none} }

/* ==========================================================================
   FOTOĞRAF ÜSTÜ YAZI — tema bağımsız  (16.9.26, kullanıcı: açık modda
   okunmuyor)
   --------------------------------------------------------------------------
   Kök neden: açık tema için `--brand-lt` koyulaştırıldı (#5cbbe6 → #0f6188),
   çünkü krem zeminde okunmuyordu. Ama aynı değişken FOTOĞRAF ÜSTÜNDEKİ
   etiketlerde de kullanılıyor — orada zemin fotoğraf, tema değil. Açık
   ahşap bir sauna karesinin üstünde koyu mavi kayboluyor.
   Kural: fotoğrafın üstündeki her şey HER İKİ TEMADA da açık renk.
   ========================================================================== */
.hacim__sol .etiket,
.khero__et,
.cta__ust,
.sg__bas .eyebrow{
  color:#7fd0f0;
}
.hacim__sol h3,
.hacim__sol h3 a,
.khero__ic h1{ color:#fff }
.hacim__sol p{ color:rgba(255,255,255,.82) }
.hacim__isi em,
.hacim__isi s{ color:rgba(255,255,255,.72) }

/* Açık temada karartma yetersizdi: açık ahşap kareler neredeyse beyaz.
   Alt bant koyulaştırıldı, üstte hafif bir yıkama eklendi. */
html[data-tema="acik"] .hacim::after{
  background:linear-gradient(180deg,
    rgba(6,9,11,.30) 0%, rgba(6,9,11,.06) 30%, rgba(6,9,11,.92) 100%);
}

/* Canlı iletişim butonları: ikonlar 24'lük ızgaraya geçti, oran düzeltildi */
.cnl__b svg{ width:20px; height:20px; margin:0 16px }
.cnl__b{ height:50px; width:50px }
.cnl__b--wa svg{ width:21px; height:21px }

/* ==========================================================================
   MOBİL MEGA MENÜ  (16.9.26, kullanıcı: "alt kırılımlar doğru açılmıyor")
   --------------------------------------------------------------------------
   Mega menü masaüstü için YATAY GÖRSEL ŞERİT olarak kurulmuş: dokuz kare,
   linkler o karelerin içinde konumlanıyor. 390 px ekranda panel 204 px'e
   sıkışıyor ve linkler SIFIR GENİŞLİK alıyor — "Fin Saunası", "Bio Sauna"
   HTML'de var ama hiçbiri görünmüyor.
   Mobilde şeridi bırakıp düz, dokunulabilir bir listeye çeviriyoruz.
   ========================================================================== */
@media(max-width:860px){
  .bar li.open .mega{
    position:static; width:100%; max-width:100%;
    padding:6px 0 14px; background:none; border:0; box-shadow:none;
  }
  .bar li.open .mega__ic{
    display:block !important; width:100% !important; max-width:100% !important;
    padding:0; margin:0; grid-template-columns:none !important;
  }
  /* SADECE görsel ve dikey etiket gizlenir.
     DİKKAT: `.mgf__t` bir "görsel kare" DEĞİL, kartın tamamı — alt linkler
     onun içinde. Gizlenirse menü boşalır (16.9.26'da bir kez yapıldı).
     `.mgf__alt` ise masaüstünde hover ile açılan alt liste; mobilde
     dokunmayla açılamadığı için sürekli görünür olmalı. */
  .bar li.open .mega img,
  .bar li.open .mega .mgf__dik,
  .bar li.open .mega svg{ display:none !important }
  .bar li.open .mega .mgf{ display:block !important }
  .bar li.open .mega .mgf__t{
    display:block !important; overflow:visible !important;
    border:0 !important; background:none !important;
    margin:0 0 4px !important; padding:0 !important;
  }
  .bar li.open .mega .mgf__ac{ display:block !important }
  .bar li.open .mega .mgf__alt{ display:block !important }

  /* Kalan her şey normal akışa dönsün */
  .bar li.open .mega *{
    position:static !important; transform:none !important;
    width:auto !important; height:auto !important;
    max-width:100% !important; opacity:1 !important;
    writing-mode:horizontal-tb !important; inset:auto !important;
  }
  /* Linkler: tam genişlik, 44 px dokunma hedefi */
  .bar li.open .mega a{
    display:block !important; width:100% !important;
    padding:11px 4px; min-height:44px; line-height:1.35;
    font-size:15px; color:var(--fg);
    border-bottom:1px solid var(--line-2); text-decoration:none;
  }
  .bar li.open .mega a:last-child{ border-bottom:0 }
  /* Grup başlıkları ayrışsın */
  .bar li.open .mega h4,
  .bar li.open .mega .mgf__ust,
  .bar li.open .mega .eyebrow{
    display:block !important; margin:14px 0 4px;
    font:600 11px/1 var(--d); letter-spacing:.14em;
    text-transform:uppercase; color:var(--brand-lt);
  }
  .bar li.open .mega p{ display:none !important }
  /* Görseli gizlenen kartın kendi linki metinsiz kalıyor — boş satır
     olarak görünmesin. */
  .bar li.open .mega a:not(:has(*)):empty,
  .bar li.open .mega a:has(> img:only-child){ display:none !important }
}