/* TiniMilo — ortak stil.
 *
 * NEDEN AYRI DOSYA: site tek sayfaydi, stil HTML'in icindeydi. Cok
 * sayfaya gecince ayni 300 satir her sayfada tekrar inecekti. Ayri
 * dosya bir kere iniyor, sonraki sayfalarda onbellekten geliyor.
 *
 * Bu dosya uret.py tarafindan URETILMEZ, elle yazilir. Uretilen tek
 * sey HTML.
 */

  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }

  /* Renkler marka kapagindan ornekle alindi — uydurulmadi. */
  :root {
    --krem:    #fefbf6;
    --kum:     #fef4e2;
    --mavi:    #2b87f0;
    --kirmizi: #f4564e;
    --sari:    #fbd130;
    --yesil:   #35c7a8;
    --lacivert:#16233f;
    --sus:     #7d7565;   /* olculdu: krem uzerinde 4.42:1 · eskisi 2.54 idi */
  }

  body {
    background: var(--krem);
    color: var(--lacivert);
    font-family: ui-rounded, "Nunito", "Varela Round", "Avenir Next Rounded",
                 "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vh 6vw calc(4vh + 90px);
    position: relative;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }

  .dalga {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: clamp(70px, 15vh, 150px);
    display: block;
    pointer-events: none;
    z-index: 0;
  }

  main {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 34rem;
    text-align: center;
  }

  .maskot {
    width: clamp(6.5rem, 30vw, 9.5rem);
    height: auto;
    display: block;
    margin: 0 auto clamp(.8rem, 3vw, 1.2rem);
    animation: zipla 2.2s ease-in-out .4s 2 both;
  }

  /* Once sonsuz donuyordu; okurken kenarda birsey oynayip duruyordu.
     Simdi acilista iki kez ziplayip duruyor. */
  @keyframes zipla {
    0%, 55%, 100% { transform: translateY(0) scale(1); }
    70%           { transform: translateY(-8%) scale(1.03, .97); }
    85%           { transform: translateY(0) scale(1.02, .98); }
  }

  h1 { margin: 0 0 clamp(1rem, 4vw, 1.5rem); line-height: 0; }

  .kelime {
    width: min(100%, 22rem);
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .giris {
    font-size: clamp(.95rem, 3.8vw, 1.1rem);
    font-weight: 600;
    line-height: 1.5;
    margin: 0 auto clamp(1.6rem, 6vw, 2.2rem);
    max-width: 26ch;
    opacity: .78;
  }

  /* Ebeveynin ilk sorusu "kac yas icin". Yaziyordu ama hicbir yerde
     yazmiyordu — dogrudan soylensin. */
  .yas {
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--sus);
    margin: -.8rem 0 clamp(1.6rem, 6vw, 2.2rem);
  }

  /* Uc buyuk dugme: ilk bakista gidilecek yer belli olsun. */
  .buyukler {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
    margin-bottom: clamp(1.4rem, 5vw, 1.9rem);
  }

  .kanal {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-weight: 700;
    transition: transform .12s ease, box-shadow .12s ease;
  }

  .kanal.buyuk {
    color: #fff;
    background: var(--mavi);
    border-radius: 999px;
    padding: .85rem 1.5rem;
    font-size: clamp(.9rem, 3.6vw, 1rem);
    box-shadow: 0 5px 0 rgba(43, 135, 240, .25);
  }

  .buyukler .kanal:nth-child(2) { background: var(--kirmizi); box-shadow: 0 5px 0 rgba(244, 86, 78, .25); }
  .buyukler .kanal:nth-child(3) { background: var(--yesil);   box-shadow: 0 5px 0 rgba(53, 199, 168, .25);
    /* Beyaz yazi turkuaz uzerinde 2.12:1 — gunes altinda okunmuyordu.
       Lacivert 7.34:1. Marka rengine dokunulmadi. */
    color: var(--lacivert); }

  .kanal.buyuk:hover  { transform: translateY(-2px); }
  .kanal.buyuk:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.12); }

  .kucukler {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .45rem;
  }

  .kucukler .kanal {
    color: var(--lacivert);
    background: #fff;
    border: 2px solid rgba(22, 35, 63, .09);
    border-radius: 999px;
    padding: .42rem .85rem;
    font-size: .82rem;
    font-weight: 600;
    opacity: .9;
  }

  .kucukler .kanal:hover {
    border-color: var(--mavi);
    color: var(--mavi);
    opacity: 1;
  }

  .dahasi { margin-top: .7rem; }
  .dahasi > summary {
    list-style: none;
    cursor: pointer;
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    color: var(--sus);
    border-bottom: 2px solid rgba(125, 117, 101, .3);
    padding-bottom: 1px;
  }
  .dahasi > summary::-webkit-details-marker { display: none; }
  .dahasi > summary:hover { color: var(--mavi); border-bottom-color: var(--mavi); }
  .dahasi[open] > summary { margin-bottom: .8rem; }

  .baslik-kucuk {
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--sus);
    margin: 0 0 .8rem;
  }

  /* --- iletisim: dugme + acilan kutu ---
     Kutu :target ile aciliyor, JavaScript yok. Adres #selam olunca
     goruntuleniyor, perdeye ya da capraza basinca kapaniyor. */
  /* Kanal degil: hap olmayacak, cerceve olmayacak. Kanallar eylem,
     bu bir dipnot — duz yazi, alti cizili. */
  .selam {
    color: var(--sus);
    text-decoration: none;
    border-bottom: 2px solid rgba(168, 159, 140, .4);
    padding-bottom: 1px;
  }

  .selam:hover { color: var(--mavi); border-bottom-color: var(--mavi); }

  .kutu { position: fixed; inset: 0; display: none; z-index: 10; }
  .kutu:target { display: grid; place-items: center; padding: 1.2rem; }

  .perde {
    position: absolute; inset: 0;
    background: rgba(22, 35, 63, .45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  .kart {
    position: relative;
    width: min(94vw, 26rem);
    max-height: 88svh;
    overflow-y: auto;
    background: var(--krem);
    border-radius: 1.6rem;
    padding: 1.6rem 1.4rem 1.4rem;
    box-shadow: 0 24px 60px rgba(22, 35, 63, .28);
    text-align: left;
  }

  .kapat {
    position: absolute;
    top: .5rem; right: .7rem;
    font-size: 1.7rem;
    line-height: 1;
    text-decoration: none;
    color: var(--sus);
    padding: .2rem .4rem;
  }

  .kapat:hover { color: var(--lacivert); }

  .kart h2 {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 1.1rem;
    text-align: center;
  }

  .iletisim { text-align: left; }

  .iletisim label {
    display: block;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sus);
    margin: 0 0 .35rem;
  }

  .iletisim input, .iletisim textarea {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    color: var(--lacivert);
    background: #fff;
    border: 2px solid rgba(22, 35, 63, .1);
    border-radius: 1rem;
    padding: .7rem .9rem;
    margin: 0 0 .9rem;
    -webkit-appearance: none;
  }

  .iletisim textarea { min-height: 6.5rem; resize: vertical; }

  .iletisim input:focus, .iletisim textarea:focus {
    outline: none;
    border-color: var(--mavi);
  }

  /* Bot tuzagi: goze gorunmez, ekran okuyucudan da gizli. */
  .tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  .gonder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font: inherit;
    font-weight: 800;
    font-size: .85rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--mavi);
    border: 0;
    border-radius: 999px;
    padding: .9rem 1.5rem;
    box-shadow: 0 5px 0 rgba(43, 135, 240, .25);
    cursor: pointer;
  }

  .gonder:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(43,135,240,.2); }

  .telif { display: block; margin-top: .5rem; font-size: .72rem; opacity: .75; }

  footer {
    margin-top: clamp(2.6rem, 10vw, 3.6rem);
    padding-top: clamp(1.2rem, 5vw, 1.6rem);
    border-top: 2px solid rgba(168, 159, 140, .18);
    font-size: .82rem;
    font-weight: 600;
    color: var(--sus);
  }

  @media (prefers-reduced-motion: reduce) {
    .maskot { animation: none !important; }
    .kanal  { transition: none !important; }
  }

/* ── COK SAYFA DUZENI ─────────────────────────────────────────────
   Tek sayfada body dikey ortaliyordu (align-items:center). Alt
   sayfalarda icerik uzun; ortalamak sayfayi asagi itiyor ve ilk
   ekranda bosluk birakiyor. Alt sayfalar .ic sinifi tasiyor.        */

body.ic { align-items: flex-start; }
body.ic main { max-width: 780px; width: 100%; text-align: left; }

/* Menu — dort kelimeyi gecmez. 0-4 ebeveyni telefonu tek elle
   tutuyor; acilir liste ve sekme kullanilamiyor.                    */
.menu {
  display: flex; gap: clamp(14px, 4vw, 28px);
  justify-content: center; flex-wrap: wrap;
  margin: 0 0 clamp(20px, 5vh, 36px);
  font-size: clamp(.95rem, 3.4vw, 1.05rem);
}
.menu a { color: var(--sus); text-decoration: none; padding: 6px 2px; }
.menu a:hover, .menu a:focus-visible { color: var(--lacivert); }
.menu a[aria-current="page"] {
  color: var(--lacivert); font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--sari);
}

.marka-kucuk { display: block; margin: 0 auto clamp(12px, 3vh, 20px); }
.marka-kucuk img { width: clamp(120px, 34vw, 168px); height: auto; display: block; }

h2.bolum {
  font-size: clamp(1.25rem, 5vw, 1.6rem);
  margin: clamp(26px, 6vh, 44px) 0 6px;
}
p.bolum-alt { color: var(--sus); margin: 0 0 clamp(16px, 4vh, 24px); line-height: 1.55; }

/* Klip izgarasi — dikey video, 9:16 */
/* Sutun sayisi SABIT, auto-fill degil. auto-fill ile masaustunde
   bes sutun cikiyordu ve ana sayfadaki alti kart 5+1 diziliyordu —
   son kart tek basina alt satirda kaliyordu. Sabit sayida her
   genislikte tam satir doluyor: telefonda 2, tablette 3, masaustunde 6. */
.izgara {
  display: grid; gap: clamp(12px, 3vw, 18px);
  grid-template-columns: repeat(2, 1fr);
  margin: 0 0 clamp(20px, 5vh, 32px);
}
@media (min-width: 620px) { .izgara { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .izgara { grid-template-columns: repeat(6, 1fr); } }
.klip-kart { text-decoration: none; color: inherit; display: block; }
.klip-kart img {
  /* height:auto ZORUNLU. Etiketteki height="960" bir "sunum ipucu"
     sayiliyor ve iki olcu birden verilince aspect-ratio devre disi
     kaliyor: kartlar 141 piksel genisliginde 960 piksel yuksekliginde
     ciktiydi. Olculdu, tahmin degil. */
  width: 100%; height: auto; aspect-ratio: 9/16; object-fit: cover;
  border-radius: 18px; display: block;
  background: var(--kum);
  box-shadow: 0 4px 14px rgba(22,35,63,.10);
}
.klip-kart span { display: block; margin-top: 8px; font-size: .92rem; }
.klip-kart small { color: var(--sus); }

/* Oynatici.
   max-height ZORUNLU: 9:16 dikey video 390px genislikte 693px
   yuksekliginde oluyor ve telefonda ekrani tek basina dolduruyordu —
   altindaki hicbir sey ilk ekranda gorunmuyordu. Once yukseklik
   sinirlaniyor, genislik ona uyuyor. */
.oynatici {
  height: 56svh; width: auto; aspect-ratio: 9/16;
  max-width: 100%;
  border-radius: 22px; display: block; margin: 0 auto;
  background: #000; box-shadow: 0 6px 20px rgba(22,35,63,.16);
}
.klip-bilgi { text-align: center; color: var(--sus); margin: 14px 0 0; }

/* Metin sayfalari */
.yazi p { line-height: 1.7; margin: 0 0 1em; }
.yazi h3 { margin: clamp(22px,5vh,32px) 0 8px; font-size: 1.1rem; }
.yazi ul { line-height: 1.7; padding-left: 1.2em; }

/* Dil secici — alt bilgide, gosterisli degil */
.dil { margin-top: 10px; font-size: .88rem; color: var(--sus); }
.dil a { color: var(--sus); }

/* ── YENIDEN TASARIM · 15.08.2026 ─────────────────────────────────────
   Ana sayfa 720 piksellik maskot + kelime logosu ile aciliyordu;
   telefonda ilk ekranin tamami markaydi ve ziyaretci ne oldugunu
   anlamadan kaydirmak zorunda kaliyordu. Kurucunun ozeti: "bok gibi
   olmus". Yeni duzen: ust seritte marka + menu, sonra tek cumlelik
   vaat, sonra icerik.

   Marka kaybolmadi — maskot asagida "Neden sozsuz" bolumunde, metnin
   yanindaki yerini aldi. Vitrin degil, anlatinin parcasi.             */

body, body.ic { align-items: flex-start; }
body { padding-top: clamp(14px, 3vh, 24px); }
main { max-width: 880px; width: 100%; text-align: left; }
body:not(.ic) main { text-align: left; }

/* Ust serit — marka solda, menu sagda. Telefonda alt alta gecmez;
   ikisi de kisa tutuldu ki tek satirda kalsin.                        */
.ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 0 0 clamp(22px, 5vh, 40px);
}
.marka { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.marka img:first-child { width: 40px; height: 40px; }
.marka .kelime { width: auto; height: clamp(22px, 5.4vw, 28px); }
.ust .menu { margin: 0; justify-content: flex-end; }

/* Giris alani — metin solda, oynatici sagda. Telefonda alt alta.     */
.giris-alan {
  display: grid; gap: clamp(18px, 4vw, 32px);
  grid-template-columns: 1fr;
  align-items: center;
  margin: 0 0 clamp(30px, 7vh, 52px);
}
@media (min-width: 720px) { .giris-alan { grid-template-columns: 1.1fr .9fr; } }

.giris-alan h1 {
  font-size: clamp(1.7rem, 7vw, 2.5rem);
  line-height: 1.15; margin: 0 0 12px;
}
.giris-alan .giris { margin: 0 0 16px; font-size: 1.02rem; line-height: 1.6; }
.giris-alan .oynatici { height: auto; width: 100%; max-width: 300px; }

.rozetler { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.rozet {
  background: var(--kum); color: var(--lacivert);
  border-radius: 999px; padding: 6px 13px;
  font-size: .84rem; font-weight: 600;
}

/* Bolum basligi + "hepsi" bagi ayni satirda */
.satir-baslik {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: clamp(24px, 6vh, 40px) 0 10px;
}
.satir-baslik .bolum { margin: 0; }
.satir-baslik a { color: var(--mavi); text-decoration: none; font-weight: 600;
                  font-size: .93rem; white-space: nowrap; }

/* Neden sozsuz — maskotun yeni evi */
.ne-var {
  display: grid; gap: clamp(14px, 4vw, 28px);
  grid-template-columns: 1fr; align-items: center;
  background: var(--kum); border-radius: 24px;
  padding: clamp(20px, 5vw, 32px);
  margin: clamp(26px, 6vh, 44px) 0;
}
@media (min-width: 620px) { .ne-var { grid-template-columns: 150px 1fr; } }
.ne-var img { width: clamp(110px, 30vw, 150px); height: auto; justify-self: center; }
.ne-var p { line-height: 1.65; margin: 0 0 10px; }
.ne-var a { color: var(--mavi); font-weight: 600; text-decoration: none; }

/* Ana sayfada kanal seridi sola yaslanir */
body:not(.ic) .kucukler, body .kucukler { justify-content: flex-start; }

/* ── SERI KARTI ───────────────────────────────────────────────────────
   Sitenin birimi tek bolum degil, on bolumluk seri. Seri karti bolum
   kartindan daha genis: kapak + AD + bolum sayisi tasiyor. "Bolum 9"
   neyin dokuzuncusu oldugunu soylemiyordu.                            */
.seri-izgara {
  display: grid; gap: clamp(14px, 3vw, 20px);
  grid-template-columns: repeat(2, 1fr);
  margin: 0 0 clamp(20px, 5vh, 32px);
}
@media (min-width: 620px) { .seri-izgara { grid-template-columns: repeat(3, 1fr); } }

.seri-kart { text-decoration: none; color: inherit; display: block; }
.seri-kart img {
  width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover;
  border-radius: 20px; display: block; background: var(--kum);
  box-shadow: 0 5px 16px rgba(22,35,63,.12);
  transition: transform .12s ease;
}
.seri-kart:hover img { transform: translateY(-3px); }
.seri-ad { display: block; margin-top: 10px; font-weight: 700; line-height: 1.3; }
.seri-kart small { color: var(--sus); font-size: .85rem; }

/* Iz (breadcrumb) — nerede oldugunu soyler */
.iz { font-size: .88rem; color: var(--sus); margin: 0 0 6px; }
.iz a { color: var(--sus); }
.iz span { opacity: .5; margin: 0 2px; }

/* Onceki / sonraki bolum. Otomatik gecis YOK, elle gecis var. */
.gezinme {
  display: flex; justify-content: space-between; gap: 12px;
  margin: 16px auto 0; max-width: 420px;
}
.gezinme a { color: var(--mavi); text-decoration: none; font-weight: 600;
             font-size: .92rem; }
.gezinme a:only-child:last-child { margin-left: auto; }

/* h1 kurali eski tek-sayfa doneminden kaliyor: baslik bir GORSELDI
   (kelime logosu) ve line-height:0 onun altindaki bosluğu kesiyordu.
   Artik basliklar metin; sifir satir yuksekligi iz satirinin uzerine
   binmesine yol aciyordu. Metin basliklar kendi yuksekligini alir. */
h1.bolum, h2.bolum { line-height: 1.2; }
h1.bolum { font-size: clamp(1.6rem, 6.5vw, 2.1rem); margin: 0 0 10px; }
.iz + h1.bolum { margin-top: 2px; }

/* ── SESSIZ ONIZLEME DONGUSU ──────────────────────────────────────────
   Kartlar durgun kapak gorseliyle duruyordu; kurucunun sozu "resim
   gibi duruyor". Artik her kartta dort saniyelik sessiz dongu var.
   Olculdu: onizleme 18 KB, asil klip 1,4 MB — alti kart tek kapak
   gorselinden ucuza geliyor, o yuzden JavaScript'e gerek kalmadi.  */

.kutu-onizleme { display: block; position: relative; }
.kutu-onizleme .onizleme,
.kutu-onizleme .durgun {
  width: 100%; height: auto; aspect-ratio: 9/16; object-fit: cover;
  border-radius: 18px; display: block; background: var(--kum);
  box-shadow: 0 4px 14px rgba(22,35,63,.10);
}
.kutu-onizleme .durgun { display: none; }
.seri-kart .kutu-onizleme .onizleme,
.seri-kart .kutu-onizleme .durgun {
  aspect-ratio: 4/5; border-radius: 20px;
  box-shadow: 0 5px 16px rgba(22,35,63,.12);
  transition: transform .12s ease;
}
.seri-kart:hover .kutu-onizleme .onizleme { transform: translateY(-3px); }

/* Mansetteki dongu: cerceve oynaticiyla ayni, kumanda yok. */
.oynatici.onizleme { pointer-events: none; }

/* HAREKET AZALTMA — isletim sistemi ayari. 0-4 yas markasinda "sakin"
   bir sozumuz var; ayarini yapmis ziyaretcide donguyu durdurmak o
   sozun parcasi. Dongu gizlenir, durgun kapak gorunur. */
@media (prefers-reduced-motion: reduce) {
  .kutu-onizleme .onizleme { display: none; }
  .kutu-onizleme .durgun   { display: block; }
  .oynatici.onizleme       { display: none; }
}

/* Bolum sayfasi: video kendiliginden baslar ama SESSIZ.
   Tarayicilar sesli otomatik baslatmayi engelliyor — tiklama bir
   sonraki sayfaya izin devretmiyor. Sessiz baslatip hoparlore
   dokunmayi soylemek, durgun bir kapakla beklemekten iyi. */
.ses-notu {
  text-align: center; color: var(--sus); font-size: .85rem;
  margin: 8px 0 0;
}

/* "Bitince siradaki bolume gec" — VARSAYILAN KAPALI.
   Gosterisli bir dugme degil, sessiz bir ayar: acan acar. */
.devam { text-align: center; margin: 14px 0 0; }
.devam label {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--sus); font-size: .9rem; cursor: pointer;
  background: var(--kum); border-radius: 999px; padding: 8px 16px;
}
.devam input { width: 17px; height: 17px; accent-color: var(--mavi);
               margin: 0; cursor: pointer; }
.devam label:hover { color: var(--lacivert); }