/* ══════════════════════════════════════════════════════════════════════
   ÜRÜN SAYFASI KATMANI — `stil.css`'in ÜSTÜNE yüklenir, onu değiştirmez.

   🔴 NEDEN VAR (ölçüldü 2026-09-07): rakip üç siteyi (nutrila.app,
   nutrola.app, nutrilio.net) açıp baktık. Aradaki fark tek cümleyle:
   ONLAR ÜRÜNÜ GÖSTERİYOR, BİZ FOTOĞRAF GÖSTERİYORDUK. Çatı sayfamızda
   `laboratuvar.jpg` (masadaki laptop) AYNI SAYFADA ÜÇ KEZ vardı; 14 gerçek
   uygulama ekranı ise küçük ve kıvrımın altındaydı.

   Bu katmanın tek işi: ekranı büyütmek, rengi ÜRÜNDEN almak.

   # YAPMA: buraya sosyal kanıt (yorum sayısı, indirme, yıldız) koyma.
   # NEDEN: uygulamalar yayında değil, hiçbiri yok. Uydurmak yasak.
   #   Yerine ÖLÇÜLMÜŞ ürün gerçeği koyuyoruz (`.kanit`).
   ══════════════════════════════════════════════════════════════════════ */

.urun-hero{position:relative; overflow:hidden; background:var(--koyu); color:#fff;
  padding:clamp(120px,13vw,168px) 0 clamp(64px,8vw,96px)}
.urun-hero::before{ /* renk ÜRÜNDEN gelir: --marka her sayfada kendi tonunu verir */
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(900px 560px at 78% 34%, color-mix(in srgb, var(--marka) 38%, transparent), transparent 68%),
    radial-gradient(620px 420px at 8% 88%, color-mix(in srgb, var(--marka) 20%, transparent), transparent 72%);
}
.urun-hero .kap{position:relative; z-index:1;
  display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(32px,5vw,64px); align-items:center}
.urun-hero h1{font-size:clamp(38px,5.6vw,68px); line-height:1.03; letter-spacing:-.035em;
  font-weight:790; margin:0 0 20px; color:#fff; text-wrap:balance}
.urun-hero h1 em{font-family:var(--serif); font-style:italic; font-weight:400;
  color:color-mix(in srgb, var(--marka) 62%, #fff)}
.urun-hero .ozet{font-size:clamp(17px,1.9vw,20.5px); line-height:1.6;
  color:rgba(255,255,255,.82); margin:0 0 30px; max-width:30em}
.urun-hero .ozet strong{color:#fff; font-weight:640}

/* Telefon yığını: üç ekran, ortadaki önde. Gerçek ekran görüntüleri —
   çizim ya da mockup değil. */
.telefonlar{position:relative; display:flex; justify-content:center; align-items:flex-end;
  gap:clamp(-30px,-2vw,0px); perspective:1400px}
.telefonlar figure{margin:0; position:relative; flex:none;
  border-radius:26px; overflow:hidden; background:#0A1017;
  box-shadow:0 2px 6px rgba(0,0,0,.4), 0 44px 80px -28px rgba(0,0,0,.8),
             inset 0 0 0 1px rgba(255,255,255,.14)}
.telefonlar img{display:block; width:100%; height:auto}
.telefonlar .yan{width:30%; opacity:.72; transform:translateY(22px) scale(.94)}
.telefonlar .yan:first-child{transform:translateY(22px) rotate(-4deg) scale(.94); margin-right:-6%}
.telefonlar .yan:last-child{transform:translateY(22px) rotate(4deg) scale(.94); margin-left:-6%}
.telefonlar .orta{width:38%; z-index:2}

/* ── ÖLÇÜLMÜŞ ÜRÜN KANITI (sosyal kanıtın yerine) ── */
.kanit{background:var(--koyu); color:#fff; border-top:1px solid rgba(255,255,255,.08)}
.kanit .kap{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px);
  padding-top:clamp(38px,5vw,54px); padding-bottom:clamp(38px,5vw,54px)}
.kanit b{display:block; font-size:clamp(24px,3vw,34px); font-weight:640; letter-spacing:-.035em;
  line-height:1.06; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  color:color-mix(in srgb, var(--marka) 55%, #fff)}
.kanit span{display:block; font-size:12.6px; line-height:1.5; margin-top:9px;
  color:rgba(255,255,255,.56)}
@media(max-width:760px){ .kanit .kap{grid-template-columns:repeat(2,1fr)} }

/* ── RENKLİ ÖZELLİK ŞERİDİ — her özellik kendi tonunda, ekran üstünde ── */
/* ⚠ auto-fit KULLANMA: 1140px kapta minmax(268px) 3 sütun veriyordu ve
   dördüncü kart tek başına satırda kalıyordu (3+1, dengesiz). Dört özellik
   için 2×2 hem dengeli hem ekranları büyütüyor. */
.ozellikler{display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2.4vw,26px); margin-top:clamp(34px,5vw,52px)}
@media(max-width:720px){ .ozellikler{grid-template-columns:1fr} }
.ozellik{position:relative; border-radius:22px; overflow:hidden; display:flex;
  flex-direction:column; background:var(--kutuTon, var(--kart)); padding:32px 30px 0;
  min-height:500px}
.ozellik h3{font-size:19px; font-weight:700; letter-spacing:-.015em; margin:0 0 8px;
  color:var(--kutuMetin, var(--metin))}
.ozellik p{margin:0 0 20px; font-size:14.6px; line-height:1.6;
  color:color-mix(in srgb, var(--kutuMetin, var(--metin)) 74%, transparent)}
.ozellik .cerceve{margin-top:auto; align-self:center; width:min(268px,66%);
  border-radius:20px 20px 0 0; overflow:hidden; background:#0A1017;
  box-shadow:0 -2px 18px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.1)}
.ozellik .cerceve img{display:block; width:100%; height:auto}

/* ⚠ `.cerceve` TELEFON çerçevesidir (siyah gövde + çentik) ve yalnız
   UYGULAMA EKRANI için kullanılır. İllüstrasyon oraya konunca çizim
   telefonun içinde görünüyor ve saçmalıyor — ölçüldü 2026-09-12, ekran
   görüntüsü alınıp bakıldı. Çizimler için bu sınıf: çerçevesiz, zemine
   karışan, alta yaslanan. */
.ozellik .cizim{margin-top:auto; align-self:center; width:min(340px,86%);
  padding-bottom:18px}
.ozellik .cizim img{display:block; width:100%; height:auto;
  /* ⚠ mix-blend-mode YOK: görselin zemini SAYDAM yapıldı (PNG alfa).
     Ölçüldü 2026-09-12 — blend ile krem zemin kartın üstünde tan bir kutu
     gibi duruyordu; karışım modu zemini kaldırmaz, KOYULAŞTIRIR. */
}

/* ── Büyük tek ekran + yanında anlatım ── */
.yakin{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(36px,5vw,72px);
  align-items:center}
.yakin.ters > *:first-child{order:2}
.yakin .ekranKutu{position:relative; border-radius:28px; padding:clamp(26px,4vw,44px);
  background:linear-gradient(160deg, color-mix(in srgb, var(--marka) 22%, var(--kart)), var(--kart));
  display:flex; justify-content:center}
.yakin .ekranKutu img{width:min(300px,80%); border-radius:22px; display:block;
  box-shadow:0 3px 8px rgba(0,0,0,.14), 0 34px 60px -24px rgba(0,0,0,.45)}
.yakin h2{margin-bottom:14px}
.yakin p{color:var(--metin2); font-size:17.5px; line-height:1.68; margin:0 0 16px}
.yakin p strong{color:var(--metin); font-weight:650}
.yakin ul{margin:22px 0 0; padding:0; list-style:none}
.yakin li{position:relative; padding-left:26px; margin-bottom:12px;
  font-size:15.6px; line-height:1.62; color:var(--metin2)}
.yakin li::before{content:""; position:absolute; left:4px; top:.56em;
  width:8px; height:8px; border-radius:50%; background:var(--marka)}
.yakin li strong{color:var(--metin); font-weight:650}

@media(max-width:900px){
  .urun-hero .kap{grid-template-columns:1fr; gap:44px}
  .yakin, .yakin.ters{grid-template-columns:1fr}
  .yakin.ters > *:first-child{order:0}
  .telefonlar .yan{width:32%}
  .telefonlar .orta{width:40%}
}

/* ── PLAN TABLOSU — yalnız BİZİM sütunumuz ────────────────────────────
   # YAPMA: buraya rakip sütunu ekleme.
   # NEDEN: ölçüldü 2026-09-07 — Nutrola'nın kendi karşılaştırma tablosu
   #   ŞİMDİDEN yanlış ("Cronometer: AI fotoğraf yok" diyor, oysa Gold'da
   #   Photo Log var). Rakip bir özellik ekler, tablon sessizce yalan olur.
   #   Kendi sütunumuz bayatlamaz. */
.plan{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,24px);
  margin-top:clamp(28px,4vw,40px)}
.plan-sutun{background:var(--zemin); border:1px solid var(--cizgi); border-radius:20px;
  padding:clamp(24px,3vw,32px)}
.plan-vurgu{border-color:color-mix(in srgb, var(--marka) 55%, var(--cizgi));
  box-shadow:0 2px 6px rgba(0,0,0,.06), 0 26px 50px -26px color-mix(in srgb, var(--marka) 45%, transparent)}
.plan-sutun h3{font-size:15px; letter-spacing:.02em; color:var(--metin2);
  text-transform:uppercase; font-weight:700; margin:0 0 10px}
.plan-fiyat{font-family:var(--serif); font-size:clamp(38px,4.6vw,54px); line-height:1;
  margin:0 0 22px; color:var(--metin); letter-spacing:-.02em}
.plan-fiyat span{font-family:inherit; font-size:16px; color:var(--metin2);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
/* Fiyat notu — üstü çizili karşılaştırma ve kazanç rozeti.
   ⚠ Üstü çizili sayı ESKİ FİYAT DEĞİLDİR: aynı hizmeti aylık ödemenin
   12 aylık toplamıdır. Etiketi ("Aynı 12 ayı aylık ödeseniz") kaldırma —
   bağlamsız <s>, uygulanmamış bir eski fiyat ilan etmek olur. */
/* "Henüz mağazada değil" ibaresi — fiyat kartlarının ÜSTÜNDE durur.
   # YAPMA: bunu sayfanın dibine, küçük nota taşıma.
   # NEDEN: fiyatı gören ziyaretçi satın alma yolu arar; bulamayınca hata
   sanır ya da kandırıldığını düşünür. Bilgi fiyattan ÖNCE verilmezse
   geç kalmış olur. */
.plan-uyari{margin:18px 0 0; padding:14px 18px; border-radius:14px;
  background:color-mix(in srgb, var(--marka) 8%, var(--zemin));
  border:1px solid color-mix(in srgb, var(--marka) 28%, var(--cizgi));
  font-size:15px; line-height:1.6; color:var(--metin2); max-width:64ch}
.plan-uyari b{color:var(--metin)}

/* "İlk 5 ilaç ücretsiz" — KURALLAR F1/F2.
   # YAPMA: buraya süre (gün) yazma, geri sayım koyma.
   # NEDEN: deneme SÜRE ile değil KULLANIM ile veriliyor; sahte aciliyet F4'te
   yasak ve ürünün tek satış argümanı dürüstlük. */
.plan-deneme{margin:12px 0 0; padding:14px 18px; border-radius:14px;
  background:color-mix(in srgb, var(--marka) 12%, var(--zemin));
  border:1px solid color-mix(in srgb, var(--marka) 34%, var(--cizgi));
  font-size:15px; line-height:1.6; color:var(--metin2); max-width:64ch}
.plan-deneme b{color:var(--metin)}

.plan-not{margin:-12px 0 20px; font-size:14.5px; line-height:1.55; color:var(--metin2)}
.plan-not s{text-decoration-thickness:1.5px; text-underline-offset:2px; opacity:.75}
.plan-kazanc{color:var(--marka); font-weight:700; white-space:nowrap}
.soz-kapanis{margin:18px 0 0; color:rgba(255,255,255,.82); font-size:15px;
  line-height:1.65}
.soz-kapanis b{color:#fff}
.kucuk-not{margin-top:clamp(18px,2.4vw,26px); font-size:13.4px; line-height:1.65;
  color:var(--metin2); max-width:62ch}
@media(max-width:640px){ .plan-kazanc{white-space:normal} }

.plan-liste{list-style:none; margin:0; padding:0}
.plan-liste li{position:relative; padding-left:26px; margin-bottom:12px;
  font-size:15.4px; line-height:1.6; color:var(--metin2)}
.plan-liste li b{color:var(--metin); font-weight:650}
.plan-liste li::before{content:""; position:absolute; left:3px; top:.55em;
  width:9px; height:9px; border-radius:50%;
  background:color-mix(in srgb, var(--marka) 70%, transparent)}
.plan-vurgu .plan-liste li::before{background:var(--marka)}

.soz-kutu{margin-top:clamp(22px,3vw,32px); background:var(--koyu); color:#fff;
  border-radius:20px; padding:clamp(24px,3vw,34px)}
.soz-kutu h3{color:#fff; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:700; margin:0 0 16px}
.soz-kutu ul{list-style:none; margin:0; padding:0}
.soz-kutu li{position:relative; padding-left:24px; margin-bottom:11px;
  font-size:15.4px; line-height:1.62; color:rgba(255,255,255,.76)}
.soz-kutu li b{color:#fff; font-weight:650}
.soz-kutu li::before{content:"✕"; position:absolute; left:0; top:0;
  color:color-mix(in srgb, var(--marka) 70%, #fff); font-size:13px}
@media(max-width:760px){ .plan{grid-template-columns:1fr} }
.hero-soz{margin:0 0 22px; font-size:15px; line-height:1.62;
  color:rgba(255,255,255,.72); max-width:34em}
.hero-soz b{color:#fff; font-weight:640}

/* ── Bağlantı düğmesi — ürün sayfası ──────────────────────────────────
   🔴 Ölçüldü 2026-09-07: `.git` sınıfını ürün sayfasında kullandım ama
   boyut kuralı `.uygyari .git svg{width:15px}` diye ÇATI SAYFAYA hapsedilmişti.
   Ürün sayfasında SVG sınırsız kaldı ve ok EKRAN BOYUNDA çıktı.
   Ders: paylaşılan sınıf adını başka bağlamda kullanmadan önce, o sınıfın
   TÜM kurallarının kapsamına bak.
   Kullanıcı isteğiyle ok kaldırıldı — bağlantı kendi başına anlaşılıyor. */
.baglanti-dugme{
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  background:var(--marka); color:var(--markaUstu, #1C1206)  /* YAPMA: burada sabit renk kullanma.
     NEDEN: ölçüldü — koyu kahve yalnız amber zeminde geçiyor; mavi
     (3,02:1) ve yeşil (3,61:1) zeminde WCAG AA'da KALIYOR. Türev,
     rengin yanında (sayfanın :root bloğunda) tanımlanır. */; text-decoration:none;
  font-size:15px; font-weight:650; letter-spacing:-.005em;
  padding:13px 22px; border-radius:12px; border:1px solid transparent;
  transition:transform .18s, box-shadow .18s, filter .18s;
}
.baglanti-dugme:hover{transform:translateY(-2px); filter:brightness(1.05);
  box-shadow:0 14px 28px -12px color-mix(in srgb, var(--marka) 70%, transparent)}
.baglanti-dugme svg{width:16px; height:16px; flex:none}

/* Alt bilgi — çatı sayfayla aynı olgunlukta */
footer .altbag-urun{display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
  padding-top:20px; border-top:1px solid rgba(255,255,255,.10); font-size:13.5px}
footer .altbag-urun a{color:var(--altBaglanti); text-decoration:none}
footer .altbag-urun a:hover{color:var(--altVurgu); text-decoration:underline}

/* Ürün sayfasındaki özellik satırları — kart içinde değil, tam genişlikte */
.urun-satirlar{list-style:none; margin:clamp(28px,4vw,42px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:16px clamp(24px,3vw,40px); max-width:none}
.urun-satirlar li{position:relative; padding-left:26px; margin:0;
  font-size:15.8px; line-height:1.62; color:var(--metin2)}
.urun-satirlar li::before{content:""; position:absolute; left:4px; top:.6em;
  width:8px; height:8px; border-radius:50%; background:var(--marka)}
.urun-satirlar li strong{color:var(--metin); font-weight:650}

/* ---------- kaynak zinciri diyagramı (SVG, JS'siz, tema uyumlu) ---------- */
/* YAPMA: dar ekranda SVG'yi küçültüp bırakma.
   NEDEN: 900 birimlik diyagram 360 px'e sığdırılınca yazı ~5 px olur ve
     okunmaz. Geniş içerik KENDİ kabında yatay kayar (depo kuralı);
     sayfa gövdesi yatay kaymaz. */
.zincir{margin:26px 0 0; padding:0; overflow-x:auto; -webkit-overflow-scrolling:touch}
.zincir > svg{display:block; width:100%; min-width:680px; height:auto}
.zincir .zk rect{fill:var(--zkart); stroke:var(--cizgi); stroke-width:1.5;
  filter:drop-shadow(0 1px 1px rgba(14,23,32,.05)) drop-shadow(0 6px 14px rgba(14,23,32,.07))}
.zincir .zk.zv rect{stroke:var(--ton, var(--vurgu)); stroke-width:2}
.zincir .zn text{fill:var(--ton, var(--vurgu)); opacity:.95}
.zincir .zb text{fill:var(--metin)}
.zincir .za text{fill:var(--zsoluk)}
.zincir .zdur rect{fill:none; stroke:var(--cizgi); stroke-width:1.5; stroke-dasharray:5 5}
.zincir .zdur text{fill:var(--metin); opacity:.85}
.zincir figcaption{margin-top:10px; font-size:13.5px; color:var(--zsoluk)}
/* .zincir-kap KALDIRILDI: kaydırma figure'ün KENDİSİNDE olmalı.
   Ölçüldü 2026-09-08: kullanılmayan sınıfa yazılınca 390 px'de
   SAYFA GÖVDESİ yatay kaydı — geniş içerik kendi kabında kalmalı. */

/* Ürün tonu: `--ton` yalnız ana sayfadaki `.uygyari` kartlarına kapsamlı;
   ürün sayfasında tanımsız kalıp mavi düşüyordu. Diyagram ürünün kendi
   rengini taşısın diye burada tanımlanır.
   ⚠ Koyu tema DEĞERİ AYRI: stil.css'teki ölçüm (2026-09-06, WCAG AA)
     teal #0E7C6B koyu zeminde 3.26:1 — eşiğin altında; #4CC9AF = 8.94:1. */
.zincir.ton-abd{--ton:#0E7C6B}
@media (prefers-color-scheme: dark){ .zincir.ton-abd{--ton:#4CC9AF} }

/* Sönük metin tema başına AYRI — tek değer iki temada çalışmaz.
   Ölçüldü 2026-09-08 (WCAG AA, eşik 4.5:1):
     #5A6B7B / #F3F5F8 (açık kart) = 5.03:1  ✅
     #5A6B7B / #16212C (koyu kart) = 2.97:1  🔴  → #9FB0C0 = 7.33:1 ✅
   YAPMA: açık tema grisini koyu temada yedek değer olarak bırakma. */
/* Kutu dolgusu bölüm zemininden AYRI olmalı.
   Ölçüldü 2026-09-08: diyagram `.sade` bölümünde duruyor, o bölümün zemini
   #F3F5F8; kutulara da `--kart` (#F3F5F8) verilmişti → dolgu ile zemin
   BİREBİR AYNI, kutular yalnız 1.5 px çizgiyle var oluyordu.
   YAPMA: kart rengini "kart tokeni" diye otomatik seçme; kartın altındaki
   ZEMİNE bak. Açık temada zemin gri → kutu beyaz; koyu temada zemin en
   koyu → kutu bir ton açık. */
.zincir{--zsoluk:#5A6B7B; --zkart:#FFFFFF}
@media (prefers-color-scheme: dark){ .zincir{--zsoluk:#9FB0C0; --zkart:#16212C} }

/* Şerit altyazısı — dört kareye TEK ortak not.
   YAPMA: her kareye ayrı altyazı koyma.
   NEDEN: bunlar ORTAM fotoğrafı; kare kare başlık, ürünün o sahneyi
     ürettiği izlenimi verir. Tek not hem dürüst hem sade. */
.serit-kap{margin:0 0 26px}
.serit-kap .foserit{margin-bottom:10px}
.serit-not{font-size:13px; line-height:1.5; color:var(--zsoluk,#5A6B7B); text-align:center}
.serit-kap{--zsoluk:#5A6B7B}
@media (prefers-color-scheme: dark){ .serit-kap{--zsoluk:#9FB0C0} }

/* ── Kaynak zinciri diyagramı ────────────────────────────────────────────
   Sitenin tek cümlelik iddiası ("gösterilen her alan, belgenin hangi
   bölümünden geldiğiyle birlikte durur") METİNDE kalıyordu. Bu blok onu
   gösterir.

   # YAPMA: bunu AI görsel üreticisiyle üretme.
   # NEDEN: ölçüldü 2026-09-07/08 — üreticiler okunabilir metin basamıyor;
   #   dört karede uydurma ilaç markası ve saçma arayüz yazısı çıktı. Bu
   #   görselin TAMAMI metinden ibaret, dolayısıyla çizilmeli.
   # YAPMA: SVG olarak da yapma.
   # NEDEN: SVG içindeki metin yeniden AKMAZ; 390 px'de okunmaz olur.
   #   HTML kutuları dikey dizilir, metin seçilebilir ve çevrilebilir kalır. */
.zincir{margin:30px 0 8px}
.zincir-sira{
  display:flex; flex-wrap:wrap; align-items:stretch; gap:0;
  border:1px solid var(--cizgi); border-radius:14px; overflow:hidden;
}
.zincir-kutu{
  flex:1 1 190px; min-width:0; padding:16px 18px;
  background:var(--zemin); border-right:1px solid var(--cizgi);
}
.zincir-kutu:last-child{border-right:0}
.zincir-kutu .adim{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--metin2); margin:0 0 7px;
}
.zincir-kutu .ad{font-weight:660; font-size:15.5px; line-height:1.3; margin:0}
.zincir-kutu .ek{font-size:13px; color:var(--metin2); margin:6px 0 0; line-height:1.45}
.zincir-rozet{
  display:inline-block; margin-top:9px; padding:3px 9px; border-radius:6px;
  background:var(--marka); color:var(--markaUstu, #fff);
  font-size:12px; font-weight:700; letter-spacing:.02em;
}
.zincir-geri{
  display:flex; align-items:center; gap:10px; margin:11px 2px 0;
  font-size:13.5px; color:var(--metin2);
}
.zincir-geri::before{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--marka), var(--cizgi));
}
.zincir-geri span{white-space:nowrap}
@media(max-width:700px){
  .zincir-kutu{flex:1 1 100%; border-right:0; border-bottom:1px solid var(--cizgi)}
  .zincir-kutu:last-child{border-bottom:0}
}

/* ---------- kapsam sayıları (CivioraMed) ---------- */
/* YAPMA: buraya nöbetçide karşılığı olmayan sayı koyma.
   NEDEN: ölçüldü 2026-09-10 — `site-rakam-denetle.py`'de CivioraMed'e ait TEK BİR
     iddia yoktu; sayfaya konan sayı korumasız kalır ve veri değişince sessizce
     bayatlar. Sıra: ÖNCE nöbetçi, SONRA sayfa.
   ⚠ Buradaki ETİKET nöbetçinin desenidir ("doğrulanmış FDA tablosu" /
     "verified FDA tables"). Metni değiştirirsen nöbetçiyi de değiştir —
     yoksa kapı sessizce kör olur ve "0 bayat" der. */
.kapsam{list-style:none; padding:0; margin:0 0 14px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.kapsam li{background:var(--kart); border:1px solid var(--cizgi);
  border-radius:12px; padding:12px 14px; font-size:14px; line-height:1.45;
  color:var(--kapsamSoluk)}
.kapsam li strong{display:block; font-size:22px; line-height:1.2;
  color:var(--metin); font-variant-numeric:tabular-nums}
.kapsam-not{font-size:14px; line-height:1.6; color:var(--kapsamSoluk);
  margin:0 0 22px; max-width:62ch}
/* Sönük metin tema başına AYRI — açık tema grisi koyu zeminde 2.97:1 kalıyor
   (ölçüldü 2026-09-08, AA eşiği 4.5). */
.kapsam, .kapsam-not{--kapsamSoluk:#5A6B7B}
@media (prefers-color-scheme: dark){ .kapsam, .kapsam-not{--kapsamSoluk:#9FB0C0} }
@media(max-width:760px){ .kapsam{grid-template-columns:repeat(2,1fr)} }

/* ── YETENEK TABLOSU (NutriCitadel · 2026-09-12) ───────────────────────────
   "Bu uygulamayla ne yapabilirim" sorusunun tek yerde cevabi. Iki sutun:
   YAPAR / YAPMAZ. Ikinci sutun sus degil — urunun tezi tam olarak orada.
   ⚠ Tablo DAR EKRANDA kendi icinde kayar; sayfa govdesi yatay kaymaz. */
.yetenek{margin:clamp(26px,3.4vw,40px) 0 0; overflow-x:auto; -webkit-overflow-scrolling:touch}
.yetenek table{width:100%; min-width:560px; border-collapse:collapse; font-size:15px}
.yetenek th{text-align:left; font-size:12.4px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--metin2); font-weight:640; padding:0 14px 12px; border-bottom:1px solid var(--cizgi)}
.yetenek td{padding:14px; border-bottom:1px solid var(--cizgi); line-height:1.55;
  vertical-align:top; color:var(--metin2)}
.yetenek td:first-child{color:var(--metin); font-weight:640; width:23%}
.yetenek tr:last-child td{border-bottom:0}
.yetenek .ucretsiz,.yetenek .abone{display:inline-block; font-size:11.5px; font-weight:700;
  letter-spacing:.04em; padding:3px 9px; border-radius:999px; white-space:nowrap}
.yetenek .ucretsiz{background:color-mix(in srgb, var(--marka) 14%, transparent); color:var(--marka)}
.yetenek .abone{background:var(--koyu); color:#fff}
.yapmaz{list-style:none; margin:clamp(22px,3vw,30px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px 26px}
.yapmaz li{position:relative; padding-left:26px; font-size:15px; line-height:1.55;
  color:var(--metin2)}
.yapmaz li::before{content:"✕"; position:absolute; left:0; top:0; font-size:13px;
  color:var(--marka); font-weight:700}
.yapmaz li b{color:var(--metin); font-weight:650}
@media (max-width:720px){ .yapmaz{grid-template-columns:1fr} }

/* ⚠ TELEFONDA TABLO DEĞİL KART (ölçüldü 2026-09-12, 390px'te bakılarak).
   Yatay kaydırmalı tabloda üçüncü sütun — ücretsiz mi abonelikte mi — ekranın
   TAMAMEN dışında kalıyordu ve kaydığına dair hiçbir işaret yoktu. Kullanıcının
   en çok önemsediği bilgi, telefonda görünmeyen bilgiydi.
   # YAPMA: bunu "overflow-x:auto var, kaydırır" diye bırakma.
   # NEDEN: keşfedilmeyen kaydırma, olmayan içeriktir. */
@media (max-width:720px){
  .yetenek{overflow-x:visible}
  .yetenek table{min-width:0; display:block}
  .yetenek thead{display:none}
  .yetenek tbody, .yetenek tr{display:block}
  .yetenek tr{padding:15px 0; border-bottom:1px solid var(--cizgi)}
  .yetenek tr:last-child{border-bottom:0}
  .yetenek td{display:block; padding:0; border:0; width:auto}
  .yetenek td:first-child{width:auto; font-size:16.5px; margin-bottom:6px}
  .yetenek td:last-child{margin-top:9px}
}

/* Yan yana anlatımda AI çizimi (telefon çerçevesi YOK — `.cerceve` gerçek
   ekran görüntüsü içindir, çizimi telefon kabuğuna sokmak sahte arayüz
   izlenimi verir). */
.yakin .gorselKutu{display:flex; align-items:center; justify-content:center;
  border-radius:26px; padding:clamp(10px,1.6vw,20px); background:var(--kart,var(--zemin))}
.yakin .gorselKutu img{width:min(420px,100%); height:auto; display:block; border-radius:18px}