/* ===========================================================
   Adım Adım Amasya — ortak tasarım
   İznik çinisi paleti: kobalt, turkuaz, mercan, altın
   Yazı: Fraunces (başlık) + Archivo (metin)
   =========================================================== */

:root{
  /* açık tema */
  --bg:#F6EFE2; --bg2:#EFE4D0; --card:#FFFDF8;
  --ink:#1A2033; --soft:#4B5068; --faint:#7D8196;
  --cobalt:#1F4FA3; --turq:#1E9A93; --coral:#C8402B; --gold:#C8912F;
  --line:#E2D6BF;
  --golge:20 30 60;

  --yazi:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --baslik:Fraunces,Georgia,"Times New Roman",serif;

  --en:1080px;          /* içerik genişliği */
  --bosluk:18px;        /* kenar boşluğu */

  color-scheme:light dark;
}

@media (prefers-color-scheme:dark){
  :root:not([data-tema="acik"]){
    --bg:#0E1832; --bg2:#13224A; --card:#172750;
    --ink:#F4ECDD; --soft:#C3C0D2; --faint:#8F93AE;
    --cobalt:#6E9BEA; --turq:#3CC4BA; --coral:#EE6B52; --gold:#E7B458;
    --line:#26386A;
    --golge:0 0 0;
  }
}
:root[data-tema="koyu"]{
  --bg:#0E1832; --bg2:#13224A; --card:#172750;
  --ink:#F4ECDD; --soft:#C3C0D2; --faint:#8F93AE;
  --cobalt:#6E9BEA; --turq:#3CC4BA; --coral:#EE6B52; --gold:#E7B458;
  --line:#26386A;
  --golge:0 0 0;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--yazi);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--cobalt);text-underline-offset:3px}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;padding:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}

h1,h2,h3{font-family:var(--baslik);letter-spacing:-.02em;line-height:1.12;margin:0}
h1{font-weight:700;font-size:clamp(32px,7.4vw,56px);letter-spacing:-.03em;line-height:1.03}
h2{font-weight:700;font-size:clamp(23px,4vw,31px)}
h3{font-weight:700;font-size:19px}
p{margin:0 0 1em}

.kap{max-width:var(--en);margin:0 auto;padding:0 var(--bosluk)}
.dar{max-width:680px}

/* --- çini şerit: sayfanın imzası --- */
.cini{
  height:10px;
  background:
    radial-gradient(circle at 10px 5px,var(--coral) 3px,transparent 3.5px) 0 0/20px 10px,
    linear-gradient(var(--cobalt),var(--cobalt));
}
.cini.ince{height:6px;background:
  radial-gradient(circle at 7px 3px,var(--gold) 2px,transparent 2.4px) 0 0/14px 6px,
  linear-gradient(var(--turq),var(--turq));}

/* --- üst çubuk --- */
.ust{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid var(--line);
}
.ust .ic{display:flex;align-items:center;gap:14px;padding:10px 0}
.marka{
  font-family:var(--baslik);font-weight:700;font-size:17.5px;
  letter-spacing:-.02em;text-decoration:none;color:var(--ink);white-space:nowrap;
}
.marka b{color:var(--coral);font-weight:700}
.ust nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.ust nav a{
  text-decoration:none;color:var(--soft);font-size:14px;font-weight:600;
  padding:7px 10px;border-radius:9px;white-space:nowrap;
}
.ust nav a:hover{background:var(--bg2);color:var(--ink)}
.ust nav a[aria-current="page"]{color:var(--coral);background:var(--bg2)}
@media(max-width:700px){
  .ust nav a span{display:none}       /* dar ekranda yalnız simge */
  .ust nav a{padding:7px 9px;font-size:16px}
}
/* Telefonda başlık şeridi ekrandan taşıyordu.
   "Duraklar" menüye eklenince toplam genişlik 394 px oldu, oysa yaygın
   telefon eni 375 px. Sonuç: SİTENİN HER SAYFASI yana kayıyordu —
   ziyaretçi parmağını sürükleyince sayfa sağa sola oynuyordu.
   Ziyaretçilerin çoğu sokakta telefonla gezecek; bu kabul edilemez.
   (24.09.2026'da bulundu.) Çözüm: dar ekranda marka yazısını ve
   menü aralıklarını küçültmek. Simge boyutuna dokunulmadı,
   dokunma hedefi küçülmesin diye. */
/* "Sınıf" maddesi öğretmenler içindir ve menünün beşinci maddesidir.
   Beş madde dar telefonda sığmıyor (320 px'de 27 px, 375 px'de 13 px
   taşma ölçüldü). Bu yüzden dar ekranda menüden çıkar; sayfaya
   alt bilgideki "Öğretmenlere" bağlantısından ulaşılır. */
@media(max-width:479px){
  .ust nav a.ikincil{display:none}
}
@media(max-width:430px){
  .ust .ic{gap:8px}
  .marka{font-size:15px}
  .ust nav{gap:2px}
  .ust nav a{padding:7px 8px}
}
@media(max-width:360px){
  .ust .ic{gap:6px}
  .marka{font-size:13.5px}
  .ust nav a{padding:7px 6px;font-size:15px}
  .dugme-tema{width:34px;height:34px}
}
.dugme-tema{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);display:grid;place-items:center;font-size:15px;flex:0 0 auto;
}

/* --- etiketler --- */
.etiketler{display:flex;flex-wrap:wrap;gap:7px}
.etiket{
  font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px;
  color:#fff;background:var(--cobalt);white-space:nowrap;
}
.etiket.turk{background:var(--turq)}
.etiket.mercan{background:var(--coral)}
.etiket.altin{background:var(--gold);color:#1A1405}
.etiket.bos{background:transparent;color:var(--soft);border:1.5px solid var(--line)}

/* "canlandırma" rozeti — her anlatıcı sahnesinde görünmek zorunda */
.rozet-canlandirma{
  font-size:11.5px;font-weight:700;color:var(--gold);
  border:1.5px solid var(--gold);padding:3px 10px;border-radius:999px;
  white-space:nowrap;letter-spacing:.02em;
}

/* --- düğmeler --- */
.dugme{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:14.5px;padding:11px 17px;border-radius:12px;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);
  text-decoration:none;transition:transform .12s ease,border-color .15s;
}
.dugme:hover{transform:translateY(-1px)}
.dugme:active{transform:translateY(0)}
.dugme.birincil{background:var(--coral);border-color:var(--coral);color:#fff}
.dugme.ikincil{border-color:var(--cobalt);color:var(--cobalt)}
.dugme[disabled]{opacity:.4;cursor:default;transform:none}
.dugme.acik{border-color:var(--turq);color:var(--turq)}

/* --- kart --- */
.kart{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:18px;box-shadow:0 10px 26px -18px rgb(var(--golge) / .45);
}

/* --- anlatıcı sahnesi --- */
.sahne{
  position:relative;border-radius:22px;padding:20px 16px 18px;
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb,var(--turq) 20%,transparent), transparent 60%),
    radial-gradient(90% 90% at 100% 100%, color-mix(in srgb,var(--coral) 15%,transparent), transparent 60%),
    var(--bg2);
  border:1px solid var(--line);overflow:hidden;
}
@media(min-width:780px){.sahne{padding:28px 28px 24px}}
.sahne-bas{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
.sahne-bas h2{font-size:23px}
.oyun-alani{display:flex;gap:14px;align-items:flex-end}

/* Karakter sütununun genişliği çizimle sınırlı olmalı. Sınırlanmazsa
   altındaki künye yazısı sütunu genişletip konuşma balonunu eziyor. */
.karakter-sutun{flex:0 0 auto;width:108px;min-width:0}
@media(min-width:560px){.karakter-sutun{width:168px}}

/* Dar ekranda yan yana sığmıyor: karakter üstte, balon altında */
@media(max-width:620px){
  .oyun-alani{flex-direction:column;align-items:center;gap:10px}
  .karakter-sutun{width:132px}
  .balon{width:100%}
}

.karakter{
  flex:0 0 auto;width:100%;
  opacity:0;transform:translateX(-26px) scale(.94);
  transition:opacity .7s ease,transform .8s cubic-bezier(.2,.9,.25,1.2);
}
.sahne.gorundu .karakter{opacity:1;transform:none}
.karakter svg{display:block;width:100%;height:auto;overflow:visible}
.kunye-ad{
  margin-top:6px;text-align:center;font-family:var(--baslik);
  font-weight:700;font-size:13px;color:var(--ink);
}
.kunye-ad small{
  display:block;font-family:var(--yazi);font-weight:500;font-size:10.5px;color:var(--faint);
}

.balon{
  position:relative;flex:1;min-width:0;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:16px 16px 14px;min-height:178px;cursor:pointer;
  box-shadow:0 10px 26px -16px rgb(var(--golge) / .45);
  opacity:0;transform:translateY(10px);
  transition:opacity .5s .45s,transform .5s .45s;
}
.sahne.gorundu .balon{opacity:1;transform:none}
.balon::before{
  content:"";position:absolute;left:-9px;bottom:34px;width:18px;height:18px;
  background:var(--card);border-left:1px solid var(--line);border-bottom:1px solid var(--line);
  transform:rotate(45deg);
}
/* Dar ekranda karakter üstte olduğu için balonun sivri ucu da yukarı bakmalı.
   Bu kural, yukarıdaki .balon::before tanımından SONRA gelmek zorunda. */
@media(max-width:620px){
  .balon::before{
    left:50%;margin-left:-9px;top:-9px;bottom:auto;
    border-left:1px solid var(--line);
    border-top:1px solid var(--line);
    border-bottom:none;
  }
}

.balon-kim{font-size:12px;font-weight:700;color:var(--coral);letter-spacing:.02em;margin-bottom:6px}
.balon-soz{
  font-family:var(--baslik);font-size:17.5px;line-height:1.55;margin:0;min-height:5.4em;
}
@media(min-width:560px){.balon-soz{font-size:19.5px}}
.imlec{
  display:inline-block;width:2px;height:1em;background:var(--coral);
  vertical-align:-2px;margin-left:2px;animation:imlec-yanip .8s steps(1) infinite;
}
@keyframes imlec-yanip{50%{opacity:0}}
.balon-ipucu{font-size:11.5px;color:var(--faint);margin-top:8px}
.balon-ses{font-size:11.5px;color:var(--turq);margin-top:6px;font-weight:600}

.kumanda{display:flex;align-items:center;gap:9px;margin-top:16px;flex-wrap:wrap}
.noktalar{display:flex;gap:6px;margin-left:auto}
.noktalar i{width:8px;height:8px;border-radius:50%;background:var(--line);
  transition:background .2s,transform .2s}
.noktalar i.acik{background:var(--gold);transform:scale(1.3)}

/* karakter hareketleri */
.karakter .govde{transform-origin:100px 250px;animation:salin 6s ease-in-out infinite}
@keyframes salin{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1.2deg)}}
.karakter .gozler{transform-origin:100px 117px;animation:kirp 4.6s infinite}
@keyframes kirp{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.karakter .agiz{transform-origin:100px 142px;transform:scaleY(.5)}
.karakter.konusuyor .agiz{animation:konus .16s ease-in-out infinite alternate}
@keyframes konus{from{transform:scaleY(.42)}to{transform:scaleY(1.5)}}
/* ses çalarken dudak, sesin şiddetine göre sürülür; CSS animasyonu devre dışı */
.karakter.sesli .agiz{animation:none!important}

/* --- iki katman: belge / efsane --- */
.katmanlar{display:grid;gap:16px;margin:26px 0}
@media(min-width:820px){.katmanlar{grid-template-columns:1fr 1fr}}
/* Anlatı bulunamayan duraklarda efsane sütunu hiç konmaz; belge sütunu tam genişlik alır. */
.katmanlar.tek{grid-template-columns:1fr!important}
.katman{
  border-radius:16px;border:1px solid var(--line);background:var(--card);
  padding:18px;position:relative;overflow:hidden;
}
.katman::before{content:"";position:absolute;inset:0 auto 0 0;width:5px}
.katman.belge::before{background:var(--cobalt)}
.katman.efsane::before{background:var(--coral)}
.katman h3{display:flex;align-items:center;gap:9px;margin-bottom:10px;font-size:18px}
.katman .im{font-size:19px;line-height:1}
.katman.belge h3{color:var(--cobalt)}
.katman.efsane h3{color:var(--coral)}
.katman .not{
  font-size:12.5px;color:var(--faint);border-top:1px dashed var(--line);
  margin-top:12px;padding-top:10px;
}

/* --- kaynakça --- */
.kaynaklar{counter-reset:kaynak;list-style:none;padding:0;margin:0}
.kaynaklar li{
  counter-increment:kaynak;position:relative;padding:8px 0 8px 34px;
  font-size:13.5px;color:var(--soft);border-bottom:1px solid var(--line);line-height:1.5;
}
.kaynaklar li:last-child{border-bottom:none}
.kaynaklar li::before{
  content:counter(kaynak);position:absolute;left:0;top:9px;
  width:23px;height:23px;border-radius:7px;background:var(--bg2);color:var(--cobalt);
  font-size:11.5px;font-weight:700;display:grid;place-items:center;font-family:var(--yazi);
}

/* --- bilgi satırları --- */
.kunye{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;margin:0}
.kunye div{display:flex;gap:12px;background:var(--card);padding:10px 14px;font-size:14px}
.kunye dt{color:var(--faint);font-weight:600;min-width:104px;flex:0 0 auto}
.kunye dd{margin:0;color:var(--ink)}

/* --- uyarı kutusu --- */
.uyari{
  border-left:4px solid var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--card));
  padding:12px 15px;border-radius:0 12px 12px 0;font-size:13.5px;color:var(--soft);
}
.uyari b{color:var(--ink)}

/* --- durak kartları listesi --- */
.duraklar{display:grid;gap:14px;padding:0;margin:0;list-style:none}
@media(min-width:640px){.duraklar{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.duraklar{grid-template-columns:repeat(3,1fr)}}
.durak{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .15s ease,box-shadow .2s ease;
}
.durak:hover{transform:translateY(-3px);box-shadow:0 16px 34px -20px rgb(var(--golge) / .5)}
.durak a{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%}
.durak .sira{
  font-family:var(--baslik);font-weight:700;font-size:13px;color:var(--gold);
  padding:13px 16px 0;
}
.durak h3{padding:2px 16px 0;font-size:18px}
.durak .ozet{padding:7px 16px 0;font-size:13.5px;color:var(--soft);flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.durak .alt{padding:12px 16px 14px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}

/* --- alt bilgi --- */
.dip{
  margin-top:56px;border-top:1px solid var(--line);
  background:var(--bg2);padding:28px 0 36px;font-size:13.5px;color:var(--soft);
}
.dip h4{font-family:var(--baslik);font-size:15px;color:var(--ink);margin:0 0 8px}
.dip-izgara{display:grid;gap:22px}
@media(min-width:720px){.dip-izgara{grid-template-columns:2fr 1fr 1fr}}
.dip a{color:var(--soft)}

/* --- öncesi / bugün sürgüsü (bkz. ortak/surgu.js) --- */
.surgu{margin:0}
.surgu-alan{
  position:relative;overflow:hidden;border-radius:16px;
  border:1px solid var(--line);background:var(--bg2);
  touch-action:pan-y;cursor:ew-resize;user-select:none;
}
.surgu-alan img{display:block;width:100%;height:auto;pointer-events:none}
/* Üstteki kare, alttakiyle BİREBİR aynı yerde ve ölçüde durmalı; yoksa sürgü
   kaydıkça görüntü kayar. Bu yüzden kutu daraltılmaz: kare tam genişlikte
   durur, yalnızca clip-path ile kırpılır. */
.surgu-ust-kat{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
.surgu-ust-kat img{width:100%;height:100%;object-fit:cover}
.surgu-kol{
  position:absolute;top:0;bottom:0;left:50%;width:44px;margin-left:-22px;
  display:flex;align-items:center;justify-content:center;cursor:ew-resize;
}
.surgu-kol::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;
  background:rgba(247,239,223,.92);box-shadow:0 0 6px rgb(16 24 48 / .5);
}
.surgu-tutamak{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--card);color:var(--ink);border:2px solid var(--line);
  font-size:13px;font-weight:700;letter-spacing:1px;
  box-shadow:0 4px 14px rgb(var(--golge) / .4);
}
.surgu-kol:focus-visible{outline:none}
.surgu-kol:focus-visible .surgu-tutamak{border-color:var(--turq);box-shadow:0 0 0 4px rgb(30 154 147 / .25)}
.surgu-alan.suruyor .surgu-tutamak{transform:scale(1.08)}
.surgu-etiket{
  position:absolute;bottom:11px;padding:5px 10px;border-radius:8px;
  font-size:12px;font-weight:600;line-height:1.3;
  background:rgb(16 24 48 / .72);color:#F4ECDD;pointer-events:none;
}
.surgu-sol{left:11px}
.surgu-sag{right:11px}
@media (max-width:560px){ .surgu-etiket{font-size:11px;padding:4px 8px} }

/* --- yardımcılar --- */

/* hidden özniteliği tarayıcının kendi kuralında display:none demektir; ama
   .dugme gibi kendi display'i olan sınıflar onu eziyor ve "gizli" öğe
   ekranda kalıyordu (23.09.2026'da sır kutusunun düğmesinde yakalandı;
   pasaport sayfasındaki "Yenile" düğmesi de aynı hataya düşüyordu). */
[hidden]{display:none !important}

.gizli{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.ortala{text-align:center}
.usttan{margin-top:34px}
.usttan-az{margin-top:20px}

/* --- sır kutusu ---
   Ziyaretçinin kendi merakıyla açtığı, koyu zeminli bölüm.
   Kural: gizem bilginin yerine geçmez; kutunun içinde bilginin
   nereden geldiği (ya da gelmediği) her zaman yazar. */
.sir{
  position:relative;overflow:hidden;
  border-radius:20px;padding:30px 22px;
  background:linear-gradient(160deg,#101B38 0%,#182B52 60%,#1E2F4E 100%);
  color:#F1E7D4;border:1px solid #2B4276;
}
.sir::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,rgba(200,145,47,.16),transparent 62%);
}
.sir-kapak{position:relative;z-index:1;text-align:center}
.sir-im{display:block;color:#E7B458;margin:0 auto 10px;line-height:0}
.sir h2{font-size:clamp(20px,3.4vw,27px);margin:0 0 8px;color:#F7EFDF;line-height:1.28}
.sir-kapak p{margin:0 0 18px;color:#B9C4DE;font-size:15.5px}
.sir .dugme.birincil{background:#E7B458;border-color:#E7B458;color:#16213F}
.sir .dugme.birincil:hover{background:#F0C673;border-color:#F0C673}
.sir-ic{position:relative;z-index:1;margin-top:22px;text-align:left}
.sir-soz{
  font-family:var(--baslik);font-size:clamp(17px,2.8vw,21px);line-height:1.6;
  color:#F7EFDF;margin:0 0 16px;
}
.sir-soz b{color:#E7B458}
.sir-not{
  margin:0 0 20px;font-size:14px;color:#C6B392;
  border-left:3px solid #E7B458;padding-left:13px;line-height:1.6;
}
.sir-durust{
  background:rgba(8,14,30,.42);border:1px solid #2B4276;
  border-radius:14px;padding:16px 18px;
}
.sir-durust h3{font-size:15px;margin:0 0 9px;color:#E7B458}
.sir-durust p{margin:0 0 10px;font-size:14.5px;line-height:1.7;color:#C8D2E8}
.sir-durust b{color:#F1E7D4}
.sir-durust sup{color:#E7B458}