/* ══════════════════════════════════════════════════════════════════════
   VİTRİN — atolyedefteri.com

   ÜRÜNÜN KENDİ DİLİ. İlk sürümde jetonları (renk/font) alıp jenerik SaaS
   kartları dizmiştim: renkler doğruydu ama sayfa üründen bambaşka bir şey
   gibi duruyordu. Ürünü ürün yapan şey renkler değil, ŞU İMZALAR:

     .spine     — cilt sırtı: kiremit/krem kesik bant (src/css/style.css:1230)
     .muhur     — kauçuk mühür: eğik, çift çerçeve, mürekkep dağılma maskesi
     .plaka     — TR plakası: lacivert şerit + beyaz zemin
     delikli    — defter yaprağının koparılmış üst kenarı
     pinstripe  — kâğıdın dikey dokusu
     serif italik başlık + tek kelime kiremit vurgu

   Hepsi üründen BİREBİR alındı (mürekkep dağılması için aynı maske,
   aynı açılar, aynı hardal #8a5f1e — parlak olanı metinde okunmuyor).
   Siteye giren usta ürünü açtığında aynı defterin sayfasında olmalı.

   DIŞ KAYNAK YOK: font, betik, görsel, analitik — hiçbiri dışarıdan.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#f6f3eb; --panel:#fdfcf9; --border:#e1dbcd;
  /* Giris alani ve dugme cerceveleri WCAG 1.4.11 geregi zeminle en az
     3:1 olmali. Onceki #cfc6b2 krem uzerinde 1,6:1 idi — alanin nerede
     bittigi belli olmuyordu. #a89b80 olculdu: 3,04:1.
     Yumusak ton yalniz DEKOR ayraclarda kalir. */
  --border-strong:#a89b80; --border-yumusak:#cfc6b2;
  --text:#26251f;
  /* METIN icin okunur gri. Urunun #8b8474'u krem zeminde 3,35:1 —
     WCAG AA (4,5:1) altinda ve govde metninin TAMAMI bu renkte.
     #6f6a5c olculdu: 5,12:1. Dekor tonu ayri jetonda. */
  --muted:#6f6a5c; --muted-dekor:#8b8474;
  --accent:#b23b25; --accent-deep:#8a2a19;
  --accent-soft:rgba(178,59,37,.07); --accent-ring:rgba(178,59,37,.16);
  --olive:#4f772d; --petrol:#2c5d63;
  --mustard:#8a5f1e;              /* metinde okunan hardal (üründeki değer) */
  --mustard-bright:#d4a350;       /* YALNIZ dekor — metinde kullanma */
  /* ── ÖLÇÜYE OTURTULMUŞ YEDEK YÜZLER ────────────────────────────────
     Yazı tipi ağdan gelene kadar sayfa YEDEK fontla dizilir. Yedeğin
     harf genişlikleri farklı olduğu için, gerçek font gelince satırlar
     yeniden kırılır ve sayfa zıplar. Ölçüldü (yavaş 3G): giriş paragrafı
     bir satır büyüyor, "Kendin dene" düğmesi 29px aşağı kayıyor,
     CLS 0,098. Ziyaretçi ilk cümleyi okurken metin altından kaçıyordu.

     İki kolay çözüm de yanlıştı:
       font-display:optional → zıplama biter ama yavaş bağlantıda font
         HİÇ gelmez; sayfa Georgia/Courier ile çizilir. Ölçüldü, denendi,
         geri alındı — tasarımın yarısı gidiyor.
       sadece ön yükleme → hızlı ağda yetiyor, 3G'de yetmiyor.

     Doğrusu: yedeği gerçek fontun ÖLÇÜSÜNE oturtmak. Aşağıdaki üç yüz
     yerel Arial/Georgia/Courier'i alıp size-adjust ile genişliğini,
     ascent/descent ile satır kutusunu birebir eşitler. Değerler tahmin
     değil, ÖLÇÜLDÜ: 100px puntoda temsili bir Türkçe dizgide en ve boy
     farkı 0,0px (bkz. aşağıdaki yorumlardaki hedef ölçüler).
     Böylece font geç gelse bile tek bir piksel oynamaz. */
  --serif:'Lora','Lora-olcu','Playfair Display',Georgia,serif;
  --sans:'Montserrat','Montserrat-olcu','Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  --stamp:'Special Elite','SpecialElite-olcu','Courier New',monospace;

  /* ── TİP ÖLÇEĞİ ────────────────────────────────────────────────────
     Ölçüldü: sayfada 30 FARKLI punto vardı (16 / 14.5 / 13 / 16.5 /
     15.5 / 12.5 …). Rastgele sayı, tasarımın en görünür amatörlüğü.
     1.25 oranlı (majör üçlü) yedi basamak; her metin bunlardan birini
     kullanır, arada değer yok. */
  --t00:9.5px;  /* damga (ürünün .stamp puntosu) */
  --t0:11px;    /* etiket, künye   */
  --t1:14px;    /* yardımcı metin  */
  --t2:17px;    /* gövde           */
  --t3:21px;    /* alt başlık      */
  --t4:27px;    /* bölüm başlığı   */
  --t5:34px;    /* büyük başlık    */
  --t6:clamp(36px,5vw,56px);   /* kahraman */

  /* ── BOŞLUK ÖLÇEĞİ ─────────────────────────────────────────────── */
  --b1:4px;  --b2:8px;  --b3:12px; --b4:16px;
  --b5:24px; --b6:32px; --b7:48px; --b8:64px; --b9:96px;

  /* ── KÖŞE ÖLÇEĞİ ───────────────────────────────────────────────────
     15 farklı yarıçap vardı. Üç basamak yeter: mühür/plaka gibi sert
     nesneler, kartlar, büyük yüzeyler. Hap biçimi ayrı. */
  --r-s:4px; --r:10px; --r-l:16px; --r-hap:99px;

  --shadow:0 4px 14px rgba(90,75,60,.05),0 1px 3px rgba(90,75,60,.05);
  --shadow-guclu:0 16px 44px rgba(90,75,60,.13),0 3px 8px rgba(90,75,60,.07);
  --pinstripe:repeating-linear-gradient(90deg,transparent,transparent 15px,
              rgba(178,59,37,.02) 15px,rgba(178,59,37,.02) 16px);
  /* mürekkebin kâğıtta dağılması — üründeki .stamp maskesinin aynısı */
  --murekkep:repeating-linear-gradient(45deg,rgba(0,0,0,.6) 0 1.3px,#000 1.3px 2.8px);
  --en:1180px;
  /* Bölümlerin yan dolgusu TEK YERDE. Kenardan taşan öğeler (yatay
     şeritler, çakılan gün sahnesi) bunun negatifini kullanıyor; iki
     yerde ayrı ayrı yazılınca 768px'de 8px'lik taşma çıkmıştı. */
  --yan:28px;
}
/* Montserrat = Arial x 1,1164 (ölçülen hedef: 4461,5px en / 122px boy) */
@font-face{font-family:'Montserrat-olcu';
  src:local('Arial'),local('Helvetica Neue'),local('Roboto'),local('Liberation Sans');
  size-adjust:111.64%;ascent-override:86.71%;descent-override:22.48%;
  line-gap-override:0%}
/* Lora = Georgia x 1,0229 (hedef: 4111,2px / 128px) */
@font-face{font-family:'Lora-olcu';
  src:local('Georgia'),local('Times New Roman'),local('Liberation Serif');
  size-adjust:102.29%;ascent-override:96.2%;descent-override:28.9%;
  line-gap-override:0%}
/* Special Elite = Courier New x 0,9023 (hedef: 4548,3px / 100px) */
@font-face{font-family:'SpecialElite-olcu';
  src:local('Courier New'),local('Courier'),local('Liberation Mono');
  size-adjust:90.23%;ascent-override:88.7%;descent-override:22.2%;
  line-gap-override:0%}

/* KOYU TEMA YOK — ÜRÜNDE DE YOK.
   Buraya bir prefers-color-scheme:dark bloğu koymuştum; işletim sistemi
   koyu moddaysa site kararıyordu. Ama ürün HER ZAMAN krem kâğıt: kendi
   CSS'inde `color-scheme: only light` yazıyor ve gerekçesi de orada —
   Android Chrome'un zorla karartması ölçülmüş, ekranın %92-95'ini siyah
   yapıyormuş (karartma render aşamasında olduğu için CSS'e bakınca
   anlaşılmıyor). Vitrin karardığında usta ürünü açınca bambaşka bir yere
   girmiş oluyordu. Aynı beyanı buraya da koyuyoruz. */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* Menüden gidilen her hedef sabit şeridin altına insin. */
:where(section[id],[id]){scroll-margin-top:84px}
html{
  color-scheme:only light;
  scroll-behavior:smooth;
  /* scroll-padding-top BURADAN KALKTI, hedeflere taşındı (aşağıda
     [id]{scroll-margin-top}). Sebebi: scroll-padding kaydırma kabının
     "görünür alanını" daraltıyor ve kaydırmayla sürülen animasyonların
     (yatay akan gün) aralığını da kaydırıyordu — çakılma bittiğinde
     akış ancak %64'e gelmiş oluyor, son kart ekranın dışında kalıyordu.
     ÖLÇÜLDÜ: padding 0 iken %100. scroll-margin hedefin kendisine
     uygulanır, kabın görünür alanına dokunmaz; bağlantılar yine
     başlığın altına iner. */
  /* Kâğıdın arkasındaki TEZGÂH zemini — üründeki değerin aynısı.
     Antrasit değil: geniş ekranda iki yanda koyu bant kalmasın. */
  background:radial-gradient(1100px 700px at 50% -8%,#efe9db,#e7e0cf 55%,#ded6c2);
  /* clip, hidden DEĞİL: hidden kök öğeyi kaydırma kabına çevirip
     sticky katmanları (cilt sırtı, üst şerit) bozar — üründe ölçülmüş. */
  overflow-x:clip;
  scrollbar-color:#c3bba7 #e7e0cf;
}
/* ── KÂĞIDIN KENDİSİ ────────────────────────────────────────────────
   Ziyaretçiyi ikna eden şey yazılan cümle değil, sayfanın DOKUNULABİLİR
   durması. Düz renkli zemin "şablon" hissi verir; lifli kâğıt "birinin
   emek verdiği bir defter" hissi. Üç katman, hepsi dosyanın içinde:
     1. kâğıt lifi  — SVG feTurbulence, tek karo tarayıcıda üretilir
                      (dış istek yok, ~0,4 KB, bir kez rasterlenir)
     2. pinstripe   — üründeki dikey doku
     3. düz krem    — taban
   Opaklık .055: ölçüldü, 24 punto metinde okunurluğa etkisi yok ama
   parlak ekranda yüzey ölü olmaktan çıkıyor. */
body{background:var(--bg);
  /* overflow-x:clip GOVDEDE DE gerekli. Kok ogede vardi ama govdede
     yoktu; 621-1023px arasinda belge 14px genis cikiyor ve sayfa yana
     kayiyordu (olculdu: 782/768). Kaynak gorunmeyen bir 3B kutu —
     tasma seridinde hicbir oge yok. clip kaydirma kabi OLUSTURMAZ,
     yapiskan baslik ve cakilan gun bolumu bozulmaz. */
  overflow-x:clip;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23l)' opacity='.055'/%3E%3C/svg%3E"),var(--pinstripe);
  background-repeat:repeat,repeat;color:var(--text);
  font:var(--t2)/1.68 var(--sans);-webkit-font-smoothing:antialiased}
/* Kâğıt tercihi: hareket azaltma isteyenlerde doku kalır (hareket değil),
   ama yazdırırken çıkmasın — mürekkep israfı. */
@media print{body{background-image:none}}
::selection{background:color-mix(in srgb,var(--accent) 24%,transparent)}

/* ── CİLT SIRTI — sayfanın en tepesi (üründe .spine) ───────────────── */
.sirt{position:sticky;top:0;z-index:70;height:5px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 12px,var(--panel) 12px 24px)}

/* ── KAUÇUK MÜHÜR — üründeki .stamp ────────────────────────────────── */
.muhur-e{display:inline-block;font:9.5px/1 var(--stamp);letter-spacing:1.6px;
  text-transform:uppercase;color:var(--mh,var(--muted));
  border:1.6px solid currentColor;border-radius:var(--r-s);padding:4px 7px 3px;
  transform:rotate(-4deg);white-space:nowrap;
  -webkit-mask-image:var(--murekkep);mask-image:var(--murekkep)}
.muhur-e.kiremit{--mh:var(--accent)}
.muhur-e.zeytin{--mh:var(--olive)}
.muhur-e.petrol{--mh:var(--petrol)}
.muhur-e.hardal{--mh:var(--mustard)}

/* büyük arşiv mührü — üründeki .stamp-xl */
.muhur-xl{position:absolute;right:16px;top:14px;z-index:1;pointer-events:none;
  font:var(--t3)/1 var(--stamp);letter-spacing:3px;text-transform:uppercase;
  color:var(--mh,var(--accent));border:3.5px double currentColor;border-radius:var(--r-s);
  padding:9px 16px 7px;transform:rotate(-11deg);opacity:.16;
  -webkit-mask-image:repeating-linear-gradient(-35deg,rgba(0,0,0,.5) 0 1.5px,#000 1.5px 3.4px);
  mask-image:repeating-linear-gradient(-35deg,rgba(0,0,0,.5) 0 1.5px,#000 1.5px 3.4px)}

/* ── TR PLAKASI — üründeki .plaka ──────────────────────────────────── */
.plaka{display:inline-flex;align-items:stretch;height:26px;
  background:linear-gradient(180deg,#fff,#eef0f2);border:1.6px solid #23252c;
  border-radius:4px;overflow:hidden;flex:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 2px rgba(20,16,12,.18)}
.plaka i{display:flex;align-items:flex-end;justify-content:center;padding:2px 4px;
  background:#003da5;color:#fff;font:800 var(--t00) var(--sans);font-style:normal;
  border-right:1.2px solid #23252c}
/* nowrap ŞART. Yoksa plaka, satır darlaşınca kendi asgari genişliğine
   ("5678") büzülüyor; "06 AD" üst satıra kaçıyor ve 26px'lik kutudan
   taşıp KIRPILIYOR. Kutu ölçüsü bunu göstermiyor — b bir flex kabı,
   scrollWidth ve yükseklik değişmeden kalıyor. Yalnız ekran görüntüsünde
   görülüyordu. Metin sarmayınca asgari genişlik tüm plaka olur. */
.plaka b{display:flex;align-items:center;padding:0 7px;color:#191c24;
  font:800 var(--t1) var(--sans);letter-spacing:.5px;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.plaka i{white-space:nowrap}

/* ── başlık şeridi ─────────────────────────────────────────────────── */
/* Serit tam genislikte ama ICI icerik sutununa hizali: 2560px ekranda
   logo icerikten 662px uzaga dusuyordu, sayfa iki ayri sey gibi duruyordu. */
.ust{position:sticky;top:5px;z-index:60;
  background:color-mix(in srgb,var(--panel) 92%,transparent);
  backdrop-filter:blur(11px);border-bottom:1px solid var(--border)}
.ust-ic{display:flex;align-items:center;gap:20px;padding:12px 28px;
  max-width:var(--en);margin-inline:auto}
.marka{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text)}
.muhur{width:38px;height:38px;flex:0 0 38px;display:flex;align-items:center;
  justify-content:center;border:1.6px solid var(--accent);border-radius:10px;
  color:var(--accent);font:700 14px/1 var(--stamp);letter-spacing:.5px;
  transform:rotate(-3deg);background:var(--accent-soft);
  box-shadow:1.5px 1.5px 0 var(--accent-ring)}
.marka-yazi small{display:block;font:600 var(--t00)/1 var(--sans);color:var(--muted);
  letter-spacing:1.9px;margin-bottom:3px}
.marka-yazi b{display:block;font:italic 700 var(--t2)/1 var(--serif)}
.ust nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.ust nav a{color:var(--muted);text-decoration:none;font:600 var(--t1) var(--sans);
  transition:color .15s, background .15s;padding:6px 10px;border-radius:8px}
.ust nav a:hover{color:var(--text);background:var(--accent-soft)}
.ust nav a.aktif{color:var(--accent);font-weight:700;background:var(--accent-soft);box-shadow:inset 0 -2px 0 var(--accent)}
/* MENÜDEKİ NUMARA YALNIZ TELEFONDA. Masaüstünde şerit yatay, sarmıyor ve
   kaydırmıyor: sekizinci bağlantı dar bir pencerede taşardı. Telefonda
   menü alt alta açılan bir liste — bir satır bedava, üstelik dokununca
   ARAYAN cihaz orası. Açılışı 960px altındaki blokta. */
.ust nav a.ara-link{display:none}

/* Aktif bölüm rozeti — mobilde hangi bölümde olduğunu canlı gösterir */
.ust-konum-rozet{display:none;align-items:center;padding:5px 12px;
  border-radius:20px;background:var(--accent-soft);color:var(--accent);
  font:700 12.5px/1 var(--sans);letter-spacing:0.3px;
  border:1px solid var(--accent-ring);margin-left:auto;
  box-shadow:0 2px 6px rgba(178,59,37,0.12);
  transition:all .2s ease}
@media (max-width:960px){.ust-konum-rozet{display:inline-flex}}

/* [45] ATLAMA BAĞLANTISI — klavye kullanıcısı her seferinde 9 menü
   bağlantısını geçmek zorunda kalmasın. Sekmeyle odaklanınca belirir. */
.atla{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 20px;
  background:var(--accent);color:#fff;font:700 14px var(--sans);
  text-decoration:none;border-radius:0 0 10px 0}
.atla:focus{left:0}

/* [11][28] MOBİL MENÜ — 8 bağlantının 7'si gizleniyordu ve yerine
   hiçbir şey gelmiyordu: telefondan giren kullanıcı sayfada gezinemiyordu.
   Hamburger yalnız dar ekranda görünür. */
.menu-dugme{display:none;margin-left:auto;width:44px;height:44px;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:none;border:1px solid var(--border-strong);border-radius:10px;
  cursor:pointer}
.menu-dugme span{display:block;width:19px;height:2px;background:var(--text);
  border-radius:var(--r-s);transition:transform .2s,opacity .2s}
.menu-dugme[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-dugme[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-dugme[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* [8][19] MÜŞTERİNİN EKRANINDA ARAÇ KİMLİĞİ — plakasız bir takip
   ekranı "hangi araç" sorusunu cevaplamıyordu; ayrıca masa ile telefonun
   AYNI aracı gösterdiği görünmüyordu. */
.t-arac-kimlik{display:flex;flex-direction:column;align-items:center;gap:4px}
.t-arac-kimlik s{text-decoration:none;font-size:var(--t00);color:var(--muted)}

/* ── düğmeler ──────────────────────────────────────────────────────── */
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:var(--r);border:1px solid var(--border-strong);
  background:var(--panel);color:var(--text);font:700 var(--t1) var(--sans);
  text-decoration:none;cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .16s,background .16s}
.dugme:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.dugme:active{transform:translateY(0)}
.dugme.tam-renk{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 3px 0 var(--accent-deep)}
.dugme.tam-renk:hover{background:var(--accent-deep);border-color:var(--accent-deep);
  box-shadow:0 5px 0 var(--accent-deep),var(--shadow)}
.dugme.tam-renk:active{box-shadow:0 1px 0 var(--accent-deep)}
.dugme.yesil{background:var(--olive);border-color:var(--olive);color:#fff}
.dugme.yesil:hover{filter:brightness(1.09)}
.dugme.kucuk{padding:9px 17px;font-size:var(--t1);border-radius:var(--r);
  background:var(--accent);border-color:var(--accent);color:#fff}
.dugme.tam{width:100%}
.dugme:disabled{opacity:.5;cursor:default;transform:none}

/* ── DEFTER YAPRAĞI: bölümlerin taşıyıcısı ─────────────────────────
   Üst kenar KOPARILMIŞ görünür (kiremit kesikler) — ürünün defter
   sayfasındaki delikli kenarın aynısı. */
.yaprak{position:relative;background:var(--panel);
  border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden}
.yaprak::before{content:'';position:absolute;inset:0 0 auto;height:7px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 9px,transparent 9px 18px);
  opacity:.85}

/* ── kahraman ──────────────────────────────────────────────────────── */
/* Metin sütunu biraz daha geniş. 502px'te başlık iki satıra sığıyor ama
   iki düğme yan yana durmuyor, alt alta düşüyorlardı — yığılı iki düğme
   hem 110px yiyor hem "iki ayrı yol" yerine "bir yol, altında bir tane
   daha" gibi okunuyor. Üstteki dolgu da b8'den b7'ye indi: kahraman
   762px'e çıkıp maketin altını kesiyordu. */
.kahraman{max-width:var(--en);margin:0 auto;padding:var(--b7) 28px var(--b7);
  display:grid;grid-template-columns:1.12fr .88fr;gap:var(--b6);align-items:center;
  position:relative;
  background:
    radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 60%),
    radial-gradient(circle at 10% 80%, rgba(79,119,45,0.08) 0%, transparent 50%);
  border-radius:24px;
}
.pro-bas-etiket{margin-bottom:18px;display:inline-block}

.yazi-gradient{
  background:linear-gradient(135deg, var(--accent) 0%, #e06d53 60%, #f4a261 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  display:inline-block;
  font-style:italic;
  position:relative;
}
.hero-cta{box-shadow:0 8px 24px rgba(178,59,37,0.32), 0 3px 0 var(--accent-deep);font-size:15px}
.hero-cta:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(178,59,37,0.4), 0 5px 0 var(--accent-deep)}

/* ── PRO GİRİŞ VE BAŞVURU BARI ───────────────────────────────────── */
.pro-giris-bar{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:16px;
  padding:8px 18px;
  border-radius:30px;
  background:var(--panel);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow);
  flex-wrap:wrap;
  transition:all .2s ease;
}
.pro-giris-bar:hover{
  border-color:var(--accent);
  box-shadow:0 6px 20px rgba(0,0,0,0.06);
}
.pro-giris-sol{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  color:var(--muted);
}
.pro-giris-im{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent);
}
.pro-giris-im svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pro-giris-metin{font-weight:500}
.pro-giris-link{
  color:var(--accent);
  font-weight:700;
  text-decoration:none;
  transition:color .16s ease,transform .16s ease;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.pro-giris-link:hover{
  color:var(--accent-deep);
  text-decoration:underline;
  transform:translateX(2px);
}
.pro-giris-ayrac{
  width:1px;
  height:16px;
  background:var(--border-strong);
}
.pro-basvuru-link{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
.pro-basvuru-link .muhur-e{
  transition:transform .16s ease;
}
.pro-basvuru-link:hover .muhur-e{
  transform:scale(1.04);
}
h1{font:italic 700 clamp(34px,5.2vw,60px)/1.05 var(--serif);
  letter-spacing:-1.2px;margin-bottom:20px;text-wrap:balance;
  font-feature-settings:'liga' 1,'kern' 1}
h1 em{font-style:italic;color:var(--accent);position:relative;white-space:nowrap}
h1 em::after{content:'';position:absolute;left:-.05em;right:-.05em;bottom:-.04em;
  height:.24em;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 120 10'%3E%3Cpath d='M2 7.2C22 3.4 44 8.2 63 5.1c17-2.8 37 1.9 55-1.4' fill='none' stroke='%23b23b25' stroke-width='2.1' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.giris{font-size:var(--t2);color:var(--muted);max-width:50ch;margin-bottom:28px}
.giris b{color:var(--text);font-weight:600}
.dugmeler{display:flex;gap:11px;flex-wrap:wrap}
/* KAHRAMAN ALT ŞERİDİ — güven maddeleri ve sayılar TEK sıra.
   Önce üç ayrı blok alt alta duruyordu: güven listesi, sayı kutusu ve
   aralarındaki boşluklar toplamda 120px yiyor, kahramanı 762px'e
   çıkarıp maketin altını kesiyordu. Aynı bilgi tek şeritte, kesik
   çizgili ayraçlarla — defterin kendi dili. */
.guven{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:20px;
  padding-top:16px;border-top:1px dashed var(--border-strong)}
.guven li{position:relative;padding-left:19px;font:600 var(--t0) var(--sans);
  color:var(--muted)}
.guven li::before{content:'✓';position:absolute;left:0;color:var(--olive);font-weight:700}

/* iki ekran: ustanın gördüğü / müşterinin gördüğü. ÖRTÜŞME YOK —
   biri diğerinin bilgisini kapatmamalı (bir kez öyle yapıp bozmuştum). */
/* Perspektif KAPSAYICIDA. transform:perspective(...) ile birlikte
   preserve-3d kullanılınca çocuklar düzleşiyor ve cihazın yan yüzü
   görünmez oluyordu. Ortak bir perspektif, iki maketi de aynı sahneye
   oturtuyor — ayrı ayrı perspektif verilse her biri kendi kaçış
   noktasına bakar, göz yanlış olduğunu anlar. */
.kahraman-gorsel{display:flex;align-items:flex-end;gap:16px;
  perspective:1500px;perspective-origin:60% 45%}
.masa{flex:1 1 auto;min-width:0;background:var(--panel);
  border:1px solid var(--border);border-radius:var(--r-l);
  box-shadow:var(--shadow-guclu);overflow:hidden;
  /* Telefon sağa dönük; masa karşı yöne dönüyor. İkisi arasında
     derinlik oluşuyor — ürün fotoğrafındaki gibi. */
  transform:rotateY(5deg) rotate(-1deg);
  position:relative}
.masa-cubuk{display:flex;align-items:center;gap:6px;padding:10px 13px;
  background:var(--bg);border-bottom:1px solid var(--border)}
.masa-cubuk i{width:8px;height:8px;border-radius:50%;background:var(--border-strong)}
.masa-cubuk span{margin-left:9px;font:11px var(--stamp);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.masa-ic{padding:8px 12px 12px;display:flex;flex-direction:column;gap:8px}
.m-bas{font:700 var(--t00) var(--sans);letter-spacing:1.4px;color:var(--muted);
  padding:4px 4px 8px;border-bottom:1px solid var(--border-strong)}

/* ── ARAÇ SATIRI — üründeki .drl-row'un birebir kardeşi ─────────────
   Ürünün en tanınır bileşeni bu: sıcak kâğıt kartı, İÇİNDE kesikli
   çerçeve (bilet hissi), solda durum renginde mürekkep çubuğu, araç
   çizimi ve altında rengin ışığı. Maketi düz satır olarak bırakmak,
   sayfayı üründen kopartıyordu. */
/* Orta sütun min-content'ten dar OLAMAZ: minmax(0,1fr) idi ve "Passat"
   9px taşıyordu — sağdaki plaka+mühür sütunu payını önce alıyor, model
   adına kalanı kalıyordu. Ölçüldü: metin 60,3px, kutu 51px. */
.arac{position:relative;display:grid;
  grid-template-columns:56px minmax(min-content,1fr) auto;
  align-items:center;column-gap:11px;min-height:66px;padding:8px 12px 8px 15px;
  background:linear-gradient(180deg,#fbf6ea,#f1e9d6);border-radius:10px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(95,72,40,.12),0 1px 0 rgba(255,255,255,.65) inset}
.arac::after{content:'';position:absolute;inset:4px;pointer-events:none;
  border:1px dashed rgba(120,90,50,.24);border-radius:var(--r-s)}
.arac::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--dr,#8b8474);z-index:2}
.arac-gorsel{position:relative;width:56px;height:42px;display:flex;
  align-items:center;justify-content:flex-end}
.arac-gorsel img{position:relative;z-index:1;max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
/* çizimin altındaki renkli ışık — üründeki .dr-glow */
.arac-isik{position:absolute;left:50%;bottom:2px;width:64%;height:30%;
  transform:translateX(-50%);border-radius:50%;opacity:.42;filter:blur(4px);
  background:radial-gradient(ellipse at center,var(--dr,#8b8474),transparent 70%)}
.arac-orta{min-width:0}
.arac-model{font:800 var(--t1) var(--sans);color:#33302a;letter-spacing:.3px;
  text-transform:uppercase}
/* Is adi KIRPILMAZ: "Periyodik b..." diye kesiliyordu ve maket urunun
   ne yaptigini anlatamaz hale geliyordu. Iki satira sarsin. */
.arac-is{font:italic 500 var(--t0)/1.32 var(--serif);color:#8a7f68;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.arac-sag{display:flex;flex-direction:column;align-items:flex-end;gap:6px}

/* ── "KENDİN DENE" — sayfanın eşsiz anı ─────────────────────────────
   Ziyaretçi ustanın yerine geçer: düğmeye basar, YANINDAKİ müşteri
   ekranı anında değişir. Okuduğu her şeyi bir saniyede kendi eliyle
   yaşar. Eskiden "Canlı örneği gör" düğmesi kilitli bir PIN ekranına
   gidiyordu — ürünün en güzel yanı bir tık ötedeydi ama kimse
   göremiyordu. */
.dene{margin-top:11px;padding:11px 12px;border-radius:10px;
  background:var(--accent-soft);border:1px dashed var(--accent-ring)}
.dene s{display:block;text-decoration:none;text-align:center;
  font:700 var(--t00) var(--stamp);letter-spacing:1.7px;color:var(--accent);
  margin-bottom:8px}
.dene-dugmeler{display:flex;gap:6px}
.dene-dugmeler button{flex:1;padding:9px 6px;border-radius:var(--r);cursor:pointer;
  border:1.4px solid var(--border-strong);background:var(--panel);
  color:var(--muted);font:700 var(--t0) var(--sans);
  transition:all .16s cubic-bezier(.2,.8,.3,1)}
.dene-dugmeler button:hover{border-color:var(--accent);color:var(--accent);
  transform:translateY(-1px)}
.dene-dugmeler button.aktif{background:var(--accent);border-color:var(--accent);
  color:#fff;box-shadow:0 2px 0 var(--accent-deep)}
.dene-dugmeler button:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px}
@media (pointer:coarse){.dene-dugmeler button{min-height:44px}}

/* ── MÜŞTERİNİN GÖRDÜĞÜ EKRAN ───────────────────────────────────────
   GERÇEK track.html'in birebir küçültülmüş hâli. Önce uydurmuştum:
   dikey onay listesi çizmiştim, oysa ürün YATAY 4 ADIMLI zaman çizgisi
   kullanıyor (Teslim Alındı / Onarım Sürüyor / Hazır / Teslim Edildi),
   üstünde "CANLI ARAÇ TAKİP RAPORU" künyesi ve kiremit serif işletme
   adı var. Müşteriye gösterdiğimiz şeyi yanlış anlatan bir tanıtım,
   ilk kullanımda hayal kırıklığı yaratır. */
/* ── KAHRAMANDAKİ TELEFON — GERÇEK CİHAZ, AÇILI ────────────────────
   Önce koyu kenarlıklı bir kutuydu; "telefon" demek için yeterliydi ama
   reklam gibi durmuyordu. Şimdi galerideki çerçevenin aynısı (ürünün
   kendi .dre-tel-cerceve'si): titanyum kasa geçişi, Dynamic Island,
   yan tuşlar — üstüne hafif bir perspektif eğimi.
   Eğim gözü masaya oturtuyor: tarayıcı maketi sola, telefon sağa
   dönük duruyor, aralarında derinlik oluşuyor. Bir ürün fotoğrafında
   olduğu gibi.
   transform-style / backface yok: içerik düz duruyor, yalnız kasa
   dönüyor — metin bulanıklaşmasın diye. */
/* ══ CİHAZ ÖLÇÜLERİ — iPHONE 16 PRO'DAN ═══════════════════════════
   Kaynak (Apple teknik özellikleri): gövde 149,6 x 71,5 x 8,25 mm,
   ekran 2622x1206 piksel / 460 ppi.

   Buradan çıkan oranlar — HEPSİ gövde genişliğine (--w) bağlı, çünkü
   tek bir sayı değişince cihazın tamamı doğru büyüyüp küçülsün:

     gövde oranı   149,6 / 71,5              = 2,092   (yükseklik/genişlik)
     ekran fiziksel 1206/460" x 2622/460"    = 66,6 x 144,8 mm
     çerçeve payı  (71,5 − 66,6) / 2 = 2,4mm = %3,36 gövde eni
     köşe yarıçapı ~11,7 mm                  = %16,4  gövde eni
     ekran yarıçapı 55pt / 402pt ekran eni   = %13,1  gövde eni
     Dynamic Island 125 x 36,5 pt            = %29,0 x %8,47 gövde eni
       tepeden 11pt                          → %5,92 gövde eni
     durum şeridi  59pt güvenli alan         = %13,7  gövde eni

   ÖNCEKİ HATA: çerçeveye 9/19.5 (=2,174) verdim — o EKRANIN oranı,
   gövdenin değil. Cihaz 290x628 çıkıyordu, olması gereken 290x607;
   21px fazla uzundu ve bu yüzden iPhone gibi durmuyordu.

   Aynı hata burada da yapılmıştı: kalınlık, köşe ve ada elle yazılınca
   gövde yüksekliği İÇERİĞE bağlanıyor, cihaz 214x465 çıkıyordu. */
.telefon{--w:232px;
  position:relative;flex:0 0 var(--w);width:var(--w);
  aspect-ratio:71.5/149.6;
  border-radius:calc(var(--w)*.164);padding:calc(var(--w)*.0336);
  background:linear-gradient(155deg,#5b5b61 0%,#2c2c31 22%,#1b1b1f 62%,#43434a 100%);
  box-shadow:
    /* KASANIN KALINLIĞI — yedi katman, her biri biraz daha koyu.
       YÖN SAĞA. rotateY(-13deg) yüzey normalini sola çevirir; bakan göz
       normalin SAĞINDA kalır, yani görünen yan yüz SAĞ yüzdür. Önce sola
       vermiştim — o uzaktaki yüz, görünmemesi gerekiyordu. */
    1.6px .5px 0 #2b2b31, 3.2px 1px 0 #27272d, 4.8px 1.5px 0 #232329,
    6.4px 2px 0 #1f1f25, 8px 2.5px 0 #1b1b21, 9.6px 3px 0 #17171d,
    11.2px 3.5px 0 #131319,
    /* zemine düşen gölge */
    6px 30px 54px rgba(18,18,22,.40),0 3px 8px rgba(18,18,22,.30),
    0 0 0 1px rgba(255,255,255,.10) inset;
  /* GERÇEK 3B GÖVDE. Önce yalnız eğilmiş DÜZ bir yüzeydi: cihazın
     kalınlığı yoktu, kâğıt gibi duruyordu. Şimdi kutunun kendisi var —
     ön yüz + yan yüz, preserve-3d ile. */
  transform-style:preserve-3d;
  transform:rotateY(-13deg) rotateX(3.5deg) rotate(1.4deg);
  animation:telSuz 6.5s ease-in-out infinite}
/* Yan yüzü ayrı bir 3B düzlem olarak denedim ve BIRAKTIM: düz bir
   dikdörtgen, kasanın yuvarlak silüetini takip edemiyor; üstte ve altta
   başıboş bir çubuk olarak taşıyordu (ölçüldü, ekran görüntüsüyle
   görüldü). Kalınlığı KATMANLI GÖLGE veriyor — box-shadow border-radius'u
   koruduğu için kenar, kasanın yuvarlaklığına birebir oturuyor.
   Yön sola: cihaz sağ kenarı öne gelecek şekilde dönük, kalınlık
   solda ve altta görünür. */
.tel-yan{display:none}
/* Ön camın kavisli kenarındaki ışık */
.telefon-ic::after{content:'';position:absolute;inset:0;border-radius:29px;
  pointer-events:none;z-index:6;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),
             inset -1px 0 3px rgba(255,255,255,.10)}
/* Çok hafif süzülme — cihaz duruyor değil, YAŞIYOR. Genlik 7px:
   ölçüldü, göz fark ediyor ama okumayı bozmuyor. Dönüş değerleri
   birebir yukarıdakiyle aynı, yoksa kare atlıyor. */
@keyframes telSuz{
  0%,100%{transform:rotateY(-13deg) rotateX(3.5deg) rotate(1.4deg) translateY(0)}
  50%    {transform:rotateY(-13deg) rotateX(3.5deg) rotate(1.4deg) translateY(-7px)}
}
/* SAYFA GEÇİŞİ — durum değişince ekran kendini yeniliyormuş gibi.
   Önce metin yerinde değişiyordu; "bir şey oldu" hissi yoktu. Şimdi
   kart hafifçe yandan giriyor: telefon kendi kendine geziniyor gibi. */
@keyframes telSayfa{
  from{opacity:0;transform:translateX(12px)}
  to{opacity:1;transform:none}
}
.telefon-ic.gecti .t-kart,
.telefon-ic.gecti .t-ilerleme{animation:telSayfa .4s cubic-bezier(.2,.8,.3,1) both}
.telefon-ic.gecti .t-ilerleme{animation-delay:.06s}
@media (prefers-reduced-motion:reduce){
  .telefon{animation:none}
  .telefon-ic.gecti .t-kart,
  .telefon-ic.gecti .t-ilerleme{animation:none}
}
/* Dynamic Island — ekran eninin %31,1'i, tepeden 11pt */
.telefon::before{content:'';position:absolute;left:50%;
  top:calc(var(--w)*.0592);transform:translateX(-50%);
  width:calc(var(--w)*.29);height:calc(var(--w)*.0847);border-radius:99px;
  background:#0a0a0c;z-index:4;box-shadow:0 0 0 1px rgba(255,255,255,.06);
  pointer-events:none}
/* YAN TUŞLAR SAĞDA. iPhone 16 Pro'da sağ kenarda güç (yan) tuşu ve
   altında Kamera Kontrol tuşu var; ses ve Eylem tuşu SOL kenarda —
   ama sol kenar bize dönük olmayan yüz, oradaki tuşlar görünmez.
   Önce hepsi solda çiziliyordu: uzaktaki yüzün tuşları öndeymiş gibi
   duruyordu. */
.telefon::after{content:'';position:absolute;z-index:3;right:-2.5px;
  top:calc(var(--w)*.67);width:2.5px;height:calc(var(--w)*.23);
  border-radius:2px;background:linear-gradient(180deg,#7a7a83,#42424a);
  /* altındaki kısa çizgi: Kamera Kontrol */
  box-shadow:0 calc(var(--w)*.30) 0 calc(var(--w)*-.104) #7a7a83;
  pointer-events:none}
/* Ekran kasanın içine tam oturur; içerik taşarsa kırpılır — gerçek
   telefonda da ekranın dışına içerik taşmaz. */
.telefon-ic{position:absolute;inset:calc(var(--w)*.0336);
  background:var(--bg);border-radius:calc(var(--w)*.131);
  padding:0 calc(var(--w)*.039) calc(var(--w)*.062);
  display:flex;flex-direction:column;overflow:hidden}
/* Kartlar ekranın KALANINI paylaşır. Önce üstte toplanıp altta
   90px'lik boş krem alan bırakıyorlardı — gerçek bir ekran gibi
   durmuyordu. */
.tel-govde{flex:1;min-height:0;display:flex;flex-direction:column;
  justify-content:space-between;gap:calc(var(--w)*.026)}
/* telefonun kendi durum şeridi — saat CANLI (bkz. sayfa.html telefonSaati) */
.tel-serit{display:flex;align-items:center;justify-content:space-between;
  /* Kapağın ÜSTÜNDE kalır: kalkarken bile saat ve pil görünür. */
  position:relative;z-index:9;
  flex:none;height:calc(var(--w)*.137);
  padding:calc(var(--w)*.031) calc(var(--w)*.039) 0;
  font:700 calc(var(--w)*.041) var(--sans);color:var(--text);letter-spacing:.2px}
.tel-serit svg{display:block;height:calc(var(--w)*.038);width:auto;fill:currentColor}
.tel-serit-sag{display:flex;align-items:center;gap:4px}
/* künye — track.html'in .hd-eyebrow + .logo + .subtitle bloğu */
.t-kunye{text-align:center;border:1px solid var(--border);border-radius:var(--r);
  padding:9px 6px;background:var(--panel)}
.t-kunye s{display:block;text-decoration:none;font:700 6.5px var(--sans);
  letter-spacing:1.6px;color:var(--muted)}
.t-kunye b{display:block;font:italic 700 var(--t1) var(--serif);color:var(--accent);
  margin:3px 0 4px}
.t-kunye em{display:block;font:600 5.8px var(--sans);letter-spacing:1.1px;
  color:var(--muted);font-style:normal}
/* durum kartı — sol kiremit çubuk + canlı pil */
.t-kart{position:relative;background:var(--panel);border-radius:10px;
  padding:11px 10px;box-shadow:var(--shadow);overflow:hidden}
.t-kart::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3.5px;
  background:var(--accent)}
/* ── SAHNE YIĞINI ───────────────────────────────────────────────────
   Üç durumun üçü de aynı ızgara hücresinde (grid-area:1/1). Satırın
   yüksekliği EN UZUN çocuğa göre oluşur; hangisi görünür olursa olsun
   kap aynı boyda kalır.
   NEDEN: JS metni yerinde değiştiriyordu, metinler farklı uzunlukta
   olduğu için alt yazı kâh 3 kâh 2 satır tutuyor, kart 138↔108px
   oynuyor ve ALTINDAKİ TÜM SAYFA 30px zıplıyordu — kendiliğinden,
   3,2 saniyede bir. İnsan okurken satır kaçırıyordu.
   Sabit yükseklik yazılamazdı: 390px'de yeten değer 360px'de kırpardı.
   visibility:hidden — opacity:0 tek başına yetmez, gizli metin ekran
   okuyucuya ve Sekme gezintisine açık kalırdı. */
.t-metin{display:grid}
.t-metin > .t-sahne{grid-area:1/1;opacity:0;visibility:hidden;
  transition:opacity .3s ease}
.t-metin > .t-sahne.aktif{opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){.t-metin > .t-sahne{transition:none}}
.t-baslik{font:italic 700 var(--t0) var(--serif);text-align:center}
.t-alt-yazi{font-size:var(--t00);color:var(--muted);text-align:center;margin-top:3px}
.t-pil{display:flex;align-items:center;justify-content:center;gap:5px;
  margin-top:8px;padding:4px 8px;border:1px solid var(--border-strong);
  border-radius:99px;font:700 6.5px var(--sans);letter-spacing:.9px;
  color:var(--olive)}
.t-nokta{width:5px;height:5px;border-radius:50%;background:var(--olive);
  animation:nabiz 2.6s ease-out infinite}
@keyframes nabiz{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--olive) 45%,transparent)}
                 70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
/* ilerleme kartı */
.t-ilerleme{background:var(--panel);border-radius:10px;padding:10px;
  box-shadow:var(--shadow)}
.t-ilerleme-bas{display:flex;align-items:center;justify-content:space-between;
  gap:6px;padding-bottom:7px;margin-bottom:9px;border-bottom:1px solid var(--border)}
.t-ilerleme-bas b{font:italic 600 var(--t0) var(--serif)}
/* 4 ADIMLI YATAY ZAMAN ÇİZGİSİ — ürünün .timeline'ı */
.t-cizgi{display:flex;align-items:flex-start;position:relative}
.t-adim{flex:1;text-align:center;position:relative;z-index:1}
.t-adim::before{content:'';position:absolute;top:9px;left:-50%;width:100%;
  height:2px;background:var(--border-strong);z-index:-1}
.t-adim:first-child::before{display:none}
.t-adim.gecti::before,.t-adim.simdi::before{background:var(--accent)}
.t-adim i{display:flex;align-items:center;justify-content:center;
  width:19px;height:19px;margin:0 auto;border-radius:50%;font-style:normal;
  font:700 var(--t00) var(--sans);background:var(--panel);color:var(--muted);
  border:1.8px solid var(--border-strong);transition:all .3s}
.t-adim s{display:block;text-decoration:none;font:700 6px var(--sans);
  letter-spacing:.4px;color:var(--muted);margin-top:5px;line-height:1.3}
.t-adim.gecti i{background:var(--accent);border-color:var(--accent);color:#fff}
.t-adim.simdi i{background:var(--accent);border-color:var(--accent);color:#fff;
  animation:nabiz 2.2s ease-out infinite}
.t-adim.simdi s{color:var(--accent)}
.t-not{font:italic var(--t00) var(--serif);color:var(--muted);text-align:center;
  margin-top:9px}

/* ── bölüm iskeleti ────────────────────────────────────────────────── */
/* Sayfa 10,4 EKRAN BOYUNA ulasmisti (mobilde 18,3). Profesyonel bir
   isletme sayfasi 5-6 ekrandir; 18 ekranda ziyaretci ucuncude birakir.
   Dolgu her bolumde 70px idi — dokuz bolumde 1260px yalnizca bosluk. */
.bolum{max-width:var(--en);margin:0 auto;padding:var(--b7) var(--yan)}
.bolum.koyu{max-width:none;background:var(--panel);
  /* Defterin çizgili yaprağı. 32px aralık gövde satır yüksekliğiyle
     (17px × 1.68 ≈ 28,6px) kasten aynı DEĞİL: metin çizgiye oturursa
     okuma bozulur, ayrık durunca zemin dokusu olarak kalır. */
  background-image:repeating-linear-gradient(180deg,transparent 0 31px,
    rgba(168,155,128,.10) 31px 32px);
  border-block:1px solid var(--border)}
@media print{.bolum.koyu{background-image:none}}
/* Genislik dayatmasi YOK — yalniz ortalar. Onceki hali
   (.bolum.koyu > *{max-width:var(--en)}) ozgulluk (0,2,0) ile
   .acik-anlatim/.ara-not/.bolum-giris (0,1,0) kurallarini eziyordu ve
   koyu bolumlerde satirlar 181 KARAKTERE ciyordu. */
.bolum.koyu > *{margin-inline:auto;width:min(100%,var(--en))}
/* ── DEFTER YERLEŞİMİ ───────────────────────────────────────────────
   Defter ortalanmış bir şey değildir: kenar boşluğunda not, gövdede
   kayıt vardır. Sayfadaki 18 ortalanmış başlık hem konuya yabancıydı
   hem de "her şey ortada" jenerik izlenimi veriyordu.
   Artık sol kenar mührü taşıyor, gövde metni okuma sütununda. */
.bolum-bas{display:grid;grid-template-columns:var(--kenar,188px) 1fr;
  gap:var(--b5);align-items:start;margin-bottom:var(--b6)}
.goz{display:block;padding-top:6px}
.bolum h2{font:italic 700 var(--t5)/1.14 var(--serif);text-wrap:balance;
  letter-spacing:-.4px}
.bolum h2 em{font-style:italic;color:var(--accent)}
.bolum-giris{color:var(--muted);margin:var(--b3) 0 0;max-width:62ch;
  font-size:var(--t2)}

/* ── KAYIT NUMARASI — defterin kenar sütunu ─────────────────────────
   Kenar sütunu boştu; içinde yalnız mühür duruyordu. Defterde her giriş
   NUMARALIDIR — sayfanın anlattığı şey de bu: her şey sırayla kayda
   geçer. Numara daktilo yüzüyle (ürünün damga fontu) ve altında ince
   bir cetvel çizgisiyle. Sayaç CSS'te: bölüm eklenip çıkarıldığında
   numaralar kendiliğinden kayar, elle güncellenecek bir şey yok. */
body{counter-reset:defter}
.bolum-bas{counter-increment:defter}
.goz::before{content:counter(defter,decimal-leading-zero);
  display:block;font:var(--t4)/1 var(--stamp);color:var(--border-strong);
  letter-spacing:2px;margin-bottom:var(--b3);padding-bottom:var(--b3);
  border-bottom:1px solid var(--border)}

/* ── PEN ÇİZGİSİ — vurgulanan kelimenin altı ────────────────────────
   Ustanın deftere kalemle çektiği çizgi. Düz border değil: elle çekilmiş
   gibi hafif dalgalı, uçları inceliyor. Başlığın kiremit kelimesi zaten
   göze çarpıyordu; çizgi onu "birinin işaretlediği" şeye çeviriyor. */
.bolum h2 em{position:relative;white-space:nowrap}
.bolum h2 em::after{content:'';position:absolute;left:-.06em;right:-.06em;
  bottom:-.1em;height:.28em;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 120 10'%3E%3Cpath d='M2 7.2C22 3.4 44 8.2 63 5.1c17-2.8 37 1.9 55-1.4' fill='none' stroke='%23b23b25' stroke-width='2.1' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") no-repeat center/100% 100%}

@media (max-width:900px){
  .bolum-bas{grid-template-columns:1fr;gap:var(--b3)}
  /* Dar ekranda kenar sütunu yok: numara mührün YANINA geçer, altına
     değil — üst üste iki satır başlığı aşağı itiyordu. */
  .goz{display:flex;align-items:center;gap:var(--b3);padding-top:0}
  .goz::before{margin:0;padding:0 var(--b3) 0 0;font-size:var(--t3);
    border-bottom:0;border-right:1px solid var(--border);align-self:stretch;
    display:flex;align-items:center}
}

.belir{opacity:0;transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.2,.8,.3,1),transform .6s cubic-bezier(.2,.8,.3,1)}
.belir.gorundu{opacity:1;transform:none}

/* ── MÜHÜR KÂĞIDA VURUYOR ───────────────────────────────────────────
   Sayfanın imza hareketi. Bölüm görünür olunca mührü yukarıdan iner,
   hafifçe fazla döner ve oturur — kauçuk mührün kâğıda çarpması.
   SÜS DEĞİL: ürünün kendisi mühürle çalışıyor (iş durumları mühür),
   sayfa da aynı jesti kullanınca marka tek bir şey gibi hissediliyor. */
@keyframes muhurVur{
  0%  {opacity:0;transform:rotate(-16deg) scale(1.55)}
  55% {opacity:1;transform:rotate(-1deg)  scale(.94)}
  75% {transform:rotate(-6deg) scale(1.03)}
  100%{opacity:1;transform:rotate(-4deg) scale(1)}
}
.gorundu .goz .muhur-e{animation:muhurVur .5s cubic-bezier(.2,.9,.3,1.1) both}
/* canlı maketteki mühür değişince de aynı jest */
.muhur-e.vur{animation:muhurVur .45s cubic-bezier(.2,.9,.3,1.1) both}

/* ── BÖLÜM AÇIKLAMASI — her alan hak ettiği kadar anlatılır ────────── */
.acik-anlatim{max-width:62ch;margin:0 0 var(--b6);
  color:var(--muted);font-size:var(--t2);line-height:1.72}
.acik-anlatim b{color:var(--text)}
.ara-not{max-width:60ch;margin:36px auto 0;padding:20px 24px;
  border-left:3px solid var(--accent);background:var(--accent-soft);
  border-radius:0 10px 10px 0;font:italic 500 var(--t2)/1.65 var(--serif)}

/* ── BİR GÜN: saatli akış ───────────────────────────────────────────── */
.gun{max-width:820px;margin:0 auto;position:relative;padding-left:8px}
.gun::before{content:'';position:absolute;left:63px;top:14px;bottom:14px;
  width:2px;background:repeating-linear-gradient(180deg,
    var(--border-strong) 0 5px,transparent 5px 10px)}
.gun-s{display:grid;grid-template-columns:56px 1fr;gap:22px;align-items:start;
  padding:var(--b2) 0;position:relative}
.gun-saat{font:700 var(--t0) var(--stamp);color:var(--accent);letter-spacing:1.4px;
  text-align:right;padding-top:4px}
.gun-govde{position:relative;padding-left:22px}
.gun-govde::before{content:'';position:absolute;left:-8px;top:8px;width:11px;
  height:11px;border-radius:50%;background:var(--panel);
  border:2.4px solid var(--accent);z-index:1}
.gun-s.sessiz .gun-govde::before{border-color:var(--border-strong)}
.gun-govde b{display:block;font:italic 600 var(--t2) var(--serif);margin-bottom:5px}
.gun-govde p{color:var(--muted);font-size:var(--t1);max-width:62ch}
.gun-govde .kim{display:inline-block;margin-top:8px;font:700 var(--t00) var(--sans);
  letter-spacing:1.3px;text-transform:uppercase;padding:3px 10px;border-radius:99px;
  border:1px solid var(--border-strong);color:var(--muted)}
.gun-govde .kim.usta{color:var(--accent);border-color:var(--accent-ring);
  background:var(--accent-soft)}
.gun-govde .kim.musteri{color:var(--petrol);
  border-color:color-mix(in srgb,var(--petrol) 32%,transparent);
  background:color-mix(in srgb,var(--petrol) 8%,transparent)}
.gun-govde .kim.sistem{color:var(--olive);
  border-color:color-mix(in srgb,var(--olive) 32%,transparent);
  background:color-mix(in srgb,var(--olive) 8%,transparent)}

/* ── KİMLER İÇİN / DEĞİL — dürüst kapsam ───────────────────────────── */
.kimler{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:940px;
  margin-inline:auto}
.kim-k{position:relative;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-l);padding:26px 24px;box-shadow:var(--shadow)}
.kim-k.evet{border-color:color-mix(in srgb,var(--olive) 38%,transparent)}
.kim-k h3{font:italic 700 var(--t2) var(--serif);margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px dashed var(--border-strong)}
.kim-k ul{list-style:none}
.kim-k li{position:relative;padding:6px 0 6px 26px;font-size:var(--t1);
  color:var(--muted);line-height:1.5}
.kim-k li::before{position:absolute;left:0;top:8px;font-weight:700}
.kim-k.evet li::before{content:'✓';color:var(--olive)}
.kim-k.hayir li::before{content:'—';color:var(--muted)}

/* ── dert: KÜÇÜK KARE KARTLAR (Tek Ekranda Zengin Görünüm) ─────────── */
.dert-kare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.dert-kare{position:relative;background:var(--panel);border:1px solid var(--border);
  border-radius:14px;padding:18px 16px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  transition:all .2s cubic-bezier(.2,.8,.25,1)}
.dert-kare:hover{transform:translateY(-3px);box-shadow:var(--shadow-guclu);border-color:var(--accent)}
.dert-kare .dert-im{flex:0 0 34px;width:34px;height:34px;border-radius:8px;margin-bottom:2px}
.dert-kare .dert-im svg{width:18px;height:18px}
.dert-kare-baslik{font:700 11px/1 var(--sans);color:var(--accent);letter-spacing:0.4px;text-transform:uppercase}
.dert-kare p{font:italic 700 14.5px/1.3 var(--serif);color:var(--text);margin:0}
.dert-kare small{font-size:12px;line-height:1.4;color:var(--muted);display:block}

.dert-cozum-kutu{margin-top:28px;background:color-mix(in srgb,var(--petrol) 6%,var(--panel));
  border:1.5px solid color-mix(in srgb,var(--petrol) 30%,transparent);
  border-radius:18px;padding:24px 28px;text-align:center;box-shadow:var(--shadow);
  position:relative}
.dert-cozum{margin:10px auto 0;max-width:60ch;font-size:var(--t2);color:var(--text);line-height:1.6}
.dert-cozum b{color:var(--accent);font-weight:700}

@media (max-width:620px){
  .dert-kare-grid{grid-template-columns:repeat(2, 1fr);gap:10px}
  .dert-kare{padding:14px 12px}
  .dert-kare p{font-size:13.5px}
  .dert-kare small{font-size:11.5px}
}
@media (max-width:380px){
  .dert-kare-grid{grid-template-columns:1fr}
}

/* ── adımlar: numaralar damga ──────────────────────────────────────── */
.adimlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:30px}
.adim{position:relative;padding-top:8px}
.adim .no{display:inline-block;font:700 var(--t1) var(--stamp);color:var(--accent);
  letter-spacing:2.4px;border-bottom:2px solid var(--accent);padding-bottom:3px}
.adim h3{font:italic 600 21px var(--serif);margin:12px 0 9px}
.adim p{color:var(--muted);font-size:var(--t1)}

/* ── KAHRAMAN İSTATİSTİK BARI ───────────────────────── */
.kah-istatistik{display:inline-flex;align-items:center;gap:16px;margin-top:16px;
  padding:9px 18px;border-radius:14px;background:var(--panel);
  border:1px solid var(--border);box-shadow:var(--shadow)}
.ist-oge{display:flex;flex-direction:column;gap:2px}
.ist-oge b{font:700 16px/1 var(--sans);color:var(--accent)}
.ist-oge span{font-size:11.5px;color:var(--muted);letter-spacing:0.3px}
.ist-ayrac{width:1px;height:24px;background:var(--border-strong)}
@media (max-width:620px){
  .kah-istatistik{gap:10px;padding:8px 12px;width:100%;justify-content:space-around}
  .ist-oge b{font-size:14px}
  .ist-oge span{font-size:10.5px}
}

/* ── ÖZELLİKLER — MODERN KART GRID YAPISI ───────────────────── */
.ozellikler-bolumu{background:color-mix(in srgb,var(--panel) 40%,var(--bg))}
.oz-filtreler{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:28px}
.oz-filtre-dugme{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;
  border-radius:24px;background:var(--panel);border:1px solid var(--border);
  color:var(--text);font:600 13.5px var(--sans);cursor:pointer;
  box-shadow:var(--shadow);transition:all .18s ease}
.oz-filtre-dugme:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.oz-filtre-dugme.aktif{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 4px 14px rgba(178,59,37,0.28);font-weight:700}

.oz-kare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.oz-kare{background:var(--panel);border:1px solid var(--border);border-radius:16px;
  padding:20px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;
  align-items:flex-start;gap:8px;transition:all .22s cubic-bezier(.2,.8,.25,1)}
.oz-kare:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,0.08);border-color:var(--accent)}
.oz-kare-ust{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:4px}
.oz-kare-etiket{font:700 10.5px/1 var(--sans);letter-spacing:0.5px;text-transform:uppercase;padding:3.5px 9px;border-radius:10px}
.oz-kare-etiket.petrol{background:color-mix(in srgb,var(--petrol) 12%,transparent);color:var(--petrol)}
.oz-kare-etiket.kiremit{background:var(--accent-soft);color:var(--accent)}
.oz-kare-etiket.zeytin{background:color-mix(in srgb,var(--olive) 12%,transparent);color:var(--olive)}
.oz-kare-etiket.hardal{background:color-mix(in srgb,var(--mustard) 12%,transparent);color:var(--mustard)}
/* Süzgeç kartı [hidden] ile gizler. Yazar sayfasındaki display:flex, tarayıcı
   varsayılanı olan [hidden]{display:none}'ı YENER — kural burada olmalı. */
.oz-kare[hidden]{display:none}

.oz-im{flex:0 0 38px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;transition:all .2s ease}
.oz-im svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.oz-im.petrol{border:1.5px solid color-mix(in srgb,var(--petrol) 30%,transparent);background:color-mix(in srgb,var(--petrol) 10%,transparent);color:var(--petrol)}
.oz-im.kiremit{border:1.5px solid var(--accent-ring);background:var(--accent-soft);color:var(--accent)}
.oz-im.zeytin{border:1.5px solid color-mix(in srgb,var(--olive) 30%,transparent);background:color-mix(in srgb,var(--olive) 10%,transparent);color:var(--olive)}
.oz-im.hardal{border:1.5px solid color-mix(in srgb,var(--mustard) 30%,transparent);background:color-mix(in srgb,var(--mustard) 10%,transparent);color:var(--mustard)}
.oz-kare:hover .oz-im{transform:scale(1.05)}

.oz-kare b{font:700 15px/1.3 var(--sans);color:var(--text);margin:0}
.oz-kare span{font-size:12.5px;line-height:1.48;color:var(--muted)}

@media (max-width:620px){
  .oz-kare-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .oz-kare{padding:14px 12px}
  .oz-kare b{font-size:13.5px}
  .oz-kare span{font-size:11.5px}
}
@media (max-width:380px){
  .oz-kare-grid{grid-template-columns:1fr}
}

/* ANA EKRAN ÇUBUĞU — gerçek iPhone'da ekranın dibinde durur, yoktu.
   Ölçü: 139 x 5 pt / 402pt ekran eni → %34,6 x %1,24, dipten 8pt.
   Gövde enine çevrilmiş hâli aşağıdaki katsayılar. */
.tel-cubuk{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(var(--w)*.0187);width:calc(var(--w)*.323);
  height:calc(var(--w)*.0116);border-radius:99px;
  background:var(--text);opacity:.34;z-index:5;pointer-events:none}

/* ── MOBİLDE SABİT EYLEM ÇUBUĞU ────────────────────────────────────
   Telefonda sayfa 12 ekran; ziyaretçi aşağıdayken "başvur" düğmesi
   ekranın çok üstünde kalıyordu — geri dönmek için kaydırmak gerekiyor
   ve çoğu kişi dönmez. Çubuk parmağın altında duruyor.
   Kahramanı geçince gelir, başvuru formu göründüğünde kaybolur
   (form zaten oradayken çubuğu göstermek yerini kapatmak olurdu). */
/* ── METİN İÇİNDEKİ BAĞLANTILAR ────────────────────────────────────
   Sayfada bağlantıların tamamı düğme ya da menü olduğu için çıplak <a>
   hiç yoktu; aydınlatma metni gelince ortaya çıktı ve tarayıcının
   VARSAYILAN MAVİSİYLE, altı çizili basıldı. Krem/kiremit bir sayfada
   parlak mavi, "burası unutulmuş" diye okunuyor. Renk markanın, alt
   çizgi kalıyor: bağlantı olduğu anlaşılmalı. */
.metin a,.form-not a,.alt-not a,.ara-not a{
  color:var(--accent);text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.metin a:hover,.form-not a:hover,.alt-not a:hover,.ara-not a:hover{
  color:var(--accent-deep);text-decoration-color:currentColor}

/* ── METİN SAYFALARI (aydınlatma metni) ────────────────────────────
   Kahraman yok, kart yok: okunacak bir şey var. Tek iş ölçüyü tutmak —
   krem zeminde 74 karakterden uzun satır göz kaydırıyor. Madde
   imlerini elle veriyoruz: genel sıfırlama padding'i 0'ladığı için
   varsayılan liste imleri kırpılıyordu. */
.metin{max-width:74ch;margin:0 auto}
/* .giris genel kuralında 50ch var — kahramanın giriş paragrafı için
   doğru, burada değil: giriş gövdeden DAR kalıyor ve sayfa iki farklı
   sütun genişliğiyle çiziliyormuş gibi duruyor. */
.metin .giris{max-width:none}
.metin h1{margin-bottom:var(--b4)}
.metin h2{font-size:var(--t3);margin:var(--b6) 0 var(--b3)}
.metin p{margin-bottom:var(--b4);line-height:1.75;color:var(--muted)}
.metin p b,.metin li b{color:var(--text)}
.metin ul{margin:0 0 var(--b4);padding-left:1.25em}
.metin li{margin-bottom:8px;line-height:1.7;color:var(--muted)}
.metin .not{font-size:var(--t0);margin-top:var(--b6)}

.mobil-cta{position:fixed;left:0;right:0;bottom:0;z-index:65;
  display:none;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  backdrop-filter:blur(12px);border-top:1px solid var(--border);
  box-shadow:0 -6px 20px rgba(90,75,60,.10);
  transform:translateY(110%);transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.mobil-cta.acik{transform:none}
.mobil-cta .dugme{flex:1;justify-content:center;min-height:48px;font-size:var(--t1)}
@media (max-width:760px){
  .mobil-cta{display:flex}
  /* Çubuk künyeyi örtmesin. */
  .alt{padding-bottom:calc(var(--b8) + 64px)}
}
@media (prefers-reduced-motion:reduce){.mobil-cta{transition:none}}

/* ── referanslar (boşsa bölüm hiç basılmaz — bkz. site.py) ─────────── */
.referanslar{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:18px}
.ref{position:relative;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-l);padding:26px 24px;box-shadow:var(--shadow)}
.ref blockquote{font:italic 500 17px/1.55 var(--serif);margin-bottom:18px}
.ref figcaption{padding-top:15px;border-top:1px dashed var(--border-strong)}
.ref figcaption b{display:block;font:700 14px var(--sans)}
.ref figcaption span{display:block;font-size:var(--t0);color:var(--muted);margin-top:2px}
.ref figcaption small{display:inline-block;margin-top:9px}

/* ── paketler: mühürlü kartlar ─────────────────────────────────────── */
.paketler{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:20px;align-items:start}
.paket{position:relative;background:var(--bg);border:1px solid var(--border);
  border-radius:16px;padding:28px 25px;box-shadow:var(--shadow);
  transition:transform .16s,box-shadow .16s}
.paket:hover{transform:translateY(-3px);box-shadow:var(--shadow-guclu)}
.paket.one{border-color:var(--accent);border-width:1.5px;box-shadow:var(--shadow-guclu)}
.paket.one::before{content:'';position:absolute;inset:0 0 auto;height:6px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 8px,transparent 8px 16px);
  border-radius:16px 16px 0 0}
.etiket{position:absolute;top:16px;right:16px}
.paket h3{font:italic 700 var(--t3) var(--serif);margin-bottom:13px}
.fiyat{display:flex;align-items:baseline;gap:7px;padding-bottom:14px;
  border-bottom:1px dashed var(--border-strong);margin-bottom:14px;min-height:54px}
.fiyat b{font:700 var(--t5)/1 var(--sans);letter-spacing:-1.2px}
.fiyat s{text-decoration:none;font-size:var(--t1);color:var(--muted)}
.fiyat b.teklif{font:italic 600 var(--t3) var(--serif);color:var(--accent)}
.kime{font-size:var(--t1);color:var(--muted);margin-bottom:17px}
.paket ul{list-style:none;margin-bottom:24px}
.paket li{position:relative;padding:7px 0 7px 25px;font-size:14px}
.paket li::before{content:'✓';position:absolute;left:0;top:7px;
  color:var(--olive);font-weight:700;font-size:var(--t1)}

/* ── S.S.S. — defter satırı olarak ─────────────────────────────────── */
.sss{max-width:760px;margin-inline:auto}
.sss-k{border-top:1px solid var(--border)}
.sss-k:last-child{border-bottom:1px solid var(--border)}
.sss-soru{display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:var(--b3) 6px;color:var(--text);font:italic 600 var(--t2) var(--serif);
  transition:background .15s,box-shadow .15s}
.sss-soru:hover{background:var(--accent-soft);box-shadow:inset 3.5px 0 0 var(--accent)}
.sss-soru i{flex:0 0 auto;font-style:normal;font-size:21px;color:var(--accent);
  transition:transform .2s;line-height:1}
.sss-k.acik .sss-soru i{transform:rotate(45deg)}
/* Akordeon max-height ile DEĞİL, ızgara satırıyla (0fr → 1fr) açılır.
   max-height:360px iki sorun üretiyordu: görünür hareket geçişin ilk
   üçte birinde bitip kalanı görünmez bir yola dönüşüyordu (cevap ANIDEN
   208px açılıyordu), ve 360px'i aşan bir cevap sessizce kırpılırdı.
   fr satırı içeriğin GERÇEK boyuna kadar açılır. */
.sss-cevap{display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows .28s ease}
.sss-k.acik .sss-cevap{grid-template-rows:1fr}
/* Alt boşluk p'nin DOLGUSU olarak kalırsa satır 0fr iken bile 20px yer
   tutar (min-height:0 içerik kutusunu sıfırlar, dolgu kutuda kalır) ve
   açılış 20px'lik bir sıçramayla başlar. Boşluk ::after'a taşındı. */
.sss-cevap p{min-height:0;overflow:hidden;padding:0 6px;color:var(--muted);
  font-size:var(--t1);max-width:70ch}
.sss-cevap p::after{content:'';display:block;height:20px}
@media (prefers-reduced-motion:reduce){.sss-cevap{transition:none}}

/* ── başvuru ───────────────────────────────────────────────────────── */
.basvuru-sar{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;
  max-width:var(--en);margin-inline:auto}
.basvuru-yazi .goz{justify-content:flex-start}
.basvuru-yazi h2{text-align:left}
.basvuru-yazi p{color:var(--muted);margin:14px 0 22px;max-width:44ch}
.onay-liste{list-style:none;margin-bottom:26px}
.onay-liste li{position:relative;padding:9px 0 9px 27px;font-size:var(--t1);
  color:var(--muted);border-bottom:1px dashed var(--border)}
.onay-liste li:last-child{border-bottom:none}
.onay-liste li b{color:var(--text)}
.onay-liste li::before{content:'✓';position:absolute;left:0;top:9px;
  color:var(--olive);font-weight:700}

.basvuru-form{position:relative;background:var(--bg);
  border:1px solid var(--border-strong);border-radius:16px;padding:26px;
  box-shadow:var(--shadow-guclu);overflow:hidden}
.basvuru-form::before{content:'';position:absolute;inset:0 0 auto;height:7px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 9px,transparent 9px 18px);
  opacity:.85}
.form-bas{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 0 15px;margin-bottom:18px;border-bottom:2px solid var(--border-strong)}
.form-bas b{font:italic 700 var(--t2) var(--serif)}
.basvuru-form label{display:block;font:600 9.5px var(--sans);letter-spacing:1.3px;
  text-transform:uppercase;color:var(--muted);margin-bottom:15px}
.basvuru-form label span{color:var(--accent)}
/* 16px SART: iOS Safari, 16px'ten kucuk bir alana odaklaninca sayfayi
   ZORLA yakinlastiriyor; kullanici elle geri cikmak zorunda kaliyor. */
.basvuru-form input,.basvuru-form textarea{display:block;width:100%;margin-top:7px;
  font-size:var(--t2);padding:12px 14px;border:1px solid var(--border);border-radius:10px;
  background:var(--panel);color:var(--text);font:var(--t1) var(--sans);
  text-transform:none;letter-spacing:0;resize:vertical;
  transition:border-color .15s,box-shadow .15s}
.basvuru-form input:focus,.basvuru-form textarea:focus{outline:none;
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.basvuru-form input::placeholder,.basvuru-form textarea::placeholder{
  color:var(--muted);opacity:.6}
/* bal küpü: ekranda yok ama display:none botu uyarır — bu yöntem uyarmaz */
.kupu{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-not{font-size:var(--t0);color:var(--muted);margin-top:12px;text-align:center}
.form-not.hata{color:var(--accent);font-weight:600}
.tesekkur{text-align:center;padding:26px 6px}
.tesekkur span{display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;background:var(--olive);color:#fff;
  font-size:27px;margin-bottom:15px}
.tesekkur h3{font:italic 700 var(--t3) var(--serif);margin-bottom:10px}
.tesekkur p{color:var(--muted);font-size:var(--t1)}

/* ── alt ───────────────────────────────────────────────────────────── */
.alt{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;max-width:var(--en);margin:0 auto;padding:30px 28px;
  border-top:1px dashed var(--border-strong)}
.alt-marka{display:flex;align-items:center;gap:11px}
.kucuk-muhur{width:32px;height:32px;flex:0 0 32px;font-size:var(--t0)}
.alt-marka b{display:block;font:italic 700 var(--t1) var(--serif)}
.alt-marka small{display:block;font-size:var(--t0);color:var(--muted)}
.alt-not{font-size:var(--t0);color:var(--muted)}

/* ── DOKUNMA HEDEFLERİ ──────────────────────────────────────────────
   Parmakla kullanılan her şey en az 44px. Ölçüldü: "Başvur" 75x37,
   galeri sekmeleri 37px yüksekliğindeydi — parmak ucu 44px'lik bir
   alan ister, altında kalanlar ıskalanıyor ve kullanıcı sinirleniyor.
   Yalnız DOKUNMATİK cihazlarda büyütülür; farede 37px zaten yeterli
   ve tasarımı şişirmenin anlamı yok. */
@media (pointer:coarse){
  .dugme{min-height:48px}
  .dugme.kucuk{min-height:44px;padding:11px 18px}
  
  .ust nav a{min-height:44px;display:inline-flex;align-items:center}
  .sss-soru{min-height:52px}
  .marka{min-height:44px}
}

/* ── MOBİLDE YOĞUNLUK ───────────────────────────────────────────────
   Sayfa telefonda 14 EKRAN BOYUNA çıkmıştı. Her bölüm tek sütuna
   inince dokuz bölüm arka arkaya bir kılavuza dönüşüyor; ziyaretçi
   üçüncü ekranda bırakır. Masaüstünde nefes alan boşluklar telefonda
   ZARARLI: küçük ekranda mesafe, bilgi taşımıyor. */
@media (max-width:700px){
  :root{--yan:18px}
  .bolum{padding:var(--b5) var(--yan)}
  .bolum-bas{margin-bottom:var(--b4)}
  .acik-anlatim{margin-bottom:var(--b4);font-size:var(--t1);line-height:1.6}
  .bolum h2{font-size:var(--t4)}
  /* özellik satırları: 11 satır × 190px = 2100px idi */
  .oz{padding:var(--b2) 2px;gap:11px}
  .oz-im{flex:0 0 30px;height:30px}
  .oz-im svg{width:16px;height:16px}
  .oz b{font-size:var(--t2);margin-bottom:2px}
  .oz > div > span{font-size:var(--t1);line-height:1.45}
  .oz-grup{margin-bottom:var(--b5)}
  .oz-baslik{padding-bottom:var(--b2);margin-bottom:0}
  /* yolculuk */
  .gun-s{padding:var(--b2) 0;gap:14px;grid-template-columns:46px 1fr}
  .gun-govde{padding-left:18px}
  .gun-govde b{font-size:var(--t2)}
  .gun-govde p{font-size:var(--t1);line-height:1.5}
  .gun::before{left:53px}
  /* paket kartları */
  .paket{padding:var(--b5) 20px}
  .paket li{padding:var(--b1) 0 var(--b1) 24px}
  .fiyat{min-height:0;padding-bottom:var(--b3);margin-bottom:var(--b3)}
  /* dert kartları */
  .dert{padding:var(--b5) 16px var(--b4)}
  .dert p{font-size:var(--t2)}
  .dertler{gap:11px}
  .kim-k{padding:var(--b5) 18px}
  .ara-not{margin-top:var(--b5);padding:var(--b4) 18px;font-size:var(--t1)}
  .dert-cozum{margin-top:var(--b5);font-size:var(--t1)}
}

@media (max-width:960px){
  /* METİN ÖNCE. Maketi yukarı almıştım; telefonda üç araç satırı 800px
     yer kaplıyor ve BAŞLIK KATLANIN ALTINDA KALIYORDU. Ziyaretçi önce
     ne satıldığını okumalı, sonra görmeli. (Ölçüldü: 390x844 ekranda
     başlık ancak kaydırınca çıkıyordu.) */
  .kahraman{grid-template-columns:1fr;padding:26px 20px 48px;gap:22px}
  /* TELEFON MOBİLDE DE GÖRÜNÜR. Önce gizlemiştim; "kendin dene"
     düğmeleri gelince bu hata oldu: ziyaretçi basıyor ama karşılığını
     GÖREMİYORDU — deneyimin tamamı o karşılıkta. Artık masa ile telefon
     alt alta; yer kazanmak için diğer iki araç satırı gizleniyor
     (hikâyeyi anlatan satır Clio zaten). */
  .kahraman-gorsel{flex-direction:column;align-items:center;gap:0}
  .masa{width:100%;max-width:420px;transform:none}
  .arac:not(#aracClio){display:none}
  /* Dar ekranda perspektif YOK: telefon zaten tek başına duruyor,
     eğim hem yer yiyor hem kenardan taşırıyor. */
  .telefon{--w:min(250px,70vw);margin:-10px 0 0;transform:rotate(1.2deg);
    flex:0 0 auto}
  /* maket mobilde sıkışsın: satırlar alçalır, çizim küçülür */
  .arac{min-height:58px;padding:7px 10px 7px 13px;column-gap:9px}
  .arac-gorsel{width:46px;height:34px;flex:0 0 46px}
  .arac-model{font-size:var(--t0)}
  .arac-is{font-size:11px}
  .satirlar-kutu{grid-template-columns:1fr;gap:0}
  /* 360px'te sag kart 26px disari tasiyordu ve html{overflow-x:clip}
     yuzunden kaydirilip GORULEMIYORDU. Diger izgaralar iniyordu, bu
     unutulmus. */
  .kimler{grid-template-columns:1fr;gap:16px}
  .basvuru-sar{grid-template-columns:1fr;gap:32px}
  .ust-ic{padding:11px 16px;flex-wrap:wrap}
  .menu-dugme{display:flex}
  /* Menü açılınca tam genişlikte, alt alta — parmakla rahat */
  /* MENÜ AKIŞIN DIŞINDA AÇILIR.
     Eskiden akışta açılıyordu: hamburger'a basınca şerit 87px'den 421px'e
     çıkıyor ve SAYFANIN TAMAMI 334px aşağı kayıyordu — okuduğun paragraf
     ekrandan silinip gidiyordu. .ust position:sticky olduğu için öğe
     akıştan ÇIKMIYOR, büyümenin tamamı alttaki her şeye geçiyordu.
     Aynı sebeple menüden bir bağlantıya basınca hedef bölüm 340px
     kaçıyordu. .ust zaten konumlandırılmış (sticky), o yüzden absolute'un
     kabı kendiliğinden odur — ne sarmalayıcı ne JS gerekiyor.
     Yükseklik yine İÇERİĞE bağlı; max-height sadece bir tavan, sabit boy
     değil — hiçbir ende kırpma yok. Yatay/kısa ekranda tavan düşer ve
     panel kendi içinde kayar, hiçbir bağlantı erişilemez kalmaz. */
  .ust nav{position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0 16px;
    background:var(--panel);border-bottom:1px solid var(--border);
    box-shadow:var(--shadow);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .25s ease,visibility 0s linear .25s}
  /* visibility: kapalıyken bağlantılar SEKME SIRASINDAN da çıksın.
     Yalnız max-height:0 iken görünmeyen menüye Tab ile giriliyordu.
     max-height iki kez yazılı: dvh bilmeyen eski tarayıcı 520'de kalır,
     kural düşüp menü hiç açılmaz olmaz. */
  .ust nav.acik{max-height:520px;max-height:min(520px,calc(100dvh - 78px));
    overflow-y:auto;overscroll-behavior:contain;visibility:visible;
    transition:max-height .25s ease,visibility 0s}
  .ust nav a{padding:13px 6px;border-top:1px solid var(--border);
    font-size:var(--t1)}
  /* Numara burada görünür: dokunulunca telefon açılır. Vurgulu renk,
     çünkü menüyü açan kişi çoğu zaman "bunu birine soracağım" diyendir. */
  .ust nav a.ara-link{display:block;color:var(--accent);font-weight:700}
  .ust nav a.dugme{margin:11px 0 6px;justify-content:center;border-top:none}
  :root{--yan:20px}
  .bolum{padding:var(--b6) var(--yan)}
  h1{font-size:clamp(30px,8vw,40px)}
}

/* ══ MOBİLDE İLK EKRAN: ÜRÜN KATLANIN ÜSTÜNE ═══════════════════════
   ÖLÇÜLDÜ (390x844): ilk ekranın TAMAMI yazıydı. Künye, başlık, altı
   satırlık paragraf, alt alta iki düğme ve çerçeveli bir giriş kartı
   713px yiyordu; maket ancak ondan sonra başlıyordu. Ziyaretçi ilk
   ekranda ÜRÜNDEN hiçbir şey görmüyordu — "bir yazı sayfası" gibi.

   Metnin ÖNCE gelmesi doğru (bkz. 960px bloğundaki not: maket yukarı
   alınınca başlık katlanın altında kalıyor). Yapılan şey sırayı
   değiştirmek değil, metin bloğunu SIKIŞTIRMAK: paragraf daha sıkı,
   düğmeler tek sırada eşit, giriş şeridi çerçevesiz tek satır.
   Kazanılan ~185px maketi katlanın içine sokuyor: usta ilk ekranda
   plakasıyla, damgasıyla gerçek bir araç satırı görüyor. */
@media (max-width:620px){
  /* Giriş şeridi ÇERÇEVESİZ: ikincil bir eylem, birincil kadar yer ve
     kutu istemiyordu. Kesik çizgi ayırmaya yetiyor. */
  .pro-giris-bar{
    width:100%;
    justify-content:center;
    padding:2px 0 0;
    border:0;background:none;box-shadow:none;
    border-radius:0;
    gap:10px;
    flex-wrap:wrap;
  }
  .pro-giris-bar:hover{transform:none;box-shadow:none}
  .pro-giris-ayrac{display:none}
  .pro-giris-im{display:none}          /* tek satıra sığsın */
  .pro-giris-metin,.pro-giris-link{font-size:var(--t0)}

  /* Paragraf: 17px/1.68 ile altı satır (143px) tutuyordu. */
  .giris{font-size:15.5px;line-height:1.55;margin-bottom:20px}

  /* İKİ DÜĞME TEK SIRADA. Sarmalanınca alt alta ve FARKLI ENDE
     düşüyorlardı — dağınık duruyordu. Oran 1.35/1: birincil uzun
     ("Ücretsiz hesap aç →"), ikincil kısa; ikisi de tek satırda kalır. */
  .dugmeler{display:grid;grid-template-columns:1.35fr 1fr;gap:9px;flex-wrap:nowrap}
  .dugmeler > .dugme{width:100%;justify-content:center;padding-inline:10px;
    white-space:nowrap}

  .pro-bas-etiket{margin-bottom:10px}
  h1{font-size:clamp(32px,8.6vw,40px);margin-bottom:14px}

  /* ══ KANCA ÖNCE, AÇIKLAMA SONRA ═════════════════════════════════
     Metni sıkıştırmak yetmedi: ilk ekranın üstü hâlâ yazıydı, maket en
     altta bir dipnot gibi duruyordu. Oysa maket CANLI — canliMaket()
     3,2 saniyede bir aşamayı ilerletiyor, damga vuruyor, renk değişiyor.
     Hareket eden şey ekranın DİBİNDE durursa kimse görmez.

     Sıra mobilde değişiyor: başlık → MAKET → düğmeler → açıklama.
     Ziyaretçi ikinci saniyede "TAMİRDE" damgasının "HAZIR"a dönüşünü
     görüyor; paragrafı okuması gerekmiyor, ürün kendini anlatıyor.

     NASIL: iki kapsayıcı display:contents ile kutudan çıkıyor, çocuklar
     .kahraman ızgarasının doğrudan çocuğu oluyor ve order ile diziliyor.
     (İkisinin de kendi CSS'i yok; JS bağımlılıkları .masa/.telefon ve
     .kahraman'a taşındı — bkz. sayfa.html'deki notlar.)
     Masaüstü BU BLOĞUN DIŞINDA, iki sütunlu düzen olduğu gibi duruyor. */
  .kahraman{gap:0}
  .kahraman-yazi,.kahraman-gorsel{display:contents}
  .pro-bas-etiket{order:1}
  h1{order:2}
  .masa{order:3;margin:2px auto 16px}
  .dugmeler{order:4;margin-bottom:14px}
  .giris{order:5}
  .pro-giris-bar{order:6}
  .guven{order:7;margin-top:12px;padding-top:12px}
  .istatistik{order:8}
  /* Müşterinin ekranı: ustanınkiyle AYNI anda değişir, hikâyenin ikinci
     yarısı. Açıklamanın altında duruyor — oraya inen kişi zaten ilgili.
     order .telefon'a DEĞİL sarmalayıcısına verilir: ızgaranın çocuğu o.
     (Önce .telefon'a vermiştim; .telefon-sar order:0'da kaldı ve telefon
     başlığın da ÜSTÜNE çıktı — ölçüldü, 98px.) */
  .telefon-sar{order:9;margin:20px auto 0}
}

/* ── EN DAR TELEFONLAR (320–359px) ─────────────────────────────────────
   Plakaya white-space:nowrap eklemek zorunluydu — yoksa satır darlaşınca
   "06 AD" üst satıra kaçıp 26px'lik kutudan taşıyor ve KIRPILIYORDU.
   Bedeli: araç satırının asgari genişliği 224px'ten 277px'e çıktı ve
   320px'lik ekranda kullanılabilir 254px'e sığmayıp maketin sağından
   3px kırpıldı (ölçüldü).
   Çözüm plakayı sarmak DEĞİL — ürünün en tanınır parçası o. Bu ende
   ölçek bir tık küçülüyor; okunurluk yerinde, satır sığıyor.
   Yalnız 359px altı: 360px'te ölçüldü, orada zaten sığıyor. */
@media (max-width:359px){
  /* İki düğme YAN YANA SIĞMIYOR: 320px'te kullanılabilir 280px, çift
     ise 309px istiyor — "Canlı demo"nun 9px'i html{overflow-x:clip}
     altında SESSİZCE kırpılıyordu (ölçüldü: sağ kenar 329 > 320).
     Bu ende alt alta, ikisi de tam genişlikte — eşit, kırpılmaz. */
  .dugmeler{grid-template-columns:1fr}
  .arac{padding:7px 8px 7px 10px;column-gap:7px}
  .arac-gorsel{width:40px;height:30px;flex:0 0 40px}
  .plaka{height:23px}
  .plaka b{font-size:12px;padding:0 5px;letter-spacing:.2px}
  .plaka i{padding:2px 3px;font-size:8.5px}
  .masa-ic{padding:8px 9px 10px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .belir{opacity:1;transform:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ══════════════════════════════════════════════════════════════════════
   MOBİLDE YATAY ŞERİT — sayfanın "form" hissini kıran şey
   ══════════════════════════════════════════════════════════════════════
   Sorun (sayfanın tamamı tek karede görülünce ortaya çıktı): telefonda
   on iki ekranın dokuzu birebir aynı şey — aynı genişlikte, aynı hizada,
   aynı kenarlıklı kutu. Dertler, kimler-için, paketler; hepsi alt alta
   dizilmiş eş kutular. Sayfa boyunca TEK ritim var ve o ritim "aşağı
   in". Okuyan kişi form dolduruyormuş gibi hissediyor.

   Çözüm içerik EKLEMEK ya da ÇIKARMAK değil — aynı içeriği YAN YANA
   dizmek. Üç kazanç birden:
     · yatay hareket girer, sayfa tek yönlü olmaktan çıkar
     · sayfa kısalır (üç blok alt alta değil yan yana)
     · kart sağ kenardan TAŞAR; "devamı var" mesajı kelimesiz verilir

   Kenardan taşma için bölümün yan dolgusu negatif kenar boşluğuyla
   iptal edilir, sonra aynı miktar iç dolgu olarak geri verilir: ilk
   kart başlıkla hizalı kalır ama şerit ekranın iki ucuna değer.
   .bolum.koyu > * kuralı (0,2,0) olduğu için seçiciler de (0,2,0) —
   dosyanın başında not düşülen özgüllük tuzağı. */
/* ══════════════════════════════════════════════════════════════════════
   MOBİLDE TEMİZ VE RAHAT DİKEY DÜZEN (Kaydırmasız, Tam Görünüm)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:620px){
  .bolum > .dertler,
  .bolum > .kimler,
  .bolum > .paketler{
    display:grid;grid-template-columns:1fr;
    grid-auto-flow:row;gap:18px;width:100%;
    margin-inline:0;padding:0;
    overflow-x:visible;
    -webkit-mask-image:none;mask-image:none}
  .kim-k,.paket,.dert{width:100%;height:auto;box-sizing:border-box}
  .kimler{gap:16px}
  .paketler{gap:20px}
  .kim-k{padding:22px 18px}
  .paket{padding:24px 20px}
  .paket.one{border-width:2px}
  .paket h3{font-size:var(--t3)}
  .paket .dugme{width:100%;justify-content:center;height:46px;font-size:15px}
}

/* ── BÖLÜM ZEMİN RİTMİ ─────────────────────────────────────────────
   Yedi bölümün beşi aynı krem zemindeydi; göz nerede yeni bir bölüm
   başladığını ancak başlığı okuyunca anlıyordu. Tek sıralı bölümler
   (dert, neler, sss) kâğıt; ekran/paket/başvuru zaten panel. Aradaki
   "gün" ve "kimler" bölümlerine ince bir üst ayraç: bölüm değiştiği
   gözle görülsün, yeni renk katmadan. */
.bolum:not(.koyu) + .bolum:not(.koyu){
  border-top:1px solid var(--border)}

/* ── ÖZELLİK GRUPLARI BLOK OLDU ────────────────────────────────────
   "Neler var" bölümü telefonda 11 birebir aynı satırdı (11 x 82px);
   göz on bir ayrı şey görüyor ve hiçbiri diğerinden ayrılmıyordu —
   sayfanın en form gibi duran yeri burasıydı.
   İki sütuna bölmeyi ÖLÇTÜM ve bıraktım: başlıklar 30 karaktere kadar
   ("WhatsApp ve Telegram bildirimi"), 168px'lik sütunda üç satıra
   kırılıyor ve kazanç 897 -> 840px, yani yok.
   Onun yerine gruplar kendi yüzeyine alındı: göz artık ÜÇ şey görüyor.
   Satırlar da telefonda biraz sıkıldı. */
.oz-grup{margin-bottom:var(--b5)}
@media (max-width:760px){
  .oz-grup{background:var(--panel);border:1px solid var(--border);
    border-radius:var(--r-l);padding:var(--b4) var(--b4) var(--b2);
    box-shadow:var(--shadow);margin-bottom:var(--b4)}
  .oz-baslik{border-bottom-width:1px;padding-bottom:8px}
  .oz{padding:10px 0;gap:11px}
  .oz-im{flex:0 0 30px;height:30px}
  .oz-im svg{width:17px;height:17px}
  .oz > div > span{font-size:12.5px;line-height:1.5}
  /* İlk satırın üst çizgisi başlık çizgisiyle üst üste binmesin */
  .oz:first-of-type{border-top:0}
}

/* ══════════════════════════════════════════════════════════════════════
   YATAY AKAN GÜN — sayfanın imza anı
   ══════════════════════════════════════════════════════════════════════
   Sayfa baştan sona tek yönlüydü: aşağı, aşağı, aşağı. Burada yön
   değişiyor. Parmak yine AŞAĞI gider (telefonun en köklü alışkanlığını
   bozmuyoruz) ama bölüm ekrana çakılıyor ve atölyedeki gün SAĞA doğru
   akıyor; kartlar perspektifte savrulup öne çıkıyor.
   Yer tesadüf değil: burada anlatılan şey zaten zamanın ilerlemesi
   (09:10 → 17:30). Hareket içeriğin kendisi oluyor, süs değil.

   NEDEN SAYFANIN TAMAMI YANA KAYMIYOR: dikey kaydırmayı tamamen ele
   geçirmek telefonda geri tuşunu, adres çubuğunu, klavye gezintisini ve
   ekran okuyucuyu bozar; hedef kitlemiz orta yaşlı ustalar, "ne oluyor"
   hayranlık değil kaçış olur. Çakma + yan akış aynı etkiyi kırmadan verir.

   ÜÇ EMNİYET:
     · @supports — tarayıcı scroll-driven animasyon bilmiyorsa hiçbiri
       çalışmaz, gün eskisi gibi alt alta dizilir. İçerik aynı kalır.
     · prefers-reduced-motion — hareket istemeyene hiç uygulanmaz.
     · Animasyon derleyicide koşar (transform), kaydırma olayında JS yok;
       ucuz Android'de de akıcı.
   ══════════════════════════════════════════════════════════════════════ */
.gun-ust{display:none}

@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {

  /* Sahne yüksekliği = kaydırma mesafesi. 340vh: 240vh boyunca çakılı
     kalır, o sürede şerit baştan sona akar. Kısa olursa gün fırlayıp
     geçer, uzun olursa insan sıkılır. */
  /* overflow-x:clip ŞART. Sahne bölümün yan dolgusu kadar taşıyor ve
     tam olarak pencere genişliğine oturuyor — ama DİKEY KAYDIRMA ÇUBUĞU
     varken görünür alan o kadar geniş değil; 768px'de sayfa 14px yana
     kayıyordu (ölçüldü). Clip, sahneyi yapışkan öğenin kabı yapar; bu
     zaten istenen davranış, sticky bozulmaz. */
  .gun-sahne{view-timeline-name:--gunTl;view-timeline-axis:block;
    height:340vh;margin-inline:calc(var(--yan)*-1);overflow-x:clip}
  /* Başlık da çakılan alanın İÇİNDE: hem ekranın üstündeki koca boşluk
     dolar, hem gün akarken "burada ne anlatılıyor" hep görünür kalır.
     Destek yoksa aynı başlık normal akışta bölümün tepesinde durur —
     govde sırası değişmedi, yalnız bu kapsayıcı onu çakıyor. */
  /* minmax(0,1fr) ZORUNLU: ızgara sütunu varsayılan olarak en geniş
     çocuğa göre büyür ve şerit width:max-content (2390px). Sütun
     2621px'e şişiyor, üst çubuğun sağındaki saat etiketi ekranın
     dışına düşüp kırpılıyordu (ölçüldü: uc.left = 2529, pencere 1340).
     Şerit yine taşar — taşması gerekiyor, onu transform akıtıyor. */
  .gun-sabit{position:sticky;top:0;height:100svh;
    display:grid;grid-template-columns:minmax(0,1fr);
    align-content:center;gap:var(--b4);
    overflow:clip;perspective:1500px;perspective-origin:50% 45%;
    padding-block:var(--b6)}
  /* ÖLÇÜ KABI YALNIZ ŞERİDİN ETRAFINDA.
     container-type'ı .gun-sabit'e vermiştim ve BAŞLIK da içindeydi;
     container-type:inline-size `style` sınırlaması da getiriyor, o da
     CSS sayacını kapsıyor — bölüm numarası 02 iken 01'e düştü.
     Kap yalnız şeridi sarınca sayaç dışarıda kalıyor.
     Neden gerekli: aşağıdaki 100cqw = bu kutunun genişliği. Önce
     "88vw" yazmıştım; geniş ekranda kapsayıcı 1180px'te sabitken vw
     büyümeye devam ediyor ve son kart 1920px'de 209px, 2560px'de
     443px dışarıda kalıyordu (ölçüldü). cqw kabı ölçer, pencereyi değil. */
  /* overflow:clip DA gerekli. container-type:inline-size yalniz
     layout/style/inline-size siniri getirir, BOYAMAYI sinirlamaz —
     serit (2484px) kaptan tasip belge genisligini buyutuyor ve sayfa
     14px yana kayiyordu. Kirpma, sabit kabin zaten yaptigi isi burada
     da yapar. */
  .gun-kap{container-type:inline-size;min-width:0;overflow:clip}
  .gun-sabit > .bolum-bas{padding-inline:max(28px,6vw);margin-bottom:0;
    --kenar:150px}
  .gun-sabit .acik-anlatim{max-width:64ch;font-size:var(--t1)}

  /* Üst şerit: nerede olduğunu söyler. Çakılı bir bölümde "ne kadar
     kaldı" belli olmazsa insan sıkışmış hisseder. */
  .gun-ust{display:flex;align-items:center;gap:var(--b4);
    padding-inline:max(28px,6vw);
    font:700 var(--t0) var(--stamp);letter-spacing:1.6px;
    text-transform:uppercase;color:var(--muted)}
  .gun-ray{flex:1;min-width:0;height:2px;background:var(--border);
    border-radius:2px;overflow:hidden}
  .gun-dolgu{display:block;height:100%;width:6%;background:var(--accent);
    animation:gunDolgu linear both;animation-timeline:--gunTl;
    animation-range:contain}
  .gun-uc{flex:none;color:var(--accent);white-space:nowrap}
  @media (max-width:560px){.gun-uc{display:none}}
  @keyframes gunDolgu{from{width:6%}to{width:100%}}

  /* ŞERİT — yana akarken derinlikte de dönüyor: kartlar ekrandan
     çıkıyormuş gibi savruluyor. */
  .gun{display:flex;flex-direction:row;width:max-content;max-width:none;
    margin:0;padding:0 max(28px,6vw);gap:clamp(18px,3vw,40px);
    transform-style:preserve-3d;
    animation:gunKay linear both;animation-timeline:--gunTl;
    animation-range:contain}
  .gun::before{display:none}          /* dikey çizgi yatayda anlamsız */
  @keyframes gunKay{
    from{transform:translate3d(0,0,0) rotateY(7deg)}
    to  {transform:translate3d(calc(100cqw - 100%),0,0) rotateY(-7deg)}
  }

  /* Kartlar: her biri kendi başına bir kâğıt parçası. */
  /* Kartlar ekranın kalanını dolduracak boyda: içerik kısa olduğu için
     245px'te kalıyorlardı ve çakılı ekranın alt yarısı bomboştu.
     Saat üstte, rozet dipte — arada nefes. */
  .gun-s{flex:none;width:min(460px,76vw);
    min-height:min(46vh,400px);
    display:flex;flex-direction:column;
    padding:var(--b6) var(--b5) var(--b5);
    background:var(--panel);border:1px solid var(--border);
    border-radius:var(--r-l);box-shadow:var(--shadow-guclu);
    transform:translateZ(0)}
  .gun-s .gun-govde{flex:1;display:flex;flex-direction:column}
  .gun-s .gun-govde .kim{margin-top:auto;align-self:flex-start}
  .gun-s:nth-child(odd){transform:translateZ(28px)}
  .gun-saat{text-align:left;padding:0 0 var(--b2);font-size:var(--t2);
    letter-spacing:2px}
  .gun-govde{padding-left:0}
  .gun-govde::before{display:none}    /* yatayda nokta bağlanacak çizgi yok */
  .gun-govde p{max-width:none}

  @media (max-width:760px){
    .gun-sahne{height:300vh}
    /* Telefonda çakılı alan 844px: başlık bloğu 530px yerse şeride
       300px kalıyor ve kart taşıyor. Başlık sıkışır, kart alçalır. */
    .gun-sabit{gap:var(--b3);padding-block:var(--b5)}
    .gun-sabit > .bolum-bas{padding-inline:20px}
    .gun-sabit .acik-anlatim{font-size:13px;line-height:1.55;max-width:none}
    .gun-sabit h2{font-size:var(--t4)}
    .gun-s{width:78vw;padding:var(--b4);min-height:min(38vh,330px)}
    .gun-s .gun-govde p{font-size:13px}
  }

}
}

/* ══════════════════════════════════════════════════════════════════════
   DEFTER GİYDİRMESİ — her alan kendi hissini versin
   ══════════════════════════════════════════════════════════════════════
   Sayfa artık tek yönlü değil ama her bölüm hâlâ AYNI şekilde beliriyor:
   hepsi aşağıdan yukarı kayıp görünür oluyor. Aşağıdaki her bölüme kendi
   giriş karakterini veriyor — hepsi kaydırmayla sürülüyor, yani hareket
   parmağın hızına bağlı; teypten oynayan bir animasyon değil, ziyaretçi
   onu KENDİ çeviriyor.
   Karakterler içeriğe bakılarak seçildi, rastgele değil:
     01 dert     — kartlar deste gibi DAĞILIR (dört ayrı şikâyet)
     03 neler    — gruplar sırayla YAZILIR (defterin satırları)
     05 kimler   — iki taraf KARŞI KARŞIYA gelir (dürüst konuşma)
     06 paketler — kâğıtlar masaya SERİLİR
   ══════════════════════════════════════════════════════════════════════ */

/* ── DÜĞMELER: basılan bir tuş gibi ─────────────────────────────────
   Düğmenin altında gerçek bir gövde var; basınca o gövde eziliyor ve
   düğme aşağı iniyor. Bir mühre bastırma hissi — ürünün dili bu.
   translateY YERİNE box-shadow kısalıyor: gölge derleyicide değişir,
   düzen hesabı yeniden koşmaz. */
.dugme{position:relative;
  box-shadow:0 3px 0 var(--border-strong);
  transition:transform .12s cubic-bezier(.2,.8,.3,1),box-shadow .12s,background .16s}
.dugme:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--border-strong),var(--shadow)}
.dugme:active{transform:translateY(3px);box-shadow:0 0 0 var(--border-strong)}
.dugme.tam-renk:active{transform:translateY(3px);box-shadow:0 0 0 var(--accent-deep)}
/* Basılınca mürekkep dağılır: mührün kâğıda değdiği an. */
.dugme.tam-renk::after{content:'';position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:0;background:var(--murekkep);
  mix-blend-mode:overlay;transition:opacity .12s}
.dugme.tam-renk:active::after{opacity:.22}
@media (prefers-reduced-motion:reduce){
  .dugme,.dugme:hover,.dugme:active{transform:none;transition:background .16s}
}

/* ── DEFTER DELİKLERİ — sayfanın sol kenarı ─────────────────────────
   Ciltli bir defterin yaprağında delikler olur. Geniş ekranda içerik
   sütununun solunda boş bir şerit zaten var; oraya deliyoruz.
   pointer-events yok, ekran okuyucuda yok — saf kâğıt. */
@media (min-width:1240px) and (prefers-reduced-motion:no-preference){
  body::before{content:'';position:fixed;left:calc(50% - var(--en)/2 - 46px);
    top:0;bottom:0;width:14px;z-index:1;pointer-events:none;opacity:.5;
    background:
      repeating-linear-gradient(180deg,
        transparent 0 44px,
        rgba(120,108,88,.30) 44px 45px,
        transparent 45px 46px,
        transparent 46px 90px);
    -webkit-mask-image:radial-gradient(circle at 50% 22px,#000 5px,transparent 5.5px);
    mask-image:radial-gradient(circle at 50% 22px,#000 5px,transparent 5.5px);
    -webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;
    -webkit-mask-size:14px 90px;mask-size:14px 90px;
    background:rgba(120,108,88,.34)}
}

@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {

  /* Ortak: kaydırmayla sürülen giriş. Bölüm ekrana girerken oynar,
     çıkarken değil (`entry` aralığı). */
  .dert,.oz-grup,.kim-k,.paket{
    animation:linear both;animation-timeline:view(block);
    animation-range:entry 8% entry 78%}

  /* 01 — DESTE DAĞILIR: kartlar üst üsteyken açılıp yerine oturur. */
  .dert{animation-name:desteDagil;transform-origin:50% 120%}
  @keyframes desteDagil{
    from{opacity:0;transform:translateY(26px) rotate(-3.5deg) scale(.94)}
    to  {opacity:1;transform:none}
  }
  .dert:nth-child(2){animation-delay:0s}
  .dert:nth-child(even){transform-origin:50% 130%}
  .dertler > .dert:nth-child(2){--d:1}
  /* Her kart biraz farklı açıyla gelsin — deste elle açılmış gibi. */
  .dert:nth-child(1){--a:-3.5deg}
  .dert:nth-child(2){--a:2.4deg}
  .dert:nth-child(3){--a:-1.8deg}
  .dert:nth-child(4){--a:3.1deg}
  @keyframes desteDagilA{
    from{opacity:0;transform:translateY(26px) rotate(var(--a,-3deg)) scale(.94)}
    to  {opacity:1;transform:none}
  }
  .dert{animation-name:desteDagilA}

  /* 03 — SATIRLAR YAZILIR: gruplar soldan, defter satırı gibi. */
  .oz-grup{animation-name:satirYazil}
  @keyframes satirYazil{
    from{opacity:0;transform:translateX(-26px)}
    to  {opacity:1;transform:none}
  }

  /* 05 — KARŞI KARŞIYA: iki taraf kendi yönünden gelir. */
  .kim-k:nth-child(1){animation-name:soldanGel}
  .kim-k:nth-child(2){animation-name:sagdanGel}
  @keyframes soldanGel{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
  @keyframes sagdanGel{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}

  /* 06 — MASAYA SERİLİR: kâğıtlar hafif eğik iner. */
  .paket{animation-name:masayaSeril}
  @keyframes masayaSeril{
    from{opacity:0;transform:translateY(30px) rotate(-1.6deg)}
    to  {opacity:1;transform:none}
  }

  /* Bölüm numarası kâğıtta yavaşça kayar — sayfa çevrilirken numaranın
     kâğıda basılı kaldığı hissi. */
  .goz::before{animation:noKay linear both;animation-timeline:view(block);
    animation-range:cover}
  @keyframes noKay{from{transform:translateY(-10px)}to{transform:translateY(10px)}}
}
}

/* Ust seritte HESABIM — kurulumu olan atolyeci kendi hesabina buradan
   gider. Basvur dugmesinin YANINDA ama onun kadar bagirmaz: yeni gelen
   basvursun, mevcut musteri hesabini bulsun. */
.ust-panel{color:var(--muted);text-decoration:none;font:600 var(--t1) var(--sans);
  padding:8px 12px;border-radius:var(--r);transition:color .15s,background .15s}
.ust-panel:hover{color:var(--text);background:var(--accent-soft)}
@media (max-width:960px){.ust-panel{display:none}}

/* ══════════════════════════════════════════════════════════════════════
   EKRAN YELPAZESİ — "burası bir platform"
   ══════════════════════════════════════════════════════════════════════
   Sayfanın üstü tek bir ekran gösterdiği sürece "bir uygulama" gibi
   duruyordu. Platform hissi GENİŞLİKTEN gelir: bir bakışta kaç yüzey
   olduğunu görmek. Yedi kart 3B derinlikte dizili; tıklanan ÖNE gelir,
   diğerleri geri çekilir.

   Konumlar tek bir sayıdan (--u = ortadan uzaklık) türer; JS yalnız o
   sayıyı yazar, geometriyi CSS kurar. Kart sayısı değişse de düzen
   kendiliğinden oturur.
   ══════════════════════════════════════════════════════════════════════ */
.yelpaze{position:relative;padding:var(--b6) 0 var(--b7);
  background:var(--panel);border-block:1px solid var(--border);
  overflow:clip}
.yp-bas{display:flex;align-items:center;justify-content:center;gap:var(--b4);
  flex-wrap:wrap;text-align:center;padding-inline:var(--yan);
  margin-bottom:var(--b5)}
.yp-bas p{color:var(--muted);font-size:var(--t1);max-width:52ch}
.yp-bas b{color:var(--text)}

/* Sahne yüksekliği kart boyuna göre: kartlar artık CİHAZ oranında
   (2,092) ve tam ekranı gösteriyor — önce 1,55'te kırpılıydı, ekranın
   yarısı görünmüyordu ve "tam boyut" değildi. */
.yp-sahne{position:relative;height:596px;perspective:1700px;
  perspective-origin:50% 46%;transform-style:preserve-3d}

.yp-kart{position:absolute;left:50%;top:0;width:266px;
  margin-left:-133px;padding:0;border:0;background:transparent;
  cursor:pointer;transform-style:preserve-3d;
  /* --u: ortadan kaçıncı sırada. JS bunu yazar, gerisi buradan çıkar. */
  --u:0;
  transform:
    translateX(calc(var(--u) * 152px))
    translateZ(calc(var(--u) * var(--u) * -92px))
    rotateY(calc(var(--u) * -13deg))
    scale(calc(1 - var(--u) * var(--u) * 0.032));
  /* Uzaktaki kart ARKADA kalsın: z-index sayısal olarak uzaklıkla azalır */
  z-index:calc(20 - var(--m, 0));
  opacity:calc(1 - var(--m, 0) * 0.16);
  transition:transform .5s cubic-bezier(.2,.8,.25,1),
             opacity .4s, filter .4s}
.yp-kart img{display:block;width:100%;height:auto;border-radius:14px;
  border:1px solid var(--border-strong);
  box-shadow:0 18px 40px rgba(90,75,60,.20),0 3px 8px rgba(90,75,60,.12);
  background:var(--bg)}
/* Arkadakiler hafif soluk: göz öne gelene gitsin. */
.yp-kart:not(.one) img{filter:saturate(.82) brightness(.98)}
.yp-kart.one img{box-shadow:0 30px 60px rgba(90,75,60,.28),
                            0 6px 14px rgba(90,75,60,.16)}
.yp-kart:hover{transform:
    translateX(calc(var(--u) * 152px))
    translateZ(calc(var(--u) * var(--u) * -92px + 38px))
    rotateY(calc(var(--u) * -13deg))
    scale(calc(1.02 - var(--u) * var(--u) * 0.032))}
.yp-kart:focus-visible{outline:none}
.yp-kart:focus-visible img{outline:3px solid var(--accent);outline-offset:4px}

/* Etiket YALNIZ öndeki kartta — yedi etiket birden gürültü olurdu. */
.yp-etiket{display:none}
.yp-ad{text-align:center;margin-top:var(--b5);
  font:italic 700 var(--t3) var(--serif);color:var(--text);
  min-height:1.4em}

@media (max-width:900px){
  .yp-sahne{height:496px;perspective:1300px}
  .yp-kart{width:222px;margin-left:-111px}
  .yp-kart{transform:
    translateX(calc(var(--u) * 122px))
    translateZ(calc(var(--u) * var(--u) * -76px))
    rotateY(calc(var(--u) * -12deg))
    scale(calc(1 - var(--u) * var(--u) * 0.036))}
}
@media (max-width:620px){
  /* Telefonda yelpaze dar kalıyor: kartlar birbirine giriyor ve hiçbiri
     okunmuyor. Aralık daralıyor, açı artıyor — deste hissi korunuyor
     ama öndeki kart net kalıyor. Kart eni ekrana göre: 320px'lik
     telefonda 176px, 620px'de 210px. */
  .yp-sahne{height:min(78vw * 2.092, 440px);perspective:1000px}
  .yp-kart{width:min(58vw,210px);margin-left:calc(min(58vw,210px) / -2)}
  .yp-kart{transform:
    translateX(calc(var(--u) * 26vw))
    translateZ(calc(var(--u) * var(--u) * -64px))
    rotateY(calc(var(--u) * -16deg))
    scale(calc(1 - var(--u) * var(--u) * 0.055))}
  .yp-bas{margin-bottom:var(--b4)}
  .yp-ad{font-size:var(--t2);margin-top:var(--b4)}
}
@media (prefers-reduced-motion:reduce){
  .yp-kart{transition:none}
}

/* ── EKRAN GEZİNMESİ — başlık iki okun arasında ──────────────────────
   Kadran (aracın klima topuzu) yapıldı ve BIRAKILDI: güzeldi ama
   çevrileceği anlaşılmıyordu; ok herkesin bildiği işaret ve tek
   dokunuşta çalışıyor. Oklar düğmelerle aynı fiziksel gövdeye sahip —
   basınca eziliyorlar (bkz. .dugme). */
.yp-gezin{display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,4vw,42px);margin-top:var(--b5);padding-inline:var(--yan)}
.yp-orta{min-width:min(300px,58vw);text-align:center}
.yp-ad{font:italic 700 var(--t3) var(--serif);color:var(--text);
  line-height:1.25;text-wrap:balance}
.yp-sayac{margin-top:6px;font:700 var(--t0) var(--stamp);letter-spacing:2.2px;
  color:var(--muted)}

.yp-ok{flex:none;width:58px;height:58px;border-radius:50%;
  border:1px solid var(--border-strong);background:var(--bg);
  color:var(--text);cursor:pointer;display:grid;place-items:center;
  box-shadow:0 3px 0 var(--border-strong);
  transition:transform .12s cubic-bezier(.2,.8,.3,1),
             box-shadow .12s,background .16s,color .16s,border-color .16s}
.yp-ok svg{width:24px;height:24px;fill:none;stroke:currentColor;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.yp-ok:hover{background:var(--accent);border-color:var(--accent);color:#fff;
  transform:translateY(-2px);box-shadow:0 5px 0 var(--accent-deep),var(--shadow)}
.yp-ok:active{transform:translateY(3px);box-shadow:0 0 0 var(--border-strong)}
.yp-ok:hover:active{box-shadow:0 0 0 var(--accent-deep)}
.yp-ok:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

@media (max-width:620px){
  .yp-gezin{gap:14px;margin-top:var(--b4)}
  .yp-ok{width:50px;height:50px}
  .yp-ok svg{width:21px;height:21px}
  .yp-ad{font-size:var(--t2)}
  .yp-orta{min-width:0;flex:1}
}
@media (prefers-reduced-motion:reduce){
  .yp-ok,.yp-ok:hover,.yp-ok:active{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════
   AÇILIŞ KAPAĞI — ürünün kendi açılışı, telefonun içinde
   ══════════════════════════════════════════════════════════════════════
   Uygulama açılırken bir kapak durur ve YUKARI KALKAR
   (index.html #intro.open → translateY(-103%)). Buradaki birebir aynı
   hareket: ziyaretçi uydurma bir animasyon değil, ustanın her sabah
   gördüğü anı izliyor.
   Kapak ekrandan ÇIKAR, gizlenmez: kalkarken altındaki defterin
   göründüğü an sayfanın ilk ödülü. */
/* Kapak EKRANIN ICINDE (.telefon-ic). Once telefonun dogrudan cocuguydu
   ve yukari kalkinca govdenin DISINA tasip havada duruyordu — kahramanda
   hayalet bir kart. .telefon'a overflow:hidden verilemez: kasa kalinligini
   veren yedi katmanli golge de kirpilirdi. Ekranin kendisi zaten
   overflow:hidden; kapak oraya tasindi, kalkarken ekranda kayboluyor. */
.tel-kapak{position:absolute;inset:calc(var(--w)*.137) 0 0;z-index:8;
  border-radius:calc(var(--w)*.131);overflow:hidden;
  background:var(--bg);display:grid;place-items:center;
  transform:translateY(0);
  transition:transform 1.05s cubic-bezier(.7,0,.2,1)}
/* Yüzde KENDİ yüksekliğine göre. Kapak durum çubuğu kadar aşağıdan
   başladığı için -103%% onu ekrandan tam çıkarmıyordu: alt kenarı
   saatin ardında ince bir çizgi olarak kalıyordu (görüldü). Kendi boyu
   ekranın .863'ü, dolayısıyla tam çıkış için >%%116 gerekiyor. */
.telefon.acildi .tel-kapak{transform:translateY(-118%)}
.tel-kapak-cerceve{position:absolute;inset:9px;border-radius:calc(var(--w)*.10);
  border:1px solid var(--border-strong);
  outline:1px solid var(--border);outline-offset:3px;pointer-events:none}
.tel-kapak-ic{text-align:center;padding:0 var(--b4)}
.tel-kapak .muhur{width:38px;height:38px;margin:0 auto 10px;font-size:var(--t1)}
.tel-kapak-ust{font:700 var(--t00) var(--stamp);letter-spacing:2.4px;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.tel-kapak-ad{font:italic 700 var(--t4)/1.05 var(--serif);color:var(--text)}
.tel-kapak-ad em{font-style:italic;color:var(--accent)}
.tel-kapak-cizgi{width:44px;height:2px;margin:10px auto;border-radius:2px;
  background:var(--accent);opacity:.55}
.tel-kapak-arac{width:78%;margin:6px auto 0;display:block}
/* Kendini çizen sedan — ürünün kapağındaki imza. */
.tel-kapak .ck{fill:none;stroke:var(--text);stroke-width:5;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1800;stroke-dashoffset:1800}
.tel-kapak .ck.thin{stroke-width:3;stroke:var(--border-strong)}
.telefon.ciziyor .tel-kapak .ck{animation:kapakCiz 1.5s .25s
  cubic-bezier(.4,0,.2,1) forwards}
@keyframes kapakCiz{to{stroke-dashoffset:0}}

/* ── KAYDIRMA İŞARETİ ────────────────────────────────────────────────
   "Kaydırılabilir" demek yerine GÖSTERİYORUZ: bir parmak sağa gidiyor
   ve arkasında iz bırakıyor. Kapak kalktıktan sonra belirir; önce
   gelirse kapağın üstünde anlamsız durur. */
.telefon-sar{flex:0 0 auto;display:flex;flex-direction:column;
  align-items:center;min-width:0}

/* Telefonun ALTINDA duran işaret — hiçbir şeyi örtmüyor, neyin
   kaydırılacağı belli. Kelimeyle değil GÖSTEREREK: parmak sağa gidiyor,
   arkasında iz bırakıyor, sonra iki çentik yönü tekrarlıyor.
   Soluk bir ipucu işe yaramaz; ziyaretçi bunu FARK ETMELİ, o yüzden
   dolu kiremit zemin ve nabız gibi atan bir halka var. */
.tel-kaydir{appearance:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:2px;
  margin:var(--b4) auto 0;padding:10px 18px 10px 12px;width:fit-content;
  border-radius:var(--r-hap);
  background:var(--accent);color:#fff;
  box-shadow:0 2px 0 rgba(120,36,22,.55),0 10px 22px rgba(178,59,37,.28);
  opacity:0;transform:translateY(6px);
  transition:opacity .5s .35s,transform .5s .35s}
.tel-kaydir:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.tel-kaydir:active{transform:translateY(2px);
  box-shadow:0 0 0 rgba(120,36,22,.55),0 4px 12px rgba(178,59,37,.28)}
.telefon-sar.acildi .tel-kaydir{opacity:1;transform:none;
  animation:kaydirNabiz 2.6s ease-in-out .9s 3}
/* Bir kez kaydırıldıysa işaret çekilir: işini yaptı, orada durması
   ziyaretçiye "hâlâ yapmadın" der. */
.telefon-sar.kaydirildi .tel-kaydir{opacity:0;transform:translateY(-4px);
  animation:none;transition:opacity .35s,transform .35s}
@keyframes kaydirNabiz{
  0%,100%{box-shadow:0 2px 0 rgba(120,36,22,.55),0 10px 22px rgba(178,59,37,.28),
                     0 0 0 0 rgba(178,59,37,.42)}
  55%    {box-shadow:0 2px 0 rgba(120,36,22,.55),0 10px 22px rgba(178,59,37,.28),
                     0 0 0 13px rgba(178,59,37,0)}
}
/* Parmak KENDİ YUVASINDA kayar. Önce öğenin kendisi translateX ile
   +14px gidiyordu ve yazının üstüne biniyordu (görüldü). Şimdi yuva
   sabit genişlikte, hareket eden yalnızca içindeki çizim. */
.tel-kaydir-el{position:relative;display:block;width:44px;height:26px;
  flex:none;overflow:hidden;color:#fff}
.tel-kaydir-el svg{position:absolute;top:0;left:8px;width:26px;height:26px;
  fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  animation:elKay 1.9s cubic-bezier(.45,0,.25,1) infinite}
/* Parmağın arkasındaki iz: nereden nereye gittiği kalıcı olarak okunur. */
.tel-kaydir-el::before{content:'';position:absolute;left:6px;top:13px;
  width:30px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75));
  animation:izKay 1.9s cubic-bezier(.45,0,.25,1) infinite}
/* Yönü tekrar eden iki çentik — sağa. */
.tel-kaydir-ok{display:flex;gap:1px;margin-left:8px}
.tel-kaydir-ok i{width:7px;height:7px;border-top:2px solid #fff;
  border-right:2px solid #fff;transform:rotate(45deg);opacity:.35;
  animation:okYan 1.9s ease-in-out infinite}
.tel-kaydir-ok i:nth-child(2){animation-delay:.16s}
@keyframes okYan{0%,60%,100%{opacity:.3}30%{opacity:1}}
/* Parmak hiç yok olmuyor. Tam saydamlaşınca yuva boşalıyor ve rozet
   dengesiz görünüyordu (görüldü). Dönüş yolunda soluyor ama duruyor:
   okunuşu "parmağı kaldırıp başa koyuyor" — gerçek hareketin kendisi. */
@keyframes elKay{
  0%    {transform:translateX(-13px);opacity:.3}
  14%   {opacity:1}
  70%   {transform:translateX(13px);opacity:1}
  82%   {transform:translateX(13px);opacity:.28}
  100%  {transform:translateX(-13px);opacity:.3}
}
}
@keyframes izKay{
  0%,12%{opacity:0;clip-path:inset(0 100% 0 0)}
  30%   {opacity:1}
  74%   {opacity:1;clip-path:inset(0 0 0 0)}
  92%,100%{opacity:0;clip-path:inset(0 0 0 0)}
}
.tel-kaydir-yazi{font:700 var(--t0) var(--stamp);letter-spacing:1.4px;
  text-transform:uppercase;color:#fff;white-space:nowrap}

/* ── KAHRAMANDA GİRİŞ SATIRI ─────────────────────────────────────────
   Yeni gelen için düğme, mevcut müşteri için bağlantı. Aynı satırda
   ama aynı ağırlıkta değil. */
.kah-giris{margin-top:var(--b3);color:var(--muted);font-size:var(--t1)}
.kah-giris a{color:var(--accent);font-weight:700;text-decoration:none}
.kah-giris a:hover{text-decoration:underline}
.kah-ayrac{margin:0 8px;opacity:.55}

@media (prefers-reduced-motion:reduce){
  .tel-kapak{transition:none;transform:translateY(-103%)}
  .telefon.ciziyor .tel-kapak .ck{animation:none;stroke-dashoffset:0}
  .tel-kaydir-el svg{animation:none}
  .tel-kaydir{opacity:1;transform:none}
}

/* ── DEFTERCİ — vitrin maskotu (14 Eyl 2026) ───────────────────────────
   Tek sprite sayfası, 37 hücre yan yana (224×320). HÜCRE SEÇİMİ YÜZDEYLE:
   background-size 3700% iken position-x = k/36 × 100% tam k'inci hücreye
   oturur (yüzde konum, görsel−kutu FARKINA göre ölçülür: k/(n−1)). Piksel
   gerekmez, boy ne olursa olsun doğru. --dc-k'yi JS (defterciKur) yazar.
   Masaüstü: .kahraman'ın alt kenarında, metin sütunu ile maketin arasında,
   maketin ALTINDA (z 0; maket transform ile kendi bağlamında üstte) —
   ustanın "kendin dene" düğmelerini hiçbir zaman örtmez.
   Kırılım 960px: hero'nun tek sütuna düştüğü nokta (satır ~1167), 900 DEĞİL. */
.defterci{--dc-k:17;
  position:absolute;bottom:22px;left:calc(50% - 150px);
  /* 252 -> 300 px ve 1,5x SAYFA: site olcusunde goz hareketi 1-2 pikseldi,
     kullanici "belli olmuyor" dedi (hakli). Masaustu ayri, 336x480 hucreli
     sayfayi alir; mobil rozet 1x sayfada kalir (--dc-img). Neden 2x degil:
     37 x 448 = 16576 px, WebP kenar siniri 16383 — kodlayici bos dondu.
     Yeni dosya adi = onbellek kiricisi; /ortam bir yil immutable. */
  height:clamp(220px,20vw,300px);width:calc(clamp(220px,20vw,300px) * .7);
  background-image:url(/ortam/defterci-bakis-15x.webp);background-repeat:no-repeat;
  background-size:3700% 100%;
  background-position:calc(var(--dc-k) / 36 * 100%) 0;
  pointer-events:none;z-index:0}
.defterci-rozet{display:none}
@media (max-width:960px){
  .defterci{display:none}
  /* Mobil: maketin tarayıcı çubuğunda 40 px kafa. Aynı sayfadan yalnız KAFA
     bölgesi gösterilir: hücre genişliği 40/.44 (kafa hücrenin %44'ü), kafa
     hücrede x %27, y %10'dan başlar. Hero'ya yükseklik eklemez — CTA yerinde. */
  /* SEÇİCİ ".masa-cubuk .defterci-rozet" (0,2,0): çubuktaki trafik ışığı
     noktaları ".masa-cubuk i" (0,1,1) ile 8 px + düz zemin alıyor ve tek
     sınıf seçiciyi eziyordu — rozet bir nokta olarak çıktı (ölçüldü, 390 px).
     background KISAYOLU ile önce sıfırlanır ki noktanın rengi altında kalmasın. */
  .masa-cubuk .defterci-rozet{--dc-k:17;--dc-cw:calc(40px / .44);--dc-ch:calc(40px / .44 * 320 / 224);
    display:block;flex:0 0 auto;margin-left:auto;width:40px;height:40px;
    border-radius:50%;background:transparent none;
    background-image:var(--dc-img);background-repeat:no-repeat;
    background-size:calc(var(--dc-cw) * 37) var(--dc-ch);
    background-position:calc(-1 * var(--dc-k) * var(--dc-cw) - var(--dc-cw) * .27) calc(-1 * var(--dc-ch) * .10)}
}
@media (prefers-reduced-motion:reduce){.defterci,.defterci-rozet{--dc-k:17}}