:root{--paper:#F3F6EF;--rule:#C9D8C3;--ink:#1E3550;--ink-soft:#4A5E74;--red:#C8372D;--pencil:#7C8A80;--card:#FFF;--yellow:#F6E27A}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 "Source Sans 3",system-ui,sans-serif;
  background-image:repeating-linear-gradient(to bottom,transparent 0 31px,var(--rule) 31px 32px)}
a{color:var(--ink)}
img,video{max-width:100%;height:auto;display:block}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.wrap{max-width:68rem;margin:0 auto;padding:0 1rem}
h1,h2,h3{font-family:"Bricolage Grotesque",sans-serif;line-height:1.1;margin:0}
.hand{font-family:"Caveat",cursive;font-weight:600;color:var(--red)}
.num{font-variant-numeric:tabular-nums}
.soft{color:var(--ink-soft)}

/* Üst */
header.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 0}
.logo{font:800 1.25rem "Bricolage Grotesque",sans-serif;text-decoration:none;white-space:nowrap}
.logo span{color:var(--red)}
.nav{display:flex;align-items:center;gap:1.1rem;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{text-decoration:none;font-weight:600;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:5px}
.nav .follow-btn{background:var(--red);color:#fff;padding:.4rem .85rem;border-radius:999px}
.nav .follow-btn:hover{text-decoration:none;background:#a92c23}
@media (max-width:820px){header.top{flex-wrap:wrap}.nav{width:100%;gap:.95rem;padding-bottom:.3rem;margin-right:-1rem;padding-right:1rem}}

/* Ortak bloklar */
section{padding:2.75rem 0}
.head{max-width:42rem;margin-bottom:1.5rem}
.head h1{font-size:clamp(2.2rem,6vw,3.6rem);font-weight:800;letter-spacing:-.02em}
.head h2{font-size:clamp(1.7rem,4vw,2.4rem);font-weight:800}
.head p{color:var(--ink-soft);margin:.6rem 0 0;font-size:1.1rem}
.head .hand{font-size:1.5rem;display:block;margin-bottom:.2rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--ink);color:var(--paper);padding:.75rem 1.2rem;border-radius:8px;font-weight:700;text-decoration:none;border:2px solid var(--ink);cursor:pointer;font-size:1rem;font-family:inherit}
.btn:hover{background:#13253a}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.red:hover{background:#a92c23}
.btn svg{width:1.2em;height:1.2em;flex:none}
.more{font-weight:700;text-decoration:none;border-bottom:3px solid var(--red)}
.box{background:var(--card);border:2px solid var(--ink);border-radius:8px}
.tilt{box-shadow:6px 6px 0 var(--ink)}
.tag{display:inline-block;font:700 .78rem "Source Sans 3",sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.gelecek{display:none!important}

/* Ana sayfa vitrini */
.vitrin{display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;align-items:center;padding:1.5rem 0 2.5rem}
.vitrin h1{font-size:clamp(2.4rem,6.4vw,4.6rem);font-weight:800;letter-spacing:-.025em}
.vitrin h1 em{font-style:normal;color:var(--red)}
.vitrin .kim{font-size:1.2rem;color:var(--ink-soft);max-width:34rem;margin:1.1rem 0 1.4rem}
.takip-row{display:flex;flex-wrap:wrap;gap:.6rem}
.sahne{position:relative}
.telefon{background:var(--ink);border-radius:28px;padding:10px;max-width:320px;margin:0 auto;box-shadow:8px 8px 0 var(--red)}
.telefon video,.telefon img{height:auto;border-radius:20px;width:100%;aspect-ratio:9/16;object-fit:cover;background:#000}
.telefon .kart-img{aspect-ratio:4/5}
.sahne .etiket{position:absolute;left:-.5rem;top:-1rem;background:var(--yellow);border:2px solid var(--ink);padding:.25rem .7rem;font:700 .95rem "Source Sans 3";transform:rotate(-3deg);z-index:2}
.sahne .alt{text-align:center;margin-top:.9rem}
.sahne .alt b{display:block;font:800 1.2rem "Bricolage Grotesque"}
.geri-sayim{background:var(--card);border:2px solid var(--ink);border-radius:20px;aspect-ratio:9/16;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:1.5rem}
.geri-sayim img{width:70%}
.geri-sayim .sayac{font:800 2rem "Bricolage Grotesque";margin-top:.5rem}

/* Sayaçlar */
.sayaclar{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:.8rem}
.sayac-kart{background:var(--card);border:2px solid var(--ink);border-radius:8px;padding:.9rem 1rem}
.sayac-kart b{display:block;font:800 2rem/1.1 "Bricolage Grotesque";letter-spacing:-.02em}
.sayac-kart b.red{color:var(--red)}
.sayac-kart span{color:var(--ink-soft);font-size:.95rem;line-height:1.3;display:block;margin-top:.2rem}

/* Bölüm kartları */
.bolum-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr));gap:1.1rem}
.bkart{background:var(--card);border:2px solid var(--ink);border-radius:8px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .15s}
.bkart:hover{transform:translateY(-3px);box-shadow:4px 4px 0 var(--ink)}
.bkart img{aspect-ratio:4/5;object-fit:cover;width:100%;border-bottom:2px solid var(--ink)}
.bkart>span{display:block}
.bkart .v{position:relative}
.bkart .v::after{content:"▶";position:absolute;right:.6rem;bottom:.6rem;background:var(--red);color:#fff;width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;font-size:.9rem}
.bkart div.t{padding:.75rem .9rem 1rem}
.bkart h3{font-size:1.12rem;margin:.15rem 0 .3rem}
.bkart p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.4}
.basla{background:var(--yellow);border:2px solid var(--ink);border-radius:10px;padding:1.4rem}
.basla ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.8rem;counter-reset:b}
.basla li{counter-increment:b}
.basla a{display:block;background:var(--card);border:2px solid var(--ink);border-radius:8px;padding:.7rem .8rem;text-decoration:none;height:100%}
.basla a::before{content:counter(b);font:800 1.6rem "Bricolage Grotesque";color:var(--red);display:block}
.basla a b{display:block;line-height:1.25}
.basla a span{font-size:.9rem;color:var(--ink-soft)}
.filtre{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.2rem}
.filtre button{font:600 .95rem "Source Sans 3";background:var(--card);border:2px solid var(--ink);border-radius:999px;padding:.35rem .85rem;cursor:pointer;color:var(--ink)}
.filtre button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* Bölüm sayfası */
.bolum{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem;align-items:start;padding-top:1rem}
.galeri{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem}
.galeri img{scroll-snap-align:start;width:85%;flex:none;border:2px solid var(--ink);border-radius:8px;aspect-ratio:4/5;object-fit:cover;background:#fff}
.galeri>div{flex:none;width:min(85%,360px);scroll-snap-align:start}
.galeri video{width:100%;max-width:360px;border-radius:12px;border:2px solid var(--ink);background:#000;aspect-ratio:9/16}
.metin p{margin:0 0 .9rem;white-space:pre-line}
.gunluk{background:var(--card);border:2px dashed var(--red);border-radius:8px;padding:1rem 1.1rem;margin:1.2rem 0}
.gunluk .hand{font-size:1.45rem;display:block;line-height:1}
.onceki-sonraki{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem;flex-wrap:wrap}
.kilit{display:none}
body.kilitli .kilit{display:block}
body.kilitli .icerik{display:none}

/* Paylaş */
.paylas{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1.2rem 0}
.paylas .lbl{font:600 1.35rem "Caveat";color:var(--red);margin-right:.2rem}
.paylas a,.paylas button{font:700 .92rem "Source Sans 3";display:inline-flex;align-items:center;gap:.35rem;background:var(--card);border:2px solid var(--ink);color:var(--ink);border-radius:999px;padding:.4rem .8rem;text-decoration:none;cursor:pointer}
.paylas a:hover,.paylas button:hover{background:var(--ink);color:var(--paper)}
.paylas .wa{background:#1F8F4E;border-color:#1F8F4E;color:#fff}
.paylas .wa:hover{background:#176d3b;border-color:#176d3b}

/* Karakterler */
.dar{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.kkart{background:var(--card);border:2px solid var(--ink);border-radius:10px;padding:1rem;display:flex;flex-direction:column;position:relative}
.kkart img{width:100%;aspect-ratio:400/460;object-fit:contain;background:linear-gradient(#EAF0E6,#fff);border-radius:6px}
.kkart h3{font-size:1.3rem;margin:.6rem 0 0}
.kkart .rol{color:var(--red);font-weight:700;font-size:.95rem}
.kkart p{margin:.4rem 0 0;font-size:.97rem;line-height:1.4}
.kkart .an{margin-top:.6rem;font:600 1.15rem/1.2 "Caveat";color:var(--ink-soft)}
.kkart .yakinda{position:absolute;top:.8rem;right:.8rem;background:var(--yellow);border:2px solid var(--ink);font:700 .78rem "Source Sans 3";padding:.1rem .45rem;border-radius:4px}
.kkart.kucuk{flex-direction:row;gap:.8rem;align-items:center;padding:.7rem}
.kkart.kucuk img{width:5.5rem;flex:none}
.kkart.kucuk .yakinda{position:static;display:inline-block;margin-bottom:.25rem}
.kkart.kucuk h3{font-size:1.1rem;margin:0}
.kkart.kucuk p{font-size:.92rem}
.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:.8rem}
.tema{margin-top:.6rem;align-self:flex-start;font:700 .9rem "Source Sans 3";background:none;border:2px solid var(--ink);border-radius:999px;padding:.25rem .75rem;cursor:pointer;color:var(--ink)}
.tema[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.kkart.kucuk .tema{margin-top:.35rem}

/* Sözlük ve defter */
.sozluk{display:grid;gap:1rem}
.terim{background:var(--card);border:2px solid var(--ink);border-radius:8px;padding:1.1rem 1.2rem;scroll-margin-top:1rem}
.terim h2{font-size:1.5rem}
.terim .yanlis{font:600 1.35rem/1.25 "Caveat";color:var(--ink-soft);margin:.4rem 0 .2rem;text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}
.terim .dogru{margin:.4rem 0 0}
.terim .dogru b{color:var(--red)}
.terim .alt{display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;margin-top:.7rem;font-size:.95rem}
.harfler{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.2rem}
.harfler a{font:700 .95rem "Source Sans 3";background:var(--card);border:2px solid var(--ink);border-radius:6px;padding:.2rem .6rem;text-decoration:none}
.defter{background:var(--card);border:2px solid var(--ink);border-radius:6px;padding:1.2rem 1.4rem 1.2rem 3.4rem;position:relative;
  background-image:linear-gradient(90deg,transparent 2.6rem,#E8A49E 2.6rem,#E8A49E calc(2.6rem + 2px),transparent calc(2.6rem + 2px)),repeating-linear-gradient(to bottom,transparent 0 35px,#DCE6D6 35px 36px)}
.defter article{padding:.2rem 0 1.1rem}
.defter time{font:700 .85rem "Source Sans 3";color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em}
.defter p{font:600 1.55rem/1.2 "Caveat";margin:.15rem 0 0;color:var(--ink)}
.defter a{font-size:.9rem}

/* Oyunlar */
.oyun-kartlar{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.oyun-kart{background:var(--card);border:2px solid var(--ink);border-radius:10px;padding:1.4rem;text-decoration:none;display:block}
.oyun-kart:hover{box-shadow:6px 6px 0 var(--red)}
.oyun-kart h3{font-size:1.5rem;margin:.3rem 0}
.oyun-kart p{margin:0;color:var(--ink-soft)}
.oyun-kart .hand{font-size:1.4rem}
.soru{max-width:40rem}
.soru h2{font-size:1.6rem;margin:.4rem 0 1rem}
.secenek{display:block;width:100%;text-align:left;font:600 1.08rem "Source Sans 3";background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:8px;padding:.85rem 1rem;margin:.55rem 0;cursor:pointer}
.secenek:hover{background:var(--yellow)}
.ilerleme{height:8px;background:var(--rule);border-radius:4px;overflow:hidden;max-width:40rem}
.ilerleme i{display:block;height:100%;background:var(--red);transition:width .3s}
.sonuc{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:2rem;align-items:start}
.sonuc canvas{width:100%;height:auto;border:2px solid var(--ink);border-radius:12px;background:#fff}
.mizan-oyun{max-width:36rem}
.oyun-ust{display:flex;justify-content:space-between;align-items:center;font:800 1.3rem "Bricolage Grotesque";margin-bottom:.6rem}
.oyun-ust .sure.az{color:var(--red)}
table.oyun{width:100%;border-collapse:collapse;background:var(--card);border:2px solid var(--ink);font-size:1rem}
table.oyun th{text-align:right;border-bottom:2px solid var(--ink);padding:.4rem .5rem;color:var(--ink-soft);font-weight:600}
table.oyun th:first-child,table.oyun td:first-child{text-align:left}
table.oyun td{text-align:right;padding:.5rem;border-bottom:1px solid var(--rule)}
table.oyun tbody tr{cursor:pointer}
table.oyun tbody tr:hover td{background:#FFF7D1}
table.oyun tr.dogru td{background:#D8F0DC}
table.oyun tr.yanlis td{background:#F8D9D6}
table.oyun tfoot td{font-weight:800;border-top:2px solid var(--ink)}
.fark{color:var(--red);font-weight:800}
.ipucu{min-height:2.2rem;font:600 1.35rem/1.2 "Caveat";color:var(--red);margin:.7rem 0}

/* Takip bandı ve hesaplayıcılar */
.takip{background:var(--ink);color:var(--paper);border-radius:12px;padding:2rem;display:grid;grid-template-columns:1.2fr 1fr;gap:1.5rem;align-items:center}
.takip h2{font-size:clamp(1.6rem,3.5vw,2.3rem)}
.takip p{margin:.5rem 0 0;opacity:.85}
.takip .takip-row .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.takip .takip-row .btn.red{background:var(--red);border-color:var(--red);color:#fff}
.araclar{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.5rem}
.araclar a{background:var(--card);border:1.5px solid var(--ink);border-radius:6px;padding:.55rem .75rem;text-decoration:none;font-weight:600;font-size:.97rem}
.araclar a:hover{background:var(--yellow)}
.teaser{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.teaser a{text-decoration:none;text-align:center;background:var(--card);border:2px solid var(--ink);border-radius:10px;padding:.6rem}
.teaser img{width:100%;aspect-ratio:400/460;object-fit:contain}
.teaser b{display:block;font-family:"Bricolage Grotesque"}
.iki{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}

footer{padding:2.5rem 0 3rem;font-size:.92rem;color:var(--ink-soft)}
footer p{margin:.3rem 0;max-width:46rem}
footer nav{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-bottom:.8rem}

@media (max-width:820px){
  .vitrin,.bolum,.takip,.sonuc,.oyun-kartlar,.iki{grid-template-columns:1fr}
  .dar,.teaser{grid-template-columns:1fr 1fr}
  .vitrin{gap:1.8rem}
  .galeri img{width:88%}
  .bolum-grid{grid-template-columns:1fr 1fr;gap:.7rem}
  .bkart div.t{padding:.55rem .6rem .7rem}.bkart h3{font-size:1rem}.bkart p{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}