/* ==========================================================================
   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.

   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. */
@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-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}

: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 */

  /* ü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;
  --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%}
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)}

/* Ö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}

/* MARKA UZANTISI — lovja.smile · lovja.studio · lovja.portal aynı kalıbın üyeleri.
   Portalın giriş ekranıyla birebir: ad Playfair serif, ".uzantı" tonal soluk.
   Metin içinde "portal/smile/studio" geçen her yerde markanın konuştuğu tek yazım. */
.marka-ad{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;
  color:inherit;text-transform:none;font-style:normal}
.marka-ad i{font-style:normal;font-weight:500;color:var(--silik,#8A8A84)}
.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}

/* ------------------------------------------------------------------- ü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}

/* --- ö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);
  opacity:0;pointer-events:none;transition:opacity .42s ease;
  cursor:zoom-out}
.buyutec.acik{opacity:1;pointer-events:auto}
.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}
.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}
.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}
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)}
.sss-oge{border-bottom:1px solid color-mix(in srgb, currentColor 14%, transparent)}
.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}