/* TANITIM (ANA SAYFA) — index.html #tanitim (oturum acmamis ziyaretci + Google).
 *
 * 30 Eyl 2026 yeniden kuruldu: rakip ana sayfalarinin (Babbel, Busuu,
 * Speak, Praktika, Memrise, Cambly, ELSA) ortak donusum deseni —
 * vitrin + "dene" demosu, olcu seridi, sorun/cozum, uc adimli yontem
 * (arayuz ornekli, satir satir yer degistiren), beceri izgarasi, kimin
 * icin, ortamlar, karsilastirma, fiyat, SSS, kapanis cagrisi.
 *
 * MARKA KITI (design_handoff/TASARIM_DILI.md):
 *   gece laciverti #0F1C2B/#16293C · bakir #A3572E (koyu zeminde #C98A5B)
 *   kum #F5F1EA · kagit #FFFDF8 · tek aile Geist · agirlik <= 600
 *   GRADYAN YOK · EMOJI YOK · 11px alti yazi YOK · dokunma hedefi >= 44px
 *   hareket yalniz transform/opacity, sure --mo-* tokenlarindan.
 * Tema renkleri style.css'in uc blokta tanimli tokenlarindan gelir; yeni
 * renk ICAT EDILMEDI. Lacivert vitrin paleti (--tv-*) temadan bagimsiz:
 * lacivert yuzey iki temada da lacivert kalir (giris ekraninin sol
 * paneliyle ayni degerler).
 *
 * GORUNURLUK IKI OZNITELIKLE:
 *   html[data-oturum]       -> tanitim HIC cizilmez (girisli / donen kisi)
 *   html:not([data-oturum]) -> acilis perdesi cizilmez; tanitim ilk
 *                              boyamada hazir, JS beklemez.
 * Olcum: node scratchpad/tanitim-olc.js (13 boyut x 2 tema).
 */
html[data-oturum] .tn { display: none !important; }
html:not([data-oturum]) .boot-host { display: none !important; }
.tn[hidden] { display: none !important; }

.tn {
  --tv-gece: #0F1C2B; --tv-gece-2: #16293C; --tv-ink: #E9EDF2; --tv-govde: #A7AEB5;
  --tv-vurgu: #C98A5B; --tv-vurgu-2: #DBA277; --tv-ok: #7FB394;
  --tv-plaka: rgba(255, 255, 255, .03); --tv-cizgi: rgba(233, 237, 242, .10);
  --tv-kenar: rgba(233, 237, 242, .35); --tv-ustunde: rgba(233, 237, 242, .08);
  --tv-vurgu-yumusak: rgba(201, 138, 91, .16); --tv-ok-yumusak: rgba(127, 179, 148, .14);
  --tn-kenar: var(--line-zayif);
  --tn-kap: 1200px;
  --tn-yan: clamp(16px, 4vw, 32px);
  --tn-bolum: clamp(72px, 10vw, 128px);
  --tn-r-kart: 20px;
  --tn-r-buyuk: clamp(0px, 2vw, 28px);
  min-height: 100vh; background: var(--page); color: var(--text);
  font-feature-settings: "ss01";
  overflow-x: clip;
}
.tn *, .tn *::before, .tn *::after { box-sizing: border-box; }
.tn svg { flex: none; }
.tn-set { position: absolute; width: 0; height: 0; overflow: hidden; }
.tn-kap { width: 100%; max-width: calc(var(--tn-kap) + 2 * var(--tn-yan)); margin: 0 auto;
  padding-left: var(--tn-yan); padding-right: var(--tn-yan); }
.tn [id] { scroll-margin-top: 84px; }
.tn-gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================= DUGMELER ================= */
.tn-btn {
  --b-bg: var(--accent); --b-ink: var(--ink-ters); --b-hover: var(--accent-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--ctrl-h); padding: 0 18px; border-radius: var(--r-md);
  border: 1px solid transparent; background: transparent; color: var(--text);
  font: inherit; font-size: var(--fs-kontrol); font-weight: 600; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--mo-hizli) var(--mo-cikis);
}
.tn-btn:active { transform: translateY(1px); }
.tn-btn:focus-visible, .tn a:focus-visible, .tn summary:focus-visible, .tn-alt-dugme:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; }
.tn-btn--bakir { background: var(--b-bg); border-color: var(--b-bg); color: var(--b-ink); }
.tn-btn--bakir:hover { background: var(--b-hover); border-color: var(--b-hover); }
.tn-btn--cizgi { border-color: var(--btn-line); color: var(--text); background: var(--card); }
.tn-btn--cizgi:hover { border-color: var(--accent); color: var(--accent); }
.tn-btn--hayalet { color: var(--text); }
.tn-btn--hayalet:hover { background: var(--accent-soft); }
.tn-btn--iri { min-height: var(--ctrl-h-lg); padding: 0 26px; font-size: var(--fs-md); border-radius: 14px; }
.tn-btn--tam { width: 100%; }
.tn-ok-ileri { width: 18px; height: 18px; transform: rotate(180deg);
  transition: transform var(--mo-hizli) var(--mo-cikis); }
.tn-btn:hover .tn-ok-ileri, .tn-hepsi:hover .tn-ok-ileri, .tn-ek-bag a:hover .tn-ok-ileri {
  transform: rotate(180deg) translateX(-3px); }

/* Koyu yuzeylerde (vitrin, premium, kapanis) dugme paleti */
.tn-vitrin .tn-btn--bakir, .tn-son .tn-btn--bakir {
  --b-bg: var(--tv-vurgu); --b-ink: var(--tv-gece); --b-hover: var(--tv-vurgu-2); }
.tn-vitrin .tn-btn--cizgi, .tn-son .tn-btn--cizgi, .tn-plan-kart--premium .tn-btn--cizgi {
  background: transparent; border-color: var(--tv-kenar); color: var(--tv-ink); }
.tn-vitrin .tn-btn--cizgi:hover, .tn-son .tn-btn--cizgi:hover, .tn-plan-kart--premium .tn-btn--cizgi:hover {
  background: var(--tv-ustunde); color: var(--tv-ink); border-color: var(--tv-kenar); }
.tn-vitrin .tn-btn:focus-visible, .tn-son .tn-btn:focus-visible, .tn-plan-kart--premium .tn-btn:focus-visible,
.tn-vitrin a:focus-visible { outline-color: var(--tv-vurgu); }

/* ================= UST SERIT ================= */
.tn-ust { position: sticky; top: 0; z-index: 50; background: var(--page-glass);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; }
.tn-ust.kaydi { border-bottom-color: var(--line); }
.tn-ust-ic { min-height: 68px; display: flex; align-items: center; gap: var(--sp-6); }
.tn-marka { display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 17px; letter-spacing: -.02em; }
.tn-marka svg { width: 30px; height: 30px; color: var(--accent); }
.tn-gez { display: flex; gap: var(--sp-1); margin: 0 auto; }
.tn-gez a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  color: var(--muted); text-decoration: none; font-size: var(--fs-kontrol); font-weight: 500; border-radius: var(--r-sm); }
.tn-gez a:hover { color: var(--text); background: var(--accent-soft); }
.tn-ust-eylem { display: flex; align-items: center; gap: var(--sp-2); }

/* ================= 1. VITRIN ================= */
.tn-vitrin { background: var(--tv-gece); color: var(--tv-ink);
  margin: 0 clamp(0px, 1.2vw, 16px); border-radius: var(--tn-r-buyuk);
  border: 1px solid var(--tv-cizgi);
  padding: clamp(48px, 7vw, 104px) 0 clamp(32px, 4vw, 48px); position: relative; overflow: hidden; }
.tn-vitrin-ic { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(40px, 5vw, 80px); }
.tn-vitrin-metin { flex: 1 1 480px; min-width: 0; }
.tn-rozet { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 var(--sp-6);
  padding: 6px 14px 6px 12px; border-radius: var(--r-full); border: 1px solid var(--tv-cizgi);
  background: var(--tv-plaka); font-size: var(--fs-sm); color: var(--tv-govde); }
.tn-rozet-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--tv-vurgu); flex: none; }
.tn-vitrin h1 { margin: 0 0 var(--sp-6); font-size: clamp(36px, 5.4vw, 66px); line-height: 1.03;
  letter-spacing: -.038em; font-weight: 500; color: var(--tv-ink); text-wrap: balance; }
.tn-vitrin h1 em { font-style: normal; color: var(--tv-vurgu); }
.tn-alt { margin: 0 0 var(--sp-8); font-size: clamp(16px, 1.35vw, 18px); line-height: 1.6; color: var(--tv-govde);
  text-wrap: pretty; }
.tn-eylem { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.tn-eylem--orta { justify-content: center; }
.tn-guven { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.tn-guven li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-base); color: var(--tv-govde); }
.tn-guven svg { width: 16px; height: 16px; color: var(--tv-ok); }

/* ---- dene demosu: uygulamanin kagit ekrani, iki temada da kagit ---- */
.tn-demo { flex: 1 1 400px; max-width: 520px; position: relative; min-width: 0; }
.tn-demo-kart {
  --dm-kagit: #FFFDF8; --dm-ink: #17222E; --dm-sonuk: #4E5560; --dm-silik: #6C6E72;
  --dm-cizgi: #E9E1D4; --dm-tas-cizgi: #8E8579; --dm-bakir: #A3572E; --dm-bakir-yumusak: rgba(163, 87, 46, .10);
  --dm-ok: #3F6B52; --dm-ok-yumusak: rgba(63, 107, 82, .12); --dm-kotu: #9A3131;
  background: var(--dm-kagit); color: var(--dm-ink); border-radius: 22px; padding: clamp(20px, 2.4vw, 28px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 40px 80px -32px rgba(0, 0, 0, .65);
  position: relative; z-index: 1;
}
.tn-demo-ust { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.tn-demo-ortam { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border-radius: var(--r-full); background: var(--dm-bakir-yumusak); color: var(--dm-bakir);
  font-size: var(--fs-sm); font-weight: 500; }
.tn-demo-ortam svg { width: 14px; height: 14px; }
.tn-demo-sayac { font-size: var(--fs-sm); color: var(--dm-silik); font-variant-numeric: tabular-nums; }
.tn-demo-cubuk { height: 4px; border-radius: 2px; background: var(--dm-cizgi); margin: 14px 0 22px; overflow: hidden; }
.tn-demo-cubuk i { display: block; height: 100%; width: 30%; background: var(--dm-bakir); border-radius: 2px; }
.tn-demo-kas { margin: 0 0 6px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-kas);
  text-transform: uppercase; color: var(--dm-silik); }
.tn-demo-tr { margin: 0 0 18px; font-size: clamp(19px, 1.9vw, 23px); font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.tn-demo-cevap, .tn-demo-havuz { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; }
.tn-demo-cevap { min-height: 128px; padding: 12px; border-radius: 14px;
  border: 1.5px dashed var(--dm-tas-cizgi); background: var(--dm-bakir-yumusak); }
.tn-demo-cevap:empty { align-content: center; justify-content: center; }
.tn-demo-cevap:empty::before { content: "Cevabın burada oluşacak"; font-size: var(--fs-base); color: var(--dm-silik); }
.tn-demo-havuz { min-height: 44px; margin-top: 14px; }
.tn-tas { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 11px;
  border: 1px solid var(--dm-tas-cizgi); background: var(--dm-kagit); color: var(--dm-ink);
  font: inherit; font-size: 15px; font-weight: 500; box-shadow: 0 1px 0 rgba(23, 34, 46, .08); }
button.tn-tas { cursor: pointer; transition: transform var(--mo-hizli) var(--mo-cikis); }
button.tn-tas:hover { transform: translateY(-1px); }
button.tn-tas:focus-visible { outline: 2px solid var(--dm-bakir); outline-offset: 2px; }
.tn-demo-alt { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-top: 18px; min-height: 52px; flex-wrap: wrap; }
.tn-demo-sonuc { margin: 0; font-size: var(--fs-base); color: var(--dm-sonuk); display: inline-flex; align-items: center; gap: 8px;
  flex: 1 1 180px; }
.tn-demo-sonuc svg { width: 18px; height: 18px; }
.tn-demo-kart .tn-demo-kontrol { --b-bg: var(--dm-bakir); --b-ink: #FFF7EF; --b-hover: #8A4826; min-height: 48px; }
.tn-demo-kontrol[hidden] { display: none; }
.tn-demo-kart.dogru .tn-demo-cevap { border-style: solid; border-color: var(--dm-ok); background: var(--dm-ok-yumusak); }
.tn-demo-kart.dogru .tn-demo-cevap .tn-tas { border-color: var(--dm-ok); color: var(--dm-ok); }
.tn-demo-kart.dogru .tn-demo-sonuc { color: var(--dm-ok); font-weight: 500; }
.tn-demo-kart.yanlis .tn-demo-sonuc { color: var(--dm-kotu); font-weight: 500; }
.tn-demo-kart.salla .tn-demo-cevap { animation: tn-salla var(--mo-yavas) var(--mo-cikis); }
@keyframes tn-salla { 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }

.tn-demo-yuzen { display: none; }
@media (min-width: 1180px) {
  .tn-demo-yuzen { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px;
    padding: 12px 16px 12px 12px; border-radius: 16px; background: var(--tv-gece-2); border: 1px solid var(--tv-cizgi);
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .7); }
  .tn-demo { padding: 44px 0 40px; }
  .tn-demo-yuzen--tekrar { left: -56px; bottom: 0; }
  .tn-demo-yuzen--ses { right: 28px; top: 0; }
  .tn-yuzen-ikon { width: 36px; height: 36px; border-radius: 10px; background: var(--tv-vurgu-yumusak); color: var(--tv-vurgu);
    display: inline-flex; align-items: center; justify-content: center; }
  .tn-yuzen-ikon svg { width: 18px; height: 18px; }
  .tn-demo-yuzen b { display: block; font-size: var(--fs-kontrol); font-weight: 500; color: var(--tv-ink); }
  .tn-demo-yuzen small { display: block; font-size: var(--fs-sm); color: var(--tv-govde); }
}

/* ---- olcu seridi (SEO:SAYILAR uretecten dolar) ---- */
.tn-olcu { margin: clamp(48px, 6vw, 80px) 0 0; padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--tv-cizgi);
  display: flex; flex-wrap: wrap; }
.tn-olcu > div { flex: 1 1 120px; display: flex; flex-direction: column-reverse; gap: 2px;
  padding: 4px clamp(16px, 2vw, 28px); border-left: 1px solid var(--tv-cizgi); }
.tn-olcu > div:first-child { border-left: 0; padding-left: 0; }
.tn-olcu dd { margin: 0; font-size: clamp(28px, 3vw, 38px); font-weight: 500; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; color: var(--tv-ink); line-height: 1.1; }
.tn-olcu dt { font-size: var(--fs-base); color: var(--tv-govde); }

/* ================= BOLUM BASLIKLARI ================= */
.tn-bolum { padding-top: var(--tn-bolum); }
.tn-bas { margin-bottom: clamp(32px, 4.5vw, 56px); }
.tn-bas--orta { text-align: center; max-width: 820px; margin-left: auto; margin-right: auto; }
.tn-kas { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 var(--sp-4);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.tn-kas::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .45; }
.tn-bas--orta .tn-kas::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .45; }
.tn-vitrin .tn-kas, .tn-son .tn-kas { color: var(--tv-vurgu); }
.tn h2 { margin: 0 0 var(--sp-3); font-size: clamp(28px, 3.7vw, 46px); font-weight: 500; letter-spacing: -.032em;
  line-height: 1.08; text-wrap: balance; }
.tn-bas-alt { margin: var(--sp-2) 0 0; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.tn h3 { font-weight: 500; }

/* ================= 2. SORUN / COZUM ================= */
.tn-sorun { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.tn-sorun li { flex: 1 1 300px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-6);
  padding: clamp(24px, 2.6vw, 32px); border-radius: var(--tn-r-kart);
  background: var(--card); border: 1px solid var(--tn-kenar); box-shadow: var(--shadow-card); }
.tn-sorun-soz { margin: 0; font-size: clamp(18px, 1.6vw, 21px); font-weight: 500; letter-spacing: -.02em; line-height: 1.35; }
.tn-sorun-cevap { margin: 0; display: flex; gap: 12px; padding-top: var(--sp-5); border-top: 1px solid var(--tn-kenar);
  font-size: var(--fs-md); line-height: 1.55; color: var(--muted); }
.tn-sorun-cevap svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.tn-sorun-cevap b { color: var(--text); font-weight: 600; }

/* ================= 3. YONTEM ================= */
.tn-sira { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 6vw, 96px); }
.tn-sira + .tn-sira { margin-top: clamp(56px, 8vw, 112px); }
.tn-sira--ters { flex-direction: row-reverse; }
.tn-sira-metin { flex: 1 1 360px; min-width: 0; }
.tn-sira-gorsel { flex: 1 1 440px; min-width: 0; padding: clamp(20px, 4vw, 48px); border-radius: 28px;
  background: var(--cip-yuzey); border: 1px solid var(--tn-kenar); }
.tn-sira-no { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-full);
  border: 1px solid var(--accent-ring); color: var(--accent); font-size: var(--fs-sm); font-weight: 600;
  font-variant-numeric: tabular-nums; margin-bottom: var(--sp-5); }
.tn-sira h3 { margin: 0 0 var(--sp-3); font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.03em; line-height: 1.12; }
.tn-sira-metin p { margin: 0; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.65; color: var(--muted); }
.tn-madde { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.tn-madde li { display: flex; align-items: center; gap: 12px; font-size: var(--fs-md); color: var(--text); }
.tn-madde svg { width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }

/* ---- arayuz ornekleri (sus; aria-hidden) ---- */
.tn-mock { background: var(--card); border: 1px solid var(--tn-kenar); border-radius: 18px;
  padding: clamp(18px, 2.4vw, 28px); box-shadow: var(--shadow-card); }
.tn-mock-bas { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.tn-cip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-full);
  background: var(--accent-soft); color: var(--accent); font-size: var(--fs-sm); font-weight: 500; }
.tn-cip svg { width: 14px; height: 14px; }
.tn-cip--seviye { background: var(--card2); color: var(--muted); border: 1px solid var(--line); }
.tn-cip--ok { background: var(--ok-soft); color: var(--ok); }
.tn-mk-kelime { margin: 0; font-size: clamp(30px, 3.2vw, 40px); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; }
.tn-mk-kelime--kucuk { font-size: 24px; }
.tn-mk-kelime small { font-size: var(--fs-md); font-weight: 400; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.tn-mk-okunus { margin: 10px 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--fs-kontrol); color: var(--faint); }
.tn-mk-tr { color: var(--okunus); font-weight: 600; letter-spacing: .02em; }
.tn-mk-anlam { margin: 0; font-size: var(--fs-md); color: var(--muted); }
.tn-mk-ornek { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--tn-kenar); display: flex; gap: 12px; align-items: center; }
.tn-mk-ses { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--ink-ters);
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.tn-mk-ses svg { width: 18px; height: 18px; }
.tn-mk-ornek b { display: block; font-size: var(--fs-md); font-weight: 500; }
.tn-mk-ornek small { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }

.tn-mock-diyalog { display: flex; flex-direction: column; gap: 10px; }
.tn-mock-diyalog .tn-mock-bas { margin-bottom: 6px; }
.tn-balon { max-width: 86%; padding: 10px 14px; border-radius: 16px; }
.tn-balon b { display: block; font-size: var(--fs-kontrol); font-weight: 500; line-height: 1.4; }
.tn-balon small { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.tn-balon--o { align-self: flex-start; background: var(--card2); border: 1px solid var(--tn-kenar); border-bottom-left-radius: 6px; }
.tn-balon--m { align-self: flex-end; background: var(--accent); color: var(--ink-ters); border-bottom-right-radius: 6px; }
.tn-kurulan { display: flex; flex-wrap: wrap; gap: 6px; align-self: stretch; padding: 10px; border-radius: 12px;
  border: 1.5px dashed var(--accent-ring); background: var(--accent-soft); margin-top: 4px; }
.tn-kurulan--havuz { border-color: transparent; background: transparent; padding: 0 10px; margin-top: 0; }
.tn-mock .tn-tas { min-height: 36px; padding: 0 12px; font-size: var(--fs-kontrol); border-radius: 9px;
  --dm-tas-cizgi: var(--chip-line); --dm-kagit: var(--card); --dm-ink: var(--text); }
.tn-tas--bos { width: 56px; border-style: dashed; border-color: var(--line-strong); background: transparent; box-shadow: none; }

.tn-zaman { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.tn-zaman li { position: relative; padding-top: 26px; padding-right: 6px; }
.tn-zaman li::before { content: ''; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--line-strong); z-index: 1; }
.tn-zaman li::after { content: ''; position: absolute; left: 16px; right: 0; top: 7px; height: 2px; background: var(--line); }
.tn-zaman li:last-child::after { display: none; }
.tn-zaman li.tamam::before { background: var(--ok); border-color: var(--ok); }
.tn-zaman li.tamam::after { background: var(--ok); }
.tn-zaman li.sira::before { border-color: var(--accent); background: var(--accent-soft); }
.tn-zaman b { display: block; font-size: var(--fs-kontrol); font-weight: 500; font-variant-numeric: tabular-nums; }
.tn-zaman small { display: block; font-size: var(--fs-sm); color: var(--muted); }
.tn-egri { margin-top: var(--sp-6); padding: 14px 16px; border-radius: 14px; background: var(--card2); border: 1px solid var(--tn-kenar); }
.tn-egri span { font-size: var(--fs-sm); color: var(--muted); }
.tn-egri-cubuklar { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-top: 10px; }
.tn-egri-cubuklar i { flex: 1; border-radius: 4px 4px 0 0; background: var(--ilerleme-ogren); }
.tn-egri-cubuklar i:nth-child(1) { height: 92%; } .tn-egri-cubuklar i:nth-child(2) { height: 58%; background: var(--warn); }
.tn-egri-cubuklar i:nth-child(3) { height: 95%; } .tn-egri-cubuklar i:nth-child(4) { height: 74%; background: var(--warn); }
.tn-egri-cubuklar i:nth-child(5) { height: 96%; } .tn-egri-cubuklar i:nth-child(6) { height: 86%; }
.tn-egri-cubuklar i:nth-child(7) { height: 97%; } .tn-egri-cubuklar i:nth-child(8) { height: 93%; }

/* ================= 4. BECERI IZGARASI ================= */
/* Sabit sutunlu grid (auto-fill DEGIL — son satir yarim kalmasin). */
.tn-izgara { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4);
  grid-template-columns: 1.25fr 1fr 1fr; }
.tn-kutu { display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 32px); border-radius: var(--tn-r-kart);
  background: var(--card); border: 1px solid var(--tn-kenar); box-shadow: var(--shadow-card); min-width: 0; }
.tn-kutu--genis { grid-row: span 2; }
.tn-izgara > .tn-kutu:last-child { grid-column: 1 / -1; }
.tn-kutu-ikon { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; }
.tn-kutu-ikon svg { width: 22px; height: 22px; }
.tn-kutu h3 { margin: var(--sp-5) 0 6px; font-size: 19px; letter-spacing: -.02em; }
.tn-kutu p { margin: 0; font-size: var(--fs-md); line-height: 1.6; color: var(--muted); }
.tn-kutu--koyu { background: var(--tv-gece); border-color: var(--tv-cizgi); color: var(--tv-ink); }
.tn-kutu--koyu .tn-kutu-ikon { background: var(--tv-vurgu-yumusak); color: var(--tv-vurgu); }
.tn-kutu--koyu h3 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.03em; }
.tn-kutu--koyu p { color: var(--tv-govde); margin-bottom: var(--sp-6); }
.tn-soyle { margin-top: auto; padding: 16px; border-radius: 16px; background: var(--tv-plaka); border: 1px solid var(--tv-cizgi);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tn-soyle span { padding: 4px 9px; border-radius: 8px; font-size: var(--fs-md); font-weight: 500; }
.tn-soyle .iyi { color: var(--tv-ok); background: var(--tv-ok-yumusak); }
.tn-soyle .eksik { color: var(--tv-vurgu-2); background: var(--tv-vurgu-yumusak); text-decoration: underline dotted; text-underline-offset: 4px; }
.tn-soyle-puan { margin-left: auto; font-size: 26px; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--tv-ink); }
/* Genis son kutu: metin solda, ilerleme ornegi sagda */
.tn-kutu--yatay { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-6) clamp(24px, 4vw, 56px); }
.tn-kutu--yatay > div:first-child { flex: 1 1 280px; min-width: 0; }
.tn-kutu--yatay h3 { margin-top: var(--sp-4); }
.tn-bant { flex: 1.4 1 340px; min-width: 0; }
.tn-bant-cubuk { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 3px; }
.tn-bant-cubuk i { display: block; }
.tn-bant-cubuk i:nth-child(1) { flex: 46; background: var(--ilerleme-ogren); }
.tn-bant-cubuk i:nth-child(2) { flex: 31; background: var(--ilerleme-yolda); }
.tn-bant-cubuk i:nth-child(3) { flex: 23; background: var(--ilerleme-yeni); }
.tn-bant-lejant { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.tn-bant-lejant li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-base); color: var(--muted); }
.tn-bant-lejant li::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--ilerleme-ogren); }
.tn-bant-lejant li:nth-child(2)::before { background: var(--ilerleme-yolda); }
.tn-bant-lejant li:nth-child(3)::before { background: var(--ilerleme-yeni); }
.tn-basamak { display: flex; gap: 6px; margin-top: var(--sp-5); }
.tn-basamak span { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 600; border: 1px solid var(--line); color: var(--muted); }
.tn-basamak span:first-child { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.tn-basamak span:nth-child(2) { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-ring); }

/* ================= 5. KIMIN ICIN ================= */
.tn-kim { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.tn-kim > li { flex: 1 1 250px; display: flex; flex-direction: column; padding: clamp(22px, 2.2vw, 28px); border-radius: var(--tn-r-kart);
  background: var(--card); border: 1px solid var(--tn-kenar); box-shadow: var(--shadow-card); min-width: 0; }
.tn-kim-ikon { width: 48px; height: 48px; border-radius: 14px; background: var(--tv-gece); color: var(--tv-vurgu);
  display: inline-flex; align-items: center; justify-content: center; }
.tn-kim-ikon svg { width: 22px; height: 22px; }
.tn-kim h3 { margin: var(--sp-5) 0 6px; font-size: 19px; letter-spacing: -.02em; }
.tn-kim p { margin: 0 0 var(--sp-4); font-size: var(--fs-base); line-height: 1.6; color: var(--muted); }
.tn-kim-liste { list-style: none; margin: auto 0 0; padding: 0; }
.tn-kim-liste a { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 46px;
  border-top: 1px solid var(--tn-kenar); color: var(--text); text-decoration: none; font-size: var(--fs-base); font-weight: 500; }
.tn-kim-liste a:hover { color: var(--accent); }
.tn-kim-liste small, .tn-liste small { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border-radius: var(--r-full); background: var(--card2); border: 1px solid var(--line); color: var(--muted);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; }

/* ================= 6. ORTAMLAR (SEO:ORTAMLAR) ================= */
.tn-bag { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tn-bag li { flex: 1 1 230px; min-width: 0; }
/* Ikon solda iki satir boyu; ad ustte, kelime sayisi altta — uzun ortam
   adi uc satira bolunup kartlari farkli boya itmesin. */
.tn-bag a { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 1px;
  align-items: center; min-height: 64px; padding: 11px 16px 11px 11px; border-radius: 14px;
  border: 1px solid var(--tn-kenar); background: var(--card); color: var(--text); text-decoration: none;
  font-size: var(--fs-kontrol); font-weight: 500; transition: transform var(--mo-hizli) var(--mo-cikis); }
.tn-bag a:hover { border-color: var(--accent); transform: translateY(-1px); }
.tn-bag a > svg { grid-row: 1 / 3; width: 40px; height: 40px; padding: 10px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.tn-bag a > span { align-self: end; line-height: 1.3; }
.tn-bag small { align-self: start; color: var(--faint); font-size: var(--fs-sm); font-weight: 400; font-variant-numeric: tabular-nums; }

/* ================= 7. KARSILASTIRMA ================= */
.tn-tablo-kap { border-radius: var(--tn-r-kart); border: 1px solid var(--tn-kenar); background: var(--card);
  box-shadow: var(--shadow-card); overflow-x: auto; overscroll-behavior-x: contain; }
.tn-tablo { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--fs-kontrol); }
.tn-tablo th, .tn-tablo td { padding: 16px 18px; text-align: center; border-top: 1px solid var(--tn-kenar); }
.tn-tablo thead th { border-top: 0; font-size: var(--fs-base); font-weight: 600; color: var(--muted); padding-top: 20px; padding-bottom: 20px; }
.tn-tablo tbody th { text-align: left; font-weight: 500; color: var(--text); width: 30%; }
.tn-tablo th[scope="row"], .tn-tablo thead th:first-child { position: sticky; left: 0; background: var(--card); z-index: 1; }
.tn-tablo .tn-biz { background: var(--accent-soft); }
.tn-tablo thead .tn-biz { color: var(--accent); font-size: var(--fs-md); }
.tn-tablo td { color: var(--muted); }
.tn-tablo td b { color: var(--accent); font-weight: 600; }
.tn-tablo :is(.var, .yok, .kismen), .tn-tablo-not :is(.var, .yok, .kismen) { position: relative; display: inline-flex; width: 28px; height: 28px;
  border-radius: 50%; overflow: hidden; text-indent: 60px; white-space: nowrap; vertical-align: middle; }
:is(.tn-tablo, .tn-tablo-not) :is(.var, .yok, .kismen)::before { position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; text-indent: 0; font-size: 15px; font-weight: 600; }
:is(.tn-tablo, .tn-tablo-not) .var { background: var(--ok-soft); color: var(--ok); } :is(.tn-tablo, .tn-tablo-not) .var::before { content: '✓'; }
:is(.tn-tablo, .tn-tablo-not) .yok { background: var(--card2); color: var(--faint); } :is(.tn-tablo, .tn-tablo-not) .yok::before { content: '✗'; }
:is(.tn-tablo, .tn-tablo-not) .kismen { background: var(--warn-soft); color: var(--warn-ink); } :is(.tn-tablo, .tn-tablo-not) .kismen::before { content: '~'; }
/* genis tablo: bes sutun uygulama turu, grup satirlari, ipucu satirlari */
.tn-tablo--genis { min-width: 920px; table-layout: fixed; }
.tn-tablo--genis thead th:first-child, .tn-tablo--genis tbody th[scope="row"] { width: 27%; }
.tn-tablo--genis thead th { vertical-align: bottom; line-height: 1.35; }
.tn-tablo th small { display: block; margin-top: 4px; font-size: var(--fs-xs); font-weight: 400; color: var(--faint); line-height: 1.4; letter-spacing: 0; }
.tn-tablo thead .tn-biz small { color: var(--accent); opacity: .8; }
.tn-tablo tbody th[scope="row"] { line-height: 1.4; }
.tn-tablo-grup th { padding: 22px 18px 8px; text-align: left; border-top: 1px solid var(--tn-kenar); background: var(--card); }
.tn-tablo-grup th > span { position: sticky; left: 18px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-kas);
  text-transform: uppercase; color: var(--accent); }
.tn-tablo-grup + tr > * { border-top: 0; }
.tn-tablo .tn-tablo-grup th.tn-biz, .tn-tablo-grup th { background: var(--card); }
.tn-tablo-fiyat td { font-size: var(--fs-sm); line-height: 1.45; }
.tn-tablo-fiyat td b { font-size: var(--fs-md); }
.tn-tablo thead .tn-biz { border-radius: 14px 14px 0 0; box-shadow: inset 0 3px 0 var(--accent); }
.tn-tablo-not { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; margin: var(--sp-4) 0 0;
  font-size: var(--fs-sm); color: var(--faint); text-align: center; }
.tn-lej { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; white-space: nowrap; }
.tn-lej-not { flex: 1 1 100%; }
.tn-tablo-not :is(.var, .yok, .kismen) { width: 22px; height: 22px; }
.tn-tablo-not :is(.var, .yok, .kismen)::before { font-size: 12px; }

/* ================= 8. FIYAT ================= */
.tn-plan { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-5); }
.tn-plan-kart { flex: 1 1 340px; max-width: 540px; display: flex; flex-direction: column; min-width: 0;
  padding: clamp(24px, 3vw, 40px); border-radius: 24px; background: var(--card);
  border: 1px solid var(--tn-kenar); box-shadow: var(--shadow-card); }
.tn-plan-kart--one { border: 2px solid var(--accent); }
.tn-plan-kart--premium { background: var(--tv-gece); border-color: var(--tv-cizgi); color: var(--tv-ink); }
.tn-plan-etiket { margin: 0 0 var(--sp-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-kas);
  text-transform: uppercase; color: var(--accent); min-height: 24px; display: flex; align-items: center; }
.tn-yakinda { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-full);
  background: var(--tv-vurgu-yumusak); color: var(--tv-vurgu-2); }
.tn-plan-kart h3 { margin: 0; font-size: 24px; letter-spacing: -.025em; }
.tn-plan-fiyat { margin: var(--sp-3) 0 var(--sp-6); display: flex; flex-direction: column; gap: 4px; }
.tn-plan-fiyat b { font-size: clamp(40px, 4.4vw, 54px); font-weight: 500; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.tn-plan-fiyat span { font-size: var(--fs-base); color: var(--muted); }
.tn-plan-kart--premium .tn-plan-fiyat span { color: var(--tv-govde); }
.tn-plan-liste { list-style: none; margin: var(--sp-6) 0 0; padding: var(--sp-6) 0 0; border-top: 1px solid var(--tn-kenar);
  display: flex; flex-direction: column; gap: var(--sp-3); }
.tn-plan-kart--premium .tn-plan-liste { border-top-color: var(--tv-cizgi); }
.tn-plan-liste li { display: flex; gap: 10px; font-size: var(--fs-md); line-height: 1.45; }
/* "ucretsiz dene" — hesap acinca deneme hakki olan Premium ozelligi (029).
   Sayi YAZILMAZ: limit api/src/ai-izin.js DENEME'de, SSS onu ureteçten basar. */
.tn-dene { flex: none; align-self: flex-start; margin: 2px 0 0 auto; display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.tn-plan-liste svg { width: 20px; height: 20px; color: var(--ok); margin-top: 1px; }
.tn-plan-kart--premium .tn-plan-liste svg { color: var(--tv-vurgu); }
.tn-plan-not { margin: auto 0 0; padding-top: var(--sp-6); font-size: var(--fs-base); color: var(--tv-govde); line-height: 1.55; }
.tn-soz { list-style: none; margin: var(--sp-8) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3) var(--sp-8); }
.tn-soz li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-kontrol); color: var(--muted); }
.tn-soz svg { width: 18px; height: 18px; color: var(--ok); }

/* ================= 9. UCRETSIZ ICERIK ================= */
.tn-iki { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.tn-liste-kart { flex: 1 1 380px; min-width: 0; padding: 8px clamp(20px, 2.4vw, 28px) 16px; border-radius: var(--tn-r-kart);
  background: var(--card); border: 1px solid var(--tn-kenar); box-shadow: var(--shadow-card); }
.tn-liste-kart h3 { margin: 0; min-height: 60px; display: flex; align-items: center; gap: 10px; font-size: 18px; letter-spacing: -.02em; }
.tn-liste-kart h3 svg { width: 20px; height: 20px; color: var(--accent); }
.tn-liste { list-style: none; margin: 0; padding: 0; }
.tn-liste a { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 50px; border-top: 1px solid var(--tn-kenar); color: var(--text); text-decoration: none; font-size: var(--fs-md); }
.tn-liste a:hover { color: var(--accent); }
.tn-hepsi, .tn-ek-bag a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: var(--sp-2);
  color: var(--accent); font-weight: 600; font-size: var(--fs-kontrol); text-decoration: none; }
.tn-ek-bag { margin: var(--sp-4) 0 0; text-align: center; }

/* ================= 10. SSS (SEO:SSS) ================= */
.tn-sss-bolum { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(32px, 6vw, 96px); }
.tn-sss-yan { flex: 1 1 300px; min-width: 0; }
.tn-sss-yan .tn-bas-alt { margin-bottom: var(--sp-6); }
.tn-sss { flex: 2 1 480px; min-width: 0; border-top: 1px solid var(--line); }
.tn-sss details { border-bottom: 1px solid var(--line); }
.tn-sss summary { min-height: 68px; padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  cursor: pointer; font-size: clamp(15px, 1.3vw, 17px); font-weight: 500; letter-spacing: -.01em; list-style: none; }
.tn-sss summary::-webkit-details-marker { display: none; }
.tn-sss summary::after { content: '+'; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 300; color: var(--accent);
  transition: transform var(--mo-orta) var(--mo-cikis); }
.tn-sss details[open] summary::after { transform: rotate(45deg); }
.tn-sss summary:hover { color: var(--accent); }
.tn-sss p { margin: 0 0 var(--sp-6); padding-right: 48px; color: var(--muted); font-size: var(--fs-md); line-height: 1.7; }

/* ================= 11. KAPANIS ================= */
.tn-son { margin-top: var(--tn-bolum); position: relative; overflow: hidden; text-align: center;
  padding: clamp(48px, 8vw, 112px) clamp(20px, 5vw, 64px); border-radius: 28px;
  background: var(--tv-gece); border: 1px solid var(--tv-cizgi); color: var(--tv-ink); }
.tn-son-glif { position: absolute; width: clamp(240px, 32vw, 420px); height: clamp(240px, 32vw, 420px);
  right: clamp(-120px, -6vw, -40px); bottom: clamp(-140px, -8vw, -60px); color: var(--tv-vurgu); opacity: .07; pointer-events: none; }
.tn-son > :not(.tn-son-glif) { position: relative; }
.tn-son .tn-kas::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .45; }
.tn-son h2 { font-size: clamp(30px, 4.6vw, 58px); letter-spacing: -.038em; max-width: 880px; margin-left: auto; margin-right: auto; }
.tn-son p:not(.tn-kas) { margin: 0 auto var(--sp-8); color: var(--tv-govde); font-size: clamp(15px, 1.3vw, 17px); }

/* ================= ALT BILGI ================= */
.tn-alt-bilgi { margin-top: clamp(64px, 8vw, 112px); border-top: 1px solid var(--line); }
.tn-alt-ic { display: flex; flex-wrap: wrap; gap: var(--sp-8) clamp(32px, 5vw, 64px); padding-top: clamp(40px, 5vw, 56px); padding-bottom: var(--sp-8); }
.tn-alt-marka { flex: 2 1 280px; min-width: 0; }
.tn-alt-marka p { margin: var(--sp-3) 0 0; color: var(--muted); font-size: var(--fs-base); line-height: 1.6; }
.tn-alt-sutun { flex: 1 1 150px; display: flex; flex-direction: column; align-items: flex-start; }
.tn-alt-sutun > p { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-kas);
  text-transform: uppercase; color: var(--faint); }
.tn-alt-sutun a, .tn-alt-dugme { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0; border: 0; background: none;
  color: var(--muted); font: inherit; font-size: var(--fs-kontrol); text-decoration: none; cursor: pointer; }
.tn-alt-sutun a:hover, .tn-alt-dugme:hover { color: var(--accent); }
.tn-alt-son { padding-bottom: var(--sp-6); }
.tn-alt-son p { margin: 0; padding-top: var(--sp-5); border-top: 1px solid var(--line-zayif); color: var(--faint); font-size: var(--fs-sm); }

/* ================= TELEFON YAPISKAN CAGRISI ================= */
.tn-yapiskan { display: none; }

/* ================= GORUNME HAREKETI (yalniz JS varken) ================= */
.tn [data-gor] { transition: opacity var(--mo-yavas) var(--mo-cikis), transform var(--mo-yavas) var(--mo-cikis); }
.tn.tn-canli [data-gor]:not(.gor) { opacity: 0; transform: translateY(16px); }

/* ================= DUYARLI ================= */
@media (max-width: 1100px) {
  .tn-gez { display: none; }
  .tn-ust-eylem { margin-left: auto; }
}
@media (max-width: 1023px) {
  .tn-izgara { grid-template-columns: 1fr 1fr; }
  .tn-kutu--genis { grid-row: auto; grid-column: 1 / -1; }
  .tn-demo { max-width: 560px; margin: 0 auto; }
}
@media (max-width: 940px) {
  .tn-ust-ic { min-height: 60px; gap: var(--sp-3); }
  .tn-sss-yan { flex-basis: 100%; }
  .tn-yapiskan { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px var(--tn-yan) calc(10px + env(safe-area-inset-bottom));
    background: var(--page-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line); transform: translateY(110%);
    transition: transform var(--mo-yavas) var(--mo-cikis); }
  .tn-yapiskan[hidden] { display: none; }
  .tn-yapiskan.acik { transform: translateY(0); }
  .tn.tn-canli { padding-bottom: 76px; }
}
@media (max-width: 640px) {
  .tn-izgara { grid-template-columns: 1fr; }
  .tn-vitrin { margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
  .tn-eylem .tn-btn { flex: 1 1 100%; }
  .tn-olcu > div { flex: 1 1 40%; border-left: 0; padding: 10px 0; }
  .tn-olcu > div:nth-child(n+3) { border-top: 1px solid var(--tv-cizgi); }
  .tn-sira-gorsel { border-radius: 20px; }
  .tn-bag li { flex-basis: 150px; }
  .tn-bag a { grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; padding: 10px 12px 10px 10px; }
  .tn-bag a > svg { width: 34px; height: 34px; padding: 8px; }
  .tn-tablo { min-width: 560px; font-size: var(--fs-base); }
  .tn-tablo th, .tn-tablo td { padding: 14px 12px; }
  .tn-tablo tbody th { width: 150px; }
  .tn-tablo--genis { min-width: 780px; }
  .tn-tablo--genis thead th:first-child, .tn-tablo--genis tbody th[scope="row"] { width: 176px; }
  .tn-tablo-grup th { padding: 18px 12px 6px; }
  .tn-tablo-grup th > span { left: 12px; }
  .tn-sss p { padding-right: 0; }
  .tn-son { border-radius: 20px; }
  .tn-son .tn-btn { flex: 1 1 100%; }
  .tn-plan-kart { flex-basis: 100%; }
}
@media (max-width: 440px) {
  .tn-ust-cta { display: none; }
  .tn-zaman b { font-size: var(--fs-sm); }
  .tn-mock .tn-tas { padding: 0 10px; }
}
/* Telefonda tablo yana kayar; bunu soyleyen tek satir (masaustunde yok) */
.tn-kaydir { display: none; }
@media (max-width: 1000px) {
  .tn-kaydir { display: block; margin: var(--sp-3) 0 0; text-align: center; font-size: var(--fs-sm); color: var(--faint); }
}
/* Genis ekranda sutun bir adim buyur (bosluk simetrik kalir) */
@media (min-width: 1800px) { .tn { --tn-kap: 1320px; } }

/* Giris ekranindan tanitima donus baglantisi (auth.js) */
.auth-tanitim { display: flex; align-items: center; justify-content: flex-start; min-height: 44px; margin-top: var(--sp-1);
  color: var(--g-bakir, var(--accent)); font-size: var(--fs-kontrol); font-weight: 500; text-decoration: none; }
.auth-tanitim:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Telefonda .auth-switch yatay flex: baglanti kendi satirina iner, ortali */
@media (max-width: 940px) {
  .auth-split .auth-switch { flex-wrap: wrap; }
  .auth-tanitim { flex-basis: 100%; justify-content: center; margin-top: 0; }
}

/* =====================================================================
   FAZ 1 — ZENGINLESTIRME (30 Eyl 2026)
   HAREKET ISTISNASI (kullanici onayi): uygulamanin 150–300ms kurali
   ekranlar icin; TANITIMDA giris/gorunme hareketi 800ms'ye kadar cikar.
   Yine yalniz transform + opacity animasyonla (renk degisimi gecikmeli
   ama SURESIZ — ara kare cizilmez). prefers-reduced-motion: style.css
   butun sureleri 1ms'ye indirir; tanitim.js ayrica otomatik oynatmayi,
   sayaclari ve gorunme gizlemesini hic baslatmaz.
   ===================================================================== */
.tn { --tn-sure: 700ms; --tn-sure-kisa: 420ms; }

/* ---- vitrin acilisi: saf CSS, JS beklemez ---- */
@keyframes tn-yuksel { from { opacity: 0; transform: translateY(18px); } }
@keyframes tn-sahne { from { opacity: 0; transform: translateY(28px) scale(.97); } }
@keyframes tn-suzul { 50% { transform: translateY(-6px); } }
.tn-vitrin-metin > * { animation: tn-yuksel var(--tn-sure) var(--mo-cikis) backwards; }
.tn-vitrin-metin > :nth-child(2) { animation-delay: 60ms; }
.tn-vitrin-metin > :nth-child(3) { animation-delay: 120ms; }
.tn-vitrin-metin > :nth-child(4) { animation-delay: 200ms; }
.tn-vitrin-metin > :nth-child(5) { animation-delay: 280ms; }
.tn-vitrin-metin > :nth-child(6) { animation-delay: 340ms; }
.tn-demo-kart { animation: tn-sahne 800ms var(--mo-cikis) 240ms backwards; }
.tn-demo-yuzen--ses { animation: tn-yuksel var(--tn-sure) var(--mo-cikis) 700ms backwards, tn-suzul 6s ease-in-out 1.6s infinite; }
.tn-demo-yuzen--tekrar { animation: tn-yuksel var(--tn-sure) var(--mo-cikis) 900ms backwards, tn-suzul 7s ease-in-out 2s infinite; }
.tn-olcu { animation: tn-yuksel var(--tn-sure) var(--mo-cikis) 420ms backwards; }

/* ---- gorunme: daha genis, daha yumusak ---- */
.tn [data-gor] { transition: opacity var(--tn-sure) var(--mo-cikis), transform var(--tn-sure) var(--mo-cikis); }
.tn.tn-canli [data-gor]:not(.gor) { opacity: 0; transform: translateY(28px); }
/* Sirali listeler: kap sabit, cocuklar tek tek gelir */
.tn.tn-canli .tn-sirali[data-gor]:not(.gor) { opacity: 1; transform: none; }
.tn-sirali > * { transition: opacity var(--tn-sure) var(--mo-cikis), transform var(--tn-sure) var(--mo-cikis); }
.tn.tn-canli .tn-sirali:not(.gor) > * { opacity: 0; transform: translateY(24px); }
.tn-sirali > :nth-child(2) { transition-delay: 70ms; }
.tn-sirali > :nth-child(3) { transition-delay: 140ms; }
.tn-sirali > :nth-child(4) { transition-delay: 210ms; }
.tn-sirali > :nth-child(5) { transition-delay: 280ms; }
.tn-sirali > :nth-child(6) { transition-delay: 340ms; }
.tn-sirali > :nth-child(n+7) { transition-delay: 400ms; }
.tn-bag.tn-sirali > * { transition-duration: var(--tn-sure-kisa); }
/* Gorunme bitince (tanitim.js .tn-bitti basar) kartlarin kendi hover
   transform'u gecikmesiz ve kisa calissin. */
.tn-sirali.tn-bitti > * { transition: transform var(--mo-hizli) var(--mo-cikis); transition-delay: 0ms; }

/* ---- yontem: arayuz ornekleri kendini kurar ---- */
.tn-balon, .tn-kurulan { transition: opacity var(--tn-sure-kisa) var(--mo-cikis), transform var(--tn-sure-kisa) var(--mo-cikis); }
.tn.tn-canli .tn-sira:not(.gor) .tn-balon, .tn.tn-canli .tn-sira:not(.gor) .tn-kurulan { opacity: 0; transform: translateY(10px); }
.tn-mock-diyalog > :nth-child(2) { transition-delay: 250ms; }
.tn-mock-diyalog > :nth-child(3) { transition-delay: 650ms; }
.tn-mock-diyalog > :nth-child(4) { transition-delay: 1050ms; }
.tn-mock-diyalog > :nth-child(5) { transition-delay: 1350ms; }
.tn-mock-diyalog > :nth-child(6) { transition-delay: 1500ms; }
.tn-zaman li::before { transition: transform var(--tn-sure-kisa) var(--mo-cikis); }
.tn-zaman li::after { transform-origin: left center; transition: transform var(--tn-sure) var(--mo-cikis); }
.tn.tn-canli .tn-sira:not(.gor) .tn-zaman li::before { transform: scale(0); }
.tn.tn-canli .tn-sira:not(.gor) .tn-zaman li::after { transform: scaleX(0); }
.tn-zaman li:nth-child(1)::before { transition-delay: 200ms; }
.tn-zaman li:nth-child(1)::after { transition-delay: 300ms; }
.tn-zaman li:nth-child(2)::before { transition-delay: 700ms; }
.tn-zaman li:nth-child(2)::after { transition-delay: 800ms; }
.tn-zaman li:nth-child(3)::before { transition-delay: 1200ms; }
.tn-zaman li:nth-child(3)::after { transition-delay: 1300ms; }
.tn-zaman li:nth-child(4)::before { transition-delay: 1700ms; }
.tn-egri-cubuklar i { transform-origin: bottom center; transition: transform var(--tn-sure) var(--mo-cikis); }
.tn.tn-canli .tn-sira:not(.gor) .tn-egri-cubuklar i { transform: scaleY(0); }
.tn-egri-cubuklar i:nth-child(1) { transition-delay: 300ms; }
.tn-egri-cubuklar i:nth-child(2) { transition-delay: 380ms; }
.tn-egri-cubuklar i:nth-child(3) { transition-delay: 460ms; }
.tn-egri-cubuklar i:nth-child(4) { transition-delay: 540ms; }
.tn-egri-cubuklar i:nth-child(5) { transition-delay: 620ms; }
.tn-egri-cubuklar i:nth-child(6) { transition-delay: 700ms; }
.tn-egri-cubuklar i:nth-child(7) { transition-delay: 780ms; }
.tn-egri-cubuklar i:nth-child(8) { transition-delay: 860ms; }
.tn-bant-cubuk i { transform-origin: left center; transition: transform 900ms var(--mo-cikis) 300ms; }
.tn.tn-canli .tn-izgara:not(.gor) .tn-bant-cubuk i { transform: scaleX(0); }

/* ---- "Dinle ve soyle": kelimeler konusma tanima gibi tek tek yanar.
   Renk SURESIZ degisir (yalniz gecikme var, ara kare cizilmez). ---- */
.tn-soyle span { transition: color 0s linear var(--d, 0ms), background-color 0s linear var(--d, 0ms); }
.tn.tn-canli .tn-izgara:not(.gor) .tn-soyle span { color: var(--tv-govde); background: var(--tv-plaka); text-decoration: none; }
.tn-soyle span:nth-child(1) { --d: 500ms; }
.tn-soyle span:nth-child(2) { --d: 720ms; }
.tn-soyle span:nth-child(3) { --d: 940ms; }
.tn-soyle span:nth-child(4) { --d: 1160ms; }
.tn-soyle span:nth-child(5) { --d: 1380ms; }
.tn-soyle span:nth-child(6) { --d: 1600ms; }

/* ---- kisi secici (vitrin) ---- */
.tn-kisi { margin: 0 0 var(--sp-6); }
.tn-kisi[hidden] { display: none; }
.tn-kisi-soru { display: block; margin-bottom: 10px; font-size: var(--fs-sm); color: var(--tv-govde); }
.tn-kisi-secenek { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tn-kisi button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px;
  border-radius: var(--r-full); border: 1px solid var(--tv-cizgi); background: var(--tv-plaka); color: var(--tv-ink);
  font: inherit; font-size: var(--fs-kontrol); font-weight: 500; cursor: pointer;
  transition: transform var(--mo-hizli) var(--mo-cikis); }
.tn-kisi button svg { width: 16px; height: 16px; color: var(--tv-vurgu); }
.tn-kisi button:hover { border-color: var(--tv-kenar); }
.tn-kisi button:active { transform: scale(.97); }
.tn-kisi button[aria-pressed="true"] { background: var(--tv-vurgu); border-color: var(--tv-vurgu); color: var(--tv-gece); }
.tn-kisi button[aria-pressed="true"] svg { color: var(--tv-gece); }
.tn-kisi button:focus-visible { outline: 2px solid var(--tv-vurgu); outline-offset: 3px; }
/* JS varken secici rozetin yerini alir */
.tn-canli .tn-rozet { display: none; }
/* degisen metin: kisa cikis, yumusak giris */
/* YALNIZ OPAKLIK — yer degistirme yok (kullanici: "asagi inip yukari
   cikiyor"). Yukseklik tanitim.js yerAyir() ile sabit. */
.tn-degis { transition: opacity 180ms var(--mo-cikis); }
.tn-degis.cikiyor { opacity: 0; }

/* "Kimin icin" secili kart */
.tn-kim > li { position: relative; }
.tn-kim-etiket { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: var(--r-full); background: var(--accent); color: var(--ink-ters); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .04em; opacity: 0; transform: scale(.9); transition: opacity var(--mo-orta) var(--mo-cikis), transform var(--mo-orta) var(--mo-cikis); }
.tn-kim > li.secili { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-card); }
.tn-kim > li.secili .tn-kim-etiket { opacity: 1; transform: none; }

/* ---- demo: sahne gecisi ve otomatik oynatma ---- */
.tn-demo-govde { transition: opacity 260ms var(--mo-cikis), transform 260ms var(--mo-cikis); }
.tn-demo-govde.cikiyor { opacity: 0; transform: translateX(-14px); }
.tn-demo-govde.giriyor { opacity: 0; transform: translateX(14px); transition: none; }
.tn-demo-cubuk i { width: 100%; transform-origin: left center; transform: scaleX(.3); transition: transform 600ms var(--mo-cikis); }
.tn-demo-kart.oto .tn-demo-sonuc::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dm-bakir); flex: none;
  animation: tn-nabiz 1.4s ease-in-out infinite; }
@keyframes tn-nabiz { 50% { opacity: .25; transform: scale(.7); } }
.tn-demo-kart.dogru .tn-demo-cevap .tn-tas { animation: tn-onay 420ms var(--mo-cikis) backwards; }
.tn-demo-kart.dogru .tn-demo-cevap .tn-tas:nth-child(2) { animation-delay: 40ms; }
.tn-demo-kart.dogru .tn-demo-cevap .tn-tas:nth-child(3) { animation-delay: 80ms; }
.tn-demo-kart.dogru .tn-demo-cevap .tn-tas:nth-child(4) { animation-delay: 120ms; }
.tn-demo-kart.dogru .tn-demo-cevap .tn-tas:nth-child(5) { animation-delay: 160ms; }
.tn-demo-kart.dogru .tn-demo-cevap .tn-tas:nth-child(6) { animation-delay: 200ms; }
.tn-demo-kart.dogru .tn-demo-cevap .tn-tas:nth-child(7) { animation-delay: 240ms; }
@keyframes tn-onay { 40% { transform: translateY(-5px); } }
.tn-tas.ucuyor { position: relative; z-index: 2; }

/* ---- mini seviye testi ---- */
.tn-test-bolum { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 6vw, 96px); }
.tn-test-metin { flex: 1 1 340px; min-width: 0; }
.tn-test { flex: 1 1 440px; min-width: 0; position: relative; padding: clamp(22px, 3vw, 36px); border-radius: 24px;
  background: var(--card); border: 1px solid var(--tn-kenar); box-shadow: var(--shadow-card); min-height: 440px;
  display: flex; flex-direction: column; }
.tn-test-giris { margin: auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.tn-test-ikon { width: 64px; height: 64px; border-radius: 20px; background: var(--tv-gece); color: var(--tv-vurgu);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--sp-5); }
.tn-test-ikon svg { width: 28px; height: 28px; }
.tn-test-giris-bas { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -.025em; }
.tn-test-giris-alt { margin: 6px 0 var(--sp-6); color: var(--muted); font-size: var(--fs-md); }
.tn-canli .tn-test-yedek { display: none; }
.tn-test-basla[hidden] { display: none; }
.tn-test-ust { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--faint);
  font-variant-numeric: tabular-nums; }
.tn-test-cubuk { height: 4px; border-radius: 2px; background: var(--line-zayif); margin: 12px 0 clamp(24px, 3vw, 36px); overflow: hidden; }
.tn-test-cubuk i { display: block; height: 100%; width: 100%; background: var(--accent); border-radius: 2px;
  transform-origin: left center; transition: transform 500ms var(--mo-cikis); }
.tn-test-soru { animation: tn-yuksel 420ms var(--mo-cikis) backwards; display: flex; flex-direction: column; flex: 1; }
.tn-test-kas { margin: 0 0 8px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-kas); text-transform: uppercase; color: var(--faint); }
.tn-test-en { margin: 0 0 var(--sp-6); font-size: clamp(21px, 2.2vw, 27px); font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.tn-test-siklar { display: flex; flex-direction: column; gap: 10px; }
.tn-test-sik { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 12px 16px;
  border-radius: 14px; border: 1px solid var(--btn-line); background: var(--card); color: var(--text); text-align: left;
  font: inherit; font-size: var(--fs-md); cursor: pointer; transition: transform var(--mo-hizli) var(--mo-cikis); }
.tn-test-sik:hover { border-color: var(--accent); }
.tn-test-sik:active { transform: scale(.99); }
.tn-test-sik:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tn-test-sik::after { content: ''; flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 600; }
.tn-test-sik.dogru { border-color: var(--ok); background: var(--ok-soft); }
.tn-test-sik.dogru::after { content: '✓'; background: var(--ok); color: var(--ink-ters); }
.tn-test-sik.yanlis { border-color: var(--bad); background: var(--bad-soft); }
.tn-test-sik.yanlis::after { content: '✗'; background: var(--bad); color: var(--ink-ters); }
.tn-test-siklar.kilit .tn-test-sik { pointer-events: none; }
.tn-test-bilmiyorum { align-self: flex-start; margin-top: 10px; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--muted); font: inherit; font-size: var(--fs-kontrol); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tn-test-sonuc { margin: auto 0; text-align: center; display: flex; flex-direction: column; align-items: center;
  animation: tn-sahne 600ms var(--mo-cikis) backwards; }
.tn-test-seviye { width: 112px; height: 112px; border-radius: 32px; background: var(--tv-gece); color: var(--tv-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: var(--sp-5); }
.tn-test-seviye b { font-size: 40px; font-weight: 500; letter-spacing: -.04em; line-height: 1; color: var(--tv-vurgu); }
.tn-test-seviye small { font-size: var(--fs-xs); letter-spacing: var(--ls-kas); text-transform: uppercase; color: var(--tv-govde); margin-top: 6px; }
.tn-test-sonuc h3 { margin: 0 0 8px; font-size: clamp(21px, 2.2vw, 26px); letter-spacing: -.025em; }
.tn-test-sonuc p { margin: 0 0 var(--sp-5); color: var(--muted); font-size: var(--fs-md); line-height: 1.6; }
.tn-test-bekleyen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: var(--sp-6); }
.tn-test-bekleyen span { display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 16px; border-radius: 14px;
  background: var(--card2); border: 1px solid var(--tn-kenar); font-size: var(--fs-base); color: var(--muted); }
.tn-test-bekleyen b { font-size: 22px; font-weight: 500; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.tn-test-sonuc .tn-test-not { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--faint); }
.tn-test-yeniden { min-height: 44px; margin-top: 4px; border: 0; background: none; color: var(--accent); font: inherit;
  font-size: var(--fs-kontrol); font-weight: 600; cursor: pointer; }
@media (max-width: 640px) {
  .tn-test { min-height: 470px; border-radius: 20px; }
  .tn-kim-etiket { top: 14px; right: 14px; }
}

/* Giris ekrani logosu tanitima baglanti (auth.js .ay-marka <a>) */
a.ay-marka { color: inherit; text-decoration: none; min-height: 44px; }
a.ay-marka:hover span { text-decoration: underline; text-underline-offset: 4px; }

/* =====================================================================
   FAZ 2 — KAYDIRMALI HIKAYE · OYNAYAN DIYALOG · IFADE SERIDI (30 Eyl 2026)
   ===================================================================== */

/* ---- kaydirmali hikaye: telefon YALNIZ genis ekran + JS'te ---- */
.tn-hikaye-sahne { display: none; }
@media (min-width: 1100px) {
  .tn-hikaye.canli { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .tn-hikaye.canli .tn-hikaye-sahne { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5);
    position: sticky; top: calc(68px + max(24px, (100vh - 68px - var(--tn-tel-h) - 64px) / 2)); }
  .tn-hikaye.canli .tn-sira-gorsel { display: none; }
  .tn-hikaye.canli .tn-sira { min-height: 78vh; flex-direction: row; align-items: center; }
  .tn-hikaye.canli .tn-sira + .tn-sira { margin-top: 0; }
  .tn-hikaye.canli .tn-sira-metin { flex-basis: 100%; transition: opacity var(--tn-sure) var(--mo-cikis); }
  .tn-hikaye.canli .tn-sira:not(.aktif) .tn-sira-metin { opacity: .32; }
}
.tn { --tn-tel-h: min(640px, calc(100vh - 150px)); }
/* GERCEK TELEFON CERCEVESI (1 Eki 2026, kullanicinin verdigi mockup):
   web/tanitim/telefon.webp 612x1284, ekran deligi SAYDAM. Delik olculdu
   (scratchpad/tanitim-cerceve.py): sol 5.882% · ust 2.103% · gen 88.399% · boy 95.794%,
   ekran orani 1 : 2,2735 — galeri goruntuleri bu orandan cekilir
   (scratchpad/tanitim-ekran.js). Kamera adasi cercevenin icinde. Cerceve
   ekranin USTUNDE (::after); icerik deligin altinda. Bu dort sayi
   --tel-* tokenlarinda TEK YERDE. */
.tn { --tel-sol: 5.882%; --tel-ust: 2.103%; --tel-gen: 88.399%; --tel-boy: 95.794%; --tel-kose: 13.3% / 5.85%;
  --tel-golge: drop-shadow(0 30px 36px rgba(15, 28, 43, .3)); }
/* koyu tema: lacivert zeminde genis yumusak golge 8 bitte HALKA HALKA bantlaniyor (olculdu) — golge yok */
:root[data-theme="dark"] .tn { --tel-golge: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tn { --tel-golge: none; } }
.tn-telefon { position: relative; height: var(--tn-tel-h); aspect-ratio: 612 / 1284; filter: var(--tel-golge); }
.tn-telefon::after, .tn-cerceve::after { content: ''; position: absolute; z-index: 4; inset: 0; pointer-events: none;
  background: url(/tanitim/telefon.webp) center / 100% 100% no-repeat; }
.tn-telefon-ekran { position: absolute; left: var(--tel-sol); top: var(--tel-ust); width: var(--tel-gen); height: var(--tel-boy);
  border-radius: var(--tel-kose); overflow: hidden; background: var(--page); }
.tn-telefon-cenk { display: none; }
/* "safe center": icerik ekrana sigarsa ortalanir, SIGMAZSA ustten baslar.
   Duz `center` uzun diyalogu YUKARI da tasiriyor ve "Konus · Diyalog"
   basliginin altina sokuyordu (kullanici bildirdi, 8 Eki 2026; olcum
   scratchpad/tanitim-telefon.js). Ilk satir safe desteklemeyen motor icin. */
.tn-ekran-kare { position: absolute; inset: 0; padding: 88px 14px 18px; display: flex; flex-direction: column;
  justify-content: flex-start; justify-content: safe center;
  opacity: 0; transform: translateY(24px) scale(.98); transition: opacity 520ms var(--mo-cikis), transform 620ms var(--mo-cikis);
  pointer-events: none; }
.tn-ekran-kare.aktif { opacity: 1; transform: none; }
.tn-ekran-kare .tn-mock { box-shadow: none; padding: 18px; }
/* Diyalog ornegi telefon ekranindan uzun — telefonda biraz sikistirilir. */
.tn-ekran-kare .tn-mock-diyalog { padding: 14px; gap: 8px; }
.tn-ekran-kare .tn-mk-kelime { font-size: 32px; }
.tn-ekran-bas { position: absolute; top: 48px; left: 18px; right: 18px; display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-sm); color: var(--faint); }
.tn-ekran-bas b { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.tn-hikaye-nokta { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-2); }
.tn-hikaye-nokta li { display: inline-flex; align-items: center; justify-content: center; height: 28px; min-width: 44px; padding: 0 10px;
  border-radius: var(--r-full); border: 1px solid var(--line); color: var(--faint); font-size: var(--fs-sm); font-weight: 600;
  font-variant-numeric: tabular-nums; transition: transform var(--mo-orta) var(--mo-cikis); }
.tn-hikaye-nokta li.aktif { background: var(--accent); border-color: var(--accent); color: var(--ink-ters); transform: scale(1.06); }
/* etkin ekranda icerik yeniden kurulur */
@keyframes tn-buyu-y { from { transform: scaleY(0); } }
@keyframes tn-buyu-x { from { transform: scaleX(0); } }
@keyframes tn-bel { from { transform: scale(0); } }
.tn-ekran-kare.aktif .tn-balon, .tn-ekran-kare.aktif .tn-kurulan { animation: tn-yuksel 480ms var(--mo-cikis) backwards; }
.tn-ekran-kare.aktif .tn-mock-diyalog > :nth-child(2) { animation-delay: 250ms; }
.tn-ekran-kare.aktif .tn-mock-diyalog > :nth-child(3) { animation-delay: 700ms; }
.tn-ekran-kare.aktif .tn-mock-diyalog > :nth-child(4) { animation-delay: 1150ms; }
.tn-ekran-kare.aktif .tn-mock-diyalog > :nth-child(5) { animation-delay: 1500ms; }
.tn-ekran-kare.aktif .tn-mock-diyalog > :nth-child(6) { animation-delay: 1650ms; }
.tn-ekran-kare.aktif .tn-egri-cubuklar i { animation: tn-buyu-y 700ms var(--mo-cikis) backwards; }
.tn-ekran-kare.aktif .tn-egri-cubuklar i:nth-child(2) { animation-delay: 80ms; }
.tn-ekran-kare.aktif .tn-egri-cubuklar i:nth-child(3) { animation-delay: 160ms; }
.tn-ekran-kare.aktif .tn-egri-cubuklar i:nth-child(4) { animation-delay: 240ms; }
.tn-ekran-kare.aktif .tn-egri-cubuklar i:nth-child(5) { animation-delay: 320ms; }
.tn-ekran-kare.aktif .tn-egri-cubuklar i:nth-child(6) { animation-delay: 400ms; }
.tn-ekran-kare.aktif .tn-egri-cubuklar i:nth-child(7) { animation-delay: 480ms; }
.tn-ekran-kare.aktif .tn-egri-cubuklar i:nth-child(8) { animation-delay: 560ms; }
.tn-ekran-kare.aktif .tn-zaman li::before { animation: tn-bel 420ms var(--mo-cikis) backwards; }
.tn-ekran-kare.aktif .tn-zaman li::after { transform-origin: left center; animation: tn-buyu-x 600ms var(--mo-cikis) backwards; }
.tn-ekran-kare.aktif .tn-zaman li:nth-child(2)::before { animation-delay: 450ms; }
.tn-ekran-kare.aktif .tn-zaman li:nth-child(2)::after { animation-delay: 500ms; }
.tn-ekran-kare.aktif .tn-zaman li:nth-child(3)::before { animation-delay: 900ms; }
.tn-ekran-kare.aktif .tn-zaman li:nth-child(3)::after { animation-delay: 950ms; }
.tn-ekran-kare.aktif .tn-zaman li:nth-child(4)::before { animation-delay: 1350ms; }
.tn-ekran-kare.aktif .tn-mk-kelime { animation: tn-yuksel 520ms var(--mo-cikis) backwards; }
.tn-ekran-kare.aktif .tn-mk-okunus { animation: tn-yuksel 520ms var(--mo-cikis) 120ms backwards; }
.tn-ekran-kare.aktif .tn-mk-ornek { animation: tn-yuksel 520ms var(--mo-cikis) 260ms backwards; }

/* ---- oynayan diyalog ---- */
.tn-dinle { margin-top: var(--sp-6); }
.tn-dinle[hidden] { display: none; }
.tn-dinle svg { width: 18px; height: 18px; color: var(--accent); }
.tn-dinle[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.tn-dinle[aria-pressed="true"] svg { animation: tn-nabiz 1.1s ease-in-out infinite; }
.tn-balon { position: relative; }
.tn-balon.caliyor { box-shadow: 0 0 0 2px var(--accent); }
.tn-balon--m.caliyor { box-shadow: 0 0 0 2px var(--accent-ring), 0 0 0 5px var(--accent-soft); }
.tn-balon.caliyor::after { content: ''; position: absolute; top: 50%; right: -18px; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: var(--accent); animation: tn-nabiz 1.1s ease-in-out infinite; }
.tn-balon--m.caliyor::after { right: auto; left: -18px; }

/* ---- ifade seridi ---- */
.tn-kayan-kap { display: flex; flex-direction: column; gap: 14px; overflow: hidden; padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tn-kayan { display: flex; width: max-content; }
.tn-kayan-ray { list-style: none; margin: 0; padding: 0 7px 0 7px; display: flex; gap: 14px; flex: none; }
.tn-kayan li { display: grid; grid-template-columns: 40px auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 1px;
  align-items: center; min-height: 64px; padding: 10px 20px 10px 12px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--tn-kenar); box-shadow: var(--shadow-card); white-space: nowrap; }
.tn-kayan li svg { grid-row: 1 / 3; width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.tn-kayan li > span { align-self: end; font-size: var(--fs-md); font-weight: 500; letter-spacing: -.01em; }
.tn-kayan li > small { align-self: start; font-size: var(--fs-sm); color: var(--faint); }
@keyframes tn-kay { to { transform: translateX(-50%); } }
.tn-kayan--sol { animation: tn-kay 70s linear infinite; }
.tn-kayan--sag { animation: tn-kay 80s linear infinite reverse; }
.tn-kayan-kap:hover .tn-kayan { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .tn-kayan-kap { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .tn-kayan { animation: none !important; }
  .tn-kayan-ray[aria-hidden="true"] { display: none; }
}

/* "Kimin icin": masaustunde 4 sutun, tablette 2x2 (3+1 yayilmasin),
   telefonda yana kayan serit — dort uzun karti alt alta dizmek sayfayi
   ~1.500px uzatiyordu. Siradaki kartin kenari gorunur: kaydirilabildigi belli. */
.tn-kim > li { flex-basis: 220px; }
@media (min-width: 641px) and (max-width: 1000px) {
  .tn-kim > li { flex-basis: calc(50% - var(--sp-2)); }
}
@media (max-width: 640px) {
  .tn-kim { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(-1 * var(--tn-yan)); padding: 4px var(--tn-yan) 12px; scroll-padding: 0 var(--tn-yan); }
  .tn-kim::-webkit-scrollbar { display: none; }
  .tn-kim > li { flex: 0 0 84%; scroll-snap-align: start; }
}

/* =====================================================================
   FAZ 3 — GERCEK EKRANLAR · YOL HARITASI (30 Eyl 2026)
   ===================================================================== */

/* ---- uygulamanin icinden: telefon cerceveli gercek ekranlar ---- */
.tn-galeri { list-style: none; margin: 0 auto; padding: 0 var(--tn-yan); max-width: calc(var(--tn-kap) + 2 * var(--tn-yan));
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); align-items: start; }
.tn-galeri > li:nth-child(even) { margin-top: clamp(24px, 4vw, 56px); }
.tn-galeri figure { margin: 0; }
.tn-cerceve { position: relative; aspect-ratio: 612 / 1284; filter: var(--tel-golge); }
.tn-cerceve img { position: absolute; left: var(--tel-sol); top: var(--tel-ust); width: var(--tel-gen); height: var(--tel-boy);
  border-radius: var(--tel-kose); object-fit: cover; object-position: top; background: var(--page); }
.tn-galeri figcaption { margin-top: var(--sp-4); text-align: center; font-size: var(--fs-base); color: var(--muted); line-height: 1.5; }
.tn-galeri figcaption b { display: block; font-size: var(--fs-md); font-weight: 600; color: var(--text); }
@media (max-width: 1000px) and (min-width: 641px) {
  .tn-galeri { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
}
@media (max-width: 640px) {
  .tn-galeri { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 4px var(--tn-yan) 16px; scroll-padding: 0 var(--tn-yan); }
  .tn-galeri::-webkit-scrollbar { display: none; }
  .tn-galeri > li { flex: 0 0 68%; scroll-snap-align: start; }
  .tn-galeri > li:nth-child(even) { margin-top: 0; }
}

/* ---- yol haritasi: MERDIVEN (1 Eki 2026) ----
   Uc basamagin tabani ayni zeminde, ustu A1'den B1'e yukselir: grid
   STRETCH + kademeli margin-top (yukseklik hesabi yok). Basamak ust
   kenarinda bakir "basamak yuzu". Gorununce alttan sirayla yukselir
   (hareket istisnasi: transform/opacity, en cok 800ms). Sayilar JS'ten. */
.tn-yol-adim { --yol-yuzey: var(--accent-soft); --basamak: clamp(40px, 5.5vw, 84px); list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); align-items: stretch; }
.tn-yol-adim > li { position: relative; display: flex; flex-direction: column; min-width: 0;
  --yol-pad: clamp(22px, 2.4vw, 32px); padding: var(--yol-pad); border-radius: var(--tn-r-kart); background: var(--card);
  border: 1px solid var(--tn-kenar); box-shadow: inset 0 3px 0 var(--accent), var(--shadow-card); overflow: hidden;
  transition: opacity 700ms var(--mo-cikis), transform 700ms var(--mo-cikis); }
.tn-yol-adim > li:nth-child(1) { margin-top: calc(2 * var(--basamak)); }
.tn-yol-adim > li:nth-child(2) { margin-top: var(--basamak); transition-delay: 150ms; }
.tn-yol-adim > li:nth-child(3) { transition-delay: 300ms; }
.tn.tn-canli .tn-yol-adim[data-gor]:not(.gor) { opacity: 1; transform: none; }
.tn.tn-canli .tn-yol-adim[data-gor]:not(.gor) > li { opacity: 0; transform: translateY(72px); }
.tn-yol-ust { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--sp-5); }
.tn-yol-rozet { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 16px; background: var(--accent); color: var(--ink-ters); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.tn-yol-ad { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-kas); text-transform: uppercase; color: var(--accent); }
.tn-yol-adim h3 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.02em; }
.tn-yol-acik { margin: 0; font-size: var(--fs-base); line-height: 1.6; color: var(--muted); }
/* o seviyede kurulan gercek cumle: konusma balonu */
.tn-yol-cumle { margin: var(--sp-5) 0 0; padding: 14px 16px; border-radius: 16px 16px 16px 4px; background: var(--yol-yuzey); }
.tn-yol-cumle blockquote { margin: 0; font-size: var(--fs-md); font-weight: 500; line-height: 1.4; color: var(--text); letter-spacing: -.01em; }
.tn-yol-cumle figcaption { margin-top: 4px; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
.tn-yol-liste { list-style: none; margin: var(--sp-5) 0 var(--sp-6); padding: 0; }
.tn-yol-liste a { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 46px;
  border-top: 1px solid var(--tn-kenar); color: var(--text); text-decoration: none; font-size: var(--fs-base); font-weight: 500; }
.tn-yol-liste a:hover { color: var(--accent); }
.tn-yol-liste small { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-full);
  background: var(--card2); border: 1px solid var(--line); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
/* basamagin GOVDESI: sayilar dibinde, bakir tonlu zemin. Basamak
   yukseldikce govde buyur (birikimli sayi) — ustte bos alan acilmaz. */
.tn-yol-sayi { flex: 1 0 auto; display: flex; align-items: flex-end; gap: var(--sp-6);
  margin: 0 calc(-1 * var(--yol-pad)) calc(-1 * var(--yol-pad)); padding: var(--sp-5) var(--yol-pad) var(--yol-pad);
  border-radius: 0 0 var(--tn-r-kart) var(--tn-r-kart); background: var(--yol-yuzey); }
.tn-yol-sayi:empty { display: none; }
.tn-yol-sayi span { display: flex; flex-direction: column; font-size: var(--fs-sm); color: var(--muted); }
.tn-yol-sayi b { font-size: 30px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
/* koyu tema: yari saydam bakir lacivertte gri-camurlu cikiyor -> ikinci yuzey */
:root[data-theme="dark"] .tn-yol-adim { --yol-yuzey: var(--card2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tn-yol-adim { --yol-yuzey: var(--card2); } }
/* dar ekran: basamaklar alt alta; merdiven sagdan girinti ile */
@media (max-width: 900px) {
  .tn-yol-adim { grid-template-columns: 1fr; gap: var(--sp-4); }
  .tn-yol-adim > li:nth-child(1), .tn-yol-adim > li:nth-child(2) { margin-top: 0; }
  .tn-yol-adim > li:nth-child(1) { margin-right: calc(2 * var(--sp-5)); }
  .tn-yol-adim > li:nth-child(2) { margin-left: var(--sp-5); margin-right: var(--sp-5); }
  .tn-yol-adim > li:nth-child(3) { margin-left: calc(2 * var(--sp-5)); }
}
@media (max-width: 480px) {
  .tn-yol-adim > li:nth-child(n) { margin-left: 0; margin-right: 0; }
}

/* =====================================================================
   SEVIYE TESTI (uygulamanin testi, 18 soru) + KAYIT KAPISI — 30 Eyl 2026
   ===================================================================== */
.tn-test-kelime { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -.03em; }
.tn-test-siklar--dort { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tn-test-siklar--dort .tn-test-sik::after { display: none; }
.tn-test-sik.secildi { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.tn-test-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 12px; }
.tn-test-alt .tn-test-bilmiyorum { margin-top: 0; }
.tn-test-ipucu { flex: 1 1 220px; font-size: var(--fs-sm); color: var(--faint); line-height: 1.5; }
.tn-test-seviye--kapali b { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.tn-test-seviye--kapali svg { width: 40px; height: 40px; color: var(--tv-vurgu); }
.tn-test-kapi-eylem { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }
@media (max-width: 520px) {
  .tn-test-siklar--dort { grid-template-columns: 1fr; }
  .tn-test-kapi-eylem .tn-btn { flex: 1 1 100%; }
}
/* Uygulama: tanitimda cozulen testin sonuc ekrani (seviye.js ozet) */
.sv-kaynak { margin-bottom: var(--sp-2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-kas);
  text-transform: uppercase; color: var(--accent); }

/* TEMA DUGMESI (1 Eki 2026) — oturumsuz ziyaretci icin; ikon app.js'ten. */
.tn-tema { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: var(--r-full); background: transparent; color: var(--text); cursor: pointer;
  transition: border-color var(--mo-hizli) var(--mo-cikis); }
.tn-tema:hover { border-color: var(--btn-line); }
.tn-tema[hidden] { display: none; }
.tn-tema svg { width: 18px; height: 18px; }

/* OTURUMLU TANITIM (6 Eki 2026): giriş yapmış kullanıcı uygulama
   logosuyla (/?tanitim) gelir — "Giriş yap" anlamsız, gizlenir; çağrılar
   uygulamaya döner (app.js tanitimOturumlu). */
html[data-tn-oturumlu] #tanitim [data-tn="giris"] { display: none; }

/* Yukleyici (js/yukle.js): betikler inmeden basilan giris/kayit dugmesi — basis
   kaybolmaz, form betik iner inmez acilir. */
.tn-btn.tn-bekliyor { cursor: progress; opacity: .7; }