/* Buun House: tek stil dosyası. Üç tema: .tema-ana (sıcak), .tema-tb (TickBlock, koyu), .tema-kid (çocuk, renkli) */
:root{
  --bg:#fff7ec; --bg2:#ffeedd; --kart:#ffffff; --yazi:#3b2416; --soluk:#7a5a46; --cizgi:rgba(59,36,22,.12);
  --vurgu:#ff7a45; --vurgu2:#ffc24b; --vurgu3:#2bb3a3; --dugmeYazi:#fff;
  --golge:0 10px 30px rgba(120,60,20,.10), 0 2px 6px rgba(120,60,20,.06);
  --r:22px; --gen:1120px;
  --font:ui-rounded,"SF Pro Rounded","Nunito","Varela Round","Trebuchet MS",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.tema-tb{
  --bg:#0b0d1a; --bg2:#12152a; --kart:#161a30; --yazi:#e9ecf6; --soluk:#a9b0c6; --cizgi:rgba(224,176,74,.28);
  --vurgu:#e0b04a; --vurgu2:#8fdcff; --vurgu3:#4f86ff; --dugmeYazi:#2a1a00;
  --golge:0 12px 34px rgba(0,0,0,.45);
}
.tema-kid{
  --bg:#eef8ff; --bg2:#fff4c9; --kart:#ffffff; --yazi:#26324a; --soluk:#5a6684; --cizgi:rgba(38,50,74,.12);
  --vurgu:#ff5d8f; --vurgu2:#ffb627; --vurgu3:#22b07d; --mavi:#2f80ed;
  --golge:0 10px 0 rgba(38,50,74,.07), 0 14px 30px rgba(47,128,237,.12);
  --r:28px;
}

*{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(--bg);color:var(--yazi);font:17px/1.6 var(--font);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5.5vw,3.6rem);font-weight:900}
h2{font-size:clamp(1.6rem,3.6vw,2.3rem);font-weight:850}
h3{font-size:1.2rem;font-weight:800}
p{margin:0 0 1em}
.kap{max-width:var(--gen);margin:0 auto;padding:0 22px}
.gec{position:absolute;left:-999px;top:8px;background:var(--kart);padding:8px 14px;border-radius:10px;z-index:99}
.gec:focus{left:8px}
:focus-visible{outline:3px solid var(--vurgu3);outline-offset:3px;border-radius:8px}

/* Üst menü */
.ust{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--cizgi)}
.ust .kap{display:flex;align-items:center;gap:16px;min-height:68px}
.logo img{height:40px;width:auto}
.tema-tb .logo img:not([src*="koyu"]){filter:brightness(0) invert(1) sepia(.3)}
.menu{margin-left:auto;display:flex;align-items:center;gap:4px}
.menu a{text-decoration:none;font-weight:700;font-size:.95rem;padding:8px 12px;border-radius:999px;color:var(--soluk)}
.menu a:hover,.menu a[aria-current=page]{color:var(--yazi);background:var(--bg2)}
.dil{border:2px solid var(--cizgi);font-weight:800!important;color:var(--yazi)!important}
.menuAc{display:none}
@media (max-width:820px){
  .menuAc{display:block;margin-left:auto}
  .menuAc summary{list-style:none;cursor:pointer;font-weight:800;padding:8px 14px;border-radius:999px;border:2px solid var(--cizgi)}
  .menuAc summary::-webkit-details-marker{display:none}
  .menuAc[open] .menu{display:flex}
  .menu{display:none;position:absolute;right:16px;top:62px;flex-direction:column;align-items:stretch;background:var(--kart);padding:10px;border-radius:18px;box-shadow:var(--golge);min-width:220px}
  .menu a{padding:12px 14px}
  .ust .menuMasa{display:none}
}
@media (min-width:821px){.menuAc{display:none!important}}

/* Düğmeler */
.dugme{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:800;padding:14px 24px;border-radius:999px;background:var(--vurgu);color:var(--dugmeYazi);box-shadow:0 6px 0 color-mix(in srgb,var(--vurgu) 70%,#000);transition:transform .15s,box-shadow .15s}
.dugme:hover{transform:translateY(-2px)}
.dugme:active{transform:translateY(3px);box-shadow:0 2px 0 color-mix(in srgb,var(--vurgu) 70%,#000)}
.dugme.ikincil{background:var(--kart);color:var(--yazi);box-shadow:0 6px 0 var(--cizgi);border:2px solid var(--cizgi)}
.dugmeler{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.etiket{display:inline-block;font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px;background:var(--bg2);color:var(--soluk)}

/* Kahraman alan */
.kahraman{position:relative;padding:64px 0 72px;overflow:hidden}
.kahraman .kap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.kahraman p.alt{font-size:1.18rem;color:var(--soluk);max-width:34em}
@media (max-width:820px){.konfeti{inset:55% 0 0 0}.kahraman{padding:36px 0 48px}.kahraman .kap{grid-template-columns:1fr}}
.tema-ana .kahraman::before,.tema-ana .kahraman::after{content:"";position:absolute;border-radius:50%;filter:blur(2px);z-index:-1}
.tema-ana .kahraman::before{width:520px;height:520px;right:-140px;top:-160px;background:radial-gradient(circle,#ffd9b8,transparent 70%)}
.tema-ana .kahraman::after{width:380px;height:380px;left:-160px;bottom:-200px;background:radial-gradient(circle,#ffe6a6,transparent 70%)}
.vitrin{position:relative;aspect-ratio:1/1;max-width:460px;justify-self:center;width:100%}
.vitrin .ev{position:absolute;inset:6% 6% 18% 6%;border-radius:40% 40% 28px 28px/30% 30% 28px 28px;background:linear-gradient(160deg,#ffb37a,#ff7a45);box-shadow:var(--golge)}
.vitrin .ev::before{content:"";position:absolute;left:50%;top:-14%;width:60%;aspect-ratio:1;transform:translateX(-50%) rotate(45deg);background:#ff9a5c;border-radius:18px;z-index:-1}
.vitrin .pencere{position:absolute;left:50%;transform:translateX(-50%);bottom:18%;width:78%;}
.vitrin .tb{position:absolute;right:-2%;top:2%;width:44%;border-radius:18px;transform:rotate(6deg);box-shadow:var(--golge);border:5px solid #fff}
.yuz{animation:salla 3.6s ease-in-out infinite}
@keyframes salla{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-8px)}}

/* Bölümler */
.bolum{padding:64px 0}
.bolum.renkli{background:var(--bg2)}
.bolumBas{max-width:40em;margin-bottom:28px}
.bolumBas p{color:var(--soluk);font-size:1.08rem}
.izgara{display:grid;gap:22px}
.iki{grid-template-columns:repeat(2,1fr)}
.uc{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.iki,.uc{grid-template-columns:1fr}}
@media (min-width:560px) and (max-width:820px){.uc{grid-template-columns:repeat(2,1fr)}}
.kart{background:var(--kart);border-radius:var(--r);box-shadow:var(--golge);padding:24px;border:1px solid var(--cizgi)}
.kart p{color:var(--soluk)}
.ilke .simge{font-size:1.6rem;width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:var(--bg2);color:var(--vurgu);margin-bottom:12px}

/* Oyun kartları (ana sayfa) */
.oyunKart{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:0;text-decoration:none;color:inherit;min-height:100%;transition:transform .2s}
.oyunKart:hover{transform:translateY(-4px)}
.oyunKart .resim{aspect-ratio:16/10;overflow:hidden;position:relative}
.oyunKart .resim img{width:100%;height:100%;object-fit:cover}
.oyunKart .govde{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
.oyunKart .ok{margin-top:auto;font-weight:800;color:var(--vurgu)}
.kartTb{background:#11142a;color:#e9ecf6;border-color:rgba(224,176,74,.35)}
.kartTb p{color:#b9bfd6}.kartTb .ok{color:#e0b04a}.kartTb .etiket{background:rgba(224,176,74,.15);color:#ffe9a8}
.kartKid .resim{background:radial-gradient(circle at 30% 30%,#fff4c9,transparent 60%),linear-gradient(135deg,#bfe6ff,#ffd3e2)}
.kartKid .resim img{object-fit:contain;padding:10px}
.kartKid .ok{color:#ff5d8f}.kartKid .etiket{background:#fff4c9;color:#b26a00}

/* İletişim bandı */
.iletisim{border-radius:var(--r);padding:36px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(135deg,var(--vurgu),var(--vurgu2));color:#fff}
.iletisim h2{margin:0}.iletisim p{margin:.3em 0 0;opacity:.95}
.iletisim .dugme{background:#fff;color:var(--yazi);box-shadow:0 6px 0 rgba(0,0,0,.15)}
.tema-tb .iletisim{color:#2a1a00}

/* TickBlock */
.tema-tb body,.tema-tb{background:radial-gradient(100% 60% at 50% 0,rgba(70,60,140,.35),transparent 60%),var(--bg)}
.tbBaslik{font-size:clamp(2.6rem,7vw,4.6rem);background:linear-gradient(180deg,#fff,#8fdcff 60%,#4f86ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.tbResim{border-radius:24px;border:1px solid var(--cizgi);box-shadow:var(--golge)}
.ozellik h3{color:#ffe9a8}
.magazalar{display:flex;flex-wrap:wrap;gap:12px}
.magaza{display:inline-flex;flex-direction:column;padding:10px 20px;border-radius:14px;border:2px solid var(--cizgi);background:var(--kart);text-decoration:none;font-weight:800;min-width:170px}
.magaza small{font-weight:600;color:var(--soluk);font-size:.78rem}
.magaza[aria-disabled=true]{opacity:.65;cursor:default}

/* Çocuk teması */
.tema-kid h1,.tema-kid h2{color:#1f3b73}
.tema-kid .kahraman{background:
  radial-gradient(circle at 12% 20%,#ffd3e2 0 60px,transparent 61px),
  radial-gradient(circle at 88% 14%,#c8f0dc 0 80px,transparent 81px),
  radial-gradient(circle at 80% 92%,#fff0a8 0 70px,transparent 71px),
  linear-gradient(180deg,#d9f0ff,#eef8ff)}
.tema-kid .dugme{background:var(--vurgu);box-shadow:0 6px 0 #c9406c}
.tema-kid .dugme.ikincil{background:#fff;color:#1f3b73;box-shadow:0 6px 0 #c9d8ef}
.tema-kid .etiket{background:#fff;color:#ff5d8f;border:2px solid #ffd3e2}
.konfeti{position:absolute;inset:0 0 0 52%;pointer-events:none;z-index:0;background-image:
  radial-gradient(circle,#ff5d8f 4px,transparent 5px),radial-gradient(circle,#ffb627 5px,transparent 6px),radial-gradient(circle,#22b07d 4px,transparent 5px),radial-gradient(circle,#2f80ed 3px,transparent 4px);
  background-size:190px 170px,230px 210px,170px 230px,140px 150px;background-position:20px 30px,90px 120px,140px 60px,60px 90px;opacity:.5}
.kahraman .kap{position:relative;z-index:1}
.kediler{position:relative;justify-self:center;width:100%;max-width:520px}
.kediler img{filter:drop-shadow(0 18px 18px rgba(31,59,115,.18));animation:zipla 3s ease-in-out infinite}
@keyframes zipla{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.maskotlar{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media (max-width:560px){.maskotlar{grid-template-columns:1fr}}
.maskot{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center}
.maskot img{width:120px;height:120px;border-radius:50%;background:var(--bg2)}
.maskot.topi img{background:#ffe0cc}
.maskot.kuzi img{background:#fff4c9}
.oyunListe{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px}
.cocukOyun{text-decoration:none;color:inherit;padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s}
.cocukOyun:hover{transform:translateY(-4px) rotate(-.6deg)}
.cocukOyun .resim{background:var(--oyunRenk2,#fff4c9);aspect-ratio:4/3;overflow:hidden}
.cocukOyun .resim img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.cocukOyun .govde{padding:18px 22px 24px}
.cocukOyun .ok{font-weight:800;color:var(--oyunRenk,#ff5d8f)}
.ebeveyn{border:3px dashed #9cc7f5;background:#fff}
.ebeveyn ul{margin:0;padding-left:1.2em}.ebeveyn li{margin:.35em 0}

/* Oyun sayfası (şablon) */
.oyunKahraman{background:linear-gradient(160deg,var(--oyunRenk2) 0%,color-mix(in srgb,var(--oyunRenk) 35%,#fff) 100%)}
.oyunKahraman h1{color:#3b2416}
.oyunKahraman .alt{color:#5b3a22!important}
.telefon{width:min(260px,70vw);aspect-ratio:390/844;border-radius:34px;border:8px solid #1f2433;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.18);background:#1f2433;justify-self:center}
.telefon img{width:100%;height:100%;object-fit:cover}
.sus{position:absolute;width:80px;z-index:2;animation:zipla 3.4s ease-in-out infinite}
.sus:nth-of-type(2){animation-delay:.6s}.sus:nth-of-type(3){animation-delay:1.2s}
.ekranlar{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;justify-items:center}
@media (max-width:820px){.ekranlar{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:70%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}.ekranlar figure{scroll-snap-align:center}}
.ekranlar figure{margin:0;text-align:center}
.ekranlar figcaption{color:var(--soluk);font-size:.92rem;margin-top:10px}
.tikler{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.tikler li{background:#fff;border-radius:18px;padding:14px 16px 14px 52px;position:relative;box-shadow:var(--golge)}
.tikler li::before{content:"✓";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--oyunRenk,#22b07d);color:#fff;font-weight:900}

/* Belge sayfaları (gizlilik vb.) */
.belge{max-width:820px;margin:0 auto;padding:44px 22px 72px}
.belge .kart{padding:28px 32px}
@media (max-width:560px){.belge .kart{padding:20px}}
.belge h1{font-size:clamp(1.8rem,4.5vw,2.6rem)}
.belge h2{font-size:1.35rem;margin-top:1.6em}
.belge h3{font-size:1.1rem;margin-top:1.3em}
.belge li{margin:.3em 0}
.belge p,.belge li,.belge td{color:var(--yazi)}
.tablo{overflow-x:auto;margin:1em 0}
.belge table{border-collapse:collapse;width:100%;font-size:.93rem;min-width:560px}
.belge th,.belge td{border-bottom:1px solid var(--cizgi);padding:10px 8px;text-align:left;vertical-align:top}
.belge th{background:var(--bg2)}
.taslak{background:#fff3c4;border:2px solid #f0c24b;color:#5a4300;border-radius:16px;padding:14px 18px;margin:0 0 22px;font-weight:700}
.taslak p{margin:.2em 0}
mark.yer{background:#ffe08a;color:#5a4300;border-radius:6px;padding:0 4px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;background:var(--bg2);padding:1px 5px;border-radius:6px}
.liste{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.liste a{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;padding:16px 20px;border-radius:18px;background:var(--kart);border:1px solid var(--cizgi);box-shadow:var(--golge);font-weight:800}
.liste a small{display:block;font-weight:600;color:var(--soluk)}
.liste a::after{content:"→";color:var(--vurgu);font-size:1.3rem}
.rozet{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;background:#fff3c4;color:#8a6500;border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:middle}
.sss details{background:var(--kart);border:1px solid var(--cizgi);border-radius:18px;padding:14px 18px;margin:0 0 12px}
.sss summary{cursor:pointer;font-weight:800}
.sss details p{margin:.6em 0 0;color:var(--soluk)}
.uyari{background:#eef8ff;border-left:5px solid #2f80ed;padding:12px 16px;border-radius:12px;color:#26324a}

/* Alt bilgi */
.alt-bilgi{border-top:1px solid var(--cizgi);padding:34px 0 44px;color:var(--soluk);font-size:.93rem}
.alt-bilgi .kap{display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:space-between;align-items:center}
.alt-bilgi nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.alt-bilgi a{text-decoration:none;font-weight:700}
.alt-bilgi a:hover{color:var(--yazi)}
.takip{display:flex;align-items:center;gap:8px}
.takip::before{content:"🛡";}

/* 404 */
.kayip{text-align:center;padding:80px 22px}
.kayip img{margin:0 auto 18px;width:200px}

/* küçük yardımcı sınıflar (satır içi stil yok: CSP) */
.ustsuz{padding-top:0}
.tbSlogan{color:#ffe9a8!important;font-weight:700}
.ustBosluk{margin-top:14px}
.slogan{font-size:1.3rem;font-weight:800}
.ebeveynKedi{width:110px;margin-bottom:6px}
.oyunVitrin{position:relative;justify-self:center;padding:0 40px}
.sus.s0{left:-10px;top:12%}.sus.s1{right:-14px;top:40%}.sus.s2{left:0;bottom:6%}
.uyari{margin-top:20px}
.belge > h1{margin-top:.2em}
.tema-kid .logo img{height:48px}

/* Ana sayfa: yazılım şirketi teması (modern, sade: gri-beyaz + mavi) */
.tema-yazilim{
  --bg:#f6f7f9; --bg2:#eef1f5; --kart:#ffffff; --yazi:#1f2733; --soluk:#5f6b7a; --cizgi:rgba(31,39,51,.10);
  --vurgu:#3b6fe0; --vurgu2:#9fb6f2; --vurgu3:#2c5cc8; --dugmeYazi:#fff;
  --golge:0 1px 2px rgba(31,39,51,.06), 0 8px 24px rgba(31,39,51,.06);
  --r:16px;
  --font:"Inter","SF Pro Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.tema-yazilim h1{font-weight:800;letter-spacing:-.025em}
.tema-yazilim h2,.tema-yazilim h3{font-weight:700;letter-spacing:-.015em}
.tema-yazilim .dugme{box-shadow:none;border-radius:12px;font-weight:700}
.tema-yazilim .dugme:hover{background:var(--vurgu3);transform:none}
.tema-yazilim .dugme:active{transform:none;box-shadow:none}
.tema-yazilim .dugme.ikincil{box-shadow:none;border:1px solid var(--cizgi)}
.tema-yazilim .dugme.ikincil:hover{background:var(--bg2)}
.tema-yazilim .etiket{background:#e3e9f7;color:var(--vurgu3)}
.tema-yazilim .kahraman{background:linear-gradient(180deg,#fff 0%,var(--bg) 100%)}
.izgara.dort{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:980px){.izgara.dort{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.izgara.dort{grid-template-columns:1fr}}
.tema-yazilim .ilke .simge{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#e3e9f7;color:var(--vurgu3);font-weight:800;font-size:1.2rem;margin-bottom:12px}
.tema-yazilim .adim .simge{background:var(--vurgu);color:#fff}
.vitrin.yz{aspect-ratio:auto;height:420px}
.vitrin.yz .yz1{position:absolute;left:0;top:30px;width:78%;border-radius:16px;box-shadow:var(--golge);border:1px solid var(--cizgi)}
.vitrin.yz .yz2{position:absolute;right:0;top:0;width:34%;border-radius:22px;box-shadow:0 18px 40px rgba(31,39,51,.18);border:6px solid #1f2733}
.kartCrm .resim{display:grid;place-items:center;background:linear-gradient(135deg,#1f2733,#34405a);min-height:220px}
.crmSimge{width:96px;height:96px;border-radius:24px;display:grid;place-items:center;font-size:48px;font-weight:800;color:#fff;background:var(--vurgu)}
.kartLb .resim img{max-height:260px;width:auto;margin:0 auto}
.kartLb .resim{background:#1f2733;display:grid;place-items:center;padding:16px 0}

/* oyun renkleri (derle.mjs üretir) */
.oyun-boya-corbasi{--oyunRenk:#ff8a3d;--oyunRenk2:#ffd84a}