/* ==========================================================================
   LOVJA — lovja.com stil kaynağı
   Tasarım dili PORSELEN ve GRAFİT — portalla (app.lovja.com) aynı aile.

   Üç kural:
   1) RENK BİLGİ TAŞIR, süs değildir. Pirinç yalnız "aktif/tıklanır" olanı
      işaretler. Mor ve yeşil yalnız ürün hattını (Ceraface / Ceramirr)
      işaretler — portaldaki şemada da aynı renkler kullanılıyor, hekim
      sitede gördüğü rengi panelde de görür.
   2) KENARLAR KESKİN, çizgiler saç teli. Yuvarlak köşe ve gölge yok;
      laboratuvarın işi de öyle — net kenar, temiz yüzey.
   3) BOŞLUK CÖMERT. Lüks, kalabalıkla değil boşlukla anlatılır.

   Şeritler (bölümler) sırayla grafit ve porselen. Işıltı koyu zeminde
   okunur — mücevher hep koyu kadifeye konur, sebebi budur.
   ========================================================================== */

/* ------------------------------------------------------------------- YAZI
   Playfair Display, KENDİ SUNUCUMUZDAN.

   Site uzun süre hiç yazı taşımıyordu: ziyaretçinin bilgisayarında ne varsa
   onu kullanıyordu. Mac'te zarif bir serif, Windows'ta Georgia, Android'de
   bambaşka bir şey — yani herkes başka bir site görüyordu. Lüks iddiası
   olan bir yerde bu bir tercih değil, kusurdur.

   Google'ın adresinden ÇEKİLMİYOR. Öyle olsaydı siteye giren her
   ziyaretçinin adresi Google'a bildirilirdi (KVKK açısından gereksiz bir
   risk) ve bir de dış bağımlılık eklenirdi — Google'a erişilemediği anda
   sitenin yazısı kaybolurdu.

   İKİ DOSYA, çünkü iki küme: "latin" gündelik harfler, "latin-ext" ise
   Türkçenin ğ Ğ ş Ş İ ç Ç ö Ö ü Ü harflerinin bulunduğu küme. Tarayıcı
   yalnız sayfada geçen harflerin dosyasını indirir; unicode-range bunu
   söyler. (ı harfi latin kümesindedir — Türkçeye özgü sanılır ama değil.)
   Toplam 33 KB; tek bir fotoğrafın onda biri.

   Inter'in latin-ext dosyası 23.08.2026'da kesildi: 879 gliften 228'e
   (84 KB → 20 KB). Kalan küme: Latin Extended-A (Türkçe, Lehçe, Çekçe,
   Macarca, Hırvatça, Romence ş/ţ dahil) + aksan işaretleri + para
   birimleri. Vietnamca, fonetik ve Afrika alfabeleri atıldı — o dillere
   gidilirse dosya yeniden üretilir (kaynak: Inter'in resmi sürümü, OFL).

   Yalnız 400 ağırlık var, italik yok — sitede serif başka türlü hiç
   kullanılmıyor. Yeni bir ağırlık gerekirse dosyası da eklenmeli, yoksa
   tarayıcı harfleri kendisi kalınlaştırır ve çirkin durur.

   Lisans: SIL Open Font License 1.1 — yazının yanında OFL.txt olarak
   duruyor, lisansın şartı bu. */
/* PLAYFAIR 600 — TAM KESİM. Şu an yalnız wordmark kullanıyor ama
   kısıtlı bir alt küme indirmedik: 35 KB ile bütün Latin ve Latin-ext
   geliyor, yani ş ğ ı İ ç ü ö de kalın yazılabiliyor. Alt küme 8 KB
   olurdu ama Türkçe harf içermezdi ve kalın Playfair'i başka bir yerde
   (başlık, alıntı) kullanmak isteyince yeniden uğraşmak gerekirdi.
   26 KB'lık fark bu esnekliğe değer — site zaten 218 KB yazı indiriyor. */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;
  font-display:swap;src:url(/s/yazi/playfair-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;
  font-display:swap;src:url(/s/yazi/playfair-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;
  font-display:swap;src:url(/s/yazi/playfair-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;
  font-display:swap;src:url(/s/yazi/playfair-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Inter — arayüzün yazısı. Ekran için tasarlanmış, kişiliği bilerek yok:
   serif konuşur, Inter susar. İkisi birbiriyle yarışmıyor.

   DEĞİŞKEN yazı: tek dosya bütün kalınlıkları taşıyor. Sitede üç kalınlık
   geçiyor (400 gövde · 500 · 600 vurgu ve etiketler); ayrı ayrı dosya
   indirilseydi altı dosya ve 175 KB olurdu, böyle iki dosya ve 130 KB.

   font-weight ARALIK olarak yazılmalı — tek sayı yazılırsa tarayıcı
   değişken ekseni kullanmaz, ara kalınlıkları kendisi taklit eder ve
   harfler şişer.

   Aralık 100-900, yani dosyanın taşıdığı her şey. Önce "400 600" yazılmıştı
   (sitenin o an kullandığı kalınlıklar). Ölçüldü: Google, istenen aralık ne
   olursa olsun AYNI dosyayı veriyor — 400..600 de, 100..900 da 130 KB.
   Yani dar yazmanın hiçbir kazancı yok, tek etkisi tuzak kurmak: ileride
   700'lük bir başlık eklendiğinde tarayıcı gerçek 700'ü kullanamaz, sahte
   kalın üretir ve harfler şişer. Dosya adı da bu yüzden "var" (değişken).

   Lisans: SIL Open Font License 1.1 — OFL-Inter.txt yanında. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;
  font-display:swap;src:url(/s/yazi/inter-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;
  font-display:swap;src:url(/s/yazi/inter-var-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-017F,U+0218-021B,U+02C7,U+02D8-02DD,U+0304,U+0308,U+0329,U+2020,
    U+20A0-20AB,U+20AD-20C0}

:root{
  --porselen:#F1F1EE;
  --porselen-2:#FBFBF9;
  --porselen-3:#E7E7E1;
  --grafit:#141618;
  --grafit-2:#0C0D0E;
  --grafit-3:#1C1F21;
  --pirinc:#A3834F;          /* açık zeminde */
  --pirinc-acik:#C9A76B;     /* koyu zeminde — aynı pirinç, okunur tonu */

  /* TURKUAZ — markanın ışık çekirdeği. Yeni bir renk DEĞİL: çizelgedeki
     alev topunun ortası ve altın tozu zaten bu aileden. Bugüne kadar
     yalnız sahnelerin içinde geçici değer olarak yaşıyordu; artık adı var.
     İki ton, pirinçle aynı sebeple: parlak turkuaz açık zeminde okunmuyor
     (ölçüldü: porselen üstünde 1,5 — eşik 4,5). Koyu zeminde 8,1. */
  --turkuaz:#1F7A73;         /* açık zeminde */
  --turkuaz-acik:#3FB8AF;    /* koyu zeminde */

  /* ürün hattı renkleri — portaldaki şema renkleriyle birebir aynı */
  --ceraface:#6B4E7D;
  --ceramirr:#3E7A57;

  /* Yedekler yazı inene KADAR görünür (font-display:swap). Bilerek
     Playfair'e en yakın oranlardaki sistem serifleri seçildi ki geçiş
     anında sayfa zıplamasın. */
  --serif:'Playfair Display',"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* --mono TANIMSIZDI ve beş yerde kullanılıyordu (zy-yil, zy-yiletiket,
     zaman-yil, karsilastir .ayrac, sözlük etiketi). Tanımsız bir var()
     `font:` KISAYOLUNUN TAMAMINI geçersiz kılar: punto, kalınlık ve satır
     aralığı sessizce düşüyor, etiketler 10 px yerine 16,5 px gövde
     yazısıyla çiziliyordu — yalnız harf aralığı ve renk tutuyordu.
     Sistemin kendi daktilo yazısı: dosya inmez, hız etkilenmez. */
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --olcu:1180px;
  --kose:3px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* DİKKAT — buraya overflow-x:hidden KOYULMAYACAK. Bir kez kondu ve açılış
   sahnesini öldürdü: gövdeyi ayrı bir kaydırma kabına çeviriyor, o zaman
   sayfa kayıyor ama yapışık sahne yerinde kalmıyor, kaydırma oranı hep
   sıfır çıkıyor ve ekran kapkara kalıyordu. Yanlara taşmayı .sahne kendi
   içinde zaten kırpıyor. */
body{margin:0;background:var(--grafit);color:var(--porselen);
  font-family:var(--sans);font-size:16.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
  letter-spacing:-.004em}
/* Menü ya da Hikâyemiz çekmecesi açıkken arka sayfa kaymasın.
   GEÇİCİ bir sınıf — kapanınca kalkar, yukarıdaki tuzağa düşmez. */
body.kilit{overflow:hidden}
img,svg{display:block;max-width:100%}
/* Fotoğrafların <img>'sinde artık gerçek genişlik/yükseklik yazılı — kutu
   yeri önceden ayrılsın, sayfa fotoğraf inerken zıplamasın diye. Ama o
   ölçüler PİKSEL olarak uygulanırsa dar ekranda fotoğraf ezilir; height:auto
   ölçüleri yalnız ORAN olarak kullandırır. Yalnız <picture> içindekiler:
   logo ve portal ekran görüntülerinin kendi kuralları var. */
picture img{height:auto}
a{color:inherit}

/* Metnin İÇİNDEKİ bağlantı — .bag
   Renk bilgi taşır, süs olmaz: ince amber alt çizgi "buradan başka bir
   sayfaya gidilir" der, başka bir şey demez. Yazının kendi rengi
   değişmez ki cümlenin akışı bozulmasın; üstüne gelince yazı da ambere
   döner. Çizgi harflerin altına oturur (offset), üstünü çizmez.
   --vurgu şeride göre kendini ayarlar: koyu zeminde açık pirinç,
   açık zeminde koyu pirinç. Ayrı bir renk tanımlamak gerekmez. */
.bag{color:inherit;text-decoration:underline;
  text-decoration-color:var(--vurgu);
  text-decoration-thickness:1px;
  text-underline-offset:.2em;
  transition:color .25s ease,text-decoration-color .25s ease}
.bag:hover,.bag:focus-visible{color:var(--vurgu)}

/* HASTA İZNİ NOTU — .mahremiyet
   Üstündeki video altyazısıyla arasında hiçbir görsel ayrım yoktu;
   yalnız punto ve renk kazara farklıydı (17px/15px) ve bu uyumsuzluk
   gibi okunuyordu. Artık fark KASITLI: yanındaki dikey amber çizgi bunun
   anlatının parçası değil, ayrı bir taahhüt olduğunu okumadan önce
   söylüyor. Çizgi, bölüm kenarındaki yatay amber çizginin dikey
   kardeşi — aynı pirinç, iki ucunda sönüyor. */
.mahremiyet{position:relative;padding-left:20px;margin-top:30px}
.mahremiyet::before{content:"";position:absolute;left:0;top:2px;bottom:2px;
  width:1px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,
             rgba(201,167,107,.5) 14%,rgba(224,196,140,.85) 50%,
             rgba(201,167,107,.5) 86%,transparent)}

/* YATAY ZAMAN ÇİZELGESİ — .zy
   Altta yıl ekseni, üstünde olaylar, üstte seçilenin ayrıntısı.
   Olayların birbirine UZAKLIĞI bilgidir: 14 ve 15 Mayıs 2024 eksende
   neredeyse üst üste düşüyor ve "bir gün sonra" cümlesini yazmadan
   gösteriyor. Renk yine bilgi taşıyor — amber çizgi zamanın kendisi,
   noktalar olaylar, çubuk bir süre (pandemi bir günde olmadı). */
.zy{margin-top:30px;position:relative}

/* PANEL, AİT OLDUĞU İŞARETİN ÜSTÜNE DEMİRLENİR.
   Önce sabit bir kutuydu ve her seçimde metin aynı yerde duruyordu; okurun
   gözü eksenle metin arasında gidip geliyordu. Artık panel işaretin x
   konumuna oturuyor, fotoğraf da tam o noktanın üzerine geliyor.
   Kenara taşmasını JS engelliyor (arayuz.js → sinirla). */
/* PANEL ORTADA VE SABİT. Bir ara işaretin üstüne demirleniyordu; dokuz
   olayla birlikte metin her seçimde sağa sola zıplıyor ve okumak zorlaşıyordu.
   Yazı hep aynı yerde duruyor — değişen yalnız içeriği. */
/* 300 px İDİ VE TAM DOLUYORDU. Fotoğraflı panel kutunun boyuna birebir
   eşitti (ölçüldü: 300/300); paneller alta yaslandığı için bir satır daha
   uzasa yukarı taşıp giriş paragrafının üstüne biniyordu. Altyazı büyüyünce
   sınıra dayandı. Pay bırakıldı. */
.zy-paneller{position:relative;min-height:344px;text-align:center}
.zy-panel{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;
  animation:zyGir .42s cubic-bezier(.2,.8,.2,1) both}
/* HIDDEN'I GERİ KAZAN. Paneller [hidden] özniteliğiyle gizleniyor ama
   yukarıdaki 'display:flex' tarayıcının [hidden]{display:none} kuralını
   EZİYOR — on panelin hepsi üst üste çiziliyordu. Öznitelik doğru
   konuyordu, görsel sonuç yanlıştı; 'hidden' özelliğini ölçmek bu kusuru
   göstermez, hesaplanmış 'display' ölçülmeli. */
.zy-panel[hidden]{display:none}
@keyframes zyGir{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* TARİH — sayfanın iddiası tarihte ("anlatıyla değil, tarihle belli olur"),
   o yüzden puntosu da onu taşımalı. 10,5 px'te başlığın üstünde bir süs
   satırı gibi duruyordu; büyütülünce başlıkla birlikte okunan bir çift
   oluyor. Harf aralığı da hafif açıldı — mono yazıda punto büyüyünce
   harfler sıkışık görünüyor. (12.08.2026) */
.zy-yil{font:600 clamp(12.5px,1.2vw,15px)/1.45 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--vurgu)}
.zy-ad{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.4vw,28px);
  letter-spacing:-.018em;margin:7px 0 8px;color:var(--yazi)}
.zy-metin{color:var(--ikincil);font-size:15px;line-height:1.5}
.zy-metin > p{margin:0 auto;max-width:58ch}
/* ALTYAZI RESMİN ALTINDA DEĞİL, YANINDA.
   9,5 px sıkışık büyük harf okunmuyordu; büyütünce de 210 px'in altına
   sığmayıp üç satıra kırılıyordu. Yana alınca hem punto büyüdü hem satır
   kırılmadı: panelin yatay yeri zaten boştu. İkisi birlikte ortalanıyor —
   çerçeve kadar geniş bir kutu değil, içeriği kadar (width:max-content). */
.zy-foto{margin:16px auto 0;width:max-content;max-width:100%;cursor:zoom-in;
  display:flex;align-items:center;gap:18px;text-align:left}
.zy-foto picture{flex:0 0 210px;width:210px}
.zy-foto figcaption{flex:0 1 250px;
  font:500 13px/1.5 var(--sans);letter-spacing:.005em;color:var(--vurgu)}

/* ---- eksen: en altta ---- */
.zy-eksen{position:relative;height:76px;margin-top:52px}
.zy-cizgi{position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(to right,transparent,
    rgba(201,167,107,.5) 4%,rgba(224,196,140,.85) 50%,
    rgba(201,167,107,.5) 96%,transparent)}
.zy-nokta,.zy-aralik{position:absolute;top:0;padding:0;border:0;
  background:none;cursor:pointer}
/* NOKTALAR ÇUBUĞUN ÜSTÜNDE. Pandemi çubuğu %0'dan başlayıp sayfanın
   yarısını kaplıyor ve DOM'da sonra geldiği için ilk iki noktanın
   üstünü örtüyordu — o noktalara TIKLANAMIYORDU. Ölçüldü: çubuk x=434,
   ilk nokta x=432. Sıralamayı z-index çözüyor. */
.zy-nokta{left:var(--x);width:24px;height:24px;transform:translate(-50%,-50%);
  z-index:2}
/* ÇAKIŞAN NOKTA ÇİZGİNİN ÜSTÜNE ÇIKAR.
   Kalıp bu sınıfı üretiyordu ama KURALI HİÇ YAZILMAMIŞTI: 14 ve 15 Mayıs
   2024 eksende %0,05 aralıkla, yani yarım pikselle düşüyor ve 24 px'lik
   iki hedef kutusu neredeyse tümüyle örtüşüyordu — DOM'da sonra gelen
   15 Mayıs, 14 Mayıs'ın üstünü kapatıyor ve başvuru noktasına
   TIKLANAMIYORDU. Yatay konum (yani tarih) bozulmadan yalnız dikeyde
   ayrılıyorlar. Çizginin ÜSTÜ artık yalnız buna ayrıldı: süre çubukları
   aşağı indi, yukarısı "bu ikisi neredeyse aynı gün" demek oldu. */
.zy-nokta--kaydir{margin-top:-15px}
.zy-nokta::before{content:"";position:absolute;left:50%;top:50%;
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--zemin);border:1px solid var(--vurgu);
  box-shadow:0 0 0 3px var(--zemin);
  transition:background .3s ease,transform .3s ease}
.zy-nokta:hover::before,.zy-nokta:focus-visible::before{transform:scale(1.3)}
.zy-nokta[aria-selected="true"]::before{background:var(--vurgu);transform:scale(1.4)}
/* Seçili işaretin çevresinde yayılan halka — hangisinin okunduğu uzaktan
   belli olsun. Otomatik akışta gözü de o noktaya çeker. */
.zy-nokta[aria-selected="true"]::after{content:"";position:absolute;
  left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;border:1px solid var(--vurgu);
  animation:zyHalka 2.4s ease-out infinite}
@keyframes zyHalka{from{transform:scale(1);opacity:.55}
  to{transform:scale(3.2);opacity:0}}
/* ARALIK: nokta değil çubuk — süreyi biçim anlatıyor. */
/* UÇLAR SÖNEREK BİTER, KESİLMEZ. Çubuk düz dolguyla ve 3px köşeyle
   bitiyordu; ışık gibi değil, cetvelle kesilmiş bant gibi duruyordu.
   Maske ile iki ucu şeffaflaşıyor — dolgunun kendisi değişmediği için
   hover/seçili renk geçişi aynen çalışmaya devam ediyor. Oran yüzdeyle
   verildi: kısa çubukta da uzun çubukta da sönüm dengeli kalsın. */
.zy-aralik{left:var(--x);width:var(--boy);height:14px;transform:translateY(-50%);
  z-index:1;
  border-radius:3px;background:rgba(201,167,107,.2);transition:background .3s ease;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.zy-aralik:hover,.zy-aralik[aria-selected="true"]{background:rgba(201,167,107,.4)}
/* ÇUBUKLAR ÇİZGİNİN ALTINDA, iki katta (örtüşen aralıklar üst üste
   binmesin). Önce yukarıdaydılar ve olayların üstünü kalabalıklaştırıp
   çizgiyi ikinci plana atıyorlardı. Aşağıda, yılların hemen üstünde,
   zeminin üzerine oturuyorlar: süre orada okunuyor, an yukarıda. */
.zy-aralik--k1{margin-top:16px}
.zy-aralik--k2{margin-top:34px}
/* Etiket çubuğun İÇİNDE. Dışarı yazılınca iki aralığın etiketi aynı yere
   düşüyordu; içeride her biri kendi çubuğuyla birlikte geziyor. */
.zy-etiket{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  white-space:nowrap;font:600 9px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--vurgu);opacity:.9;pointer-events:none}
.zy-gizli{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ZEMİN VE GÖLGELER — çizelge boşlukta durmuyor, bir yüzeyin üstünde.
   Alev topu bir ışık kaynağı; altındaki zemine bir havuz düşürüyor ve
   noktalar zemine gölge bırakıyor. Havuz topla birlikte kayıyor, yani
   ışık gerçekten oradan geliyormuş gibi duruyor.
   Renk yine bilgi taşıyor: havuzun merkezi turkuaz, kenarı amber —
   alevin kendi geçişiyle aynı. */
/* Zemin de bir ışık yüzeyi: yanlardan sönerek bitmeli. Önce -4%/104%
   arasında düz kesiliyordu, üstündeki içsel çizgiyle birlikte kenarda
   keskin bir basamak oluşuyordu. Dikey geçiş zaten vardı, yatay olan
   eksikti. */
.zy-zemin{position:absolute;left:-4%;right:-4%;top:-2px;height:68px;
  pointer-events:none;z-index:0;border-radius:3px;
  background:linear-gradient(to bottom,
    rgba(255,255,255,.030), rgba(255,255,255,.012) 42%, transparent);
  /* Zeminin üst kenarındaki hat AMBER oldu (önce beyazdı, .05 opaklıkta).
     Eksen çizgisinin hemen altında duruyor; iki farklı renkte iki hat
     yerine ışığın kendi renginde tek bir çift. (12.08.2026) */
  box-shadow:inset 0 1px 0 rgba(201,167,107,.22);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
/* Işık havuzu — topun zemine düşürdüğü aydınlık. */
.zy-havuz{position:absolute;left:var(--x,0%);top:0;width:340px;height:66px;
  margin-left:-170px;pointer-events:none;z-index:0;
  transition:left .6s cubic-bezier(.22,.75,.2,1);
  background:radial-gradient(ellipse 50% 100% at 50% 0%,
    rgba(92,225,215,.10) 0%, rgba(150,210,180,.075) 22%,
    rgba(224,196,140,.06) 44%, rgba(201,167,107,.03) 66%, transparent 84%)}
/* Noktalar zemine gölge bırakır — yüzeyin üstünde durdukları belli olsun. */
.zy-nokta::before{box-shadow:0 0 0 3px var(--zemin), 0 6px 7px rgba(0,0,0,.55)}
.zy-aralik{box-shadow:0 5px 9px rgba(0,0,0,.4)}

/* ALEV TOPU — çizelgede NEREDE olduğumuzu gösterir.
   Ortasında turkuaz bir çekirdek, dışa doğru ambere dönüyor: markanın
   kendi ışık geçişi (amber çizgideki parıltıyla aynı aile). Işınlar
   yavaşça dönüyor, çekirdek nefes alıyor.
   Seçim değişince kayarak gidiyor — atlamıyor. Zaman çizelgesinde
   hareketin kendisi bilgi: nereden nereye gittiğini görüyorsunuz. */
.zy-alev{position:absolute;left:var(--x,0%);top:0;width:12px;height:12px;
  transform:translate(-50%,-50%);pointer-events:none;z-index:3;
  transition:left .6s cubic-bezier(.22,.75,.2,1);
  animation:zySuzul 7s ease-in-out infinite}
/* DURURKEN DE CANLI. Sabit duran bir top donuk görünüyordu; uçan bir şey
   hiç tam durmaz. Yavaş, düzensiz bir salınım — göz hareketi fark eder
   ama takip etmez. Kaydırma 'left' ile olduğu için burada transform
   serbest; -%50 kaydırmaları korunuyor, yoksa top merkezden kaçar. */
@keyframes zySuzul{
  0%,100%{transform:translate(-50%,-50%)}
  22%{transform:translate(calc(-50% + 2px),calc(-50% - 3px))}
  48%{transform:translate(calc(-50% - 2px),calc(-50% + 2px))}
  74%{transform:translate(calc(-50% + 1px),calc(-50% + 3px))}}
/* Çekirdek + hale */
.zy-alev::before{content:"";position:absolute;left:50%;top:50%;
  width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;
  background:radial-gradient(circle,
    rgba(120,240,228,.95) 0%, rgba(92,225,215,.55) 9%,
    rgba(170,215,175,.34) 20%, rgba(224,196,140,.28) 32%,
    rgba(201,167,107,.16) 46%, rgba(201,167,107,.06) 64%, transparent 78%);
  animation:zyNefes 3.4s ease-in-out infinite}
/* Işınlar — dar diliml* bir konik desen, dışa doğru sönüyor */
.zy-alev::after{content:"";position:absolute;left:50%;top:50%;
  width:118px;height:118px;margin:-59px 0 0 -59px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,
    rgba(224,196,140,.30) 0deg 1.6deg, transparent 1.6deg 13deg);
  -webkit-mask-image:radial-gradient(circle,transparent 16%,#000 34%,transparent 72%);
  mask-image:radial-gradient(circle,transparent 16%,#000 34%,transparent 72%);
  animation:zyDon 26s linear infinite}
@keyframes zyNefes{0%,100%{transform:scale(1);opacity:.92}
  50%{transform:scale(1.13);opacity:1}}
@keyframes zyDon{to{transform:rotate(360deg)}}

/* ── HACİMSEL TOP — “Dönen taç” ─────────────────────────────────
   Yukarıdaki iki daire ışığın RESMİ; bu ise hesabı. Ekran kartı her
   piksel için gürültü katmanlarını toplayıp merkeze doğru sıcaklığa
   çeviriyor: içeride turkuaz bir çekirdek, dışarıda kendi başına dönen
   amber bir taç. İkisinin arasındaki boşluk topun iki renkli olduğunu
   söylüyor — CSS'le çizilenin en zayıf yanı buydu, ışınlar tam eşit
   aralıklı ve sabit hızda dönüyor, göz "çizilmiş" diyordu.

   YEDEK OLARAK CSS KALIYOR. Sınıf ancak gölgelendirici GERÇEKTEN
   derlenip bağlandığında konuyor (arayuz.js). WebGL yoksa, ekran kartı
   reddederse ya da betik hiç yüklenmezse aşağıdaki iki daire yerinde
   duruyor ve ziyaretçi bir eksiklik görmüyor.
   Konum, salınım ve kayma geçişi .zy-alev'in kendisinde kalıyor: tuval
   onun İÇİNE giriyor, yani kayma ve süzülme aynen sürüyor. */
.zy-alev--gl::before,.zy-alev--gl::after{display:none}
.zy-alev canvas{position:absolute;left:50%;top:50%;max-width:none;
  pointer-events:none;transform:translate(-50%,-50%)}

/* PERİ TOZU — top ilerlerken arkasında bırakılan taneler.
   Renkler altın tozu paletinden (turkuaz · amber ağırlıklı, ara sıra mor
   ve beyaz flaş) ve karışım TOPLAMALI: üst üste gelen taneler sönmez,
   parlar. Taneler kısa ömürlü; iz kalıcı bir çizgi değil, arkada kalan
   bir parıltı olmalı. */
.zy-toz{position:absolute;top:0;width:3px;height:3px;border-radius:50%;
  pointer-events:none;z-index:2;
  /* ÖYLE BİR DEĞER YOK. 'lighter' tuvalin (canvas) toplamalı karışımının
     adı; CSS'te karşılığı 'plus-lighter'. Tarayıcı tanımadığı değeri
     sessizce atıyor ve karışım 'normal' kalıyordu — ölçüldü, üst üste
     gelen taneler aylardır parlamak yerine birbirini örtüyormuş.
     Önce 'screen' yazılıyor: plus-lighter'ı bilmeyen tarayıcı onda
     kalsın, ikisi de toplamaya yakın davranır. */
  mix-blend-mode:screen;
  mix-blend-mode:plus-lighter;
  transform:translate(-50%,-50%);
  animation:zyToz var(--omur,900ms) ease-out forwards}
@keyframes zyToz{
  from{opacity:.95;transform:translate(-50%,-50%) scale(1)}
  to{opacity:0;
     transform:translate(calc(-50% + var(--kx,0px)),calc(-50% + var(--ky,0px))) scale(.25)}}

/* İLERİ / GERİ OKLARI — çizginin iki ucunda. */
/* OKLAR İKİ KAT — 30px'te eksenin yanında iliştirilmiş gibi duruyorlardı;
   çizelgenin tek gezinme aracı onlar, dokunma hedefi de büyüdü (60px,
   telefonda parmak ölçüsü). Ok işareti de aynı oranda büyütüldü, yoksa
   büyük dairenin içinde küçük bir tik gibi kalıyor. Boşluk 42 → 62px:
   daire büyüyünce eksene yapışmasın. (12.08.2026) */
.zy-ok{position:absolute;top:0;transform:translateY(-50%);
  width:60px;height:60px;padding:0;border:1px solid var(--cizgi);
  border-radius:50%;background:var(--zemin);color:var(--vurgu);
  font:400 30px/1 var(--sans);cursor:pointer;z-index:4;
  display:grid;place-items:center;
  transition:border-color .25s ease,color .25s ease,transform .25s ease}
.zy-ok:hover,.zy-ok:focus-visible{border-color:var(--vurgu);transform:translateY(-50%) scale(1.08)}
.zy-ok--geri{left:-62px}
.zy-ok--ileri{right:-62px}
/* Dar ekranda 60px iki yandan 124px yiyor; orada eski ölçüye dönülüyor. */
@media (max-width:720px){
  .zy-ok{width:34px;height:34px;font-size:18px}
  .zy-ok--geri{left:-38px}
  .zy-ok--ileri{right:-38px}
}
@media(max-width:1100px){.zy-ok--geri{left:-34px}.zy-ok--ileri{right:-34px}}

@media(prefers-reduced-motion:reduce){
  .zy-alev{transition:none;animation:none}
  .zy-havuz{transition:none}
  .zy-alev::before,.zy-alev::after{animation:none}
  .zy-toz{display:none}
}
/* Yıllar en altta — üstlerinde süre çubukları, onun da üstünde çizgi. */
.zy-yillar{position:absolute;left:0;right:0;top:50px;height:1em}
.zy-yiletiket{position:absolute;left:var(--x);transform:translateX(-50%);
  font:600 10px/1 var(--mono);letter-spacing:.1em;color:var(--silik)}

/* OTOMATİK AKIŞ — kullanıcı hiç dokunmasa da çizelge kendi kendine ilerler.
   Çizginin üstünde ince bir amber dolum, sıradaki olaya kalan süreyi
   gösteriyor. İlk tıklama/odak akışı durdurur: kullanıcı devraldıysa
   altından çekmeyiz. */
.zy-akis{position:absolute;left:0;top:0;height:1px;width:0;
  background:var(--vurgu);opacity:.75}
.zy--oynuyor .zy-akis{animation:zyAkis var(--sure,4.6s) linear forwards}
@keyframes zyAkis{from{width:0}to{width:100%}}
@media(prefers-reduced-motion:reduce){
  .zy-panel{animation:none}
  .zy-nokta[aria-selected="true"]::after{animation:none;opacity:0}
  .zy--oynuyor .zy-akis{animation:none;width:0}
}

/* TELEFONDA ÇİZGİ DİKEY — ziyaretçinin %43'ü mobil.
   Yatay eksen dar ekranda okunmuyor: on olay 340 pikselin içine sıkışıyor
   ve hiçbirine parmakla isabet edilemiyor. Onun yerine çizginin kendisi
   DÖNÜYOR — aynı amber omurga, aynı noktalar, aynı süre çubukları, yalnız
   dikey. Bilgi kaybolmuyor, yönü değişiyor: yukarıdan aşağı okunuyor.
   Hepsi açık kalıyor, tıklamaya gerek yok (arayuz.js telefonda akışı
   başlatmıyor). */
@media(max-width:760px){
  .zy-eksen{display:none}
  .zy-paneller{position:relative;height:auto;min-height:0;text-align:left;
    padding-left:26px}
  /* Omurga: yatay çizginin birebir aynısı, yalnız aşağı bakıyor. */
  .zy-paneller::before{content:"";position:absolute;left:0;top:8px;bottom:8px;
    width:1px;pointer-events:none;
    background:linear-gradient(to bottom,transparent,
      rgba(201,167,107,.5) 5%,rgba(224,196,140,.85) 50%,
      rgba(201,167,107,.5) 95%,transparent)}
  .zy-panel{display:block!important;position:relative;width:auto;transform:none;
    animation:none;inset:auto;padding:0 0 30px}
  .zy-panel:last-child{padding-bottom:0}
  /* AN — omurgaya oturan nokta. Zeminden halkası var ki çizgiyi kessin. */
  .zy-panel::before{content:"";position:absolute;left:-30.5px;top:7px;
    width:9px;height:9px;border-radius:50%;
    background:var(--vurgu);box-shadow:0 0 0 3px var(--zemin)}
  /* SÜRE — nokta değil çubuk. Yatayda olduğu gibi biçim bilgiyi taşıyor:
     pandemi bir günde olmadı, o yüzden panelin boyunca uzuyor. */
  .zy-panel--aralik::before{left:-28.5px;top:8px;bottom:22px;
    width:5px;height:auto;border-radius:3px;
    background:rgba(201,167,107,.4)}
  /* Fotoğraf ve altyazısı sola, metinle aynı hizaya. Dar ekranda yan yana
     durmuyorlar — ikisi de daralıp okunmaz oluyordu; altyazı altına iner. */
  .zy-metin > p{margin-left:0}
  .zy-foto{flex-direction:column;align-items:flex-start;gap:10px;
    width:min(82vw,300px);max-width:100%;margin-left:0}
  .zy-foto picture{flex:none;width:100%}
  .zy-foto figcaption{flex:none;max-width:100%}
}

/* ZAMAN ÇİZELGESİ — .zaman
   Solda amber bir omurga, üzerinde olaylar. Renk yine bilgi taşıyor:
   omurga tarihin kendisi, noktalar olaylar, ÇUBUK ise bir aralık
   (pandemi bir günde olmadı — nokta olarak çizmek yanlış olurdu).

   İÇERİK VARSAYILAN OLARAK AÇIK. Betik yüklenmezse ya da hata verirse
   ayrıntılar görünür kalır; kapanma davranışını betik ekliyor
   (.zaman--acilir). Böylece hiçbir koşulda içerik gizli kalmıyor —
   arama motoru ve okuyucu her hâlde okuyor. */
.zaman{list-style:none;margin:26px 0 0;padding:0 0 0 30px;position:relative}
.zaman::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(to bottom,transparent,
    rgba(201,167,107,.55) 6%,rgba(224,196,140,.8) 50%,
    rgba(201,167,107,.55) 94%,transparent)}
.zaman-oge{position:relative;padding:0 0 22px}
.zaman-oge:last-child{padding-bottom:0}
/* Olay noktası — omurganın üstünde oturur. */
.zaman-oge::before{content:"";position:absolute;left:-29.5px;top:.62em;
  width:9px;height:9px;border-radius:50%;
  background:var(--zemin);border:1px solid var(--vurgu);
  box-shadow:0 0 0 3px var(--zemin)}
/* ARALIK: nokta değil çubuk. Süreyi biçim anlatıyor. */
.zaman-oge--aralik::before{top:.5em;bottom:1.4em;height:auto;
  width:3px;left:-27px;border-radius:2px;
  background:var(--vurgu);border:0;opacity:.5}
.zaman-bas{display:block;width:100%;text-align:left;background:none;border:0;
  padding:0;cursor:pointer;color:inherit;font:inherit}
.zaman-yil{display:block;font:600 10.5px/1.4 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--vurgu)}
.zaman-ad{display:block;font-family:var(--serif);font-weight:400;font-size:21px;
  letter-spacing:-.012em;color:var(--yazi);margin-top:2px;
  transition:color .25s ease}
.zaman-bas:hover .zaman-ad,.zaman-bas:focus-visible .zaman-ad{color:var(--vurgu)}
.zaman-govde{color:var(--ikincil);font-size:15.5px;line-height:1.55;
  max-width:56ch;margin-top:6px}
.zaman-govde p{margin:0}
/* Kapanabilir hâl — YALNIZ betik bu sınıfı koyunca geçerli.
   0fr → 1fr geçişi içeriğin yüksekliğini bilmeye gerek bırakmıyor. */
.zaman--acilir .zaman-ic{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .34s cubic-bezier(.2,.8,.2,1)}
.zaman--acilir .zaman-ic > .zaman-govde{overflow:hidden;margin-top:0}
.zaman--acilir .zaman-oge.acik .zaman-ic{grid-template-rows:1fr}
.zaman--acilir .zaman-oge.acik .zaman-govde{margin-top:6px}
/* Açık olanın noktası doluyor — hangisini okuduğun belli olsun. */
.zaman--acilir .zaman-oge.acik::before{background:var(--vurgu)}
.zaman--acilir .zaman-oge--aralik.acik::before{opacity:.85}
@media(prefers-reduced-motion:reduce){
  .zaman--acilir .zaman-ic{transition:none}}

/* ÖTEKİ İKİSİ — ürün sayfasının kapanış şeridi.
   Renk bilgi taşır: her kartın sol kenarındaki çizgi o ürünün KENDİ
   rengi (--hat), yani okur daha adı okumadan hangi ürüne baktığını
   bilir. Kartın tamamı bağlantıdır; içine ayrı bir buton konmaz. */
.devam-kare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
@media(max-width:640px){.devam-kare{grid-template-columns:1fr}}
.devam-kart{display:flex;flex-direction:column;gap:9px;
  padding:26px 24px 22px;text-decoration:none;
  border:1px solid var(--cizgi);border-left:2px solid var(--hat);
  border-radius:var(--kose);background:rgba(255,255,255,.014);
  transition:border-color .3s ease,background .3s ease,transform .3s ease}
.devam-kart:hover,.devam-kart:focus-visible{
  background:rgba(255,255,255,.038);border-color:var(--cizgi-2);
  border-left-color:var(--hat);transform:translateY(-2px)}
.devam-ad{font-family:var(--serif);font-weight:400;font-size:27px;
  letter-spacing:-.015em;color:var(--yazi)}
.devam-not{color:var(--ikincil);font-size:15.5px;line-height:1.5}
.devam-git{margin-top:4px;font:600 11px/1 var(--sans);
  text-transform:uppercase;letter-spacing:.14em;color:var(--vurgu)}

/* --------------------------------------------------------------- şeritler */
/* scroll-margin-top: üst bar SABİT durduğu için menüden bir bölüme
   atlayınca başlık barın altında kalıyordu. */
.serit{position:relative;background:var(--zemin);color:var(--yazi);
  padding:clamp(74px,10vw,148px) 0;scroll-margin-top:72px}
.serit--grafit{--zemin:var(--grafit);--yazi:#F0F0EC;--ikincil:#AAB0B6;
  --silik:#828990;--cizgi:#2A2E32;--cizgi-2:#22262A;--vurgu:var(--pirinc-acik)}
.serit--grafit-2{--zemin:var(--grafit-2);--yazi:#F0F0EC;--ikincil:#AAB0B6;
  --silik:#828990;--cizgi:#26292D;--cizgi-2:#1E2124;--vurgu:var(--pirinc-acik)}
.serit--porselen{--zemin:var(--porselen);--yazi:var(--grafit);--ikincil:#454B52;
  --silik:#62686F;--cizgi:#D3D3CC;--cizgi-2:#E1E1DB;--vurgu:var(--pirinc)}
.serit--porselen-2{--zemin:var(--porselen-3);--yazi:var(--grafit);--ikincil:#454B52;
  --silik:#62686F;--cizgi:#CBCBC3;--cizgi-2:#DBDBD4;--vurgu:var(--pirinc)}
.ic{max-width:var(--olcu);margin:0 auto;padding:0 24px}
.dar{max-width:760px}

/* --------------------------------------------------------------- tipografi */
.ust{font:600 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.2em;
  color:var(--vurgu);margin:0 0 22px;display:flex;align-items:center;gap:12px}
/* Etiketten sonraki çizgi: pirinçten başlar, sağa doğru söner.
   Bölüm etiketinin bittiği yeri gösteren tek işaret; sitede bu kalıbın
   göründüğü her yerde aynı. */
.ust::after{content:"";flex:1;height:1px;max-width:120px;
  background:linear-gradient(to right,var(--pirinc),transparent)}
.dev{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6.4vw,84px);
  line-height:1.02;letter-spacing:-.028em;margin:0}
/* h1'in TABAN kuralı. h2 ve h3 serif alıyordu, h1 hiç yazılmamıştı —
   sınıfsız her h1 gövdeden Inter'i miras alıp sayfanın ana başlığını
   sans gösteriyordu. Kapsayıcı kurallar (.serit--kapak h1,
   .urun-kapak-ic h1, main.belge h1) daha güçlü olduğu için onlar
   etkilenmez; bu yalnız boşta kalanı doldurur.
   <em> ikinci satırı soluklaştırır — ürün sayfalarındaki örüntünün aynısı. */
h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5.2vw,64px);
  line-height:1.05;letter-spacing:-.024em;margin:0 0 18px;text-wrap:balance}
h1 em{font-style:normal;color:var(--silik)}
h2,.h2{font-family:var(--serif);font-weight:400;font-size:clamp(29px,3.9vw,50px);
  line-height:1.08;letter-spacing:-.022em;margin:0 0 26px}
h3{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:-.015em;margin:0 0 8px}

/* LOVJA KALIBI — lovja.atlas · lovja.portal · lovja.smile · lovja.studio.
   Hepsi tek bir yazımın üyesi: ad Playfair serif, ".uzantı" ayrı tonda.

   RENK BURADA BİLGİ TAŞIYOR — süs değil (12.08.2026, Atakan'ın kararı):

     "Lovja"    → HER ZAMAN turkuaz. Markanın ışık çekirdeğinin rengi;
                  çizelgedeki alev topunun ortası da, altın tozu da bu
                  aileden. Nerede geçerse geçsin aynı: bu, markanın adı.

     ".uzantı"  → GRİ ise sadece bir addır, gidilecek bir yer değil.
                  AMBER ise tıklanabilir — o uzantıya gidersiniz.

   Yani uzantının rengi ziyaretçiye "burası bir kapı mı" diye söylüyor.
   Amber sitede zaten "dokunulabilir" demek; bu kural onu bozmuyor,
   aksine metin içinde de aynı anlamı sürdürüyor.

   Açık zeminde iki ton da koyulaşıyor (bkz. --turkuaz / --pirinc):
   parlak turkuaz porselen üstünde okunmuyor, ölçüldü. */
/* "Lovja" KALIN, ".uzantı" normal — Atakan'ın kararı (12.08.2026).
   Öncesinde tersiydi: ad 400, uzantı 500. Üstelik 500 gerçek bir kesim
   değildi, tarayıcı harfleri yapay kalınlaştırıyordu — serifte bu belli
   oluyor. Artık ad gerçek 600 kesimiyle, uzantı gerçek 400'le yazılıyor;
   sahte kalınlık ortadan kalktı.
   Uzantının ailesi AÇIKÇA yazılmalı: 'Playfair Kalip' ailesinde yalnız
   600 var, 400 istense de tarayıcı o ailedeki en yakını (600) seçerdi. */
.marka-ad{font-family:var(--serif);font-weight:600;
  letter-spacing:-.01em;color:var(--turkuaz-acik);
  text-transform:none;font-style:normal}
/* UZANTI INTER — ad serif, uzantı sans. İki ayrı şey olduklarını
   tipografi söylüyor: "Lovja" markanın adı, ".atlas" gittiğiniz yer.
   PUNTO KÜÇÜLTÜLÜYOR: Inter'in gövde yüksekliği Playfair'den büyük,
   aynı puntoda uzantı adı bastırıyordu. 0.86 ile optik olarak eşitlendi
   (ölçüldü, aşağıdaki nota bakın). */
.marka-ad i{font-family:var(--sans);font-style:normal;font-weight:400;
  font-size:.86em;letter-spacing:.005em;color:var(--silik,#8A8A84)}
/* Bağlantıysa uzantı ambere döner — gidilecek bir yer var.
   İKİ HÂLİ DE YAZILMALI: bazen wordmark bağlantının İÇİNDE
   (<a class="tus"><span class="marka-ad">), bazen bağlantının KENDİSİ
   (<a class="marka-ad">). Yalnız ilki yazılıydı; alt bilgideki iki
   portal bağlantısında uzantı gri kalıyordu. */
a .marka-ad i,button .marka-ad i,
a.marka-ad i,button.marka-ad i{color:var(--pirinc-acik)}
/* Açık zeminli şeritlerde her ikisi de koyu tonuna geçer. */
.serit--porselen .marka-ad,.serit--porselen-2 .marka-ad,
body.kadife .marka-ad{color:var(--turkuaz)}
.serit--porselen a .marka-ad i,.serit--porselen-2 a .marka-ad i,
.serit--porselen a.marka-ad i,.serit--porselen-2 a.marka-ad i,
body.kadife a .marka-ad i,body.kadife a.marka-ad i{color:var(--pirinc)}
.lead{font-size:clamp(17px,1.5vw,20.5px);line-height:1.56;color:var(--ikincil);
  max-width:35em;margin:22px 0 0}
p{margin:0 0 20px;color:var(--ikincil)}
p:last-child{margin-bottom:0}
b,strong{color:var(--yazi);font-weight:600}
.serit p a{color:var(--vurgu);text-underline-offset:3px}

/* ----------------------------------------------------------------- düğmeler */
.tuslar{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.tus{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;
  border:1px solid transparent;border-radius:var(--kose);text-decoration:none;
  font:600 13.5px/1 var(--sans);letter-spacing:.015em;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s}
.tus--dolu{background:var(--yazi);color:var(--zemin)}
.tus--dolu:hover{background:var(--vurgu);color:#141618}
.tus--hayalet{border-color:var(--cizgi);color:var(--yazi)}
.tus--hayalet:hover{border-color:var(--vurgu);color:var(--vurgu)}
.tus svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7}

/* ------------------------------------------------------------------ dil seçimi
   Üst barda ve menü örtüsünün altında. Barın kendisi sahne.css'te
   (.tepe) — klasik sitenin ayrı bir üst barı YOK, tek bar var. */
.dil{display:flex;gap:2px;align-items:center;font:600 11.5px/1 var(--sans);
  letter-spacing:.1em;color:#7E858C}
.dil a{padding:6px 7px;border-radius:var(--kose);text-decoration:none}
.dil a[aria-current]{color:#F0F0EC;background:#22262A}
.dil a:hover{color:#F0F0EC}

/* diş ışık sahnesi — sitenin imzası. Ürün kartlarının içinde durur.
   Adı "isik-sahne": açılıştaki büyük sahne de ".sahne" ve ikisi aynı
   sayfada; aynı adı taşısalardı biri ötekinin ölçülerini ezerdi. */
.isik-sahne{position:relative;display:grid;place-items:center;min-height:380px}
.isik-sahne svg{width:100%;height:auto;max-width:520px;overflow:visible}
/* Gerçek diş modeli: tuval kutuyu tam doldurur. Model inene kadar
   görünmez duruyor — yarım çizilmiş tek bir kare gösterilmiyor.

   width:100% ŞART: tuval konumlandırılmış olduğu için akıştan çıkıyor
   ve kutuda genişliği belirleyecek başka bir şey kalmıyor — kutu bir
   piksele büzülüyordu (ölçüldü: 1×380). */
.isik-sahne{width:100%}
.isik-sahne canvas{position:absolute;inset:0;width:100%;height:100%;
  display:block;opacity:0;transition:opacity .9s ease}
.isik-sahne.dis-geldi canvas{opacity:1}

/* ------------------------------------------------------------------- hikâye
   Bu metinler artık bir şeritte değil, SAĞDAN AÇILAN çekmecede
   (.cekmece — sahne.css). Aşağıdaki tipografi orada kullanılıyor. */
.alinti{font-family:var(--serif);font-size:clamp(23px,2.7vw,34px);line-height:1.28;
  letter-spacing:-.018em;color:var(--yazi);margin:34px 0;padding-left:26px;
  border-left:2px solid var(--vurgu)}
.imza{font:600 12px/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--silik);margin-top:28px}
/* ÇEKMECENİN SONUNDAKİ BAĞ — hikâyeyi tarihe bağlar.
   Hikâye anlatı, çizelge kayıt: biri "böyle oldu" der, öteki "işte tarihi"
   der. Okuyan ikincisini arıyorsa burada bulur. Üstündeki ince amber
   çizgi bunun metnin devamı değil, bir çıkış olduğunu söylüyor. */
/* Rengi .bag ile aynı kural: YAZI KENDİ RENGİNDE kalır, amber olan yalnız
   alt çizgi ve ok. Etiket baştan sona amber yazılmıştı ve porselen zeminde
   karşıtlığı 3,14:1 çıkıyordu (ölçüldü) — 12 puntoluk bir yazı için az.
   Mürekkep rengiyle 17:1. Amber bilgiyi taşımaya devam ediyor, okumayı
   zorlaştırmadan. */
.cekmece-bag{display:inline-flex;align-items:baseline;gap:9px;
  margin-top:30px;padding-top:22px;
  border-top:1px solid var(--cizgi);
  font:600 12px/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--grafit);
  text-decoration:underline;text-decoration-color:var(--vurgu);
  text-decoration-thickness:1px;text-underline-offset:.32em;
  transition:color .25s ease,text-decoration-color .25s ease}
.cekmece-bag .ok{font-size:15px;line-height:1;color:var(--vurgu);
  text-decoration:none;transition:transform .25s ease}
.cekmece-bag:hover,.cekmece-bag:focus-visible{color:var(--vurgu)}
.cekmece-bag:hover .ok,.cekmece-bag:focus-visible .ok{transform:translateX(3px)}
.cekmece-bag:focus-visible{outline:2px solid var(--vurgu);outline-offset:4px}
/* Alt açıklama — büyük harf etiketin altında, normal yazıyla. */
.cekmece-bag-not{margin:8px 0 0;font-size:14px;line-height:1.55;
  color:var(--silik)}

/* ------------------------------------------------------------------- ürünler */
.urunler{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px);margin-top:56px}
.urun{border:1px solid var(--cizgi);border-radius:var(--kose);padding:0 0 34px;
  background:var(--zemin);position:relative;overflow:hidden}
.urun-kep{height:3px;background:var(--hat)}   /* ürün hattı rengi — bilgi taşır */
.urun-sahne{padding:30px 20px 6px;display:grid;place-items:center;min-height:300px}
.urun-sahne svg{max-width:196px;overflow:visible}
.urun-govde{padding:0 30px}
.urun-ad{font-family:var(--serif);font-size:31px;letter-spacing:-.02em;margin:0}
.urun-alt{font:600 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.18em;
  color:var(--hat);margin:9px 0 16px;display:block}
.urun p{font-size:15.8px}
.urun-not{margin-top:34px;padding-top:20px;border-top:1px solid var(--cizgi-2);
  font-size:14px;color:var(--silik)}

/* -------------------------------------------------------------------- üretim */
.sayilar{display:grid;grid-template-columns:repeat(3,1fr);margin:60px 0 0;
  border-top:1px solid var(--cizgi)}
.sayi{padding:34px 30px 30px;border-right:1px solid var(--cizgi)}
.sayi:last-child{border-right:0}
.sayi b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(42px,5.6vw,72px);line-height:1;letter-spacing:-.035em;color:var(--yazi)}
.sayi i{display:block;font:600 11px/1 var(--sans);text-transform:uppercase;
  letter-spacing:.18em;color:var(--vurgu);font-style:normal;margin:14px 0 16px}
.sayi span{font-size:14.8px;line-height:1.6;color:var(--ikincil);display:block}
.uretim-alt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);margin-top:64px}

/* --------------------------------------------------------------------- neden */
.nitelikler{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--cizgi);border:1px solid var(--cizgi);margin-top:54px}
.nitelik{background:var(--zemin);padding:32px 28px 34px}
.nitelik b{display:block;font-family:var(--serif);font-weight:400;font-size:22px;
  letter-spacing:-.015em;color:var(--yazi);margin-bottom:10px}
.nitelik span{font-size:15px;line-height:1.6;color:var(--ikincil)}
.kapanis{font-family:var(--serif);font-size:clamp(24px,3.4vw,42px);line-height:1.2;
  letter-spacing:-.02em;color:var(--yazi);margin:60px 0 0;text-align:center}

/* -------------------------------------------------------------------- galeri */
/* Sütunlu düzen. Fotoğraflar kare, yatay ve uzun karışık; hepsini aynı
   kutuya sokmak KIRPMAK demek olurdu. Kesim çizgisini kırpmıyoruz. */
/* Galeri içindeki bölüm başlıkları (Ağızda · Modelde). Şeridin kendi
   üst etiketiyle karışmasın diye üstünde ince bir pirinç çizgi var. */
/* Alt boşluk kardeşi .cift-ust ile aynı: onda 18px vardı, burada
   unutulmuştu ve "Hareket hâlinde" videonun çerçevesine yapışıyordu. */
.bolum-ust{margin-top:clamp(64px,8vw,110px);padding-top:20px;
  margin-bottom:18px;
  border-top:1px solid var(--cizgi);
  font:600 11px/1 var(--sans);text-transform:uppercase;
  letter-spacing:.2em;color:var(--vurgu)}
.bolum-not{max-width:680px;margin:16px 0 0;color:var(--ikincil);
  font-size:15px;line-height:1.7}
.bolum-not + .kareler{margin-top:clamp(34px,4vw,54px)}

.kareler{margin-top:clamp(28px,3.5vw,44px);
  columns:3;column-gap:16px}
@media(max-width:1040px){.kareler{columns:2}}
@media(max-width:700px){.kareler{columns:1}}

.kare{margin:0 0 16px;break-inside:avoid;position:relative;
  overflow:hidden;border-radius:var(--kose);background:#0A0B0C;
  cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.kare picture,.kare img{display:block;width:100%;height:auto}
/* Üzerine gelince fotoğraf çok az yaklaşır — çerçeve durur, görüntü
   canlanır. Uzun ve yumuşak; "tık" diye sıçramaz. */
.kare img{transition:transform 1.1s cubic-bezier(.16,1,.3,1),
                     filter 1.1s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){
  .kare:hover img{transform:scale(1.028);filter:brightness(1.06)}
}
/* Kırpılarak sığdırılan kutular (yalnız önce/sonra çifti). */
.kirp{overflow:hidden}
.kirp img{width:100%;height:100%;object-fit:cover}
/* TAM EKRAN VİDEO — sitedeki HER video için tek kural (23.08.2026).
   Kapak videoları kutuyu doldurmak için object-fit:cover kullanır; bu
   tam ekranda dikey videoyu genişliğe oturtup üst-altı kırpıyordu.
   Tam ekranda doğrusu "tamamı sığsın": yükseklik ölçü, yanlar siyah. */
video:fullscreen,video:-webkit-full-screen{object-fit:contain!important;width:100%;height:100%;border-radius:0}

/* --- önce / sonra --- */
.cift{margin-top:clamp(52px,7vw,88px)}
.cift-ust{font:600 11px/1 var(--sans);text-transform:uppercase;
  letter-spacing:.2em;color:var(--vurgu);margin-bottom:18px}
.cift-kare{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.cift-kare{grid-template-columns:1fr}}
.kare--cift{margin:0}
.kare--cift figcaption{position:absolute;left:0;bottom:0;
  padding:26px 16px 12px;width:100%;
  font:600 10px/1 var(--sans);text-transform:uppercase;letter-spacing:.22em;
  color:#F0F0EC;
  background:linear-gradient(to top,rgba(8,9,10,.78),rgba(8,9,10,0))}
.cift-not{max-width:760px;margin:22px 0 0;color:var(--ikincil);
  font-size:15px;line-height:1.65}

/* --- büyüteç: kareye tıklayınca --- */
.buyutec{position:fixed;inset:0;z-index:200;
  background:rgba(6,7,8,.982);
  display:flex;align-items:center;justify-content:center;
  padding:min(5vmin,48px);
  /* visibility: kapalıyken düğmeler sekme sırasından çıkar (aria-hidden'lı
     kutuda odaklanabilir öğe kalmasın — Lighthouse). Sönme bitince gizlenir. */
  opacity:0;pointer-events:none;visibility:hidden;transition:opacity .42s ease,visibility 0s .42s;
  cursor:zoom-out}
.buyutec.acik{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .42s ease,visibility 0s}
.buyutec picture{display:block;max-width:100%;max-height:100%}
.buyutec img{display:block;max-width:100%;max-height:88vh;width:auto;height:auto;
  border-radius:var(--kose);
  transform:scale(.985);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.buyutec.acik img{transform:none}
/* ALTYAZI BÜYÜTÜLMÜŞ RESMİN ALT KENARINDA.
   Büyüteç açılınca resmin ne olduğu kayboluyordu — küçük hâlin altındaki
   satır kopyalanmıyordu. Artık resmin kendi alt kenarına yazılıyor:
   serif yazı, karartılmış bir geçişin üstünde. Yuva resim kadar geniş
   (inline-block), yoksa yazı ekranın tamamına yayılıp resmin dışına
   taşardı. Fareyi geçirmez — altındaki resme tıklayıp kapatılabilsin. */
.buyutec-yuva{position:relative;display:inline-block;max-width:100%;
  line-height:0}
.buyutec-yazi{position:absolute;left:0;right:0;bottom:0;
  padding:44px 20px 16px;pointer-events:none;
  border-radius:0 0 var(--kose) var(--kose);
  font-family:var(--serif);font-weight:400;
  font-size:clamp(14px,1.7vw,20px);line-height:1.4;letter-spacing:-.008em;
  color:#F4F4F0;text-align:center;text-wrap:balance;
  text-shadow:0 1px 14px rgba(0,0,0,.75);
  background:linear-gradient(to top,rgba(6,7,8,.88),
    rgba(6,7,8,.55) 44%,transparent);
  opacity:0;transition:opacity .5s ease .18s}
.buyutec.acik .buyutec-yazi{opacity:1}
@media(max-width:620px){.buyutec-yazi{padding:34px 14px 12px}}
.buyutec-dugme{position:absolute;appearance:none;border:0;cursor:pointer;
  background:rgba(240,240,236,.06);color:#F0F0EC;
  width:46px;height:46px;border-radius:50%;
  font:400 20px/1 var(--sans);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s ease}
.buyutec-dugme:hover{background:rgba(240,240,236,.14)}
.buyutec-kapat{top:18px;right:18px;font-size:17px}
.buyutec-geri{left:18px;top:50%;margin-top:-23px}
.buyutec-ileri{right:18px;top:50%;margin-top:-23px}
@media(max-width:640px){
  .buyutec-geri{left:10px}.buyutec-ileri{right:10px}
}
html.buyutec-acik,html.buyutec-acik body{overflow:hidden}

/* -------------------------------------------------------------------- klinik */
.klinik{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,6vw,84px);
  align-items:start}
.maddeler{list-style:none;margin:0;padding:0;border-top:1px solid var(--cizgi)}
.maddeler li{padding:19px 0 19px 30px;border-bottom:1px solid var(--cizgi-2);
  position:relative;font-size:15.8px;color:var(--ikincil)}
.maddeler li::before{content:"";position:absolute;left:2px;top:29px;width:12px;height:1px;
  background:var(--vurgu)}

/* ------------------------------------------------------- ortaklar / kariyer */
.ortaklar{display:flex;flex-wrap:wrap;gap:18px;margin-top:38px;align-items:center}
.kariyer{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.ilan{border:1px solid var(--cizgi);border-radius:var(--kose);padding:30px 32px}
.ilan-yer{font:600 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.16em;
  color:var(--vurgu);margin-bottom:14px}

/* ------------------------------------------------------------------ iletişim */
.iletisim{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:54px;
  border-top:1px solid var(--cizgi);padding-top:44px}
/* Gözle görünmez ama ekran okuyucunun okuduğu başlık. Başlık ağacında
   atlanan seviyeyi tamamlar; display:none OLMAZ — o, okuyucudan da gizler. */
.gorsel-gizli{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.iletisim h3{font:600 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.18em;
  color:var(--vurgu);margin:0 0 16px}
.iletisim p,.iletisim a{font-size:15.8px;color:var(--ikincil);text-decoration:none}
.iletisim a:hover{color:var(--vurgu)}
/* Dokunma alanı. Telefon ve e-posta 19px yüksekliğindeydi; erişilebilirlik
   asgarisi 24, rahat kullanım 44. Dolgu isabet kutusunu büyütür, aynı
   miktardaki NEGATİF kenar boşluğu yerleşimi olduğu yerde tutar — yazının
   boyu, rengi ve yeri değişmez (ölçüldü: sayfa yüksekliği 3548 → 3548,
   iletişim bloğunun ekran görüntüsü bayt bayt aynı).
   .sosyal-liste dışarıda: zaten 27px ile asgariyi geçiyor ve inline-flex
   yerleşimi bozulunca ikon yazıya yapışıyordu (ölçüldü). */
.iletisim > div > a{display:inline-block;padding-block:13px;margin-block:-13px}
/* İki hesap alt alta. Yan yana yazılınca '@lovja.com@atakanelter'
   diye bitişik okunuyordu. */
.sosyal-liste{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.sosyal-liste a{display:inline-flex;align-items:center;gap:9px}
/* Amblem çizgi olarak duruyor — dolgu değil kontur, yazının inceliğiyle
   aynı ağırlıkta. Rengini bağlantıdan alır. */
.sosyal-im{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;opacity:.8;transition:opacity .3s}
.sosyal-im .nokta{fill:currentColor;stroke:none}
.sosyal-liste a:hover .sosyal-im{opacity:1}

/* -------------------------------------------------------------------- altbilgi */
.alt{background:var(--grafit-2);color:#8B9298;padding:56px 0 40px;
  border-top:1px solid #22262A}
/* ---- altbilgi sayfa haritası (16.08.2026)
   Sitenin dili kısıtlama: büyük bir bağlantı ızgarası değil, sayfa
   içindeki "ust" etiketleri gibi ince ve aralıklı. Grup başlıkları
   pirinç, bağlantılar sessiz gri.
   DOKUNMA ALANI: bağlantılar 13px yüksekliğinde kalırdı; altbilgideki
   öteki bağlantılarda olduğu gibi dolgu büyütülüp negatif kenar
   boşluğuyla yerleşim sabitleniyor. */
/* minmax 160 idi: dört grup 800px genişlikte yan yana sığmıyor, dördüncüsü
   tek başına alta düşüp boşluk bırakıyordu (4×160 + 3×40 = 760 > 752).
   140'a çekildi — en uzun bağlantı "Sıkça sorulanlar" ~105px, rahat sığıyor. */
.alt-harita{max-width:var(--olcu);margin:0 auto 44px;padding:0 24px;
  display:grid;gap:30px 34px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.alt-grup-ad{font:600 10.5px/1 var(--sans);text-transform:uppercase;
  letter-spacing:.19em;color:var(--pirinc);margin-bottom:14px}
.alt-harita ul{list-style:none;margin:0;padding:0}
.alt-harita li{margin:0}
.alt-harita a{display:inline-block;text-decoration:none;color:#8B9298;
  font:400 13.5px/1 var(--sans);letter-spacing:.02em;
  padding-block:9px;transition:color .18s ease}
.alt-harita a:hover,.alt-harita a:focus-visible{color:#F0F0EC}

.alt-ic{max-width:var(--olcu);margin:0 auto;padding:0 24px;display:flex;
  flex-wrap:wrap;gap:26px;align-items:center}
.alt-logo{height:22px;width:auto;filter:invert(1);opacity:.72}
.alt-slogan{font:500 12px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase}
.alt-sag{margin-left:auto;display:flex;gap:22px;align-items:center;
  font:500 12.5px/1 var(--sans)}
.alt-sag a{text-decoration:none}
.alt-sag a:hover{color:#F0F0EC}
/* Altbilgi bağlantıları 13px yüksekliğindeydi — asgarinin yarısı.
   Aynı yöntem: dolgu büyütür, negatif kenar boşluğu yerleşimi sabitler. */
.alt-sag a{display:inline-block;padding-block:16px;margin-block:-16px}
/* Aynı iş iki yerde daha eksikti; ikinci denetimde ölçülerek bulundu:
   telif satırındaki gizlilik bağlantısı 15px, menü örtüsünün alt
   satırındakiler 12px kalmıştı — ikisi de asgarinin (24) altında. */
.alt-hak a{display:inline-block;padding-block:14px;margin-block:-14px}
.ortu-alt a{display:inline-block;padding-block:16px;margin-block:-16px}
.alt-hak{max-width:var(--olcu);margin:36px auto 0;padding:22px 24px 0;
  border-top:1px solid #1E2124;font-size:12.5px;letter-spacing:.02em}

/* ------------------------------------------------- eksik içerik göstergeleri
   Site yayına çıkana kadar gizli. Eksik olan her şey sayfada AÇIKÇA görünür,
   böylece hiçbir boşluk gözden kaçmaz. Atakan doldurdukça kaybolur. */
.eksik{display:inline-flex;align-items:center;gap:8px;font:600 10.5px/1 var(--sans);
  text-transform:uppercase;letter-spacing:.15em;color:var(--pirinc);
  border:1px dashed currentColor;border-radius:var(--kose);padding:8px 11px}
.foto-yok{border:1px dashed var(--cizgi);border-radius:var(--kose);aspect-ratio:4/3;
  display:grid;place-items:center;gap:10px;text-align:center;padding:24px;
  color:var(--silik);font-size:13px;line-height:1.5}
.foto-yok b{display:block;font:600 10.5px/1 var(--sans);text-transform:uppercase;
  letter-spacing:.16em;color:var(--vurgu);margin-bottom:8px}

/* ------------------------------------------------------------------ görünme
   AĞIRBAŞLI OLSUN DİYE ÜÇ KURAL:
   1) Tek yön, kısa mesafe. Öğe yalnız aşağıdan yukarı gelir; yana kaymaz,
      dönmez, büyümez. Birden fazla yön aynı anda "efekt" gibi görünüyor.
   2) Uzun yavaşlama. Eğri sonuna kadar yavaşlar (.16,1,.3,1) — hareketin
      hızı değil, DURUŞU pahalı gösterir. Kısa ve sert bir geçiş ucuz durur.
   3) Bir kez. Görünen öğe bir daha gizlenmez, geri dönmez, tekrarlamaz;
      aşağı yukarı kaydırırken sayfa kıpır kıpır olmaz.
   --gec: aynı gruptaki öğelerin sırayla gelmesi için gecikme (isik.js verir).
   Toplu gelmek yerine sırayla gelmek, gözün her birini ayrı görmesini
   sağlıyor — vitrinde ürünlerin tek tek aydınlatılması gibi. */
/* SAYDAMLIK VE KAYMA AYRI EĞRİLERLE.
   İkisi de cubic-bezier(.16,1,.3,1) idi. O eğri sonuna kadar yavaşlar ama
   BAŞLANGICI çok serttir: ölçüldü — saydamlığın yarısı ilk 135 ms'de
   oluyor, kalan yarısı bir saniyeye yayılıyordu. Göz bunu "pıt diye
   belirdi, sonra oturdu" diye okuyor.
   Kayma o eğride kalıyor (oturma hissi ondan geliyor), saydamlık ise
   yumuşak başlayıp yumuşak biten bir S eğrisine alındı ve süresi uzadı. */
.gir{opacity:0;transform:translateY(22px);
  transition:opacity 1.5s cubic-bezier(.42,0,.35,1) var(--gec,0s),
             transform 1.3s cubic-bezier(.16,1,.3,1) var(--gec,0s)}
.gir.acik{opacity:1;transform:none}

/* Bölüm etiketinin yanındaki ince çizgi soldan sağa çizilir. */
.ust::after{transform:scaleX(0);transform-origin:left center;
  transition:transform 1.4s cubic-bezier(.16,1,.3,1) .18s}
.gir.acik .ust::after,.gir.acik.ust::after{transform:none}

/* BAŞLIK SATIR SATIR AÇILIR. Her satır kendi penceresinin altından
   yukarı kayar; pencere taşanı kırptığı için yazı "yokken beliriyor"
   değil, "aşağıdan geliyor" gibi okunuyor.
   Alt boşluk: kırpma kutusu tam satır boyunda olursa ğ, ş, y, p gibi
   harflerin kuyruğu kesiliyor. Padding kadar da negatif kenar boşluğu
   veriliyor ki satır arası değişmesin. */
.satir-kap{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.satir{display:block;transform:translateY(110%);
  transition:transform 1.3s cubic-bezier(.34,0,.2,1) var(--gec,0s)}
.gir.acik .satir{transform:none}

/* Fotoğraf yavaşça yerine oturur: hafif büyük başlar, kendi boyuna iner.
   Çok yavaş (1,8 sn) ve çok az (%5) — fark edilsin ama izlenmesin. */
.gir picture{display:block;overflow:hidden}
.gir picture img{transform:scale(1.05);
  transition:transform 1.8s cubic-bezier(.16,1,.3,1)}
.gir.acik picture img{transform:none}

/* --------------------------------------------------------------------- dar ekran */
@media (max-width:940px){
  .uretim-alt,.klinik,.kariyer{grid-template-columns:1fr}
  .urunler{grid-template-columns:1fr}   /* üç ürün: ikili ızgarada üçüncüsü öksüz kalıyor */
  .nitelikler{grid-template-columns:1fr 1fr}
  .iletisim{grid-template-columns:1fr 1fr;gap:30px}
  .sayilar{grid-template-columns:1fr}
  .sayi{border-right:0;border-bottom:1px solid var(--cizgi)}
  .sayi:last-child{border-bottom:0}
  .isik-sahne{min-height:320px}
}
@media (max-width:620px){
  .nitelikler{grid-template-columns:1fr}
  .iletisim{grid-template-columns:1fr}
  .alt-sag{margin-left:0;width:100%}
}

/* ═══ KAYARAK GEÇİŞ ═══════════════════════════════════════════════
   Işık sayfasına giriş ve çıkış sayfa değişimi gibi değil, yatay bir
   kayma. Çıkan sayfa süzülerek gider, gelen sayfa öbür yandan girer;
   ikisi aynı süre ve aynı eğriyle hareket ettiği için göz tek bir
   kayma görüyor.

   overflow-x gizleniyor: kayma sırasında yatay çubuk belirmesin.
   will-change YOK — geçiş yarım saniye sürüyor, tarayıcıyı bütün
   sayfa için katman ayırmaya zorlamanın anlamı yok. */
/* ═══ PERDE — sayfadan sayfaya geçiş ═══════════════════════════════
   Sıradan sayfalar arasında hiç geçiş yoktu: bağlantıya basınca ekran
   bir anda değişiyordu. Perde o boşluğu dolduruyor — yukarıdan iner,
   ekranı örter, yeni sayfada aşağı doğru çekilir. Göz tek bir aşağı
   süpürme görür, iki ayrı hareket değil.

   GELİŞ TAMAMEN CSS. JavaScript'e bırakılsaydı betik çalışana kadar
   sayfa bir an çıplak görünür, sonra perde iner ve kalkardı — göz o
   çakmayı yakalar. CSS animasyonu ilk boyamada başlar. Bu yüzden
   gelişte ne sınıf var ne işaret: her yüklemede oynar.

   Öğe yok, ::before yetiyor — dört ayrı sayfa şablonuna kutu eklemek
   gerekmiyor. Ön kenarında ince pirinç çizgi var: perde düz bir
   karartma değil, markanın kendi çizgisi. */
@media (prefers-reduced-motion: no-preference){
  html::before{
    content:"";position:fixed;left:0;right:0;top:0;height:100%;
    z-index:1000;pointer-events:none;
    background:linear-gradient(180deg,#08090A 0%,#08090A calc(100% - 1.5px),
                               var(--pirinc-acik) 100%);
    transform:translateY(100%);              /* normalde ekranın altında */
    animation:perdeAcil .54s cubic-bezier(.76,0,.24,1) both;
  }
  @keyframes perdeAcil{from{transform:translateY(0)}to{transform:translateY(100%)}}
  /* GİDİŞ — bağlantıya basılınca arayuz.js bu sınıfı koyar. */
  html.perde-kapa::before{
    animation:perdeKapan .34s cubic-bezier(.76,0,.24,1) forwards;
  }
  @keyframes perdeKapan{from{transform:translateY(-100%)}to{transform:translateY(0)}}
}

html.kay-sol,html.kay-sag,html.gel-sagdan,html.gel-soldan{overflow-x:hidden}
html.kay-sol body,html.kay-sag body{
  transition:transform .43s cubic-bezier(.76,0,.24,1),opacity .43s ease}
html.kay-sol body{transform:translateX(-13%);opacity:0}
html.kay-sag body{transform:translateX(13%);opacity:0}
/* ATLAS'A GEÇİŞ — kamera sağa dönüyormuş gibi.
   Kamera sağa dönerse görüntüdeki her şey SOLA kayar; sahne aynı anda
   kendi ekseninde çevrilir ki düz bir kaydırma değil, bir BAKIŞ dönüşü
   gibi okunsun. Taşın WebGL koduna dokunulmuyor — çeviri tuvalin
   üstünde, ekran kartında yapılıyor; sahne bundan habersiz.
   Atlas sayfası da sağdan girerek açılıyor: iki hareket aynı yönde
   olduğu için göz bunu tek bir kamera hareketi sayıyor. */
html.atlas-gidis{overflow:hidden}
html.atlas-gidis .sahne{
  transform:perspective(1400px) rotateY(16deg) translateX(-16%) scale(1.04);
  opacity:0;transform-origin:100% 50%;
  transition:transform .52s cubic-bezier(.62,0,.30,1),opacity .52s ease-in}
html.atlas-gidis body>*:not(.sahne){
  transform:translateX(-9%);opacity:0;
  transition:transform .52s cubic-bezier(.62,0,.30,1),opacity .40s ease-in}
/* Hareket istemeyen ziyaretçide çeviri yok — bağlantı sıradan çalışır. */
@media (prefers-reduced-motion:reduce){
  html.atlas-gidis .sahne,html.atlas-gidis body>*:not(.sahne){
    transform:none;opacity:1;transition:none}
}
html.gel-sagdan body{animation:gelSagdan .43s cubic-bezier(.76,0,.24,1) both}
html.gel-soldan body{animation:gelSoldan .43s cubic-bezier(.76,0,.24,1) both}
@keyframes gelSagdan{from{transform:translateX(13%);opacity:0}to{transform:none;opacity:1}}
@keyframes gelSoldan{from{transform:translateX(-13%);opacity:0}to{transform:none;opacity:1}}

/* ═══ PARMAK İÇİN DOKUNMA ALANI ═══════════════════════════════════
   Ölçüldü: telefonda on bir bağlantı 34 pikselden kısa — alt bilgideki
   diller 13, e-posta 19, dil tuşları 24 piksel. Parmak ucu ~9 mm;
   bu hedefler ıskalanıyor.

   Büyütme PADDING ile yapılmıyor: padding yerleşimi kaydırır, bu
   yazıların hepsi hizalanmış satırlar içinde. Onun yerine görünmeyen
   bir dokunma alanı seriliyor — hiçbir şey yerinden oynamıyor,
   yalnız parmağın vurabileceği alan 44 piksele çıkıyor.

   Yalnız dokunmatikte: farede küçük hedef sorun değil ve görünmez
   kutular imleç davranışını gereksiz yere değiştirir. */
@media (hover:none){
  .dil a,.ortu-tus,.alt-sag a,.alt-hak a,.ortu-alt a,
  .iletisim a,.tepe-sol a{position:relative}
  .dil a::after,.ortu-tus::after,.alt-sag a::after,.alt-hak a::after,
  .ortu-alt a::after,.iletisim a::after,.tepe-sol a::after{
    content:'';position:absolute;left:0;right:0;top:50%;
    height:44px;transform:translateY(-50%)}
}

/* Hareket istemeyen ziyaretçi: ışık sabit durur, hiçbir şey kıpırdamaz. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .gir{opacity:1;transform:none;transition:none}
  .satir{transform:none;transition:none}
  .ust::after{transform:none;transition:none}
  .gir picture img{transform:none;transition:none}
  *{animation:none !important}
}

/* Basılırken: her şey açık zemin, koyu yazı. Diş şeması ve ışık basılmaz. */
@media print{
  .tepe,.alt-sag,.sahne-kap,.ortu,.cekmece,.cekmece-perde{display:none}
  .serit{background:#fff !important;color:#000 !important;padding:24px 0}
  .isik-sahne,.urun-sahne{display:none}
}

/* ═══ KLAVYE ODAĞI ═══════════════════════════════════════════════
   Tab'la gezinen biri nerede olduğunu görmeliydi; sitede tek bir odak
   kuralı yoktu. :focus-visible kullanılıyor — fareyle tıklayanda halka
   ÇIKMAZ, yalnız klavyeyle gezinende çıkar. Renk pirinç: sitenin
   "şu an buradasın" rengi zaten o (seçili tema tuşu, ton başlığı).
   Kalınlık 2 px + 2 px boşluk: koyu zeminde de açık zeminde de görünür. */
:where(a, button, input, [tabindex]):focus-visible{
  outline:2px solid #C9A76B; outline-offset:2px; border-radius:2px }
body.kadife :where(a, button, input, [tabindex]):focus-visible{
  outline-color:#8A6A2E }
/* Kaydırıcılar zaten yuvarlak; halka da onları sarsın. */
input[type=range]:focus-visible{ outline-offset:4px; border-radius:20px }

/* ══════════════════════════════════════════════════════════════════
   IŞIK ŞERİDİ · LÜKS · SINIFLANDIRMA  —  ana sayfanın yeni gövdesi
   ══════════════════════════════════════════════════════════════════ */

/* ── Işık şeridi: sayfanın içindeki kara sahne ──
   Kenardan kenara, çevresinde boşluk yok. Sayfa bir an için ışık
   sayfasına dönüşüyor; alt yazı ve tuş oraya davet ediyor. */
/* IŞIK BÖLÜMÜ TAM EKRAN — çevresinde boşluk YOK.
   Bölümün alt ve üst dolgusu, sahnenin altında ve üstünde siyah bir
   şerit bırakıyordu; bölümün içinde yalnız çerçeve olduğu için o
   dolgu boş karadan başka bir şey değildi. Sahne bir kenardan
   ötekine, komşu bölümlere yapışık duruyor. */
.serit--isik{background:#060708;color:#EDEBE6;padding:0}
.serit--isik .ust{color:#C9A76B}
.serit--isik h2.buyuk{font-size:clamp(30px,5.4vw,68px);line-height:1.02;
  letter-spacing:-.022em;max-width:17ch;text-wrap:balance}
.serit--isik .lead{color:#A7ADB3;max-width:52ch}

.isik-cerceve{position:relative;width:100%;height:100svh;
  overflow:hidden;background:#060708}
/* TAM EKRAN — ayrı sayfadaki gibi. Sahnenin yerleşimi (dişlerin boyu,
   etiketlerin yeri, tuşların yüksekliği) kameradan hesaplanıyor ve o
   hesap TAM PENCEREYE göre kurulmuş. Çerçeveye oran verildiğinde
   sahne kendi tasarlandığı çerçevede olmuyordu. Şimdi gömülü hâli ile
   ayrı sayfa birebir aynı. */
/* ORAN SABİT, YÜKSEKLİK DEĞİL. Pencere yüksekliğinin bir oranı
   verildiğinde kısa ekranlarda sahne basıklaşıyor ve dişlerin altında
   etiketlere, söze, tuşlara yer kalmıyordu — hepsi üst üste biniyordu
   (2000×780'de ölçüldü). Sahnenin kendi oranı var; çerçeve ona
   uyuyor. Telefonda oran dikleşiyor, yoksa 375 pikselde 211 piksellik
   bir şerit kalırdı. */

.isik-cerceve iframe{display:block;width:100%;height:100%;border:0}
/* ALT KENARDA YUMUŞAK GEÇİŞ. Sahne bittiği yerde sert bir çizgiyle
   kesiliyordu — özellikle gündüzde, aydınlık zeminden bir sonraki
   bölümün karasına. Alt şeritte sahnenin üstüne bir gradyan biniyor:
   üstte tamamen saydam, aşağı indikçe komşu bölümün rengine oturuyor.
   Sahnenin AYARINA dokunmuyor; yalnız iki bölümün birleştiği yeri
   yumuşatıyor. */
.isik-cerceve::after{content:'';position:absolute;left:0;right:0;bottom:0;
  height:clamp(70px,11%,150px);pointer-events:none;
  background:linear-gradient(180deg,
    rgba(11,12,13,0) 0%, rgba(11,12,13,.35) 46%,
    rgba(11,12,13,.78) 78%, #0B0C0D 100%)}

/* ── BÖLÜM EKRANA OTURUR ──
   İstenen: sahne tam ekrana denk gelsin, kullanıcı uğraşmasın.
   Kaydırmayı birkaç saniye DONDURMAK bunu yapardı ama kullanıcıdan
   denetimi almak olurdu: o üç saniye içinde geri dönmek, kaçmak ya da
   klavyeyle gezinmek imkânsız olurdu ve sayfa bozulmuş gibi görünürdü.

   Aynı sonucu tarayıcının kendi kancası veriyor: sayfa bu bölüme
   yaklaşınca kaydırma kendiliğinden onun üstüne oturuyor
   (scroll-snap), ve "stop: always" sayesinde hızlı bir savurmayla
   üstünden atlanamıyor — bir kez duruyor. Denetim hep kullanıcıda:
   bir hareket daha yaparsa geçip gidiyor. JavaScript yok.
   Hareketi azalt açıksa oturma da kapanıyor. */
@media (prefers-reduced-motion: no-preference){
  html{scroll-snap-type:y proximity}
  .isik-cerceve{scroll-snap-align:start; scroll-snap-stop:always}
}
/* ÇOK GENİŞ EKRANDA SAHNE GERİLMİYOR. Kamera dişleri yüksekliğe göre
   ölçekliyor; 2000 px'lik bir pencerede sahne kısa ve çok geniş bir
   kutuya düşüyor, dişler ortada küçük kalıyordu. Çerçeve 1600'de
   duruyor ve ortalanıyor — iki yanda sayfanın kendi karası kalıyor,
   sahne kendi oranında duruyor. */

/* TELEFONDA DA DOKUNMA AÇIK — sahneyle oynanır (dişleri sürükle,
   gece/gündüz, sis). Eskiden kapalıydı: parmak hep sahneyi yakalayıp
   sayfayı kaydıramıyordu, kişi sıkışıyordu. Çözüm dokunmayı kapatmak
   değil, çerçeveye altta bir KAYDIRMA ŞERİDİ bırakmak: çerçeve tam
   ekranı kaplamaz (88svh), alttaki şeritten parmak sayfayı kaydırır.
   Scroll-snap yine bölümü ekrana oturtur (yukarıda). */
/* Alttaki KAYDIRMA ŞERİDİ kaldırıldı: dikey parmak artık
     şeffaf katman üzerinden tarayıcının kendi kaydırmasına
     gidiyor, yer ayırmaya gerek yok. */

.serit-alt{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;
  gap:clamp(20px,3.4vw,52px);margin-top:clamp(24px,4vh,46px)}
.serit-alt .vurgu{flex:1 1 22ch;margin:0;max-width:44ch;
  font-family:var(--serif);font-size:clamp(17px,2.1vw,26px);line-height:1.34;
  color:#F2F1EC;text-wrap:balance}

/* ── Sınıflandırma: kaplama / Lovja karşılaştırması ── */
.karsilastir{list-style:none;margin:clamp(26px,4vh,44px) 0;padding:0;
  display:flex;flex-direction:column;gap:0}
/* RENKLER ŞERİDİN KENDİSİNDEN GELİR — sabit yazılmaz. Bu blok önce
   yalnız ana sayfadaki koyu şerit için yazılmıştı; Felsefe sayfasında
   açık şeride düşünce sağdaki sütun (beyaza yakın yazı) krem zeminde
   tamamen kayboldu. Şeridin kendi değişkenleriyle her zeminde okunur. */
.karsilastir li{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;
  gap:clamp(12px,2.2vw,30px);padding:clamp(13px,1.9vh,20px) 0;
  border-top:1px solid var(--cizgi)}
.karsilastir li:last-child{border-bottom:1px solid var(--cizgi)}
.karsilastir .karsi{text-align:right;color:var(--silik)}
.karsilastir .ayrac{color:var(--vurgu);font-family:var(--mono);font-size:.8em}
.karsilastir .biz{font-family:var(--serif);font-size:clamp(16px,1.9vw,23px);
  color:var(--yazi);line-height:1.2}
@media (max-width:600px){
  .karsilastir li{grid-template-columns:1fr;gap:3px;text-align:left}
  .karsilastir .karsi{text-align:left;font-size:13px}
  .karsilastir .ayrac{display:none}
}

/* ══════════════════════════════════════════════════════════════════
   KAYDIRMAYA BAĞLI HAREKET — JavaScript'siz

   Bugünün yolu bu: animation-timeline: view(). Tarayıcı öğenin
   görüş alanındaki yerini kendi ölçüyor, ana iş parçacığına hiç
   uğramadan bileşik katmanda oynatıyor. Kaydırma dinleyicisi yok,
   requestAnimationFrame yok, kare düşmesi yok.

   Desteklemeyen tarayıcıda (bugün Safari/Firefox) hiçbir şey
   kırılmıyor: içerik zaten görünür durumda, yalnız hareket olmuyor.
   Var olan .gir açılışı da yerinde duruyor.

   HAREKETİ AZALT açıksa hepsi kapanıyor.
   ══════════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* ① BAŞLIK SATIR SATIR AÇILIR — perde yukarı kalkar gibi */
    @keyframes perde{ from{ clip-path:inset(0 0 100% 0); transform:translateY(14px) }
                       to { clip-path:inset(0 0 -6% 0);  transform:none } }
    .serit h2, .serit .lead, .karsilastir li{
      animation:perde linear both;
      animation-timeline:view();
      animation-range:entry 6% cover 34% }
    .karsilastir li:nth-child(2){ animation-range:entry 10% cover 38% }
    .karsilastir li:nth-child(3){ animation-range:entry 14% cover 42% }

    /* ② TAM SAYFA FOTOĞRAFLARDA DERİNLİK — görsel kendi çerçevesi
       içinde sayfadan yavaş kayıyor. Klasik paralaks ama bedava. */
    @keyframes derinlik{ from{ transform:scale(1.12) translateY(-3.5%) }
                          to { transform:scale(1.12) translateY(3.5%) } }
    .tam-foto img, .serit--porselen-2 picture img{
      animation:derinlik linear both;
      animation-timeline:view();
      animation-range:cover }

    /* ③ IŞIK ŞERİDİ YAKLAŞIRKEN AÇILIR — kara sahne ekranı ele alıyor */
    @keyframes sahneAcil{ from{ transform:scale(.965); opacity:.35;
                                border-radius:14px }
                           to { transform:none; opacity:1; border-radius:0 } }
    .isik-cerceve{ animation:sahneAcil linear both;
                 animation-timeline:view();
                 animation-range:entry 0% entry 90% }

    /* ④ SAYFANIN DİBİNDE HAREKET BİTER. Yukarıdaki yollar öğenin
       kaydırma içindeki yerine bağlı; en alttaki bölüm "cover 34%"e
       hiç varamıyor, çünkü altında kaydıracak yer kalmıyor. Başlık
       yarı açık ve alttan KESİK kalıyordu (isik.js 'dipte' işaretini
       koyuyor). Dibe varınca son karesine oturuyor. */
    .dipte .serit h2, .dipte .serit .lead, .dipte .karsilastir li{
      animation:none; clip-path:inset(0 0 -6% 0); transform:none }
  }
}

/* ── ALT SAYFA KAPAĞI ──
   Ana sayfanın açılış sahnesi burada yok; onun yerini tek ekranlık
   sakin bir kapak alıyor. Her alt sayfa aynı biçimde açılıyor. */
.serit--kapak{background:#0B0C0D;color:#F0F0EC;
  padding-block:clamp(90px,17vh,190px) clamp(54px,9vh,104px)}
.serit--kapak .ust{color:#C9A76B}
.serit--kapak h1{font-family:var(--serif);font-weight:400;
  font-size:clamp(34px,6.2vw,80px);line-height:1.03;letter-spacing:-.022em;
  margin:.28em 0 0;max-width:16ch;text-wrap:balance}
.serit--kapak h1 em{font-style:normal;color:#8A9198}
.serit--kapak .lead{margin-top:clamp(18px,2.6vh,30px);max-width:46ch;color:#A7ADB3}

/* ── madde listeleri (endikasyon, manifesto) ── */
/* ── SIKÇA SORULANLAR ──
   Tarayıcının kendi <details> ögesi: JavaScript yok, klavyeyle gezilir,
   arama motoru cevabı kapalıyken de metin olarak görür. Görünüşü sitenin
   madde listesiyle aynı — ince çizgi, aynı ritim; açılınca soru pirinç
   rengine döner (renk yalnız "şu an açık olan bu" bilgisini taşır). */
.sss{margin:clamp(22px,3.4vh,38px) 0 0;
  border-top:1px solid color-mix(in srgb, currentColor 14%, transparent)}
/* scroll-margin-top: bölümlerde olduğu gibi (bkz. .serit, 72px) — üst bar
   SABİT durduğu için, bir soruya çapayla gelindiğinde başlık barın altına
   giriyordu. 17.08.2026'da ölçüldü: soru ekranın 23 piksel yukarısında
   kalıyordu. Hem betiğin scrollIntoView'ı hem tarayıcının kendi çapa
   kaydırması bu değeri kullanır. */
.sss-oge{border-bottom:1px solid color-mix(in srgb, currentColor 14%, transparent);
  scroll-margin-top:72px}
.sss-oge summary{list-style:none;cursor:pointer;position:relative;
  padding:clamp(14px,1.9vh,19px) 0 clamp(14px,1.9vh,19px) 25px;
  font-size:clamp(15px,1.7vw,19px);line-height:1.4;
  transition:color .18s ease}
.sss-oge summary::-webkit-details-marker{display:none}
/* İşaret: kapalıyken ARTI, açıkken EKSİ. İki çizgi üst üste duruyor —
   biri yatay sabit, öteki dik; açılınca dik olan yatıyor ve artı eksiye
   dönüşüyor. (Yan yana konumlanmasınlar diye ikisi de mutlak konumlu:
   flex sırasıyla denendi, çizgiler "|—" diye yan yana düşüyordu.) */
.sss-oge summary::before,
.sss-oge summary::after{content:"";position:absolute;left:0;
  top:calc(clamp(14px,1.9vh,19px) + .7em);
  width:11px;height:1px;background:currentColor;opacity:.55}
.sss-oge summary::after{transform:rotate(90deg);
  transition:transform .28s cubic-bezier(.4,0,.2,1)}
.sss-oge[open] summary::after{transform:rotate(0deg)}
.sss-oge[open] summary{color:var(--vurgu)}
.sss-oge summary:hover{color:var(--vurgu)}
.sss-oge summary:focus-visible{outline:1px solid var(--vurgu);outline-offset:4px}
.sss-cevap{padding:0 0 clamp(16px,2.2vh,22px) 25px;max-width:64ch}
.sss-cevap p{margin:0 0 11px;font-size:15.6px;line-height:1.62;color:var(--ikincil)}
.sss-cevap p:last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){
  .sss-oge summary::after{transition:none}
}

.madde{list-style:none;margin:clamp(22px,3.4vh,38px) 0 0;padding:0;
  display:grid;gap:0}
.madde li{padding:clamp(12px,1.7vh,17px) 0;
  border-top:1px solid color-mix(in srgb, currentColor 14%, transparent);
  font-size:clamp(15px,1.7vw,19px);line-height:1.45}
.madde li:last-child{border-bottom:1px solid color-mix(in srgb, currentColor 14%, transparent)}
.madde--numarali{counter-reset:m}
/* NUMARA IZGARADAN ÇIKTI. Madde bir ızgara kutusuydu; içindeki <b>
   kendi hücresine düşüyor ve cümle "Bir Lovja, standart bir protezin /
   dört katı / sürede biter" diye üçe bölünüyordu. Numara artık akıştan
   ayrı duruyor, madde düz bir metin bloğu — vurgular satır içinde
   kalıyor. */
/* MANİFESTO MADDELERİNDE BAŞLIK KENDİ SATIRINDA. Başlık ile cümle
   yan yana gelince bazı maddeler tekrar gibi okunuyordu:
   "Definition of Luxury / Luxury is no longer an external object…".
   Yalnız numaralı listelerde geçerli — öteki listelerde vurgu satır
   içinde kalmalı.
   Seçici artık .baslikli sınıfına bakıyor: madde GERÇEKTEN <b> ile
   başlıyorsa şablon o sınıfı koyuyor. Eskiden :first-child'a bakıyordu
   ve o yazı düğümlerini saymadığı için "A Lovja takes <b>four times</b>
   as long as…" maddesinde de devreye giriyor, cümlenin ortasındaki
   vurguyu 10,5 puntoluk ayrı bir satıra atıp cümleyi üçe bölüyordu. */
.madde--numarali li.baslikli > b:first-child{display:block;margin-bottom:3px;
  font:600 10.5px/1.4 var(--sans);letter-spacing:.15em;
  text-transform:uppercase;color:var(--vurgu)}
/* Cümlenin ORTASINDAKİ vurgu: satır içinde, cümlenin kendi puntosunda.
   Rengi zaten vurguyu taşıyor — küçültmeye ve büyük harfe çevirmeye
   gerek yok, o cümleyi bölüyordu. */
.madde--numarali li:not(.baslikli) b{font-weight:600;color:var(--vurgu)}

.madde--numarali li{counter-increment:m;position:relative;
  padding-left:clamp(2.8em,4.4vw,3.6em)}
.madde--numarali li::before{content:counter(m,decimal-leading-zero);
  position:absolute;left:0;top:calc(clamp(12px,1.7vh,17px) + .35em);
  font:600 11px/1 var(--mono);letter-spacing:.16em;color:#C9A76B}

/* ÜRÜN NOTU — üç kartın altındaki teknik dayanak.
   Önce 23 punto idi: bölümün GİRİŞ paragrafından (en çok 20,5) büyük
   olduğu için kapanış gibi bağırıyordu; oysa bu bir kapanış değil,
   üç ürünün de altında duran temel. Şimdi okuma ölçüsünde, sessiz ve
   üstündeki kısa pirinç çizgiyle kartlardan ayrılmış durumda.
   Rengi de şeritten geliyor — sabit yazılırsa açık zeminde kaybolur. */
.urun-kapanis{position:relative;max-width:60ch;
  margin:clamp(46px,5.5vw,78px) 0 0;padding-top:28px;
  font-size:clamp(15.5px,1.15vw,17px);line-height:1.72;color:var(--ikincil)}
/* Patent durumu gibi hukuki nitelemeler: cümlenin içinde ama bir
   ton geride. Gizlenmiyor — okunuyor, ama iddiayı bastırmıyor. */
.not-kucuk{color:var(--silik);font-size:.92em}
.urun-kapanis::before{content:"";position:absolute;top:0;left:0;
  width:54px;height:1px;background:var(--vurgu)}

/* ─── İÇERİĞE ATLA ─────────────────────────────────────────────────
   Klavyeyle gezen biri her sayfada menünün tamamını sekmeyle geçmek
   zorundaydı. Bu bağlantı gövdenin ilk odaklanabilir öğesi: ekranda
   görünmez, ilk sekme tuşunda sol üstte belirir, basınca içeriğe iner.
   Erişilebilirlik kurallarının en temel (A) basamağındaki madde. */
.atla{position:absolute;left:12px;top:-64px;z-index:200;
  padding:12px 20px;border-radius:0 0 8px 8px;
  background:var(--pirinc-acik);color:#0B0D0F;
  font:600 13px/1 var(--sans);letter-spacing:.06em;text-decoration:none;
  transition:top .18s ease}
.atla:focus{top:0}
.atla:focus-visible{outline:2px solid #0B0D0F;outline-offset:-5px}
/* <main> yalnız atlama bağlantısıyla odak alır; o an çerçeve çizmeyelim,
   ziyaretçi zaten oraya gitmek istedi. */
main:focus{outline:none}
@media (prefers-reduced-motion:reduce){.atla{transition:none}}

/* ─── BELGE KİPİ — hukuki metinler ─────────────────────────────────
   Aynı yazı tipleri, aynı renkler, aynı amber çizgi. Değişen üç şey:
   tek zemin (şerit şerit renk değişmiyor), numaralı bölümler ve küçük
   başlıklar. Gerekçesi: aydınlatma metninin işi bakılmak değil OKUNMAK.
   Numaralar da işe yarıyor — hekim ya da avukat "4. maddedeki saklama
   süresi" diyebiliyor.

   Hepsi main.belge altında: yalnız 'belge': True olan sayfalar etkilenir,
   sitenin geri kalanı hiç değişmez. */
main.belge .serit{background:#0B0D0F;
  --zemin:#0B0D0F;--yazi:#F0F0EC;--ikincil:#AAB0B6;--silik:#828990;
  --cizgi:#24282C;--cizgi-2:#1B1E21;--vurgu:var(--pirinc);
  padding-block:clamp(26px,3.2vw,40px)}
main.belge .serit + .serit{border-top:1px solid #1B1E21}
main.belge .serit--kapak{padding-block:clamp(46px,6.5vw,84px) clamp(20px,2.6vw,30px)}
main.belge .ic.dar{max-width:min(740px,92vw)}
main.belge h1{font-size:clamp(27px,4.4vw,42px)}
main.belge h2{font-size:clamp(18px,2vw,23px);letter-spacing:0}
main.belge .ust{font-size:10px;letter-spacing:.2em}
main.belge .lead{font-size:14.6px}
main.belge .madde li{font-size:14.6px}
/* bölüm numaraları — belge hissi asıl buradan geliyor */
main.belge{counter-reset:bolum}
main.belge .serit:not(.serit--kapak) .ust::before{
  counter-increment:bolum;
  content:counter(bolum,decimal-leading-zero) " · ";
  color:var(--pirinc-acik)}

/* ─── IŞIK SAHNESİNİN ALTINDAKİ BAĞLANTI ───────────────────────────
   Işık sayfası üst menüden çıkarıldı: ziyaretçi sahneyi ana sayfada
   zaten yaşıyor, menüdeki madde onu aynı şeye ikinci kez davet
   ediyordu. Ama sayfanın TEK gerçek bağlantısı menüydü; kaldırınca
   öksüz kalıyordu (iframe'in src'si arama motoru için bağlantı
   sayılmaz). Bu satır o boşluğu dolduruyor — sessiz durur, isteyen
   tam ekranda açar. Telefonda asıl işe yarayan da bu. */
.isik-tam{display:block;width:fit-content;margin:16px auto 0;
  font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:#828990;text-decoration:none;
  padding:14px 18px;                      /* dokunma alanı — 24px asgarisi */
  transition:color .2s}
.isik-tam:hover{color:var(--pirinc-acik)}
.isik-tam:focus-visible{outline:2px solid var(--pirinc-acik);outline-offset:2px}

/* ─── SAHNENİN ÜSTÜNDEKİ ŞEFFAF KATMAN (yalnız dokunmatik) ────────
   Işık sahnesi bir çerçevede duruyor ve iOS, çerçeveye düşen parmağı
   dışarıdaki sayfaya iletmiyor — ziyaretçi sahnede sıkışıyordu.

   touch-action:pan-y tarayıcıya "DİKEY senin, yatay benim" der:
   dikey hareket tarayıcının kendi kaydırması olur (akışkanlık ve
   savrulma oradan gelir), yatay hareket ve dokunuş bize kalır, biz de
   çerçeveye iletiriz (arayuz.js).

   KAPI — bölüm ekranı doldurduğunda dikey de bize gelir. Biriken
   mesafe eşiği geçene kadar sayfa HİÇ kımıldamaz; kısa bir hareketle
   bölümden kazara çıkılmaz. Sınıf parmak inmeden ÖNCE konmalı:
   touch-action hareket başladıktan sonra değişmiyor.

   Çerçeveye pointer-events:none VERİLMEZ — verilmişti ve tuşlar,
   renk kaydırıcısı sağır kalmıştı (ölçüldü). Katman zaten üstte ve
   denetimlerin üstünde bitiyor. */
@media (hover:none){
  .isik-ortu{position:absolute;inset:0;z-index:2;touch-action:pan-y}
  .isik-ortu.kapi{touch-action:none}
}
@media (hover:hover){ .isik-ortu{display:none} }

/* Kapı açılırken oturma geçici kapanır. Kapanmazsa yumuşak geçiş
   başlıyor ama scroll-snap onu yakalayıp bölüme geri çekiyor —
   eşik aşılsa bile beşte dördü geri dönüyordu (ölçüldü). */
html.snap-kapali, html.snap-kapali body{scroll-snap-type:none !important}
html.snap-kapali .isik-cerceve{scroll-snap-align:none !important;
  scroll-snap-stop:normal !important}

/* DİL ÖNERİ ŞERİDİ (13.08.2026) — otomatik yönlendirmenin yerine geçti.
   Kimseyi bir yere göndermiyor: "bu sayfa şu dilde de var" der, ziyaretçi
   isterse tıklar. Kapatınca bir daha çıkmaz.

   NEDEN ALTTA: önce sayfanın en üstüne, akış içine konmuştu. Üst bar
   position:fixed olduğu için şeridin üstünü ÖRTTÜ — tarayıcıda ölçüldü,
   görünmüyordu. Üst barı aşağı itmek açılış sahnesinin hizasını bozardı;
   sahne tam ekran ve kendi ölçüsüne göre kurulu. Altta hiçbir şeye
   dokunmuyor, düzeni de kaydırmıyor. */
.dil-serit{position:fixed;left:0;right:0;bottom:0;z-index:75;
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:11px 16px;background:rgba(28,31,33,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(241,241,238,.10);
  font:500 12.5px/1.3 var(--sans);color:var(--porselen,#F1F1EE);
  text-align:center;flex-wrap:wrap}
.dil-serit a{color:var(--pirinc-acik,#C9A76B);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:1px;
  font-weight:600;white-space:nowrap}
.dil-serit a:hover{color:var(--porselen,#F1F1EE)}
.dil-serit button{border:0;background:none;cursor:pointer;line-height:1;
  color:var(--gri,#7F868D);font-size:17px;padding:0 2px;margin-left:2px}
.dil-serit button:hover{color:var(--porselen,#F1F1EE)}
@media (max-width:520px){.dil-serit{font-size:11.5px;gap:10px;padding:9px 12px}}

/* ═══════ KAYIT BLOĞU — köken sayfası ═══════════════════════════════
   Sitedeki TEK yeni bileşen. Renk, çizgi ve köşe değerleri şeridin
   kendi değişkenlerinden geliyor (--yazi/--silik/--cizgi/--vurgu), o
   yüzden blok hangi zemine düşerse düşsün kendini ayarlar; koyu ve açık
   şerit için ayrı kural yazmaya gerek kalmadı. */
.kayit-basi{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
.kayit-basi .ust{margin:0}
.kayit-basi h2{flex:1 1 100%;margin:6px 0 0}
.kayit-tarih{font:600 10.5px/1.4 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--silik);white-space:nowrap}
.kayit{margin:26px 0 0;padding:0;border-top:1px solid var(--cizgi)}
.kayit-satir{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:6px 28px;padding:18px 0;border-bottom:1px solid var(--cizgi)}
.kayit-satir dt{font:600 10.5px/1.5 var(--sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--silik);margin:3px 0 0}
.kayit-satir dd{margin:0;min-width:0}
/* Değer ve buton aynı satırda; dar ekranda buton alta iner. */
.kayit-us{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kayit-deger{font:600 clamp(14px,1.5vw,17px)/1.45 var(--mono);
  letter-spacing:.01em;color:var(--yazi);word-break:break-word}
a.kayit-deger{text-decoration:none;border-bottom:1px solid var(--vurgu);
  padding-bottom:1px}
a.kayit-deger:hover,a.kayit-deger:focus-visible{color:var(--vurgu)}
.kayit-not{margin:7px 0 0;font:400 13.5px/1.6 var(--sans);color:var(--silik)}
.kayit-ek{margin-left:10px;white-space:nowrap;color:var(--vurgu);
  text-decoration:none;border-bottom:1px solid currentColor;font-weight:500}
.kayit-kopya{flex:0 0 auto;cursor:pointer;background:none;
  border:1px solid var(--cizgi);border-radius:var(--kose);
  padding:5px 11px;color:var(--silik);
  font:600 10px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  transition:color .2s ease,border-color .2s ease}
.kayit-kopya:hover,.kayit-kopya:focus-visible{color:var(--vurgu);
  border-color:var(--vurgu)}
.kayit-atif{margin-top:28px;padding:18px 20px;border:1px solid var(--cizgi);
  border-left:2px solid var(--vurgu);border-radius:var(--kose)}
.kayit-atif-metin{margin:0;flex:1 1 320px;
  font:400 13.5px/1.7 var(--mono);color:var(--yazi);word-break:break-word}
/* Telefonda etiket değerin ÜSTÜNE geçer: iki sütun 190px + numara için
   dar, DOI satırı kırılıyordu. */
@media (max-width:640px){
  .kayit-satir{grid-template-columns:1fr;gap:4px;padding:16px 0}
  .kayit-satir dt{margin:0}
  .kayit-us{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.kayit-kopya{transition:none}}

/* Işık bölümünün altındaki iki bağlantı yan yana (17.08.2026). Tek
   bağlantıyken .isik-tam kendi başına ortalanıyordu; ikinci bağlantı
   gelince sarmalayıcı ortalamayı devralıyor. Telefonda alt alta. */
/* BAĞLANTI SATIRI (23.08.2026): çerçevenin içinde, alt gradyanın üstünde.
   Dışarıdayken bölüm ekrana oturduğundan satır hep arada kalıyordu. */
.isik-yollar{position:absolute;left:0;right:0;bottom:4px;z-index:4;
  display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:0 10px;pointer-events:auto}
@media (max-width:700px){ .isik-yollar .isik-tam{padding:12px 8px;font-size:10px;letter-spacing:.14em} }
.isik-yollar .isik-tam{margin:0}