/* Tanıtım sayfası (/, Pages/Index.cshtml, düzeni Shared/_TanitimDuzeni.cshtml) ve aynı düzendeki iki bilgi sayfası
   (/gizlilik, /hesap-silme; "Bilgi sayfaları" bölümü). yonetim.css'ten sonra yüklenir: yazı
   tipi, temel düğmeler, tema düğmesi ve bütün renk değişkenleri oradandır (açık ve koyu tema). Sayfanın biçimi "Kum ve
   Deniz"in kendisidir: üstte deniz (giriş paneliyle aynı geçiş, --marka-1..3), dalgayla kuma (--zemin) iner, sonda yine
   denize döner. Renkler yalnız değişkenlerden gelir; bu dosyanın iki değişkeni (tablet çerçevesi, resimlerin koyu temadaki
   süzgeci) aşağıda açık ve koyu karşılıklarıyla, koyu blok iki kez aynı değerlerle (yonetim.css'teki kalıp). Bir web
   testi (tests/web/tanitim.test.js) blokları, sabit renk olmadığını ve yazı/zemin çiftlerinin kontrastını denetler.

   Resimler (wwwroot/tanitim/) uygulamanın menü resimleri ve simgelerinden kopyalandı (src/OtizmDunyasi/web/):
   sahne-balik.png = oyunlar/duygular/kucukresimler/mutlu-2.png, yuz-ifadeleri.png = oyunlar/yuz-ifadeleri/kucukresimler/
   yuz-mutlu-elif.png, duruma-bagli-duygular.png = oyunlar/duygular/kucukresimler/mutlu-1.png, istege-bagli-duygular.png =
   oyunlar/istege-bagli-duygular/kucukresimler/istek-mutlu-elif.png, inanca-bagli-duygular.png = oyunlar/inanca-bagli-
   duygular/kucukresimler/inanc-mutlu-yigit-dogru.png, ne-goruyor.png = oyunlar/ne-goruyor/kucukresimler/gor-elif-top.png,
   nasil-goruyor.png = oyunlar/nasil-goruyor/kucukresimler/nasil-ali-duz.png, kim-biliyor.png = oyunlar/kim-biliyor/
   kucukresimler/kim-elif-bakti.png, nerede-arar.png = oyunlar/nerede-arar/kucukresimler/nerede-ali-gordu.png, goruyor-mu.png =
   oyunlar/goruyor-mu/kucukresimler/gormu-ali-2-engel.png (yalnız Türkçe sayfada; ayıcık paravanın önünde, görünür),
   neresini-goruyor.png = oyunlar/neresini-goruyor/kucukresimler/neresi-otobus-onarka.png (yalnız Türkçe sayfada). Üç yeni
   alanın oyunları (<oyun>.png = oyunlar/<oyun>/kucukresimler/<sahne>.png): nereye-bakiyor bak-elif-el, hangisini-istiyor
   hangi-elif-yuz, ne-yapmak-istiyordu amac-elif-olmadi, bilerek-mi niyet-aylin-yanlislikla, gercek-mi-oyun-mu
   gercek-ali-elif, bu-ne-oldu yerine-yigit-muz-benzer, olmayan-sey hayali-yigit, oyunda-ne-oldu oyunda-elif-oyun,
   oyuna-katil katil-muz-oyun, neye-benziyor benzer-tas-aslinda, kutuda-ne-var yanilt-kalem-gormedi,
   icinden-ne-hissediyor gizli-yigit-farkli, kandiriyor-mu kandir-selin-kandiriyor, ne-dusundugunu-dusunuyor
   ikinci-ali-gormedi. *.svg = cizim/simgeler/ altındaki aynı adlı dosyalar. Robot sayfanın içinde (karakter/robot.svg). */

:root {
  /* Sahnedeki tabletin çerçevesi ve resimlerin süzgeci (koyu temada resimler biraz kısılır, sayfadan parlamasın). */
  --tanitim-cerceve: #2E394C;
  --tanitim-resim-suzgec: none;
}

/* Koyu tema: cihaz koyuysa ve açık seçilmemişse ... */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --tanitim-cerceve: #0E1117;
    --tanitim-resim-suzgec: brightness(.9) saturate(.94);
  }
}

/* ... ya da koyu seçilmişse. Değerler yukarıdaki blokla aynı. */
@media screen {
  :root[data-tema="koyu"] {
    --tanitim-cerceve: #0E1117;
    --tanitim-resim-suzgec: brightness(.9) saturate(.94);
  }
}

/* ---------- Ortak ---------- */
.tanitim { position: relative; }
.tanitim main { display: block; }
/* Tanıtımda yalnız renkler yenilendi (Kamuran'ın kararı): kalın yazı ve düğmeler yonetim.css'in eski 800'ünde kalır. */
.tanitim strong, .tanitim .dugme { font-weight: 800; }
.tanitim h2 { display: block; margin: 0; font-size: clamp(2rem, 1.45rem + 2vw, 3rem); font-weight: 900; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.tanitim h3 { margin: 0; color: var(--metin); font-size: 1.3rem; font-weight: 900; line-height: 1.25; }
.tanitim h4 { margin: 0; color: var(--metin); font-size: 1.15rem; font-weight: 900; line-height: 1.25; }
/* Denizde (üst, giriş, kapanış, alt) odak çizgisi deniz rengiyle: açık temada --odak-cizgi denizin açık tonlarında silik kalır. */
.tanitim-ust :focus-visible, .vitrin :focus-visible, .kapanis :focus-visible, .tanitim-alt :focus-visible { outline-color: var(--deniz-koyu); }

.bolum { padding: clamp(64px, 8vw, 112px) 0; }
.bolum-ic { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.bolum-basi { max-width: 700px; margin-bottom: clamp(32px, 4vw, 52px); }
.bolum-basi p { margin-top: 14px; color: var(--soluk); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.6; }

/* ---------- Üst çubuk: denizin üstünde, sayfayla kayar ---------- */
.tanitim-ust { position: absolute; inset: 0 0 auto; z-index: 5; }
.tanitim-ust-ic { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1180px; margin: 0 auto; padding: 18px 24px; }
.tanitim-marka { display: inline-flex; align-items: center; gap: 12px; border-radius: 14px; color: var(--deniz-koyu); font-size: 19px; font-weight: 900; letter-spacing: -.01em; text-decoration: none; }
.tanitim-marka img { border-radius: 11px; box-shadow: 0 0 0 3px var(--marka-halka); }
.tanitim-ust-sag { display: flex; align-items: center; gap: 10px; }
/* Denizdeki hayalet düğmeler (tema, üstteki Okul girişi, "Oyunları gör") kart zeminli: deniz geçişinde kaybolmasınlar. */
.tanitim-ust .dugme.hayalet, .vitrin .dugme.hayalet { border-color: var(--kenar); background: var(--kart); color: var(--deniz-koyu); box-shadow: var(--golge); }
.tanitim-ust .dugme.hayalet:hover, .vitrin .dugme.hayalet:hover { background: var(--zemin); color: var(--deniz-koyu); }

/* ---------- Giriş (deniz) ---------- */
.vitrin { position: relative; overflow: hidden; padding: 132px 0 clamp(96px, 11vw, 160px); background: linear-gradient(160deg, var(--marka-1) 0%, var(--marka-2) 55%, var(--marka-3) 100%); color: var(--deniz-koyu); }
.vitrin-kabarcik { position: absolute; border-radius: 50%; background: var(--kabarcik); pointer-events: none; }
.vitrin-kabarcik-1 { top: -150px; right: -130px; width: 540px; height: 540px; }
.vitrin-kabarcik-2 { bottom: -70px; left: -100px; width: 280px; height: 280px; background: var(--kabarcik-kum); }
.vitrin-kabarcik-3 { top: 120px; left: 44%; width: 92px; height: 92px; }
.vitrin-ic { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: clamp(32px, 5vw, 72px); max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.vitrin h1 { color: var(--deniz-koyu); font-size: clamp(2.75rem, 1.4rem + 4.6vw, 5rem); font-weight: 1000; line-height: .98; letter-spacing: -.03em; text-wrap: balance; }
.vitrin-tanim { max-width: 34ch; margin-top: 22px; font-size: clamp(1.125rem, 1rem + .45vw, 1.35rem); font-weight: 700; line-height: 1.5; }
.vitrin-yer { margin-top: 12px; font-size: 1.05rem; font-weight: 900; }
.vitrin-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.dugme.vitrin-dugme { min-height: 54px; padding: 14px 26px; font-size: 17px; }
.dugme.vitrin-dugme .simge { width: 20px; height: 20px; }

/* Oyundan bir an: tablette sahne, altında robotun sorusu ve cevap kartları (uygulamanın soru paneli gibi). */
.sahne { position: relative; margin: 0; }
.sahne-ekran { padding: 10px; border-radius: 28px; background: var(--tanitim-cerceve); box-shadow: var(--golge-buyuk); rotate: -1.2deg; }
.sahne-ekran img { display: block; width: 100%; height: auto; border-radius: 19px; filter: var(--tanitim-resim-suzgec); }
.sahne-soru { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: end; gap: 6px; width: min(88%, 480px); margin: -58px 16px 0 auto; padding: 14px 16px 16px 6px; border: 1px solid var(--kenar); border-radius: 24px; background: var(--kart); box-shadow: var(--golge-buyuk); }
.sahne-robot { display: block; width: 104px; height: auto; margin: -64px 0 -4px -8px; filter: drop-shadow(0 10px 12px var(--robot-golge)); }
.sahne-robot-kol { transform-box: fill-box; transform-origin: 17% 86%; }
.sahne-soru-ic { min-width: 0; }
.sahne-balon { position: relative; display: inline-block; padding: 8px 14px; border-radius: 16px; background: var(--deniz-acik); color: var(--deniz-koyu); font-size: 18px; font-weight: 900; line-height: 1.3; }
.sahne-balon::before { content: ""; position: absolute; top: 50%; left: -7px; width: 14px; height: 14px; margin-top: -7px; border-radius: 3px; background: var(--deniz-acik); rotate: 45deg; }
.sahne-kartlar { display: flex; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.sahne-kartlar li { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 8px 4px 7px; border: 1px solid var(--kenar); border-radius: 14px; background: var(--ic-zemin); color: var(--metin); font-size: 14px; font-weight: 800; box-shadow: var(--golge); }
.sahne-kartlar img { width: 52px; height: 52px; }
.sahne figcaption { margin-top: 14px; padding-right: 16px; font-size: 14px; font-weight: 800; text-align: right; }

/* Tek hareket: sayfa açılınca tablet yükselir, soru paneli gelir, kartlar sırayla belirir, robot iki kez el sallar.
   Öğeler hareketsiz hâllerinde görünür; hareket azaltılmışsa yonetim.css bütün animasyonları kapatır. */
@keyframes tanitim-yuksel { from { opacity: 0; translate: 0 18px; } }
@keyframes tanitim-belir { from { opacity: 0; scale: .86; } }
@keyframes tanitim-el-salla { 0%, 100% { rotate: 0deg; } 20% { rotate: -16deg; } 45% { rotate: 6deg; } 70% { rotate: -12deg; } }
.sahne-ekran { animation: tanitim-yuksel .8s cubic-bezier(.16, 1, .3, 1) backwards; }
.sahne-soru { animation: tanitim-yuksel .7s cubic-bezier(.16, 1, .3, 1) .25s backwards; }
.sahne-kartlar li { animation: tanitim-belir .5s cubic-bezier(.22, 1, .36, 1) .55s backwards; }
.sahne-kartlar li:nth-child(2) { animation-delay: .65s; }
.sahne-kartlar li:nth-child(3) { animation-delay: .75s; }
.sahne-robot-kol { animation: tanitim-el-salla 1.5s ease-in-out .9s 2; }

/* Denizle kum arasındaki dalga: dolgusu kumun (sayfa zemini) rengi. */
.dalga { position: absolute; left: 0; width: 100%; height: clamp(36px, 6vw, 90px); fill: var(--zemin); pointer-events: none; }
.dalga-alt { bottom: -1px; }
.dalga-ust { top: -1px; }

/* ---------- Neler öğretir ---------- */
/* Bir sahnenin akışı: tek kutuda üç adım, aralarında ok. */
.akis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 44px; margin: 0 0 clamp(52px, 7vw, 88px); padding: 26px 30px; border: 1px solid var(--kenar); border-radius: 26px; background: var(--kart); box-shadow: var(--golge); list-style: none; }
.akis li { position: relative; display: flex; align-items: flex-start; gap: 16px; }
.akis-simge { display: grid; flex: none; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--deniz-acik); color: var(--deniz-koyu); }
.akis-simge .simge { width: 26px; height: 26px; }
.akis h3 { font-size: 1.2rem; }
.akis p { margin-top: 4px; color: var(--soluk); line-height: 1.55; }
.akis li:not(:last-child)::after { content: ""; position: absolute; top: 20px; right: -28px; width: 11px; height: 11px; border-top: 3px solid var(--kenar-koyu); border-right: 3px solid var(--kenar-koyu); border-radius: 2px; rotate: 45deg; }

/* İki alan; her alanın oyunları, menüdeki sırayla, numaralı taşlarla birbirine bağlı bir yol. */
.yol + .yol { margin-top: clamp(56px, 7vw, 92px); }
.yol-basi { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.yol-simge { display: grid; flex: none; place-items: center; width: 78px; height: 78px; border: 1px solid var(--kenar); border-radius: 24px; background: var(--kart); box-shadow: var(--golge); }
.yol-simge img { width: 62px; height: 62px; }
.yol-basi h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.01em; }
.yol-basi p { margin-top: 4px; color: var(--soluk); font-weight: 700; }
.yol-adimlari { --yol-aralik: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px var(--yol-aralik); margin: 0; padding: 0; list-style: none; }
.yol-adimi { position: relative; display: flex; flex-direction: column; min-width: 0; }
.yol-iz { position: relative; display: flex; align-items: center; height: 40px; margin-bottom: 14px; }
.yol-no { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--deniz-orta); color: var(--dolu-yazi); font-size: 17px; font-weight: 900; box-shadow: 0 0 0 5px var(--zemin); }
.yol:nth-of-type(even) .yol-no { background: var(--kum-acik); color: var(--kum-yazi); }
.yol-adimi:not(:last-child) .yol-iz::after { content: ""; position: absolute; top: 50%; right: calc(-1 * var(--yol-aralik)); left: 40px; margin-top: -1.5px; border-top: 3px dotted var(--kenar-koyu); }
/* Satırın son oyunundan (dört sütunda her dördüncü) yol uzanmaz: beş oyunlu alanda dördüncü oyunun yolu ızgaranın dışına, boşluğa
   gidiyordu; beşinci oyun alt satırın başındadır (son inceleme K2). İki sütunda 4n zaten 2n'dir (aşağıda). */
.yol-adimi:nth-child(4n) .yol-iz::after { display: none; }
.yol-resim { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--kenar); border-radius: 18px; background: var(--kart); box-shadow: var(--golge); filter: var(--tanitim-resim-suzgec); }
.yol-yazi { padding: 16px 2px 0; }
.yol-yazi p { margin-top: 6px; color: var(--soluk); line-height: 1.55; }

/* ---------- Nasıl kullanılır: evde (kum) ve okulda (deniz) ---------- */
.kullanim { padding-top: 0; }
.kullanim-ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.kullanim-pano { padding: clamp(24px, 3vw, 38px); border-radius: 28px; color: var(--metin); }
.kullanim-ev { background: var(--kum-acik); }
.kullanim-okul { background: var(--deniz-acik); }
.kullanim-basi { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.kullanim-rozet { display: grid; flex: none; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: var(--kart); box-shadow: var(--golge); }
.kullanim-rozet .simge { width: 26px; height: 26px; }
.kullanim-basi h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); }
.kullanim-ev .kullanim-rozet, .kullanim-ev h3, .kullanim-ev li > .simge { color: var(--kum-yazi); }
.kullanim-okul .kullanim-rozet, .kullanim-okul h3, .kullanim-okul li > .simge { color: var(--deniz-koyu); }
.kullanim-listesi { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.kullanim-listesi li { display: flex; align-items: flex-start; gap: 14px; }
.kullanim-listesi li > .simge { width: 22px; height: 22px; margin-top: 2px; }
.kullanim-listesi p { line-height: 1.55; }

/* ---------- Dayandığı yaklaşım ---------- */
.yaklasim { border-block: 1px solid var(--kenar); background: var(--kart); }
.yaklasim-ic { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 96px); }
.yaklasim-metin p { max-width: 64ch; margin-top: 16px; font-size: 1.08rem; line-height: 1.7; }
.yaklasim-metin h2 + p { margin-top: 22px; }
.uyari.yaklasim-not { max-width: 64ch; margin-top: 26px; }
.uyari.yaklasim-not p { margin: 0; font-size: 1rem; line-height: 1.55; }
/* Kaynak kitap: kapak, sırt ve arkasında sayfalar (yalnız süs; künyesi altındaki yazıda). */
.kitap { display: grid; justify-items: center; gap: 26px; max-width: 330px; margin: 0; justify-self: center; }
.kitap-govde { position: relative; rotate: 3deg; }
.kitap-govde::before { content: ""; position: absolute; inset: 9px -9px -9px 9px; border: 1px solid var(--kenar-koyu); border-radius: 6px 16px 16px 6px; background: var(--zemin); }
.kitap-kapak { position: relative; z-index: 1; display: flex; flex-direction: column; width: 220px; aspect-ratio: 3 / 4.1; padding: 28px 22px 22px 38px; border-radius: 6px 16px 16px 6px; background: var(--deniz-orta); color: var(--dolu-yazi); box-shadow: var(--golge-buyuk); }
/* Sırt: kapağın rengini iki temada da koyulaştıran perde. */
.kitap-kapak::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 16px; border-radius: 6px 0 0 6px; background: var(--perde); }
.kitap-ad { font-size: 21px; font-weight: 900; line-height: 1.2; letter-spacing: -.01em; }
.kitap-yazarlar { margin-top: auto; font-size: 13px; font-weight: 800; line-height: 1.4; }
.kitap-yil { margin-top: 6px; font-size: 13px; font-weight: 700; }
.kitap figcaption { color: var(--soluk); font-size: 14px; line-height: 1.55; text-align: center; }

/* ---------- Gizlilik ---------- */
.gizlilik-basi { display: flex; align-items: flex-start; gap: 18px; max-width: 760px; }
.gizlilik-simge { display: grid; flex: none; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--deniz-acik); color: var(--deniz-koyu); }
.gizlilik-simge .simge { width: 32px; height: 32px; }
.gizlilik-listesi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 44px; margin: 0; padding: 0; list-style: none; }
.gizlilik-listesi li { display: flex; align-items: flex-start; gap: 14px; padding-top: 20px; border-top: 1px solid var(--kenar); }
.gizlilik-listesi li > .simge { width: 22px; height: 22px; margin-top: 2px; color: var(--deniz-orta); }
.gizlilik-listesi p { font-size: 1.04rem; line-height: 1.6; }

/* ---------- Kapanış ve alt (yine deniz) ---------- */
.kapanis { position: relative; overflow: hidden; padding: clamp(116px, 12vw, 172px) 0 clamp(56px, 6vw, 84px); background: linear-gradient(180deg, var(--marka-1) 0%, var(--marka-3) 100%); color: var(--deniz-koyu); text-align: center; }
.kapanis h2 { color: var(--deniz-koyu); }
.kapanis-ic { position: relative; max-width: 660px; margin: 0 auto; padding: 0 24px; }
.kapanis-robot { display: block; width: 92px; height: auto; margin: 0 auto 18px; filter: drop-shadow(0 10px 12px var(--robot-golge)); }
.kapanis p { margin: 16px auto 28px; font-size: 1.1rem; font-weight: 700; line-height: 1.6; }
.tanitim-alt { background: var(--marka-3); color: var(--deniz-koyu); }
.tanitim-alt-ic { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; width: min(1132px, calc(100% - 48px)); margin: 0 auto; padding: 20px 0 26px; border-top: 1px solid var(--marka-halka); }
.tanitim-alt-ad { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; }
.tanitim-alt-ad img { border-radius: 8px; }
/* Bilgi sayfalarının bağlantıları (Gizlilik, Hesap silme): denizde deniz-koyu (--deniz-orta denizin açık tonunda 4.5:1 tutmaz);
   dokunma alanı 44 px; açık olan sayfa altı çizili. */
.tanitim-alt-baglantilar { display: flex; flex-wrap: wrap; gap: 0 20px; }
.tanitim-alt-baglantilar a { display: inline-block; padding: 10px 2px; color: var(--deniz-koyu); font-weight: 800; text-decoration: none; text-underline-offset: 4px; }
.tanitim-alt-baglantilar a:hover, .tanitim-alt-baglantilar a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }

/* ---------- Bilgi sayfaları: gizlilik politikası (/gizlilik) ve hesap silme (/hesap-silme) ---------- */
/* Tanıtımın dilinde: üstte kısa bir deniz (üst çubuk onun üstünde; girişle aynı geçiş), dalgayla kuma iner; altında okunur bir
   metin sütunu (en çok 46rem: satır 70 karakter civarı, 17 px, satır aralığı 1.7) ve geniş ekranda solda yapışkan içindekiler.
   1023 px'in altında içindekiler metnin üstünde bir kart olur. Renk çiftleri tests/web/tanitim.test.js'te. */
.belge-basi { position: relative; overflow: hidden; padding: 128px 0 clamp(84px, 9vw, 128px); background: linear-gradient(160deg, var(--marka-1) 0%, var(--marka-2) 55%, var(--marka-3) 100%); color: var(--deniz-koyu); }
.belge-basi-ic { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.belge-basi h1 { max-width: 22ch; color: var(--deniz-koyu); font-size: clamp(2.1rem, 1.3rem + 3vw, 3.4rem); font-weight: 1000; line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; }
.belge-basi p { max-width: 62ch; margin-top: 18px; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); font-weight: 700; line-height: 1.55; }
.belge-basi .belge-tarih { margin-top: 14px; font-size: .95rem; font-weight: 800; }

.belge { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 46rem); justify-content: center; align-items: start; gap: clamp(32px, 5vw, 80px); max-width: 1180px; margin: 0 auto; padding: clamp(36px, 5vw, 64px) 24px clamp(80px, 10vw, 128px); }
.belge-icindekiler { position: sticky; top: 24px; }
.belge .belge-icindekiler h2 { margin: 0 0 10px; padding: 0 10px; color: var(--soluk); font-size: .95rem; font-weight: 900; line-height: 1.3; letter-spacing: .02em; }
.belge-icindekiler ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: belge; }
.belge-icindekiler li { counter-increment: belge; }
.belge-icindekiler a { display: flex; gap: 10px; padding: 8px 10px; border-radius: 12px; color: var(--metin); font-weight: 700; line-height: 1.35; text-decoration: none; }
.belge-icindekiler a::before { content: counter(belge); flex: none; min-width: 1.3em; color: var(--deniz-orta); font-weight: 900; font-variant-numeric: tabular-nums; }
.belge-icindekiler a:hover { background: var(--deniz-acik); color: var(--deniz-koyu); }

.belge-metin { min-width: 0; font-size: 1.0625rem; line-height: 1.7; overflow-wrap: break-word; }
.belge-bolum { scroll-margin-top: 24px; }
.belge-bolum + .belge-bolum { margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--kenar); }
.belge-bolum > * + * { margin-top: 16px; }
.belge .belge-bolum h2 { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--metin); font-size: clamp(1.35rem, 1.2rem + .5vw, 1.65rem); font-weight: 900; line-height: 1.25; letter-spacing: -.01em; }
.belge-no { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--deniz-acik); color: var(--deniz-koyu); font-size: 1.05rem; font-weight: 900; letter-spacing: 0; }
.belge-bolum > h3 { margin-top: 30px; font-size: 1.15rem; }
.belge-metin ul { margin-bottom: 0; padding-left: 1.3em; }
.belge-metin ul > li + li { margin-top: 8px; }
.belge-metin li::marker { color: var(--deniz-orta); }
.belge-metin a:not(.dugme) { color: var(--deniz-orta); font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.belge-metin a:not(.dugme):hover { color: var(--deniz-koyu); }
.belge-son { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--kenar); color: var(--soluk); }

/* Hesap silme: numaralı adımlar (kart), "Hemen" (deniz) ve "30 gün sonra" (kum) panoları, e-posta kartı ve örnek metin. */
.belge-adimlar { display: grid; gap: 12px; margin-bottom: 0; padding: 0; list-style: none; counter-reset: adim; }
.belge-adimlar li { position: relative; padding: 14px 18px 14px 64px; border: 1px solid var(--kenar); border-radius: 18px; background: var(--kart); box-shadow: var(--golge); counter-increment: adim; }
.belge-adimlar li::before { content: counter(adim); position: absolute; top: 12px; left: 14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--deniz-orta); color: var(--dolu-yazi); font-weight: 900; line-height: 1; }
.uyari.belge-not p { margin: 0; line-height: 1.55; }
.belge-ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.belge-pano { padding: 20px 22px 22px; border-radius: 22px; color: var(--metin); }
.belge-pano-hemen { background: var(--deniz-acik); }
.belge-pano-sonra { background: var(--kum-acik); }
.belge-pano h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 1.2rem; }
.belge-pano h3 .simge { width: 22px; height: 22px; }
.belge-pano-hemen h3 { color: var(--deniz-koyu); }
.belge-pano-sonra h3 { color: var(--kum-yazi); }
.belge-pano ul { margin: 0; }
.belge-eposta { padding: 22px 24px 24px; border: 1px solid var(--kenar); border-radius: 22px; background: var(--kart); box-shadow: var(--golge); }
.belge-eposta dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 20px; margin: 0; }
.belge-eposta dt { color: var(--soluk); font-weight: 800; }
.belge-eposta dd { min-width: 0; margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.belge-ornek { padding: 14px 16px; border-left: 4px solid var(--deniz); border-radius: 12px; background: var(--ic-zemin); font-weight: 600; }
.belge-ornek p + p { margin-top: 4px; }
.belge-ornek p:last-child { margin-top: 14px; }
.belge-bosluk { color: var(--soluk); }
.dugme.belge-eposta-dugme { margin-top: 20px; }
.belge-kunye { font-weight: 700; }

/* ---------- Dar ekran ---------- */
@media (max-width: 1023px) {
  .vitrin-ic { grid-template-columns: minmax(0, 1fr); }
  .vitrin-metin { max-width: 640px; }
  .sahne { width: 100%; max-width: 620px; }
  .vitrin-kabarcik-3 { top: auto; bottom: 46%; left: 78%; }
  .yol-adimlari { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yol-adimi:nth-child(2n) .yol-iz::after { display: none; }
  .yaklasim-ic { grid-template-columns: minmax(0, 1fr); }
  /* Bilgi sayfaları tek sütun: içindekiler metnin üstünde bir kart. */
  .belge { grid-template-columns: minmax(0, 46rem); }
  .belge-icindekiler { position: static; padding: 16px 14px; border: 1px solid var(--kenar); border-radius: 20px; background: var(--kart); }
}

@media (max-width: 860px) {
  .akis { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .akis li:not(:last-child)::after { top: auto; right: auto; bottom: -15px; left: 20px; rotate: 135deg; }
  .kullanim-ikili { grid-template-columns: minmax(0, 1fr); }
  .gizlilik-listesi { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 639px) {
  .tanitim-ust-ic { padding: 14px 16px; }
  .tanitim-marka { gap: 10px; font-size: 17px; }
  .tanitim-marka img { width: 36px; height: 36px; }
  /* Telefonda üstteki Okul girişi gizlenir: aynı düğme hemen altta, girişte. */
  .tanitim-ust-giris { display: none; }
  .vitrin { padding-top: 100px; }
  .vitrin-ic, .bolum-ic, .kapanis-ic { padding: 0 16px; }
  .vitrin-tanim { margin-top: 18px; }
  .vitrin-dugmeler { margin-top: 24px; }
  .dugme.vitrin-dugme { flex: 1 1 auto; }
  .sahne-ekran { padding: 7px; border-radius: 20px; }
  .sahne-ekran img { border-radius: 14px; }
  .sahne-soru { grid-template-columns: 70px minmax(0, 1fr); width: auto; margin: -34px 6px 0; padding: 10px 10px 12px 4px; border-radius: 20px; }
  .sahne-robot { width: 76px; margin: -46px 0 -2px -6px; }
  .sahne-balon { padding: 6px 11px; font-size: 16px; }
  .sahne-kartlar { gap: 6px; margin-top: 10px; }
  .sahne-kartlar li { padding: 6px 2px 5px; font-size: 13px; }
  .sahne-kartlar img { width: 42px; height: 42px; }
  .sahne figcaption { padding-right: 6px; font-size: 13px; }
  .bolum-basi { margin-bottom: 28px; }
  .yol-basi { gap: 14px; }
  .yol-simge { width: 64px; height: 64px; border-radius: 20px; }
  .yol-simge img { width: 50px; height: 50px; }
  /* Oyunlar alt alta: solda resim, sağda numara, ad ve açıklama; numaralar arasında dikey yol. */
  .yol-adimlari { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .yol-adimi { display: grid; grid-template-areas: "resim iz" "resim yazi"; grid-template-columns: 40% minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; align-items: start; }
  .yol-iz { grid-area: iz; height: 32px; margin: 0; }
  .yol-no { width: 32px; height: 32px; font-size: 15px; box-shadow: 0 0 0 4px var(--zemin); }
  .yol-adimi:not(:last-child) .yol-iz::after { display: none; }
  .yol-resim { grid-area: resim; border-radius: 14px; }
  .yol-yazi { grid-area: yazi; padding: 8px 0 0; }
  .yol-yazi h4 { font-size: 1.05rem; }
  .yol-yazi p { font-size: 15px; line-height: 1.5; }
  .kullanim-pano { border-radius: 22px; }
  .gizlilik-basi { gap: 14px; }
  .gizlilik-simge { width: 52px; height: 52px; border-radius: 16px; }
  .gizlilik-simge .simge { width: 26px; height: 26px; }
  .kitap-kapak { width: 172px; padding: 22px 18px 18px 32px; }
  .kitap-ad { font-size: 17px; }
  .kapanis-robot { width: 76px; }
  .tanitim-alt-ic { width: calc(100% - 32px); padding: 18px 0 24px; }
  .belge-basi { padding-top: 100px; }
  .belge-basi-ic { padding: 0 16px; }
  .belge { padding-right: 16px; padding-left: 16px; }
  .belge-ikili { grid-template-columns: minmax(0, 1fr); }
  .belge-adimlar li { padding: 12px 14px 12px 56px; }
  .belge-adimlar li::before { top: 10px; left: 12px; width: 32px; height: 32px; }
  .belge-eposta { padding: 18px 16px 20px; }
  .belge-eposta dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .belge-eposta dd + dt { margin-top: 12px; }
  .dugme.belge-eposta-dugme { width: 100%; white-space: normal; }
}