/* Şablon üstü düzeltmeler — Kar Cam Balkon / "Ölçü" tasarımı.
 *
 * Şablonun kendi CSS dosyalarına dokunmuyoruz: güncellenirse ya da başka
 * müşteride kullanılırsa değişiklikler kaybolmasın. Bütün farklar burada,
 * gerekçesiyle.
 *
 * templatemo-axis-*.css ve ortak-yorumlar.css'ten SONRA yükleniyor. */

/* ─────────────────────────────────────────────────────────
   1. Yazı boyutları
   Şablonun ölçeği çok küçük: etiketler 0.62rem (10px), gövde 0.78rem
   (12,5px). Ziyaretçimiz Sakarya'da telefonundan bakan ev sahibi, çoğu
   40 yaş üstü. Ölçek tabandan yükseltiliyor; şablon her yerde bu
   değişkenleri kullandığı için tek yerden düzeliyor.
   ───────────────────────────────────────────────────────── */

:root {
  --fs-micro: 0.78rem;
  --fs-data: clamp(0.98rem, 1vw, 1.05rem);
  --fs-body: clamp(1rem, 1.1vw, 1.15rem);
}

.tag { font-size: 0.8rem; }
.section__eyebrow { font-size: 0.8rem; }

/* Kayan bantlar. Şablonun ölçüsü 2.5rem, yani neredeyse bölüm başlığı
   kadar; iki bant üst üste gelince sayfanın en yüksek sesli yeri
   oluyordu, oysa orada sadece hizmet adları yazıyor. Punto, dolgu ve
   nokta işareti birlikte küçültüldü: tek birini küçültmek bandı
   orantısız bırakıyor. */
:root { --fs-ticker: clamp(0.95rem, 1.35vw, 1.3rem); }
.ticker { padding: 0.7rem 0; }
.ticker__item { padding: 0 1.2rem; gap: 1.2rem; }
.ticker__item::after { width: 7px; height: 7px; }
.stack__card-text {
  /* Şablon gövdeyi 0.7 saydamlıkla soluklaştırıyor; koyu kartta bu
     okunabilirliğin altına düşüyordu. */
  opacity: 0.88;
  line-height: 1.75;
}
/* Şablon kart metnini 0.55 saydamlıkta yazıyor. Beyaz kartta bu açık
   griye, siyah kartta koyu griye düşüyor; ikisinde de okunur eşiğin
   altında kalıyordu. Turuncu kartta daha da kötü, beyaz yazı turuncuya
   karışıyor. Saydamlık üç zeminde de kaldırıldı; ayrım artık punto ve
   satır aralığıyla kuruluyor, soluklukla değil. */
.bento-card__text {
  line-height: 1.7;
  opacity: 0.92;
}
.bento-card--dark .bento-card__text,
.bento-card--safety .bento-card__text { opacity: 1; }

/* ─────────────────────────────────────────────────────────
   2. Türkçe alt işaretleri
   ş, ç, ğ, ı kuyrukları sıkı satır yüksekliğinde kırpılıyor. Şablonun
   kapak başlığı 0.85 satır yüksekliğinde ve büyük puntoda; orada kesin
   kırpar.
   ───────────────────────────────────────────────────────── */

/* Şablonun kapak puntosu 14vw ve dört beş harflik İngilizce kelimeler
   için ayarlanmış. "çalan telefon" o ölçüde üçüncü satıra taşıyor ve
   sayılar ekranın altında kalıyor.

   İlk küçültme 9vw / 8.5rem'de kaldı, hâlâ ekranı eziyordu: 1440
   pikselde 136 piksel punto, altındaki metnin dört katı. Başlık büyük
   kalmalı ama sayfanın tek unsuru olmamalı; 5.75rem'de iki satır
   rahat duruyor ve altındaki söz öbeği okunuyor. */
.hero__title { font-size: clamp(2.4rem, 6.5vw, 5.75rem); }

/* Kapak çizimi.
   Tenteli bir dükkân, yanında telefon, üstünde yıldızlı yorum
   baloncukları. Konusu birebir sattığımız iş: dükkânı telefonda
   bulunur ve yorumlanır hale getirmek.

   Fotoğraf denendi, olmadı. Fotoğrafta kare tüm kapağı kaplıyor ve
   siyah başlığın okunması için üstüne beyaz perde germek gerekiyordu;
   perdenin altında renk soluyor, sonuç krem gibi cansız kalıyordu.
   Çizimde perde sadece sola, yani yazının olduğu yere iniyor. Sağ
   taraf perdesiz, renk tam. Gri filtre de yok.

   Çizimin kendi zemini beyaz, şablonun --base değişkeni de #FFFFFF;
   bu yüzden kare kenarı görünmüyor, çizim zemine oturuyor.

   Kaynak: Unsplash ücretsiz vektör bölümü, ticari kullanıma açık,
   atıf istemiyor. Dosya cizim/ klasöründe, yani sitenin görseli
   dışarıdan çekilmiyor. */
.hero__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Konum ve boy, kapaktaki yazının boşluğuna göre ayarlandı: çizim
     başlığın sağında ve rakamların üstünde kalıyor. Büyütülürse
     "MÜŞTERİ"nin son harfine ya da 7/30/6 rakamlarına biniyor. */
  background: url("cizim/dukkan-telefon.jpg") 92% 22% / auto 40% no-repeat;
  pointer-events: none;
}

/* Perde ayrı katman: çizimin üstünde ama şablonun ızgarasının ve
   yazının altında. Soldan sağa açılıyor ve %58'de tamamen bitiyor,
   yani çizimin durduğu yere hiç değmiyor. */
.hero__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(97deg,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.93) 26%,
    rgba(255,255,255,.55) 44%,
    rgba(255,255,255,0) 58%);
}

/* Dar ekranda yazı sayfanın tamamını kaplıyor, geniş ekrandaki sağ
   boşluk yok. Çizim önce üste konuldu, orada tam başlığın arkasına
   düştü. Ekranda gerçekten boş kalan tek yer rakamların sağı:
   "7 / 30 / 6" alt alta ve sola dayalı diziliyor, sağ tarafları
   boş kalıyor. Çizim oraya, küçük boyda oturuyor.
   Perde de burada gerekmiyor: çizim hiçbir yazının altında değil. */
@media (max-width: 900px) {
  .hero__foto {
    background-position: 96% 70%;
    background-size: auto 17%;
  }
  .hero__foto::after { background: none; }
}

/* Şablonun kendi ızgara çizgileri ve içerik fotoğrafın üstünde kalmalı. */
.hero__grid { z-index: 1; }
.hero__label,
.hero__title,
.hero__bottom,
.hero__scroll-cue { position: relative; z-index: 2; }

.hero__title .line {
  line-height: 1.02;
  padding-bottom: 0.04em;
}
.section__title,
.bento-card__title,
.stack__card-title,
.footer__brand-name {
  line-height: 1.16;
  padding-bottom: 0.05em;
}

/* Şablonun .font-display sınıfı her başlığı büyük harfe çeviriyor.
   Marka adı için doğru değil: "CALM WIZARD" bağırıyor, üstelik
   markanın kendi yazımı da öyle değil. Sadece bu başlıkta kapatılıyor,
   şablonun geri kalanı büyük harf düzeninde kalıyor. */
.footer__brand-name { text-transform: lowercase; }

/* ─────────────────────────────────────────────────────────
   3. Telefon numarası ve düğmeler
   Şablonun kapağında hiç düğme yoktu, üst barda da canlı bir UTC saati
   vardı. Bu bir satış sitesi: aranmak tek hedef, o yüzden numara üst
   barda ve kapakta duruyor.
   ───────────────────────────────────────────────────────── */

/* Üst barın sağ bölümü koyu zeminli: numara mürekkep renginde yazılınca
   siyah üstünde siyah kalıyordu. Beyaz çerçeveli kutu olarak duruyor. */
.header__tel {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--base);
  text-decoration: none;
  border: 2px solid var(--base);
  padding: 0.4rem 0.7rem;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.header__tel:hover { background: var(--base); color: var(--ink); }

/* Dar ekranda üst barda yalnızca numara kalıyor: çalışma saati bilgisi
   alt bilgide zaten var, üst barda taşma yapıyordu. */
@media (max-width: 900px) {
  .header__status { display: none; }
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.olcu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 1.6rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink);
  background: var(--base);
  /* Şablonun dili kalın kenar ve sert gölge. Yuvarlak köşeli yumuşak
     düğme buraya sonradan yapıştırılmış gibi durur. */
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 0.12s, box-shadow 0.12s;
}
.olcu-btn:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--ink); }
.olcu-btn--dolu {
  background: var(--safety);
  border-color: var(--ink);
  color: var(--base);
}

.footer__tel {
  display: inline-block;
  margin-top: 1.2rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--safety);
  text-decoration: none;
}

/* Alt bilgideki bölge listesi bağlantı değil, düz metin: şablonun
   bağlantı stili tıklanır izlenimi veriyordu. */
.footer__col span {
  display: block;
  font-size: var(--fs-data);
  opacity: 0.6;
  padding: 0.35rem 0;
}

/* Kartlardaki etiket satırı: şablonda satır içi stil ile yazılmıştı,
   HTML'e stil gömmemek için sınıfa taşındı. */
.bento-card__etiketler {
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Kart içi çizimler.
   Şablonun kart ızgarası "auto 1fr auto" üç satır: numara, gövde, etiket.
   Çizim ayrı bir çocuk olarak eklenirse dördüncü satır açılıyor ve kart
   yükseklikleri kayıyor. Bu yüzden numarayla aynı satırda duruyor. */
.bento-card__ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.cw-cizim {
  /* Genişlik ekran DARALDIKÇA büyüyor. Eski kural `clamp(84px, 12vw,
     118px)` idi ve 12vw 700 pikselin altında taban değere düşüyordu:
     390 piksellik telefonda çizim 84 piksel kalıyor, kart ise 326
     piksel oluyordu. Yani çizim kartın dörtte birini kaplıyor, numara
     ile arasında 153 piksel boşluk kalıyor ve resim unutulmuş bir
     ikon gibi duruyordu. Masaüstünde aynı 84-118 piksel doğru, çünkü
     orada kart zaten dar.

     `212px - 12vw` ters yönde çalışıyor: 390'da 165, 768'de 120,
     820'nin üstünde tabana oturup bugünkü 118 pikselde kalıyor. Yani
     masaüstü görüntüsü değişmiyor ve medya sorgusu sınırında zıplama
     olmuyor, geçiş sürekli.

     Dıştaki `min(58%, ...)` taşmayı kesiyor: yüzde kartın kendi
     genişliğine göre, yani 320 piksellik ekranda çizim 123 piksele
     iniyor ve numarayla yan yana sığmaya devam ediyor.

     Ölçüldü (320/360/390/430/560/700/768/820/1024/1440): hiçbirinde
     taşma yok, numarayla en dar ara 41 piksel. */
  width: min(58%, clamp(118px, calc(212px - 12vw), 176px));
  height: auto;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: square;
  stroke-linejoin: miter;
  /* Zeminle yarışmasın: koyu ve turuncu kartta beyaz, beyaz kartta
     siyah oluyor, ikisinde de bir tık geriye çekiliyor. */
  opacity: 0.85;
}

/* Şablonun etiketi beyaz zeminli ve rengini karttan miras alıyor. Koyu
   ve turuncu kartta yazı da beyaz olduğu için etiket beyaz kutu olarak
   çıkıyor, içindeki yazı görünmüyordu. Şablon bunu yalnızca süreç
   kartlarının üçüncüsü için çözmüş, bento kartları için çözmemiş. */
.bento-card--dark .tag,
.bento-card--safety .tag {
  background: transparent;
  border-color: var(--base);
  color: var(--base);
}
.bento-card--dark .tag--filled,
.bento-card--safety .tag--filled {
  background: var(--base);
  color: var(--ink);
}

.bento-card__govde {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.bento-card__govde .bento-card__title { margin: 0; }
.bento-card__govde .bento-card__text { margin: 0; }

/* ─────────────────────────────────────────────────────────
   4. Paketler
   Şablonda fiyat bölümü yok. Şablonun dilinde kuruldu: kalın kenar,
   sert gölge, yuvarlak köşe yok. Önerilen paket büyütülmüyor, sadece
   koyu zemine alınıyor; büyütülen kart "bunu al" diye bağırıyor.
   ───────────────────────────────────────────────────────── */

/* Kurulum bandı: aylık kartların üstünde, onlarla aynı kalın kenar ve
   sert gölge dilinde ama yatay. Sütun olmaması bilinçli, kurulum aylık
   paketlerin alternatifi değil, hepsinin önkoşulu. */
.kurulum-bant {
  display: grid;
  gap: 1.25rem 2rem;
  align-items: center;
  margin-top: 3rem;
  padding: 1.75rem;
  background: var(--ink);
  color: var(--base);
  border: 4px solid var(--ink);
  box-shadow: var(--shadow-safety);
}
@media (min-width: 880px) {
  .kurulum-bant { grid-template-columns: auto minmax(0, 1fr) auto; }
}

.kurulum-bant__et {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--safety);
  margin-bottom: 0.35rem;
}
.kurulum-bant__ad {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.16;
}
.kurulum-bant__metin {
  margin: 0;
  font-size: var(--fs-data);
  line-height: 1.7;
  opacity: 0.82;
  max-width: 56ch;
}
.kurulum-bant__metin a {
  color: var(--safety);
  text-underline-offset: 3px;
}

/* Bağlantı cümlenin peşine takılıyordu ve satır sonuna denk gelince
   "Neler" üstte "dahil" altta kalıyordu, yani bağlantı ikiye bölünmüş
   gibi okunuyordu. Kendi satırına alındı. */
.kurulum-bant__bag {
  display: block;
  margin-top: 0.55rem;
}

/* Rakam sayfadaki diğer fiyatlarla aynı ölçekte: bölüm etiketinin
   içinde 12 piksellik gri yazı olarak durduğunda okunmuyordu. */
.kurulum-bant__fiyat {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.kurulum-bant__fiyat span {
  display: block;
  margin-top: 0.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  opacity: 0.6;
}

.paketler {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
@media (min-width: 880px) {
  .paketler { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

.paket {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  background: var(--base);
  border: 4px solid var(--ink);
  box-shadow: var(--shadow);
}

.paket--onerilen {
  background: var(--ink);
  color: var(--base);
  box-shadow: var(--shadow-safety);
}

.paket__rozet {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--safety);
  color: var(--base);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
}

.paket__ad {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--safety);
  margin-bottom: 0.9rem;
}

.paket__fiyat {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* ─────────────────────────────────────────────────────────
   Aylık / yıllık anahtarı
   Şablonda böyle bir şey yok, baştan yazıldı. İki düğme tek çerçeve
   içinde: açılır liste değil, çünkü seçenek iki tane ve ikisinin de
   görünmesi gerekiyor. Yıllık düğmesinin altındaki kazanç etiketi
   satın alma kararını orada veriyor, ayrı bir satır okutmuyor.
   ───────────────────────────────────────────────────────── */

.fiyat-secim {
  display: inline-flex;
  gap: 0;
  border: 3px solid var(--ink);
  margin: 2rem 0 0;
  background: var(--base);
}
.fiyat-secim__dugme {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 0.7rem 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  /* Seçili duruma geçince yazı ağırlığı değişmiyor, sadece zemin
     değişiyor; ağırlık değişseydi düğmenin genişliği oynar ve iki
     düğme birbirini iterdi. */
  transition: background 0.14s linear, color 0.14s linear;
}
.fiyat-secim__dugme + .fiyat-secim__dugme { border-left: 3px solid var(--ink); }
.fiyat-secim__dugme:hover { background: rgba(0, 0, 0, 0.06); }
.fiyat-secim__dugme.is-secili { background: var(--ink); color: var(--base); }
.fiyat-secim__dugme.is-secili:hover { background: var(--ink); }
.fiyat-secim__dugme:focus-visible { outline: 3px solid var(--safety); outline-offset: 3px; }

.fiyat-secim__kazanc {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--safety);
  font-weight: 700;
}
/* Seçili düğmede turuncu, siyah zeminde de okunuyor; seçili değilken
   beyaz zeminde de. İki zeminde de aynı renk kalabiliyor. */

/* Üstü çizili liste fiyatı. Sadece yıllık kipte görünüyor; aylık kipte
   karşılaştırılacak bir şey yok. Anahtarın üstünde "2 ay bedava"
   yazıyordu ama yıllığa geçince ortada indirim görünmüyordu: rakam
   zaten indirimliydi, yani vaadin karşılığı ekranda yoktu. Şimdi iki
   rakam yan yana duruyor. */
.paket__eski {
  display: none;
  align-items: baseline;
  gap: 0.7rem;
  margin-top: 0.55rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.86rem;
}
.paketler[data-donem="yillik"] .paket__eski { display: flex; }
.paket__eski s {
  opacity: 0.5;
  /* Şablonun kendi çizgisi ince kalıyor, üstü çizili olduğu ilk bakışta
     seçilmiyordu. */
  text-decoration-thickness: 2px;
}
.paket__eski span {
  color: var(--safety);
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* Turuncu kartta turuncu yazı okunmaz; önerilen kart koyu zeminli
   olduğu için orada turuncu duruyor, kontrol edildi. */

.paketler[data-donem="yillik"] .paket__birim { opacity: 0.7; }
.paket__birim {
  font-size: 0.32em;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.55;
  margin-left: 0.3em;
}

.paket__tanim {
  margin: 0.9rem 0 1.5rem;
  font-size: var(--fs-data);
  line-height: 1.6;
  opacity: 0.72;
}

.paket__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.paket__liste li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--fs-data);
  line-height: 1.55;
}
/* İşaret olarak onay kutusu değil artı: onay kutusu "bu pakette var"
   diyor, artı "bunun üstüne bu da geliyor" diyor. Paketler birbirinin
   üstüne bindiği için ikincisi doğru. */
.paket__liste li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: -0.05em;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--safety);
}

/* Not, üç kartın altında sola dayalı duruyordu; kartlar sayfayı boydan
   boya kaplarken tek satırlık not solda kalınca blok asimetrik
   görünüyordu. Ortalandı ve genişliği sınırlandı: ortalanmış ama sayfa
   kadar geniş bir satır, ortalanmamış gibi okunuyor. */
.paket__not {
  margin: 1.75rem auto 0;
  max-width: 62ch;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  line-height: 1.7;
  opacity: 0.6;
}

/* Bölüm başlığının altındaki açıklama paragrafı. Şablonda karşılığı
   yok, başlıkla ızgara arasına giriyor. */
.section__aciklama {
  margin-top: 1.1rem;
  max-width: 62ch;
  font-size: var(--fs-body);
  line-height: 1.75;
  opacity: 0.88;
}

/* ─────────────────────────────────────────────────────────
   5. Tasarım yönleri
   Kartların üçü de aynı boyda: biri "hazırlanıyor" diye küçültülürse
   eksik değil bozuk görünüyor.
   ───────────────────────────────────────────────────────── */

.isler {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}
@media (min-width: 880px) {
  .isler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.is {
  display: flex;
  flex-direction: column;
  background: var(--base);
  border: 4px solid var(--ink);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.12s, box-shadow 0.12s;
}
a.is:hover { transform: translate(4px, 4px); box-shadow: var(--shadow-hover); }

/* Kartın içinde o sitenin kapak ekranı duruyor: ziyaretçi neye
   tıkladığını tıklamadan önce görüyor. Görüntüler
   demolar/onizleme-cek.mjs ile üretiliyor; demo değişince o betik
   yeniden koşulmalı, yoksa kart eski hali gösterir. */
.is__foto {
  display: block;
  width: 100%;
  /* height:auto şart: HTML'deki height="900" niteliği yükseklik olarak
     uygulanıyor ve aspect-ratio devreye girmiyor. Görsel kartın içinde
     900 piksel yüksekliğinde açılıp kırpılıyordu. */
  height: auto;
  aspect-ratio: 1120 / 700;
  object-fit: cover;
  object-position: top center;
  border-bottom: 4px solid var(--ink);
  background: var(--surface);
}

.is__ic {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
}

.is__no {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--safety);
  margin-bottom: 1rem;
}
.is__ad {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 0.75rem;
}
.is__tarif {
  margin: 0;
  font-size: var(--fs-data);
  line-height: 1.65;
  opacity: 0.72;
}
.is__link {
  margin-top: 1.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--safety);
}

/* ─────────────────────────────────────────────────────────
   5. Klavye görünürlüğü
   ───────────────────────────────────────────────────────── */

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--safety);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────
   6. Arama bandı
   Fiyat bölümünün hemen altında, alt bilgiden önce. Koyu zemin bilerek:
   sayfa boyunca açık zeminden sonra burası durup baktırıyor ve alt
   bilgiyle birleşip tek bir koyu blok haline gelmiyor, arada şablonun
   kalın kenarı var.
   ───────────────────────────────────────────────────────── */

.arama-bandi {
  background: var(--surface);
  border-top: 4px solid var(--ink);
}

.arama-bandi__ic {
  display: grid;
  gap: 2rem 3rem;
  align-items: center;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--ink);
  color: var(--base);
  border: 4px solid var(--ink);
  box-shadow: var(--shadow-safety);
}
@media (min-width: 900px) {
  .arama-bandi__ic { grid-template-columns: minmax(0, 1fr) auto; }
}

.arama-bandi .section__title { color: var(--base); }
.arama-bandi .section__eyebrow { color: var(--safety); }

.arama-bandi__metin {
  margin-top: 1rem;
  font-size: var(--fs-data);
  line-height: 1.75;
  opacity: 0.82;
  max-width: 52ch;
}

.arama-bandi__sag { text-align: left; }
@media (min-width: 900px) {
  .arama-bandi__sag { text-align: right; }
  .arama-bandi__dugmeler { justify-content: flex-end; }
}

.arama-bandi__tel {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--safety);
  text-decoration: none;
  white-space: nowrap;
}

.arama-bandi__dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* Koyu zeminde düğmenin sert gölgesi siyah üstüne siyah düşüyor ve
   kaybolyor; burada gölge beyaza dönüyor. */
.arama-bandi .olcu-btn { box-shadow: 5px 5px 0 var(--base); }
.arama-bandi .olcu-btn:hover { box-shadow: 2px 2px 0 var(--base); }

.arama-bandi__saat {
  margin-top: 1.1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  opacity: 0.55;
}

/* ─────────────────────────────────────────────────────────
   Koyu tema
   Şablonun paleti baştan sona değişkenle kurulu; --border ve --shadow
   gibi türev değerler de var(--ink) üzerinden tanımlı, o yüzden burada
   yalnızca iki üç kök değeri çevirmek yetiyor, tek bir bileşen kuralı
   yeniden yazılmıyor.

   Renkler naif ters çevirme değil: saf siyah zemin (#000) bu kadar
   kontrastlı bir tasarımda göz yoruyor, mürekkep de saf beyaz olunca
   turuncuyla birlikte titriyor. Zemin kömür grisine, mürekkep kırık
   beyaza çekildi.
   ───────────────────────────────────────────────────────── */

:root {
  /* Kapak perdesi zemin rengiyle aynı olmalı. Doğrudan beyaz yazılınca
     koyu temada beyaz bir tül olarak kalıyordu. */
  --perde: 255, 255, 255;
}

:root[data-tema="koyu"] {
  --base: #101012;
  --ink: #F2F1EE;
  --surface: #1A1A1D;
  --muted: #9C9C9F;
  --border-hair: 1px solid rgba(255, 255, 255, 0.13);
  --perde: 16, 16, 18;
}

/* Şablonda renk şeması bildirimi yok; olmayınca tarayıcı form
   alanlarını ve kaydırma çubuğunu açık temaya göre çiziyor. */
:root[data-tema="koyu"] { color-scheme: dark; }
:root[data-tema="acik"] { color-scheme: light; }

.hero__foto::after {
  background: linear-gradient(97deg,
    rgba(var(--perde), .97) 0%,
    rgba(var(--perde), .93) 26%,
    rgba(var(--perde), .55) 44%,
    rgba(var(--perde), 0) 58%);
}

/* Kapak çizimi artık saydam zeminli PNG. JPEG'in beyaz karesi koyu
   temada sayfanın ortasında parlayan bir dikdörtgen bırakıyordu. */
.hero__foto { background-image: url("cizim/dukkan-telefon.png"); }
@media (max-width: 900px) {
  .hero__foto { background-image: url("cizim/dukkan-telefon.png"); }
}

/* Sabit siyah yerine mürekkebin kendisi: koyu temada siyah üstüne
   siyah gölge görünmüyordu. */
.fiyat-secim__dugme:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }

/* ─────────────────────────────────────────────────────────
   Dil ve tema anahtarları
   Şablonda karşılığı yok, baştan yazıldı. Üst barın sağ bölümü koyu
   zeminli olduğu için ikisi de çerçeveli ve şeffaf: dolgulu kutu orada
   yama gibi duruyordu.
   ───────────────────────────────────────────────────────── */

.tercih {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
}
.tercih__dil { display: flex; border: 1px solid var(--base); }
.tercih__dil button,
.tercih__tema {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--base);
  background: transparent;
  border: 0;
  padding: 0 8px;
  min-height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.14s linear, color 0.14s linear;
}
.tercih__dil button + button { border-left: 1px solid var(--base); }
.tercih__dil button:hover { background: color-mix(in srgb, var(--base) 18%, transparent); }
.tercih__dil button.is-secili { background: var(--base); color: var(--ink); }
.tercih__tema {
  border: 1px solid var(--base);
  width: 34px;
  padding: 0;
}
.tercih__tema:hover { background: color-mix(in srgb, var(--base) 18%, transparent); }
.tercih__dil button:focus-visible,
.tercih__tema:focus-visible { outline: 2px solid var(--safety); outline-offset: 2px; }

/* Hangi simgenin görüneceğine tema karar veriyor: açık temadayken
   düğme koyu temaya geçirdiği için ay, koyu temadayken güneş. */
.tercih__ay { display: block; }
.tercih__gunes { display: none; }
:root[data-tema="koyu"] .tercih__ay { display: none; }
:root[data-tema="koyu"] .tercih__gunes { display: block; }

/* Dar ekranda üst barın sağ bölümü zaten sıkışık; saat bilgisi
   gizleniyor, anahtarlar kalıyor. */
@media (max-width: 1180px) {
  .header__status { display: none; }
}

/* Şablonun koyu zeminli bölümlerinde sabit beyaz değerler var:
   rgba(255,255,255,...) ile yazılmış ayırıcı çizgiler, soluk yazı ve
   vurgu zeminleri. Bunlar değişken olmadığı için tema dönünce dönmüyor
   ve açık zeminde görünmez oluyorlar. Zemin ne olursa olsun doğru
   tarafa çalışsınlar diye mürekkep renginden türetiliyorlar.

   Üst bar koyu temada açık zemine dönüyor; bu bilerek. Şablonun mantığı
   "bar sayfanın tersi" ve tema çevrilince o mantık korunuyor. */
/* %55 ölçüldü ve 4.04 veriyordu, yani eşiğin hemen altı. Menü
   başlıkları gezinmenin kendisi; sessiz durmaları doğru ama okunur
   kalmaları şart. %72 ile 5.4'e çıkıyor ve hâlâ etkin bağlantıdan
   ayrışıyor. */
.header__nav a { color: color-mix(in srgb, currentColor 72%, transparent); }
.header__nav a.active { background: color-mix(in srgb, currentColor 8%, transparent); color: inherit; }
.header__nav a { border-right-color: color-mix(in srgb, currentColor 14%, transparent); }
.header__nav { border-left-color: color-mix(in srgb, currentColor 14%, transparent); }
.header__sep { background: color-mix(in srgb, currentColor 16%, transparent); }
.footer__col a { color: inherit; }
.footer .footer__top { border-bottom-color: color-mix(in srgb, currentColor 14%, transparent); }
.footer__copy { color: color-mix(in srgb, currentColor 45%, transparent); }

/* İngilizce karşılık Türkçesinden uzun: "Küçük işletmeler için" tek
   satıra sığarken "For small businesses" iki satıra düşüp üst barı
   yükseltiyordu. Etiket tek satıra sabitlendi. */
.header__product { white-space: nowrap; }
.header__status span { white-space: nowrap; }

/* Garanti kartlarının 2. ve 4.'sü şablonda sabit açık zeminle yazılmış
   (#F5F5F0 ve #F0F0EB), değişkenle değil. Koyu temada zemin açık
   kalırken yazı mürekkep rengine, yani açığa döndüğü için kartın içi
   tamamen okunmaz oluyordu. İkisi de değişkene bağlandı; açık temada
   aynı iki renk, koyu temada koyu iki yüzey. */
:root { --surface-2: #F0F0EB; }
:root[data-tema="koyu"] { --surface-2: #16161A; }

.stack__card:nth-child(2) { background: var(--surface); }
.stack__card:nth-child(4) { background: var(--surface-2); }

/* ─────────────────────────────────────────────────────────
   14. Marka işareti
   Şablonun işareti turuncu çerçeveli bir altıgendi. Yerine gerçek
   logo geldi: marka/logo.png, kaynaktaki beyaz zemin saydama çevrilip
   boş kenarları kırpılmış hâli.

   Çerçeve kaldırıldı, çünkü logonun kendi silueti var; kutuya alınınca
   iki ayrı işaret üst üste biniyor.

   Üst bar 44 piksel yüksekliğinde, o yüzden işaret 30 pikselle sınırlı.
   Logo dikey oranlı (233×379), yani 30 piksel yükseklikte 18 piksel
   genişliğe düşüyor; en/boy `width:auto` ile korunuyor, ezilmiyor.
   ───────────────────────────────────────────────────────── */
.header__logo-mark {
  width: 18px;
  height: 30px;
  border: 0;
  display: block;
  flex-shrink: 0;
  /* image-rendering: -webkit-optimize-contrast BURADAN KALDIRILDI.
     Tarayıcıyı neredeyse en-yakın-komşuya çeviriyordu ve logodaki ince
     magenta çizgileri tamamen siliyordu. Küçültme artık tarayıcıda
     değil, marka/hazirla.py içinde önceden yapılıyor; srcset ile 1x/2x/3x
     hazır dosyalar veriliyor, tarayıcının ölçeklemesi gerekmiyor. */
}

@media (max-width: 700px) {
  /* Dar ekranda üst barda yer sıkışık, işaret bir tık küçülüyor. */
  .header__logo-mark { height: 26px; }
}

/* Alt bilgideki marka işareti. Marka adının üstünde duruyor, yanında
   değil: ad dikey oranlı logonun yanına konsa blok iki sütuna bölünür
   ve altındaki açıklama metniyle hizası bozulurdu.

   Üst bardakinin dört katı, çünkü burada yer var ve logonun ince
   yapısı ancak bu boyda gerçekten okunuyor. */
.footer__brand-mark {
  display: block;
  width: 73px;
  height: 120px;
  margin-bottom: 1.4rem;
}

@media (max-width: 700px) {
  /* Telefonda alt bilgi tek sütuna düşüyor, işaret bir tık küçülüyor
     ki marka adıyla arasındaki oran bozulmasın. */
  .footer__brand-mark { width: 58px; height: 96px; }
}

/* ═════════════════════════════════════════════════════════
   15. MOBİL
   Ölçüm sonucu: 390 pikselde yatay taşma yoktu ama sayfa 13.443
   piksele çıkıyordu, 25 dokunma hedefinin 20'si 40 pikselin altındaydı
   ve üst bardaki telefon numarası ekrandan kesiliyordu.

   Dört sebep vardı, dördü de aşağıda tek tek ele alındı. Masaüstüne
   dokunulmadı: bütün kurallar 768 pikselin altında.
   ═════════════════════════════════════════════════════════ */

/* ---- 15.1 Üst bar ----
   Şablon mobilde ürün etiketini gizleyip hamburgeri açıyor ama sağ
   bloğu (saat, dil, tema, telefon) olduğu gibi bırakıyor. Sonradan
   eklediğimiz dil ve tema anahtarlarıyla birlikte bar taşıyordu.
   Barda logo, dil, tema ve hamburger kalıyor; saat ve numara menüye
   iniyor. Numara zaten kapakta da var, yani erişilemez olmuyor. */
@media (max-width: 768px) {
  .header__status,
  .header__tel { display: none; }

  .header__nav-tel {
    display: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
  }
  .header__nav.open .header__nav-tel {
    display: flex;
    align-items: center;
    /* İlk numara satırı turuncu: menünün en altındaki iki satırın
       gezinme bağlantılarından ayrıldığı belli olsun. */
    color: var(--safety);
  }
  .header__nav.open .header__nav-tel:first-of-type { border-top: 2px solid var(--safety); }

  /* Anahtarlar barda kalıyor ama daralıyor. */
  .tercih { gap: 0.4rem; }
  .tercih__dil button { padding: 0.3rem 0.5rem; }
  .tercih__tema { width: 34px; height: 34px; }
}

/* Masaustunde bu iki satir menude durmamali; numara zaten barin
   saginda. Secici .header__nav a kadar guclu olmali, yoksa sablonun
   kurali kazaniyor ve masaustunde numara menude "036 97" diye
   sariliyordu. */
@media (min-width: 769px) {
  .header__nav .header__nav-tel,
  .header__nav a.header__nav-tel { display: none; }
}

/* ---- 15.2 Düz metin ----
   Şablon body'yi tamamen JetBrains Mono yapmış. Masaüstünde satır 90
   karakter olduğu için teknik bir karakter veriyor; 390 pikselde satıra
   28 karakter sığıyor, beş cümlelik paragraf sekiz satıra çıkıyor ve
   sayfa üç katına şişiyor. Sayfanın 13.443 piksel olmasının ana sebebi
   buydu.

   Mobilde düz metin başlık yüzüne (Space Grotesk) geçiyor. Monospace
   kalmaya devam ettiği yerler: rakam, etiket, veri, numara. Zaten onun
   işi o. Masaüstü hiç değişmiyor. */
@media (max-width: 768px) {
  .hero__desc,
  .section__aciklama,
  .bento-card__text,
  .stack__card-text,
  .is__tarif,
  .kurulum-bant__metin,
  .paket__aciklama,
  .paket__not,
  .footer__brand-desc,
  .sss__cevap {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 0;
    line-height: 1.6;
  }
}

/* ---- 15.3 Punto tabanı ----
   Ölçümde en küçük yazı 10,4 piksel çıktı. Şablonun --fs-micro değeri
   sabit 0.62rem, yani ekran ne olursa olsun 9,9 piksel. --fs-data'nın
   alt sınırı da 12,5 piksel. iPhone'da ikisi de okunmuyor. */
@media (max-width: 768px) {
  :root {
    --fs-micro: 0.72rem;
    --fs-data: 0.92rem;
    --fs-body: 1rem;
  }
  /* Bölüm etiketleri ve künye satırları harf aralığı geniş olduğu için
     küçükken daha da zor okunuyor; aralık biraz kapanıyor. */
  .section__eyebrow,
  .bento-card__number,
  .hero__stat-label { letter-spacing: 0.1em; }
}

/* ---- 15.4 Süsleme payı ----
   Şablonun sert gölgesi kartı sağa ve aşağı 8 piksel kaydırılmış siyah
   bir blok. Masaüstünde karakter veriyor, 390 pikselde içeriğin yerini
   alıyor: kart hem daralıyor hem sağdaki boşluk kayboluyor. */
@media (max-width: 768px) {
  .bento-card,
  .stack__card,
  .is { box-shadow: 4px 4px 0 var(--ink); }
  .olcu-btn { box-shadow: 3px 3px 0 var(--ink); }

  /* Düğmeler tam genişlik: 390 pikselde yan yana iki düğme ikisini de
     dar bırakıyordu, dokunma hedefi 40 pikselin altına düşüyordu. */
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .olcu-btn { width: 100%; justify-content: center; min-height: 48px; }
}

/* ---- 15.5 Sabit barın altında kalan başlıklar ----
   Bar sabit ve 44 piksel; bağlantıyla bölüme atlayınca başlık barın
   altında kalıyordu. */
html { scroll-padding-top: calc(var(--header-h) + 12px); }

/* ---- 15.6 Ölçüm sonrası ikinci tur ----
   İlk turdan sonra yeniden ölçüldü, üç şey kaldı. */

@media (max-width: 768px) {
  /* a) Şablonun bazı yerleri --fs-micro yerine sabit rem yazmış, o
        yüzden token'ı büyütmek yetmedi. Ölçülen: 10,4 piksel. */
  .hero__stat-label,
  .hero__kpi-label,
  .footer__copy,
  .footer__back-top { font-size: 0.76rem; }
  .hero__label { font-size: 0.78rem; }
  .paket__rozet { font-size: 0.76rem; }

  /* b) İlk turda gözden kaçan iki uzun monospace paragraf. */
  .stack__subtitle,
  .arama-bandi__metin {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 0;
    line-height: 1.6;
  }

  /* c) Dokunma hedefleri. Üst bar 44 pikseldi, içine 44 piksellik bir
        düğme fizikal olarak sığmıyordu; bar 56'ya çıktı. On iki piksel
        ekran veriyoruz, karşılığında dil, tema ve menü düğmeleri
        parmakla basılabilir oluyor. */
  :root { --header-h: 56px; }

  .tercih__dil button { min-width: 42px; min-height: 40px; padding: 0 0.55rem; }
  .tercih__tema { width: 40px; height: 40px; }
  .header__burger { width: 44px; height: 44px; justify-content: center; }
  .fiyat-secim__dugme { min-height: 44px; }
  .arama-bandi__tel { min-height: 44px; display: inline-flex; align-items: center; }
  .footer__back-top { padding: 0.7rem 0; }
  /* Metin içindeki bağlantı: satır yüksekliği 24 pikseldi, dikey pay
     verildi. Blok olduğu için satır arasını bozmuyor. */
  .kurulum-bant__bag { padding: 0.6rem 0; }
}

/* Dar Android tabanı (360 px). Dokunma hedefleri büyüyünce bar 4 piksel
   taşıyordu; anahtarlar aynı boyda kalıp aradaki boşluk daralıyor.
   Marka adı korunuyor: barda tanınan tek şey o. */
@media (max-width: 400px) {
  .tercih { gap: 0.3rem; }
  .tercih__dil button { min-width: 38px; padding: 0 0.4rem; }
  .header__left { gap: 0.6rem; }
  .header__logo { font-size: 0.72rem; }
}

/* ---- 15.7 Kapak çizimi ----
   Masaüstünde çizim sağda, başlığın yanında duruyor. Mobilde sayılar
   alt alta dizilince çizim listenin ortasına, "30" ile "6" arasına
   düşüyordu: çarpışmıyordu ama sayfada rastgele duruyordu.
   Kapağın altına, ortaya alındı; orada bölümü kapatan bir görsel gibi
   okunuyor. */
@media (max-width: 768px) {
  .hero__foto {
    background-position: 50% 100%;
    background-size: auto 15%;
  }
  .hero { padding-bottom: 15vh; }
}

/* ---- 15.8 Denetim çıktısına göre kapanış turu ----
   tools/mobil-denetim.mjs üç grup sorun bıraktı, üçü de burada. */
@media (max-width: 768px) {
  /* a) Kalan küçük yazılar. */
  .paket__not { font-size: 0.9rem; }
  .arama-bandi__saat { font-size: 0.82rem; letter-spacing: 0.08em; }
  .footer__copy { font-size: 0.82rem; }

  /* b) Dar satır. Kartların yan boşluğu masaüstü değerindeydi; 390
        pikselde satıra 28 karakter kalıyordu ve kelimeler tek tek alt
        satıra iniyordu. Yan boşluk daralınca satır 40 karaktere çıkıyor,
        dikey boşluk aynı kalıyor. */
  .bento-card,
  .stack__card { padding-left: 1.1rem; padding-right: 1.1rem; }
  .is__ic { padding-left: 1.1rem; padding-right: 1.1rem; }
  .section__aciklama,
  .arama-bandi__metin { max-width: none; }

  /* c) Dokunma hedefleri. Bar 56 piksel olduğu için anahtarlar 44'e
        çıkabiliyor. Logo bağlantısı da barın yüksekliğini kaplıyor:
        görsel olarak bir şey değişmiyor, basılabilir alan büyüyor. */
  .tercih__dil button,
  .tercih__tema { min-height: 44px; }
  .tercih__tema { width: 44px; }
  .header__logo { min-height: 44px; }
  .kurulum-bant__bag { padding: 0.7rem 0; }
}

@media (max-width: 400px) {
  /* 360 pikselde 44'lük üç anahtar bara sığmıyor; dil anahtarı
     daralıyor, dokunma yüksekliği korunuyor. */
  .tercih__dil button { min-width: 36px; padding: 0 0.3rem; }
  .tercih__tema { width: 40px; }
}

/* ---- 15.9 Son kalanlar ---- */
@media (max-width: 768px) {
  .footer__copy { font-size: 0.88rem; }
  .footer__col a { min-height: 44px; display: flex; align-items: center; }
  .footer__back-top { min-height: 44px; }
  /* Arama bandının yan boşluğu masaüstü değerindeydi. */
  .arama-bandi { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* Arama bandının metni 360 pikselde 28 karaktere düşüyordu: bandın
   kendi iç boşluğu sayfa boşluğunun üstüne biniyordu. Dar ekranda
   bandın yan boşluğu kaldırılıyor, sayfanınki zaten var. */
@media (max-width: 400px) {
  .arama-bandi { padding-left: 0; padding-right: 0; }
  .arama-bandi__metin { max-width: none; }
}

/* Üst bar dar masaüstünde (1400 px ve altı) doluyordu: logo, ürün
   etiketi, beş menü başlığı, saat, dil, tema ve numara aynı satırda.
   Şablon bunları ancak 768'de gizliyor, arası boşta kalmıştı.
   Önce ürün etiketi, sonra saat düşüyor; ikisi de bilgi, gezinme değil. */
@media (max-width: 1400px) { .header__product, .header__sep { display: none; } }
@media (max-width: 1180px) { .header__status { display: none; } }

/* Burada bir süre işaretin arkasına koyu bir plaka konuldu. Yanlıştı:
   üst bar açık temada açık zeminli, plaka orada balığı siyah bir kutunun
   içine alıyordu. Üstelik yanlış sorunu çözüyordu. Beyazlık arka plandan
   değil görüntünün kendisinden geliyordu: sırt yüzgecinin içinde kalan
   iki saf beyaz cep (ölçüldü: 5769 ve 5610 piksel) dışarıdan
   ulaşılamadığı için balığın parçası sayılıyordu. marka/hazirla.py
   düzeltildi, artık saydam. Zemine gerek yok, plaka kaldırıldı. */

/* ─────────────────────────────────────────────────────────
   16. YASAL SAYFA (yasal.html)

   Ana sayfa ikna etmek için var, bu sayfa okunmak için. Bu yüzden
   şablonun dili korunuyor (görünür kenarlık, monospace etiket, keskin
   köşe, turuncu vurgu) ama ritmi değişiyor: satır uzunluğu kısıtlı,
   satır aralığı açık, başlıklar arası boşluk büyük.

   Şablonun kendi bölüm sınıfları kullanılmadı. Onlar tam ekran, ortalı
   ve büyük puntolu; yasal metin bunlarda okunmuyor, üstelik o sınıfları
   ezmek ana sayfayı da etkilerdi.
   ───────────────────────────────────────────────────────── */

.yasal {
  background: var(--base);
  color: var(--ink);
  padding: calc(var(--header-h) + clamp(48px, 7vw, 96px)) 0 clamp(64px, 8vw, 120px);
}

/* Şablonun gövde yüzü JetBrains Mono. Ana sayfada bu doğru: orada metin
   kısa, etiket ve veri gibi duruyor. Burada sayfanın tamamı düz metin ve
   monospace okumayı yavaşlatıyor; her harf aynı genişlikte olduğu için
   kelimeler birbirinden ayrışmıyor. Yalnızca bu sayfanın okunan
   bölümleri Space Grotesk'e geçiyor. Etiket, numara, tablo başlığı ve
   kod parçaları monospace kalıyor, tasarımın dili orada duruyor. */
.yasal__ozet,
.yasal__bolum p,
.yasal__bolum h3,
.yasal__liste li,
.yasal__tablo td,
.yasal__kutu .yasal__liste li { font-family: 'Space Grotesk', sans-serif; }

.yasal__inner {
  width: min(100% - 2 * clamp(20px, 5vw, 64px), 1100px);
  margin-inline: auto;
}

/* ---- sayfa başlığı ---- */
.yasal__goz {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--safety);
  margin-bottom: 1.1rem;
}
.yasal__baslik {
  font-size: clamp(2rem, 5vw, 3.4rem);
  /* 1.1 idi. Türkçe alt işaretleri kırpıyordu: iki satıra sarınca üst
     satırdaki Ç ve Ş kuyrukları alt satırın harflerine giriyor. 2.
     bölümdeki kuralın aynısı, orada şablonun kendi başlıkları için
     çözülmüştü; bu sayfanın başlıkları ayrı sınıf kullandığı için o
     kural buraya işlemiyordu. */
  line-height: 1.16;
  padding-bottom: 0.05em;
  margin-bottom: 1.4rem;
}
/* Metin bloklarının tamamı 62 karakterle sınırlı. Bu sayfada uzun satır
   asıl kusur olurdu: kimse 120 karakterlik bir KVKK maddesini okumuyor. */
.yasal__ozet {
  font-size: var(--fs-body);
  line-height: 1.7;
  max-width: 62ch;
  opacity: 0.78;
}
.yasal__tarih {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-micro);
  opacity: 0.5;
  margin-top: 1.2rem;
}

/* ---- kısaca kutusu ----
   Şablonun kart dili: kalın kenarlık ve kaymış gölge. Sol kenara renkli
   şerit çekilmedi; o desen bu şablonda hiçbir yerde yok ve tek başına
   kullanılınca sonradan yapıştırılmış duruyor. */
.yasal__kutu {
  margin: clamp(36px, 5vw, 60px) 0;
  padding: clamp(24px, 3.5vw, 36px);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--safety);
  max-width: 68ch;
}
.yasal__kutu-baslik {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--safety);
  /* "KISACA" içindeki ı ve büyük harfe çevrilen ç kuyruğu için pay. */
  line-height: 1.5;
  margin-bottom: 1.2rem;
}

.yasal__liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.85rem;
}
.yasal__liste li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--fs-data);
  line-height: 1.65;
  max-width: 62ch;
}
/* İşaret olarak nokta değil kısa çizgi: şablon her yerde çizgi
   kullanıyor, madde imi yuvarlağı buraya yabancı düşüyordu. */
.yasal__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.8rem;
  height: 2px;
  background: var(--safety);
}

/* ---- içindekiler ---- */
.yasal__icindekiler {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  margin-bottom: clamp(48px, 6vw, 80px);
}
.yasal__icindekiler a {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: inherit;
  padding: 1rem 1.4rem;
  border-right: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  transition: background 0.18s, color 0.18s;
}
.yasal__icindekiler a:last-child { border-right: 0; }
.yasal__icindekiler a:hover,
.yasal__icindekiler a:focus-visible { background: var(--safety); color: #fff; }

/* ---- bölümler ---- */
.yasal__bolum {
  padding-top: clamp(40px, 5vw, 64px);
  margin-bottom: clamp(48px, 6vw, 84px);
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.yasal__bolum:first-of-type { border-top: 0; padding-top: 0; }

.yasal__no {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--safety);
  margin-bottom: 0.9rem;
}
.yasal__bolum-baslik {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  /* Ölçüldü: "Çerezler ve yerel depolama" telefonda iki satıra sarıyor
     ve Ç'nin kuyruğu alttaki D'nin üstüne biniyordu. */
  line-height: 1.2;
  padding-bottom: 0.05em;
  margin-bottom: 1.6rem;
}
.yasal__giris {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-micro);
  opacity: 0.6;
  margin-bottom: 2rem;
  max-width: 62ch;
}

/* Ara başlık. Şablonda h3 için bir stil yok, gövdeyle aynı boyda
   çıkıyordu ve metin tek blok gibi okunuyordu. */
.yasal__bolum h3 {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  /* Satır yüksekliği verilmemişti; şablonun başlık varsayılanı sıkı ve
     ç, ğ, ş kuyrukları satır kutusunun dışında kalıyordu. Kontrast
     denetimi 22 öğede 2 piksel taşma ölçtü, çoğu bu ara başlıklar. */
  line-height: 1.35;
  padding-bottom: 0.05em;
  margin: 2.4rem 0 0.9rem;
  max-width: 62ch;
}
.yasal__bolum h3:first-of-type { margin-top: 0; }

.yasal__bolum p {
  font-size: var(--fs-data);
  line-height: 1.75;
  max-width: 62ch;
  margin-bottom: 1rem;
  opacity: 0.85;
}
.yasal__bolum p strong { opacity: 1; font-weight: 600; }
.yasal__bolum a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--safety);
}
.yasal__bolum a:hover { color: var(--safety); }

/* ---- tablolar ----
   Dar ekranda kendi kutusunda yatay kayıyor. Sayfanın gövdesi asla yana
   kaymamalı; hücreleri daraltıp yazıyı kırmak da tabloyu okunmaz
   yapıyordu, o yüzden tablo kendi içinde kayıyor. */
/* Kaydırma tabloda değil, onu saran kutuda. Bir ara tabloya doğrudan
   display:block + overflow-x verildi; o, tablonun sütun hizalamasını
   iptal ediyor. Ölçüldü: başlık hücresi 275 piksel, altındaki gövde
   hücresi 378 piksel, yani sütunlar kayıyordu. Tablo tablo olarak
   kalıyor, kaydırma dışarıdaki kutunun işi. */
.yasal__tablo-kutu {
  overflow-x: auto;
  margin: 1.4rem 0 1.8rem;
  /* Kaydırılabilir alan klavyeyle de gezilebilmeli. */
  scrollbar-width: thin;
}
.yasal__tablo {
  width: 100%;
  /* Taban genişlik: geniş ekranda hücreler sarıp tam oturuyor, yalnızca
     telefonda kutu kendi içinde kayıyor. */
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--fs-data);
}
.yasal__tablo th,
.yasal__tablo td {
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: top;
}
.yasal__tablo thead th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--safety);
  font-weight: 500;
}
.yasal__tablo td { opacity: 0.85; }
.yasal__tablo code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.92em;
  background: color-mix(in srgb, currentColor 9%, transparent);
  padding: 0.15em 0.45em;
  /* Anahtar adı sütunu dar; nowrap olmadan "cw-dil" tirenin ardından
     ikiye bölünüyor ve ayrı bir anahtar gibi okunuyordu. */
  white-space: nowrap;
}
/* İki sütunlu künye tablosu: solda etiket, sağda değer. */
.yasal__tablo--iki tbody th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  opacity: 0.6;
  width: 34%;
}

.yasal__don {
  margin-top: clamp(40px, 5vw, 64px);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.yasal__don a { color: var(--safety); }

/* ---- alt bilgideki yasal bağlantılar ---- */
.footer__yasal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
}
.footer__yasal a {
  /* 0.72rem ile başladı, 11,5 piksele denk geliyordu ve telefonda
     okunmuyordu. Bunlar büyük harf etiket değil, normal yazılmış
     bağlantı; yani mikro yazı eşiği değil düz metin eşiği geçerli. */
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  color: inherit;
  /* Şablonun alt bilgi bağlantıları 0.5 saydamlıkta. Yasal bağlantılar
     için bu fazla soluk: gerektiğinde aranan, bulunması gereken
     bağlantılar. 0.62 hem sessiz kalıyor hem okunuyor. */
  opacity: 0.62;
  transition: opacity 0.2s, color 0.2s;
}
.footer__yasal a:hover { opacity: 1; color: var(--safety); }

@media (max-width: 768px) {
  /* Yasal metin de düz metin: şablonun monospace gövdesi burada
     okunmuyor, 15. bölümdeki kuralın aynısı bu sayfa için de geçerli. */
  .yasal__ozet,
  .yasal__bolum p,
  .yasal__liste li,
  .yasal__tablo td { font-family: 'Space Grotesk', sans-serif; }

  /* İçindekiler telefonda tek satıra sığmıyordu; sarınca hücre
     kenarlıkları kırık bir ızgara gibi duruyordu. Alt alta yazılıyor. */
  .yasal__icindekiler { flex-direction: column; }
  .yasal__icindekiler a {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    padding: 0.85rem 0;
    /* --fs-micro telefonda 11,5 piksele iniyor. Bunlar sayfanın gezinme
       bağlantıları, tek kelimelik etiket değil; alt sınır 12,5. */
    font-size: 0.78rem;
  }
  .yasal__icindekiler a:last-child { border-bottom: 0; }

  .yasal__kutu { box-shadow: 4px 4px 0 var(--safety); }
  .yasal__tablo--iki tbody th { width: auto; }

  /* 15. bölüm --fs-micro'yu telefonda 0.72rem'e (11,5 piksel) indiriyor.
     Ana sayfada bu doğru, oradaki mikro yazılar tek kelimelik etiket.
     Burada aynı değişken tarihi ve dönüş bağlantısını da küçültüyordu;
     ikisi de okunacak metin, 12,5 pikselin altına inmemeli. */
  .yasal__goz,
  .yasal__don { font-size: 0.78rem; }
  /* Tarih büyük harf etiket değil, okunan bir cümle: mikro yazı eşiği
     değil düz metin eşiği geçerli. */
  .yasal__tarih { font-size: 0.875rem; }

  /* Künye tablosundaki telefon ve e-posta hücrenin tek içeriği, yani
     gerçek birer dokunma hedefi. Satır yüksekliğinde bırakılınca
     parmakla tutturmak zor. */
  .yasal__tablo a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Alt şeritte üç öğe yan yana sığmıyor; yasal bağlantılar telifin
     altına iniyor, "başa dön" düğmesi sağda kalıyor. Bağlantılar aynı
     zamanda parmakla basılabilir yüksekliğe çıkıyor: 18 piksellik satır
     yüksekliğinde kaydırılan bir sayfada hedefi tutturmak zor. */
  .footer__bottom { row-gap: 1.1rem; }
  .footer__yasal { gap: 0 1.2rem; }
  .footer__yasal a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .yasal__don a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Çeviri notu. Sayfa Türkçeyken saklı: bağlayıcı metnin Türkçe olduğunu
   söylemek yalnızca İngilizce okuyana bir bilgi veriyor. site-tercih.js
   dil değişince <html lang> değerini güncellediği için ek bir sınıf
   gerekmiyor. */
.yasal__ceviri-not {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 1.4rem;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  font-size: var(--fs-micro);
  line-height: 1.6;
  /* 0.55 idi. Krem zeminde bu ~3.2:1 kontrasta denk geliyor, WCAG AA'nın
     küçük metin için istediği 4.5'in altında. Not sessiz kalmalı ama
     okunmalı. */
  opacity: 0.75;
  max-width: 62ch;
}
html[lang="tr"] .yasal__ceviri-not { display: none; }

/* Turuncu bento kartında yazı rengi.
   Şablon burada beyaz kullanıyor: color: var(--base). Ölçüldü, beyaz
   #FF3E00 üzerinde 3.53:1 veriyor, WCAG AA'nın küçük metin için istediği
   4.5'in altında. Aynı zeminde koyu yazı 5.49:1. Renk sabit yazılıyor,
   değişkenle değil: --ink koyu temada kreme dönüyor ve kart her iki
   temada da turuncu kaldığı için sorun geri geliyordu. */
.bento-card--safety { color: #14100E; }
.bento-card--safety .tag {
  border-color: #14100E;
  color: #14100E;
}
.bento-card--safety .tag--filled {
  background: #14100E;
  color: var(--safety);
}

/* İş kartı başlığında Türkçe alt işaretleri kırpılıyordu: "Açık" ve
   "Kapak" başlıklarında ç kuyruğu satır kutusunun dışında kalıyordu.
   2. bölümdeki kuralın aynısı; bu sınıf o listede yoktu. */
.is__ad {
  line-height: 1.16;
  padding-bottom: 0.05em;
}

/* ─────────────────────────────────────────────────────────
   17. 404 SAYFASI
   Ekranı dolduran tek bir blok. Üst bar ve alt bilgi yok: buraya düşen
   kişiye gezinme değil çıkış yolu gerekiyor, iki bağlantı yeterli.
   ───────────────────────────────────────────────────────── */

.hata {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--base);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 6vw, 80px) clamp(20px, 5vw, 64px);
}
.hata__inner {
  width: min(100%, 640px);
  text-align: center;
}
.hata__kod {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(3.4rem, 12vw, 6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--safety);
  letter-spacing: -0.02em;
  margin-bottom: 1.2rem;
}
.hata__baslik {
  font-size: clamp(1.8rem, 5vw, 3rem);
  /* Türkçe alt işaretleri için pay; 2. bölümdeki kuralla aynı. */
  line-height: 1.16;
  padding-bottom: 0.05em;
  margin-bottom: 1.1rem;
}
.hata__metin {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-data);
  line-height: 1.7;
  opacity: 0.85;
  max-width: 46ch;
  margin: 0 auto 2.2rem;
}
.hata__cta {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
/* Balık sayfanın altında, sessiz. Marka burada işaret olarak duruyor,
   başlık olarak değil. */
.hata__mark {
  display: block;
  margin: clamp(36px, 6vw, 56px) auto 0;
  /* 0.5 idi, hayalet gibi duruyordu. İşaret sessiz kalmalı ama silik
     değil; markanın kendisi bu. */
  opacity: 0.85;
  width: 88px;
  height: auto;
}

@media (max-width: 560px) {
  /* Dar ekranda iki düğme yan yana sığmıyor, sığdırmaya çalışınca
     ikisi de okunmaz genişliğe iniyor. Alt alta ve tam genişlik. */
  .hata__cta { flex-direction: column; align-items: stretch; }
}

/* ─────────────────────────────────────────────────────────
   18. VURGU RENGİNİN KOYULUĞU

   Ölçüm: açık temada 24 metin öğesi WCAG AA'nın altında kalıyordu ve
   hepsinin tek sebebi vardı. Şablonun --safety değeri #FF3E00:

     turuncu yazı, açık zeminde ........... 3.33   (gereken 4.5)
     beyaz yazı, turuncu zeminde .......... 3.53   (gereken 4.5)

   İkisi de aynı yöne bakıyor, yani rengi koyulaştırmak her iki kullanımı
   birden düzeltiyor. Aynı ton (H 15°, S %100) korunup yalnızca parlaklık
   0.50'den 0.40'a çekildi:

     #CC3200 yazı, açık zeminde ........... 4.91
     beyaz yazı, #CC3200 zeminde .......... 5.22

   Bu, ayrı bir "metin turuncusu" tanımlamaktan daha doğru: sayfada iki
   farklı turuncu yan yana durunca ikisi de yanlış görünüyor, üstelik
   şablonun kendi kuralları bu değişkeni hem yazı hem dolgu için
   kullanıyor ve hangisinin hangisi olduğu seçicilerden anlaşılmıyor.

   KOYU TEMADA DEĞİŞMİYOR. Orada zemin koyu ve parlak turuncu zaten
   5.38 veriyor; koyulaştırmak tersine okunmaz hale getirirdi (3.64).
   ───────────────────────────────────────────────────────── */

:root { --safety: #CC3200; --safety-ters: #FF3E00; }
:root[data-tema="koyu"] { --safety: #FF3E00; --safety-ters: #CC3200; }

/* Koyu zeminli bölümlerde vurgu rengi PARLAK kalıyor.

   Yukarıdaki koyulaştırma açık zemin için doğru ama siyah zeminde ters
   çalışıyor: ölçüldü, #CC3200 siyah üzerinde 4.02 veriyor, oysa parlak
   #FF3E00 aynı yerde 5.38. Yani tek bir değer iki zemini birden
   karşılamıyor.

   Bu bölümler kendi zeminlerini boyayan öğeler (background: var(--ink)).
   Değişken kalıtsal olduğu için burada bir kez tanımlamak, içlerindeki
   bütün etiket, başlık ve bağlantılara birden işliyor; tek tek kural
   yazmak gerekmiyor. */
/* DİKKAT: bu bölümlerin zemini var(--ink) ve --ink temayla birlikte yer
   değiştiriyor. Açık temada koyu, KOYU TEMADA KREM. Yani "koyu zeminli
   bölüm" tanımı yalnızca açık temada doğru; koyu temada aynı bölümler
   sayfanın en açık yerleri oluyor.

   Bir süre burada sabit #FF3E00 yazılıydı ve koyu temada bu bölümlerdeki
   her etiket 3.09'a düşüyordu. Değer artık sabit değil: --safety-ters her
   zaman kökün tersini veriyor, yani zemin hangi yöne dönerse yazı da
   onunla dönüyor. */
.header,
.footer,
.kurulum-bant,
.paket--onerilen,
.arama-bandi__ic,
.bento-card--dark {
  --safety: var(--safety-ters);
}

/* Turuncu bento kartı BEYAZ yazıya geri döndü.

   Daha önce buradaki beyaz yazı 3.53 veriyordu ve koyu yazıya
   çevrilmişti. Vurgu rengi koyulaşınca denklem tersine döndü:
   #CC3200 üzerinde beyaz 5.22, koyu yazı ise 3.49. Yani o düzeltmenin
   sebebi ortadan kalktı, kendisi de kalkıyor; şablonun kendi kuralı
   (color: var(--base)) yeniden geçerli. */
.bento-card--safety { color: var(--base); }
.bento-card--safety .tag {
  border-color: var(--base);
  color: var(--base);
}
.bento-card--safety .tag--filled {
  background: var(--base);
  color: var(--safety);
}

/* Telif satırı 4.41 ile eşiğin hemen altında kalıyordu. Şablon bunu 0.35
   saydamlıkta yazıyor; sessiz durması doğru ama okunmaz olması değil. */
/* Sabit beyaz yazılmıştı ve koyu temada alt bilgi krem zeminli olduğu
   için 1.09'a düşüyordu, yani okunmuyordu. Renk artık alt bilginin kendi
   yazı renginden geliyor; hangi tema olursa olsun doğru yönde. */
.footer__copy { color: inherit; opacity: 0.72; }

/* Turuncu ZEMİNLİ öğeler her yerde koyu sürümü kullanıyor.

   Yukarıdaki kural koyu bölümlerde --safety'yi parlak yapıyor ve bu metin
   için doğru. Ama o bölümlerin içinde turuncuyu ZEMİN olarak kullanan
   öğeler de var (öne çıkan paketin rozeti, dolu düğme); orada parlak
   turuncunun üstündeki beyaz yazı yine 3.53'e düşüyordu.

   Ölçüm, turuncu zemin için tek bir doğru olduğunu gösteriyor:

     beyaz yazı, #FF3E00 zeminde ......... 3.53
     beyaz yazı, #CC3200 zeminde ......... 5.22

   Bu öğeler değişkeni kendi içlerinde koyu sürüme çeviriyor. Böylece
   hem zeminleri hem de şablonun background: var(--safety) kuralı tek
   yerden hallediliyor, ayrı bir renk sabiti dağıtmak gerekmiyor. */
/* .tag--filled bu listede DEĞİL. Onun zemini var(--ink), turuncu değil;
   bir ara buraya eklenmişti ve koyu temada krem zeminde beyaz yazı, yani
   1.13 üretiyordu. Şablonun kendi color: var(--base) kuralı orada zaten
   doğru çalışıyor. */
.olcu-btn--dolu,
.paket__rozet {
  --safety: #CC3200;
  /* Yazı da sabitleniyor. Şablon burada color: var(--base) kullanıyor ve
     o değer koyu temada koyuya dönüyordu: koyu turuncu zeminde koyu yazı,
     ölçüldü, 3.64. Zemin iki temada da aynı turuncu olduğuna göre yazı da
     aynı kalmalı; beyaz o zeminde 5.22 veriyor. */
  color: #FFFFFF;
}

/* ─────────────────────────────────────────────────────────
   19. SATIR YÜKSEKLİĞİ, TÜRKÇE ALT İŞARETLERİ

   Ölçüm, harf içeren altı öğede satır kutusunun 1.16'nın altında
   kaldığını gösterdi. Kural yalnızca harfli metne uygulanıyor: salt
   rakam yazan öğelerde (iri "01", "₺1.290") kuyruk oluşmuyor ve sıkı
   satır orada tipografik bir tercih.
   ───────────────────────────────────────────────────────── */

/* Kapak başlığı 1.02 ile yazılıydı. İki satır üst üste geliyor ve
   "Arayan müşteri" satırındaki ş kuyruğu, altındaki "sizi bulsun"
   satırının harflerine dayanıyordu. 92 pikselde bu fark gözle
   görülüyor. Şablonun kendi ölçüsü İngilizce için ayarlanmış; İngilizce
   büyük harfte alta taşan kuyruk yok. */
.hero__title .line { line-height: 1.16; }

/* "/ay" ve "/yıl": y kuyruklu ve satır kutusu tam punto kadardı. Bu
   ikisi tutarın yanında satır içi duruyor, o yüzden kutuyu büyütmek
   yerine hizayı bozmayan bir pay veriliyor. */
.paket__birim { line-height: 1.16; }

/* "tek seferlik" aynı durumda. */
.kurulum-bant__fiyat span { line-height: 1.35; }

/* ─────────────────────────────────────────────────────────
   20. BENTO KARTINDA ETİKET ŞERİDİ

   Şablon kartı grid-template-rows: auto 1fr auto ile kuruyor; ortadaki
   gövde esniyor. Metin kısa olduğunda gövdenin altında yer artıyor ve
   etiket şeridi metinden uzak duruyor, metin uzun olduğunda gövde tam
   doluyor ve şerit yazının dibine yapışıyor.

   Ölçüldü, aynı satırda iki farklı davranış vardı:
     CW-01 / 04 / 06 ... 27px boşluk (2-3 satır metin)
     CW-02 / 03 / 05 ...  0px boşluk (3-4 satır metin)

   Şeride margin vermek çözmüyor: artan boşluğun üstüne biniyor ve fark
   daha da açılıyor. Boşluk gövdenin kendi dolgusuna veriliyor, böylece
   metin ne kadar uzarsa uzasın şeritle arasında bu kadar yer kalıyor ve
   şeritler kartın dibinde hizalı kalmaya devam ediyor. */
.bento-card__govde {
  padding-bottom: 1.75rem;
  /* Gövde 1fr olduğu için artan yer onun İÇİNDE kalıyor ve metin yukarıda
     asılı duruyordu: kısa metinli kartta şeride 55px, uzun metinlide 28px.
     İçerik alta yaslanınca artan yer metnin ÜSTÜNE geçiyor, yani ikonla
     başlık arasına; şeride olan mesafe her kartta aynı oluyor. */
  align-self: end;
}