/*
  hello nunum tanıtım sitesi.

  ## Üç kural

  **Degrade yok.** Renk geçişi değil, düz yüzey. Zemin ya kâğıt, ya kart,
  ya gece. Vurgu rengi dolu bir alanda duruyor, bir geçişin içinde değil.

  **Ölçek sabit.** Boşluk, yazı boyu ve köşe yarıçapı aşağıdaki
  değişkenlerden geliyor. Ara bir değer gerektiğinde ölçeğe yeni bir
  basamak ekleniyor; satır içinde piksel yazılmıyor. Sayfalar arası
  orantıyı bozan şey tam olarak buydu.

  **Yerleşim sınıfta.** Satır içi stil medya sorgusunu eziyor, çünkü
  özgüllük medya sorgusuyla artmıyor. Bir ızgara satır içi yazıldığında
  telefonda dört sütunda kalıp sayfayı yatay taşırdı.

  ## Derleme adımı yok

  Sunucuda node kurulu değil. Dosya elle yazılıyor ve `SiteSurumu` ile
  sürümleniyor.
*/

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* ---- renk ---- */
  --kagit:#FBF8F6;
  --kart:#FFFFFF;
  --gece:#1C1A21;
  --gece-2:#272430;
  --gece-cizgi:rgba(255,255,255,.12);

  --murekkep:#1B1920;
  --murekkep-2:#5C5866;
  --murekkep-3:#8E8A98;
  --cizgi:#EAE5E6;

  --mercan:#E8705F;
  --mercan-soft:#FDEDEA;
  --yesil:#5B8C3E;
  --yesil-soft:#EDF4E6;
  --mavi:#3F6BD4;
  --mavi-soft:#EAF0FD;
  --sari-soft:#FBF1DF;
  --mor-soft:#F1EDFB;

  /* ---- boşluk ---- */
  --b1:4px;  --b2:8px;  --b3:12px; --b4:16px;
  --b5:24px; --b6:32px; --b7:48px; --b8:64px; --b9:96px;

  /* ---- yazı ---- */
  --y1:13px; --y2:14px; --y3:15px; --y4:17px;
  --y5:20px; --y6:24px; --y7:32px;

  /* ---- köşe ---- */
  --r1:10px; --r2:14px; --r3:20px; --r4:28px;

  --en:1120px;

  /*
    Geist, Türkçeyi `latin` ve `latin-ext` alt kümeleriyle karşılıyor:
    ı (U+0131) birincide, ğ ve ş ikincide. Bu projede bir yazı tipi
    tam olarak bu yüzden bir kez geri alındı.
  */
  --sans:"Geist","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
         "Helvetica Neue",Arial,sans-serif;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--kagit);color:var(--murekkep);
  font-size:var(--y3);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","cv05";
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--mercan);outline-offset:3px;border-radius:4px}

.shell{max-width:var(--en);margin:0 auto;padding:0 var(--b5)}

/*
  Başlık yazısı gövdeyle **aynı aileden**, yalnızca ağırlığı ve
  harf aralığı farklı. İki aile kullanmak ikinci bir dış istek ve
  ikinci bir yükleme gecikmesi demekti; tek ailede sayfa daha
  derli toplu duruyor.
*/
.display{font-weight:650;letter-spacing:-.022em;line-height:1.12}

/* ============ başlık ============ */
.top{
  position:sticky;top:0;z-index:60;
  background:rgba(251,248,246,.88);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--cizgi);
}
.top-in{display:flex;align-items:center;gap:var(--b6);height:64px}
.brand{display:flex;align-items:center;gap:var(--b2);font-size:var(--y4);font-weight:650;letter-spacing:-.02em}
.brand-mark{width:30px;height:30px;flex:none}
.brand em{font-style:normal;color:var(--mercan)}
.top-nav{display:flex;gap:var(--b5)}
.top-nav a{color:var(--murekkep-2);font-size:var(--y2);font-weight:500;transition:color .15s}
.top-nav a:hover{color:var(--murekkep)}
.top-nav a.is-now{color:var(--murekkep);font-weight:600}
.top-act{margin-left:auto;display:flex;align-items:center;gap:var(--b2)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--b2);
  height:40px;padding:0 18px;border-radius:var(--r1);border:1px solid transparent;
  font-family:var(--sans);font-size:var(--y2);font-weight:600;letter-spacing:-.01em;
  cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,opacity .15s;
}
.btn-line{border-color:var(--cizgi);color:var(--murekkep);background:var(--kart)}
.btn-line:hover{border-color:var(--murekkep-3)}

/*
  Koyu bölümde düğme hiyerarşisi **tersine dönüyordu**.

  Birincil düğme mercandı ve başlıktaki vurgu da mercan: ikisi yan yana
  aynı rengi iki kez söyleyip birbiriyle yarışıyordu. İkincil düğme ise
  dolu beyazdı, yani koyu zeminde birincilden daha baskın çıkıyordu;
  göz önce ikincil düğmeye gidiyordu.

  Koyu zeminde en yüksek karşıtlık beyaz. Birincil düğme beyaz oluyor,
  ikincil düğme yalnızca çerçeve kalıyor. Mercan böylece tek bir işe
  ayrılıyor: başlıktaki vurgu.
*/
.gece .btn-fill,.night .btn-fill{background:#fff;color:var(--gece);border-color:#fff}
.gece .btn-fill:hover,.night .btn-fill:hover{background:rgba(255,255,255,.88)}
.gece .btn-line,.night .btn-line{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.28);
}
.gece .btn-line:hover,.night .btn-line:hover{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5);
}
.btn-fill{background:var(--mercan);color:#fff}
.btn-fill:hover{opacity:.9}
.btn-dark{background:var(--murekkep);color:#fff}
.btn-dark:hover{opacity:.9}
.btn-paper{background:var(--kart);border-color:var(--cizgi);color:var(--murekkep)}
.btn-off{background:var(--cizgi);color:var(--murekkep-3);cursor:not-allowed}
.btn-off b{
  font-size:11px;font-weight:600;letter-spacing:.02em;
  background:rgba(0,0,0,.06);border-radius:5px;padding:2px 6px;
}
.koyu-kabuk .btn-line{border-color:var(--gece-cizgi);color:#fff;background:transparent}
.koyu-kabuk .btn-line:hover{background:rgba(255,255,255,.08)}

.menu-btn{display:none;margin-left:var(--b3);background:none;border:0;padding:8px;cursor:pointer}
.menu-btn i{display:block;width:19px;height:2px;background:var(--murekkep);border-radius:2px}
.menu-btn i+i{margin-top:5px}

/* ============ bölüm iskeleti ============ */
.band{padding:var(--b9) 0}
.band-head{max-width:620px;margin-bottom:var(--b7)}
/*
  Bölümün son öğesiyse altındaki boşluk düşüyor.

  `margin-bottom:48px` başlıkla altındaki içeriği ayırmak için;
  altında bir şey yoksa bölümün kendi alt boşluğuna ekleniyor ve
  o bölüm ötekilerden daha boşluklu duruyordu. Aile ve Özellikler
  sayfalarının sonunda ölçüldü: 134 piksel, ötekiler 96.
*/
.band-head:last-child{margin-bottom:0}
.band-head.mid{margin-left:auto;margin-right:auto;text-align:center}
.kicker{
  font-size:var(--y1);font-weight:600;letter-spacing:.02em;
  color:var(--mercan);margin-bottom:var(--b3);
}
.band-h2{font-weight:650;letter-spacing:-.022em;line-height:1.14;
  font-size:clamp(26px,3.2vw,36px);margin-bottom:var(--b3)}
.band-head p{color:var(--murekkep-2);font-size:var(--y4)}
.anlat{color:var(--murekkep-2);font-size:var(--y4)}
.anlat + .anlat{margin-top:var(--b3);font-size:var(--y3)}
.ust-not{font-size:var(--y1);color:var(--murekkep-3);margin-bottom:var(--b3)}

/* ============ gece paneli ============ */
.gece{background:var(--gece);color:#fff}
.gece .kicker{color:#F0A295}
.gece .band-h2,.gece h1{color:#fff}

/*
  Koyu bölümün yazı rengi **dar** kapsamlı.

  Önce `.gece p` yazılmıştı: bölümdeki her paragrafı beyaza çeviriyor
  ve beyaz zeminli kartların içine sızıyordu. Kartın yazısı beyaz
  üstüne beyaz kalıyor, metin sayfadaydı ama görünmüyordu. Aynı hata
  iki kez yapıldı; ikincisinde bütün kart boş bir kutu gibi çıktı.

  Çözüm özgüllük yarışına girmek değil, kuralı ait olduğu yere
  daraltmak: koyu zeminde duran anlatım paragrafları. Bir bileşenin
  kendi rengi varsa onu bileşen söylüyor.
*/
/*
  Başlık bu listede **yok**: `.gece .band-head h2` (0,2,1), başlığı
  beyaz yapan `.gece .band-h2` (0,2,0) kuralını yeniyor ve başlık
  griye düşüyordu.
*/
.gece .band-head p,
.gece > .shell > p,
.gece .anlat,
.gece .rules span,
.gece .step p,
.gece .step h3{color:rgba(255,255,255,.68)}
.gece .rules b,.gece .step h3{color:#fff}

.night{background:var(--gece);color:#fff;padding:var(--b9) 0;position:relative;overflow:hidden}
/*
  Fotoğraf doku olarak duruyor, konu olarak değil. Perde **düz**:
  eskiden maskeli bir degradeydi ve kenarında görünür bir bant
  bırakıyordu.
*/
/*
  Fotoğraf sağ yarıda duruyor, bölümün tamamını kaplamıyor.

  Kapladığında yüz tam başlığın arkasına geliyordu ve %14 opaklıkta gri
  bir fotoğraf ne okunabiliyor ne de doku sayılıyordu: yalnızca
  yazının arkasını kirletiyordu. Şimdi başlığın arkası düz, fotoğraf
  kaydın durduğu sağ tarafta.

  Telefonda hiç çizilmiyor: tek sütuna düşünce fotoğrafın altında kalan
  yazı yine okunmaz oluyordu.
*/
.night-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 400px;gap:var(--b8);align-items:center}

.eyebrow{
  display:inline-flex;align-items:center;gap:var(--b2);
  font-size:var(--y1);font-weight:600;color:rgba(255,255,255,.6);margin-bottom:var(--b4);
}
.eyebrow i{width:5px;height:5px;border-radius:50%;background:var(--mercan);display:block}

.hero-h1{font-weight:650;letter-spacing:-.028em;line-height:1.08;
  font-size:clamp(34px,5vw,56px);color:#fff;margin-bottom:var(--b4)}
.hero-h1 span{color:#F0A295}
.hero-lead{font-size:var(--y4);color:rgba(255,255,255,.7);max-width:460px;margin-bottom:var(--b5)}
.hero-act{display:flex;gap:var(--b2);flex-wrap:wrap;margin-bottom:var(--b5)}
.hero-facts{display:flex;gap:var(--b5);flex-wrap:wrap;font-size:var(--y2);color:rgba(255,255,255,.55)}
.hero-facts li{display:flex;align-items:center;gap:var(--b2)}
.hero-facts svg{width:15px;height:15px;color:#A8C98C;flex:none}

/* ---- bir günün kaydı ---- */
.log{background:var(--gece-2);border:1px solid var(--gece-cizgi);border-radius:var(--r3);padding:var(--b5)}
.log-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--b3);
  padding-bottom:var(--b3);margin-bottom:var(--b1);border-bottom:1px solid var(--gece-cizgi);
}
.log-who{display:flex;align-items:center;gap:var(--b2)}
.log-av{
  width:30px;height:30px;border-radius:var(--r1);background:#7E9BD8;flex:none;
  display:grid;place-items:center;font-size:var(--y1);font-weight:650;color:#13203A;
}
.log-name{font-size:var(--y2);font-weight:600;color:#fff;line-height:1.3}
.log-sub{font-size:var(--y1);color:rgba(255,255,255,.45)}
.log-day{font-size:var(--y1);font-weight:600;color:rgba(255,255,255,.4)}
.log-row{
  display:grid;grid-template-columns:50px 12px 1fr auto;align-items:center;gap:var(--b3);
  padding:var(--b2) 0;border-bottom:1px solid rgba(255,255,255,.06);
}
.log-row:last-child{border-bottom:0}
.log-time{font-size:var(--y1);font-weight:500;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.log-dot{width:8px;height:8px;border-radius:50%;justify-self:center}
.log-what{font-size:var(--y2);color:rgba(255,255,255,.9)}
.log-meta{font-size:var(--y1);color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums}
.log-row.is-night .log-time{color:#F0A295}

/* ============ kayıt türleri ============ */
.types{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--b4)}
.type{
  background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r2);
  padding:var(--b5);transition:border-color .15s;
}
.type:hover{border-color:var(--murekkep-3)}
.type-top{display:flex;align-items:center;gap:var(--b2);margin-bottom:var(--b2)}
.type-tag{font-size:var(--y1);font-weight:600;padding:3px 9px;border-radius:7px}
.type-h{font-size:var(--y5);font-weight:650;letter-spacing:-.018em}
.type p{color:var(--murekkep-2);font-size:var(--y2);margin-bottom:var(--b3)}
.type-sample{
  display:flex;align-items:center;gap:var(--b2);
  background:var(--kagit);border:1px solid var(--cizgi);border-radius:var(--r1);
  padding:var(--b2) var(--b3);font-size:var(--y2);color:var(--murekkep-2);
}
.type-sample b{color:var(--murekkep);font-weight:600}
.type-sample time{font-variant-numeric:tabular-nums;font-size:var(--y1);color:var(--murekkep-3);font-weight:600;flex:none}

/* ============ iki sütun ============ */
.expert{background:var(--kart);border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi)}
.expert-in{display:grid;grid-template-columns:1fr 1fr;gap:var(--b8);align-items:center}
/* Telefon ekranı taşıyan iki sütunda hiza üstten; ortalama, kısa metni
   uzun ekranın ortasında asılı bırakıyor. */
.expert-in.ustten{align-items:start}

.rules{display:grid;gap:var(--b4);margin-top:var(--b5)}
.rules li{display:flex;gap:var(--b3)}
.rules .tick{
  width:22px;height:22px;border-radius:7px;background:var(--yesil-soft);flex:none;
  display:grid;place-items:center;margin-top:2px;
}
.rules .tick svg{width:11px;height:11px;color:var(--yesil)}
.rules b{display:block;font-size:var(--y3);font-weight:600;margin-bottom:2px}
.rules span{color:var(--murekkep-2);font-size:var(--y2)}

/* ============ sohbet parçası ============ */
.thread{display:grid;gap:var(--b2)}
.bub{max-width:82%;padding:var(--b3) var(--b4);border-radius:var(--r2);font-size:var(--y2);line-height:1.55}
.bub-me{background:var(--mercan);color:#fff;margin-left:auto;border-bottom-right-radius:var(--b1)}
.bub-dr{background:var(--kagit);border:1px solid var(--cizgi);border-bottom-left-radius:var(--b1)}
.thread-who{display:flex;align-items:center;gap:var(--b2);margin-bottom:var(--b1);
  font-size:var(--y1);color:var(--murekkep-3);font-weight:600}
.thread-who i{width:6px;height:6px;border-radius:50%;background:var(--yesil);display:block}
.thread-time{font-size:var(--y1);color:var(--murekkep-3);text-align:right;font-variant-numeric:tabular-nums}

/* ============ paylaşım kartı ============ */
.share-card{
  background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r2);padding:var(--b4);
}
.share-top{display:flex;align-items:center;gap:var(--b3);margin-bottom:var(--b3)}
.share-av{
  width:36px;height:36px;border-radius:var(--r1);background:#7E9BD8;flex:none;
  display:grid;place-items:center;font-size:var(--y2);font-weight:650;color:#13203A;
}
.share-name{font-size:var(--y3);font-weight:600;line-height:1.3}
.share-age{font-size:var(--y1);color:var(--murekkep-3)}
.share-note{display:flex;align-items:center;gap:var(--b2);margin-top:var(--b3);
  font-size:var(--y1);color:var(--murekkep-3)}
.share-note svg{width:12px;height:12px;flex:none}

/* ============ kapsam çipleri ============ */
.kapsam{display:flex;flex-wrap:wrap;gap:var(--b2)}
.kapsam span{
  font-size:var(--y2);font-weight:500;padding:6px 12px;border-radius:999px;
  border:1px solid var(--cizgi);background:var(--kart);color:var(--murekkep-3);
}
.kapsam span.acik{background:var(--yesil-soft);border-color:transparent;color:var(--yesil);font-weight:600}
.gece .kapsam span{background:rgba(255,255,255,.07);border-color:var(--gece-cizgi);color:rgba(255,255,255,.75)}
.gece .kapsam span.acik{background:rgba(255,255,255,.16);color:#fff}

/* ============ numaralı liste ============ */
.safe{background:var(--gece);color:#fff;padding:var(--b9) 0}
.safe .kicker{color:#F0A295}
.safe .band-h2{color:#fff}
.safe .band-head p{color:rgba(255,255,255,.65)}
.safe-list{display:grid;border-top:1px solid var(--gece-cizgi)}
.safe-item{
  display:grid;grid-template-columns:40px 1fr;gap:var(--b5);align-items:start;
  padding:var(--b5) 0;border-bottom:1px solid var(--gece-cizgi);
}
.safe-no{font-size:var(--y2);font-weight:650;color:#F0A295;padding-top:3px;font-variant-numeric:tabular-nums}
.safe-item h3{font-size:var(--y5);font-weight:650;letter-spacing:-.018em;color:#fff;margin-bottom:var(--b1)}
.safe-item p{color:rgba(255,255,255,.65);font-size:var(--y3);max-width:620px}

/* ============ adımlar ============ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--b4);counter-reset:st}
.steps.dort{grid-template-columns:repeat(4,1fr)}
.step{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r2);padding:var(--b5)}
.step::before{
  counter-increment:st;content:counter(st);
  display:grid;place-items:center;width:28px;height:28px;border-radius:9px;
  background:var(--mercan-soft);color:var(--mercan);font-weight:650;font-size:var(--y2);
  margin-bottom:var(--b3);font-variant-numeric:tabular-nums;
}
.step h3{font-size:var(--y4);font-weight:650;letter-spacing:-.018em;margin-bottom:var(--b1)}
.step p{color:var(--murekkep-2);font-size:var(--y2)}

/* ============ özet kartları ============ */
.ozet{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--b4)}
.ozet-k{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r2);padding:var(--b5);transition:border-color .15s}
.ozet-k:hover{border-color:var(--murekkep-3)}
.ozet-k .sim{width:34px;height:34px;border-radius:var(--r1);display:grid;place-items:center;margin-bottom:var(--b3)}
.ozet-k .sim svg{width:18px;height:18px}
.ozet-k h3{font-size:var(--y4);font-weight:650;letter-spacing:-.018em;margin-bottom:var(--b1)}
.ozet-k p{color:var(--murekkep-2);font-size:var(--y2)}
.ozet-k p b{font-weight:600;color:var(--murekkep)}
.gece .ozet-k{background:var(--gece-2);border-color:var(--gece-cizgi)}
.gece .ozet-k:hover{border-color:rgba(255,255,255,.3)}
.gece .ozet-k .sim{background:rgba(255,255,255,.1)}
.gece .ozet-k p{color:rgba(255,255,255,.66)}
.gece .ozet-k p b{color:#fff}

/* ============ uygulama kartları ============ */
/*
  ## Neden ekran görüntüsü değil

  Üç yol denendi. Telefon çerçevesinde tam ekran: 280 piksel
  genişlikte 610 piksel boyunda oluyor, bölümü yutuyor ve üç ekranın
  üst yarısı aynı başlıkla aynı ilk mesaj olduğu için aralarındaki
  fark görünmüyor. Kırpılmış ekran görüntüsü: boy düzeliyor ama yazı
  bulanık, durum çubuğu ve çentik kadrajda kalıyor, simülatörden
  alındığı belli oluyor.

  Üçüncüsü bu: kartlar sitenin kendi diliyle **yeniden çiziliyor**.
  Her ölçekte net, cihaz kalıntısı yok, metin seçilebiliyor ve ekran
  okuyucu okuyabiliyor. Gösterilen veri uygulamadakiyle birebir aynı;
  anlatılan şey kartın kendisi, telefonun resmi değil.

  Bunun bir bedeli var ve bilerek kabul ediliyor: burada çizilen kart
  uygulamadaki kartla ayrışabilir. Ayrışmaması, değiştiğinde buranın
  da güncellenmesine bağlı.
*/

/*
  Kart kendi rengini kendisi söylüyor.

  Koyu bir bölümün içinde duruyor olabilir ve oradan miras alınan
  beyaz, beyaz zeminde görünmez. Renk burada açıkça yazılıyor ki
  kartın nerede durduğu önemli olmasın.
*/
.uk{
  background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r2);
  padding:var(--b4);color:var(--murekkep);
}
/*
  Miras zinciri burada **kırılıyor**.

  `:where()` ile yazılıyor çünkü amaç rengi dayatmak değil, dışarıdan
  sızan rengi kesmek. `:where()` özgüllüğü sıfırlıyor, yani kartın
  kendi bileşen kuralları (`.uk .uk-not` gibi) bunu her zaman yeniyor.
  Düz `.uk span` yazıldığında rozetin rengini eziyordu ve bu `!important`
  ile kapatılmıştı; doğrusu özgüllüğü düşürmek.
*/
.uk :where(p,b,span,em,i){color:inherit}
.uk-bas{display:flex;align-items:center;gap:var(--b3);margin-bottom:var(--b3)}
.uk-sim{
  width:30px;height:30px;border-radius:9px;flex:none;
  display:grid;place-items:center;
}
.uk-sim svg{width:16px;height:16px}
.uk-bas b{font-size:var(--y3);font-weight:600;letter-spacing:-.012em;line-height:1.35}
.uk .uk-not{font-size:var(--y2);color:var(--murekkep-2);margin-bottom:var(--b3);line-height:1.55}

/* Alan satırı: etiket solda, değer çipte. */
.uk-alan{
  display:flex;align-items:baseline;gap:var(--b2);flex-wrap:wrap;
  margin-bottom:var(--b2);font-size:var(--y2);
}
.uk .uk-alan > i{
  font-style:normal;color:var(--murekkep-3);font-weight:500;
  flex:none;min-width:56px;
}
.uk-alan span{
  background:var(--kagit);border:1px solid var(--cizgi);border-radius:8px;
  padding:4px 9px;font-variant-numeric:tabular-nums;
}
.uk .uk-alan span.sessiz{background:transparent;border-color:transparent;color:var(--murekkep-3);padding-left:0}
.uk .uk-ok{color:var(--murekkep-3);padding:0 2px}

.uk-dugmeler{display:flex;align-items:center;gap:var(--b3);margin-top:var(--b4)}
.uk .uk-dugmeler b{
  background:var(--mercan);color:#fff;border-radius:var(--r1);
  padding:8px 18px;font-size:var(--y2);font-weight:600;
}
.uk .uk-dugmeler em{font-style:normal;color:var(--murekkep-3);font-size:var(--y2)}

/* Kayıt listesi satırları. */
.uk-liste{display:grid;gap:var(--b2)}
.uk .uk-gun{font-size:var(--y1);font-weight:600;color:var(--murekkep-3);letter-spacing:.04em}
.uk-satir{
  background:var(--kagit);border:1px solid var(--cizgi);border-radius:var(--r1);
  padding:var(--b3);
}
.uk-saat{font-size:var(--y4);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.uk .uk-rozet{
  display:inline-block;margin-top:5px;
  background:var(--mor-soft);color:#5A4A86;border-radius:7px;
  padding:3px 8px;font-size:var(--y1);font-weight:500;
}
.uk .uk-rozet.yesil{background:var(--yesil-soft);color:var(--yesil)}

/* Yeşil onay satırı. */
.uk .uk-onay{
  display:inline-flex;align-items:center;gap:var(--b2);
  background:var(--yesil-soft);color:var(--yesil);border-radius:999px;
  padding:7px 14px;font-size:var(--y2);font-weight:600;
}
.uk-onay svg{width:14px;height:14px}

/* Konuşma balonları. */
.uk-sohbet{display:grid;gap:var(--b2)}
.uk-balon{
  max-width:88%;padding:11px 14px;border-radius:var(--r2);
  font-size:var(--y2);line-height:1.5;
}
.uk .uk-balon.ben{background:var(--mercan-soft);color:#8C4134;margin-left:auto;border-bottom-right-radius:var(--b1)}
.uk .uk-balon.nunu{background:var(--kagit);border:1px solid var(--cizgi);color:var(--murekkep-2);border-bottom-left-radius:var(--b1)}

/* Kesinlik uyarısı. */
.uk .uk-uyari{
  display:flex;gap:var(--b2);margin-top:var(--b3);
  font-size:var(--y1);color:var(--murekkep-3);line-height:1.5;
}
.uk-uyari svg{width:13px;height:13px;flex:none;margin-top:2px}

/* ============ kart şeridi ============ */
/*
  Dört kart yan yana sığmıyor ve küçültmek okunmaz hâle getiriyor.
  Yatay kaydırma telefonda zaten alışılmış bir hareket; `scroll-snap`
  tarayıcının kendi işi, kütüphane yok.
*/
.serit{
  display:flex;gap:var(--b4);align-items:stretch;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:var(--b3);scroll-padding-left:var(--b4);
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.serit::-webkit-scrollbar{height:6px}
.serit::-webkit-scrollbar-thumb{background:var(--cizgi);border-radius:999px}
.gece .serit::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2)}

.serit-k{flex:0 0 auto;width:min(340px,80vw);scroll-snap-align:start;display:flex;flex-direction:column}
.serit-k .uk{flex:1}
.serit-k figure{margin:0;display:flex;flex-direction:column;height:100%}
.serit-k figcaption{
  margin-top:var(--b3);font-size:var(--y2);color:var(--murekkep-2);line-height:1.5;
}
.serit-k figcaption b{display:block;color:var(--murekkep);font-weight:600;margin-bottom:2px}
.gece .serit-k figcaption{color:rgba(255,255,255,.62)}
.gece .serit-k figcaption b{color:#fff}

.serit-ipucu{
  display:flex;align-items:center;gap:var(--b2);
  margin-top:var(--b3);font-size:var(--y1);color:var(--murekkep-3);
}
.gece .serit-ipucu{color:rgba(255,255,255,.45)}

/* ============ sss ============ */
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--cizgi);padding:var(--b4) 2px}
.faq summary{
  cursor:pointer;list-style:none;display:flex;gap:var(--b4);align-items:baseline;
  justify-content:space-between;font-size:var(--y4);font-weight:600;letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:var(--y5);color:var(--murekkep-3);font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--murekkep-2);font-size:var(--y3);margin-top:var(--b3);max-width:640px}

/* ============ kapanış şeridi ============ */
.soon-strip{
  border-radius:var(--r3);overflow:hidden;
  display:grid;grid-template-columns:1.15fr .85fr;align-items:stretch;min-height:240px;
  background:var(--gece);
}
.soon-copy{padding:var(--b7);display:flex;flex-direction:column;justify-content:center;color:#fff}
.soon-strip h2{font-weight:650;letter-spacing:-.022em;font-size:clamp(22px,2.6vw,28px);margin-bottom:var(--b2)}
.soon-strip p{color:rgba(255,255,255,.68);font-size:var(--y3);max-width:380px;margin-bottom:var(--b4)}
.soon-strip .btn{align-self:flex-start}
.soon-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 35%;opacity:.85}

/* ============ iç sayfa başlığı ============ */
.sayfa-bas{padding:var(--b8) 0 var(--b7);border-bottom:1px solid var(--cizgi)}
/*
  Ölçü **daraltılıyor ama ortalanmıyor**.

  `max-width:760px` kabuğun kendisine veriliyordu ve kabuk
  `margin:0 auto` ile ortalandığı için başlık, aşağıdaki bütün
  bölümlerden yaklaşık 180 piksel içeride başlıyordu: aynı sayfada iki
  ayrı sol kenar. Ölçüldü, 1440 pikselde başlık 364'ten, alttaki bölüm
  184'ten başlıyordu.

  Şimdi kabuk herkesle aynı genişlikte; daralan şey **içerik**. Satır
  uzunluğu yine okunur, sol kenar sayfanın geri kalanıyla aynı.
*/
.sayfa-bas .shell{max-width:var(--en)}
.sayfa-bas .shell > *{max-width:760px}
/* Başlığın altındaki çip şeridi. Boşluk satır içi `style` ile
   yazılıydı; ölçek belirteçleri CSS'te kalmalı ki bir yerde
   değiştiğinde hepsi birlikte değişsin. */
.sayfa-bas .kapsam-bas{margin-top:var(--b5)}
.sayfa-bas h1{font-weight:650;letter-spacing:-.028em;line-height:1.1;
  font-size:clamp(30px,4.2vw,46px);margin-bottom:var(--b4)}
.sayfa-bas p{font-size:var(--y4);color:var(--murekkep-2)}
.sayfa-bas.gece{border-bottom:0}
.sayfa-bas.gece p{color:rgba(255,255,255,.7)}

/*
  Koyu başlık alanının arkasındaki fotoğraf.

  ## Neden degrade değil, düz saydamlık

  Önce soldan sağa koyulaşan bir perde yazıldı ve `TanitimSitesiTest`
  onu reddetti: bu sitenin kararı renk geçişi yerine **düz yüzey** ve
  bir degradenin geri gelmesi tek satırlık, gözle fark edilmesi zor bir
  ekleme. Kuralı delmeye gerek de yoktu.

  Burada perde yok: fotoğraf katmanının kendisi saydam. Altındaki koyu
  zemin (`.gece`) olduğu gibi duruyor ve fotoğraf onun üstünde eşit
  oranda görünüyor. Tek bir opaklık değeri, her yerde aynı.

  ## Neden bu oran

  Fotoğraf sıcak ve açık; yatak örtüsünün en parlak yeri bile bu oranda
  koyu zeminin altında kalıyor, yani beyaz yazı her noktada okunur
  durumda. Ölçüldü.

  ## Neden ayrı katman

  Opaklık bölümün kendisine verilseydi yazı da soluklaşırdı. `::before`
  yalnızca fotoğrafı taşıyor; `.shell` onun üstünde, tam opak.
*/
.sayfa-bas.gece{position:relative;overflow:hidden;isolation:isolate}
.sayfa-bas.gece::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:url("/img/sayfa-bas.jpg");
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
  opacity:.22;
}

/*
  Dar ekranda fotoğraf **daha da geriye** çekiliyor.

  Telefonda yazı sütunun tamamını kaplıyor ve fotoğrafın üstüne denk
  gelmeyen bir yer kalmıyor; aynı oran burada metni zorluyordu.
*/
@media (max-width:720px){
  .sayfa-bas.gece::before{background-position:center;opacity:.16}
}
}

.kirinti{display:flex;gap:var(--b2);align-items:center;font-size:var(--y1);color:var(--murekkep-3);margin-bottom:var(--b4)}
.kirinti a:hover{color:var(--murekkep-2)}
.gece .kirinti,.gece .kirinti a{color:rgba(255,255,255,.5)}

/* ============ altlık ============ */
/*
  Altlığın üst boşluğu **yok**.

  `margin-top:96px` yazılıydı ve her sayfanın son bölümü zaten kendi
  96 piksellik alt boşluğunu veriyordu. İkisi üst üste binince son
  içerikle altlık çizgisi arasında 192 ile 230 piksel boşluk kalıyordu;
  ölçüldü. Sayfa orada bitmiş gibi duruyor, altlık ayrı bir sayfa gibi
  başlıyordu.

  Tek adım yeterli ve o adımı bölüm veriyor.
*/
.foot{border-top:1px solid var(--cizgi);padding:var(--b8) 0 var(--b5)}
.foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--b7)}
.foot-about p{color:var(--murekkep-2);font-size:var(--y2);margin-top:var(--b3);max-width:280px}
.foot h4{font-size:var(--y1);font-weight:600;color:var(--murekkep-3);margin-bottom:var(--b3)}
.foot ul{display:grid;gap:var(--b2)}
.foot ul a{color:var(--murekkep-2);font-size:var(--y2)}
.foot ul a:hover{color:var(--murekkep)}
.foot-end{
  display:flex;justify-content:space-between;gap:var(--b4);flex-wrap:wrap;
  margin-top:var(--b7);padding-top:var(--b5);border-top:1px solid var(--cizgi);
  color:var(--murekkep-3);font-size:var(--y1);
}

/* ============ belirme ============ */
/*
  Görünmezlik `[data-js]` koşuluna bağlı; niteliği `ilk.js` koyuyor.
  Koşulsuz yazılsaydı betik çalışmadığında sayfanın yarısı kalıcı
  olarak boş kalırdı ve bu ölçüldü.
*/
[data-js] .gel{
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1);
}
[data-js] .gel.goruldu{opacity:1;transform:none}

.rise{opacity:0;transform:translateY(8px);animation:rise .45s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:calc(var(--i,0)*55ms + 100ms)}
@keyframes rise{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  [data-js] .gel{opacity:1;transform:none;transition:none}
  .rise{animation:none;opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ============ atlama ============ */
/*
  Ekran dışına kırpılarak çıkarılıyor. `left:-9999px` bazı
  tarayıcılarda yatay kaydırma alanı üretiyor.
*/
.atla{
  position:absolute;top:0;left:0;z-index:100;
  background:var(--mercan);color:#fff;padding:10px 16px;border-radius:0 0 var(--r1) 0;
  font-weight:600;font-size:var(--y2);clip-path:inset(50%);
}
.atla:focus{clip-path:none}

/* ============ dar ekran ============ */
@media (max-width:980px){
  .top-nav{display:none}
  .menu-btn{display:block}
  .top-act{margin-left:auto}
  .night-in,.expert-in{grid-template-columns:1fr;gap:var(--b7)}
  .steps{grid-template-columns:1fr 1fr}
  /*
    `.steps.dort` burada ayrıca sayılıyor: medya sorgusu özgüllük
    eklemiyor ve `.dort` (0,2,0) dar ekran kuralını (0,1,0) yeniyordu.
  */
  .steps.dort{grid-template-columns:1fr 1fr}
  .ozet{grid-template-columns:1fr 1fr}
  .top-nav.acik{
    display:flex;flex-direction:column;gap:0;
    position:absolute;left:0;right:0;top:64px;
    background:var(--kagit);border-bottom:1px solid var(--cizgi);
    padding:var(--b2) var(--b5) var(--b4);
  }
  .top-nav.acik a{padding:var(--b3) 0;font-size:var(--y4)}
}

@media (max-width:680px){
  .shell{padding:0 var(--b4)}
  .band,.safe,.night{padding:var(--b8) 0}
  .types,.steps,.steps.dort,.ozet{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr;gap:var(--b5)}
  .safe-item{grid-template-columns:1fr;gap:var(--b1)}
  .soon-strip{grid-template-columns:1fr}
  .soon-photo{min-height:180px;order:-1}
  .soon-copy{padding:var(--b5)}
  .log{padding:var(--b4)}
  .log-row{grid-template-columns:44px 10px 1fr;gap:var(--b2)}
  .log-meta{grid-column:3;font-size:var(--y1)}
  /*
    Devre dışı olan "Kayıt Ol" düğmesi telefonda gizleniyor: marka,
    iki düğme ve menü düğmesi birlikte yatay taşma üretiyordu.
  */
  .top-act .btn-off{display:none}
  .top-in{gap:var(--b3)}
  
}

/* ============ metin ve ekran yan yana ============ */
/*
  Soldaki anlatım, sağdaki tek ekran. `.expert-in` ile aynı iş ama
  sütun oranı farklı: ekranın dar kalması gerekiyor, metnin değil.
*/
/*
  Sütunlar **üstten** hizalı.

  Ortalandığında metin, kendisinden üç kat uzun olan telefon
  ekranının ortasında asılı kalıyor ve üstünde geniş bir boşluk
  bırakıyordu. Okuma yukarıdan başlıyor; hizanın da oradan başlaması
  gerekiyor.
*/
.ikili{display:grid;grid-template-columns:1fr 320px;gap:var(--b8);align-items:start}

.gece .rules .tick{background:rgba(255,255,255,.12)}
.gece .rules .tick svg{color:#A8C98C}
.gece .rules b{color:#fff}
.gece .rules span{color:rgba(255,255,255,.66)}

@media (max-width:980px){
  .ikili{grid-template-columns:1fr;gap:var(--b7);justify-items:center}
  .ikili > *:first-child{justify-self:stretch}
}

/* ============ yakında rozeti ============ */
/*
  Henüz olmayan bir bölümü anlatan başlıkların yanında duruyor.

  Uzman desteği sitede şimdiki zamanda yazılmıştı ama uygulamada kapalı.
  Bölümü silmek yerine zamanını düzeltmek ve rozetle söylemek, hem
  doğruyu söylüyor hem gelecek olanı duyuruyor. Rozetsiz bir gelecek
  zaman kipi gözden kaçıyor; rozet onu bakmadan görülür yapıyor.
*/
.yakinda{
  display:inline-block;margin-left:var(--b2);vertical-align:1px;
  background:var(--cizgi);color:var(--murekkep-2);
  border-radius:999px;padding:2px 9px;
  font-size:11px;font-weight:600;letter-spacing:.01em;
}
.gece .yakinda,.safe .yakinda{background:rgba(255,255,255,.14);color:rgba(255,255,255,.75)}