/* ------------------------------------------------------------------ palet
   ⚠️ TEK TEMA, BİLEREK KOYU. Oyun karanlıkta ışık arama oyunu; krem bir
   sayfa bütün fikri kaybediyor. Renkler oyunun kendi paletinden
   (Sahne.swift): ALTIN 240,178,70 · KREM 255,246,232 · KONTUR 86,54,34.
   Zemin her yerde açıkça boyanıyor, hiçbir renk temaya bırakılmıyor. */
:root{
  color-scheme: dark;
  --gece:#17110c;
  --gece2:#1f1710;
  --kagit:#2a1f16;
  --krem:#fff6e8;
  --soluk:#c4ac8e;
  --sonuk:#93805f;
  --altin:#f0b246;
  --cizgi:#3a2b1d;
  --huzme:#ffd98a;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{
  margin:0;background:var(--gece);color:var(--krem);
  font:400 17px/1.65 Nunito,ui-rounded,"Segoe UI",system-ui,sans-serif;
}
.sar{max-width:60rem;margin:0 auto;padding-left:1.5rem;padding-right:1.5rem}
a{color:var(--altin)}
a:focus-visible,button:focus-visible{outline:2.5px solid var(--altin);outline-offset:3px;border-radius:6px}

/* ------------------------------------------------------------------ hero */
.tepe{
  position:relative;overflow:hidden;
  background:
    radial-gradient(80% 60% at 50% -8%, rgba(240,178,70,.20), rgba(240,178,70,0) 62%),
    var(--gece);
  border-bottom:1px solid var(--cizgi);
}
.hero{display:grid;gap:2.6rem;grid-template-columns:1fr;padding-top:2.2rem;padding-bottom:4rem;align-items:center}
@media (min-width:820px){ .hero{grid-template-columns:1fr 20rem;gap:3rem} }
.marka{display:flex;align-items:center;gap:.85rem;margin-bottom:1.4rem}
.marka img{width:56px;height:56px;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.marka span{font:800 1.05rem/1 Grandstander,sans-serif;letter-spacing:.02em}
h1{
  font:800 clamp(2.2rem,6vw,3.4rem)/1.07 Grandstander,ui-rounded,system-ui,sans-serif;
  margin:0 0 .7rem;letter-spacing:-.02em;text-wrap:balance;
}
h1 em{font-style:normal;color:var(--altin)}
.girisyazi{font-size:1.14rem;color:var(--soluk);margin:0 0 1.6rem;max-width:30rem}
.dugmeler{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.dugme{
  display:inline-block;text-decoration:none;font-weight:700;
  padding:.72rem 1.35rem;border-radius:999px;
  background:var(--altin);color:#3a260f;border:2px solid var(--altin);
}
.dugme.bos{background:transparent;color:var(--krem);border-color:var(--cizgi)}
.yakinda{font-size:.9rem;color:var(--sonuk)}

/* ------------------------------------------------- oynanabilir mini tahta */
.demo{
  background:var(--gece2);border:1px solid var(--cizgi);border-radius:20px;
  padding:1rem;box-shadow:0 18px 44px rgba(0,0,0,.45);
}
.tahta{
  position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,246,232,.05) 0 1px, transparent 1px 20%),
    repeating-linear-gradient(180deg, rgba(255,246,232,.05) 0 1px, transparent 1px 20%),
    #241a12;
}
/* ⚠️ `pointer-events:none` ŞART: ışın parçaları DOM'a aynalardan SONRA
   ekleniyor, yani üstlerine biniyor ve tıklamayı yiyorlardı — ayna
   çevrilmiyordu. Işın süs, tıklanan şey ayna. */
.isin{position:absolute;background:var(--huzme);box-shadow:0 0 10px 2px rgba(255,217,138,.55);border-radius:2px;pointer-events:none}
.hucre{position:absolute;width:20%;height:20%;display:grid;place-items:center;z-index:1}
.hucre img{width:82%;height:auto;display:block}
.ayna{
  width:20%;height:20%;position:absolute;padding:0;border:0;background:none;
  cursor:pointer;display:grid;place-items:center;z-index:2;
}
.ayna i{
  display:block;width:66%;height:11%;border-radius:3px;
  background:linear-gradient(180deg,#f6ecd8 0%,#cdb694 55%,#8d7654 100%);
  box-shadow:0 2px 5px rgba(0,0,0,.55);
  transition:transform .22s ease;
}
.ayna.egik i{transform:rotate(-45deg)}
.ayna.ters i{transform:rotate(45deg)}
.ayna:hover i{filter:brightness(1.15)}
/* ⚠️ Eskiden `justify-content:space-between` vardı ve "ısındı" ipucu
   kısayken tahtanın öbür ucuna fırlıyor, boşlukta duruyordu. Artık
   yazının hemen ardından geliyor. */
.altyazi{
  display:flex;flex-wrap:wrap;gap:.15rem .5rem;align-items:baseline;
  margin-top:.85rem;font-size:.92rem;color:var(--sonuk);
}
.altyazi b{color:var(--altin);font-weight:700;white-space:nowrap}
.altyazi b:empty{display:none}

/* --------------------------------------------------------------- bölümler */
section{padding-top:5rem;padding-bottom:5rem;border-top:1px solid var(--cizgi)}
h2{font:800 1.75rem/1.2 Grandstander,ui-rounded,system-ui,sans-serif;margin:0 0 .55rem;text-wrap:balance}
.altbaslik{color:var(--soluk);margin:0 0 2.2rem;max-width:36rem}

.hikaye{display:grid;gap:2rem;grid-template-columns:1fr;align-items:center}
@media (min-width:760px){ .hikaye{grid-template-columns:15rem 1fr;gap:2.6rem} }
.hikaye img{width:100%;border-radius:16px;border:1px solid var(--cizgi);display:block}
.hikaye p{font-size:1.05rem;line-height:1.75}
.hikaye h2{margin-top:0}

.serit{display:flex;gap:.85rem;overflow-x:auto;padding:.2rem .2rem 1.1rem;scroll-snap-type:x mandatory;
  scrollbar-color:var(--cizgi) transparent}
.seritnot{color:var(--sonuk);font-size:.88rem;margin:.2rem 0 0}
.serit figure{margin:0;flex:0 0 9.5rem;scroll-snap-align:start}
.serit img{width:100%;border-radius:14px;border:1px solid var(--cizgi);display:block;aspect-ratio:9/16;object-fit:cover}
.serit figcaption{font-size:.88rem;color:var(--sonuk);margin-top:.45rem;text-align:center}

.kutular{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media (min-width:720px){ .kutular{grid-template-columns:1fr 1fr} }
.kutu{background:var(--kagit);border:1px solid var(--cizgi);border-radius:16px;padding:1.1rem 1.2rem}
.kutu h3{font:700 1.03rem/1.3 Nunito,sans-serif;margin:0 0 .3rem;color:var(--krem)}
.kutu p{margin:0;color:var(--soluk);font-size:.95rem}

.sozler{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr))}
.soz{
  border:1px solid var(--cizgi);border-radius:12px;padding:.75rem .95rem;
  background:linear-gradient(180deg, rgba(240,178,70,.06), transparent);
}
.soz b{display:block;color:var(--altin);font-size:.95rem;margin-bottom:.15rem}
.soz span{color:var(--soluk);font-size:.9rem}

footer{border-top:1px solid var(--cizgi);padding-top:2.4rem;padding-bottom:3.5rem;color:var(--sonuk);font-size:.92rem}
footer nav{display:flex;gap:1.1rem;flex-wrap:wrap;margin-bottom:.7rem}


/* ------------------------------------------------------------ dil düğmesi
   ⚠️ SAĞ ÜSTTE VE SAYFANIN EN ÜSTÜNDE: oyunun İngilizce de oynandığını
   söyleyen tek görsel işaret bu. Aşağıda bir yerde olsaydı kimse görmezdi. */
.dilserit{display:flex;justify-content:flex-end;padding-top:1.15rem;padding-bottom:0}
.dil{
  display:inline-flex;border:1px solid var(--cizgi);border-radius:999px;
  overflow:hidden;background:rgba(0,0,0,.25);
}
.dil a,.dil span{
  text-decoration:none;font:700 .8rem/1 Nunito,sans-serif;letter-spacing:.06em;
  padding:.46rem .82rem;color:var(--sonuk);
}
.dil span{background:var(--altin);color:#3a260f}
.dil a:hover{color:var(--krem)}

/* parça listesi */
.parcalar{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr))}
.parca{
  border-left:2px solid var(--cizgi);padding:.3rem 0 .35rem .8rem;
}
.parca b{display:block;color:var(--krem);font-weight:700;font-size:.95rem}
.parca span{color:var(--soluk);font-size:.9rem}