/* TAVLA.APP — site sayfaları (v0.2, ana sayfa + kurallar) */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --zemin:#FBFBFD; --murekkep:#1D1D1F; --gri:#6E6E73; --acikgri:#F5F5F7;
  --ceviz:#3E2A18; --altin:#B3722A; --cizgi:rgba(0,0,0,.08);
}
html{scroll-behavior:smooth}
body{background:var(--zemin);color:var(--murekkep);line-height:1.6;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{letter-spacing:-.025em;font-weight:700}
a{color:var(--altin)}

/* üst */
.site-ust{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;
  padding:14px 22px;background:rgba(251,251,253,.78);backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);border-bottom:1px solid var(--cizgi)}
.site-ust>*{max-width:1080px}
.marka{font-weight:700;font-size:1.15rem;color:var(--murekkep);text-decoration:none;letter-spacing:-.02em}
.marka b{color:var(--altin);font-weight:700}
.site-ust nav{display:flex;gap:24px;align-items:center}
.site-ust nav a{color:var(--murekkep);text-decoration:none;font-weight:500;font-size:.92rem;opacity:.8;transition:opacity .2s}
.site-ust nav a:hover{opacity:1}
.cta-kucuk{background:var(--ceviz);color:#F6EFE2!important;padding:8px 20px;border-radius:999px;opacity:1!important;
  font-weight:600;transition:background .2s}
.cta-kucuk:hover{background:#553B22}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  max-width:1080px;margin:0 auto;padding:76px 22px 88px}
.ustyazi{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--altin);margin-bottom:16px}
.hero h1{font-size:clamp(3.2rem,8vw,5.6rem);font-weight:800;line-height:1.02;letter-spacing:-.035em;margin-bottom:20px}
.alt-baslik{font-size:1.18rem;color:var(--gri);max-width:46ch;margin-bottom:34px;line-height:1.55}
.ik-oyna{width:15px;height:15px;fill:currentColor;flex:none}
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--ceviz);color:#F6EFE2;text-decoration:none;font-weight:600;
  font-size:1.1rem;padding:16px 40px;border-radius:999px;
  box-shadow:0 12px 30px -10px rgba(62,42,24,.45);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.2),box-shadow .18s,background .18s}
.cta:hover{transform:translateY(-2px);background:#553B22;box-shadow:0 18px 40px -12px rgba(62,42,24,.5)}
.mini-not{font-size:.85rem;color:var(--gri);margin-top:16px}
.hero-tahta svg{width:100%;height:auto;border-radius:20px;box-shadow:0 40px 90px -20px rgba(40,25,10,.45)}

/* özellikler */
.ozellikler{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1080px;margin:0 auto;padding:0 22px 88px}
.oz{background:var(--acikgri);border-radius:22px;padding:32px 28px;transition:transform .25s cubic-bezier(.2,.9,.3,1)}
.oz:hover{transform:translateY(-4px)}
.oz h2{font-size:1.2rem;margin-bottom:10px}
.oz p{color:var(--gri);font-size:.95rem;line-height:1.6}

/* metin bölümleri */
.metin{max-width:720px;margin:0 auto;padding:0 22px 64px}
.metin h1{font-size:clamp(2.4rem,6vw,3.4rem);margin-bottom:16px;letter-spacing:-.03em}
.metin h2{font-size:1.6rem;margin:44px 0 12px}
.metin p{color:var(--gri);margin-bottom:14px;font-size:1.02rem}
.metin strong,.metin em{color:var(--murekkep)}
.makale{padding-top:44px}
.giris{font-size:1.14rem}
.cta-satir{margin-top:44px;text-align:center}

/* SSS */
.sss{max-width:720px;margin:0 auto;padding:0 22px 96px}
.sss h2{font-size:1.6rem;margin-bottom:20px}
.sss details{border-radius:16px;margin-bottom:10px;background:var(--acikgri);overflow:hidden}
.sss summary{padding:18px 22px;cursor:pointer;font-weight:600;list-style:none;font-size:.98rem}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:'+';float:right;color:var(--altin);font-weight:600;font-size:1.2rem;line-height:1}
.sss details[open] summary::after{content:'−'}
.sss details p{padding:0 22px 18px;color:var(--gri)}

/* alt */
.site-alt{border-top:1px solid var(--cizgi);max-width:1080px;margin:0 auto;padding:38px 22px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.site-alt p{color:var(--gri);font-size:.85rem;margin-top:6px}
.site-alt nav{display:flex;flex-direction:column;gap:8px}
.site-alt nav a{color:var(--gri);text-decoration:none;font-size:.9rem}
.site-alt nav a:hover{color:var(--murekkep)}
.telif{width:100%;text-align:center;color:var(--gri);opacity:.7;font-size:.78rem!important;margin-top:12px}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:44px;text-align:center;gap:36px}
  .alt-baslik{margin:0 auto 34px}
  .hero-tahta{max-width:460px;margin:0 auto}
  .ozellikler{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;scroll-behavior:auto}
}


/* ---- ana sayfa demo animasyonu: zar gelir, pul oynar, rakip pul kırılır (9 sn döngü) ---- */
.hero-tahta .demo-zar{opacity:0;transform-origin:center;animation:demoZar 9s ease-in-out infinite}
.hero-tahta .demo-zar2{animation-name:demoZar2}
@keyframes demoZar{
  0%,4%{opacity:0;transform:translate(-36px,-18px) rotate(-40deg)}
  10%{opacity:1;transform:translate(4px,2px) rotate(6deg)}
  13%{transform:translate(0,0) rotate(0)}
  78%{opacity:1}84%,100%{opacity:0}
}
@keyframes demoZar2{
  0%,7%{opacity:0;transform:translate(38px,-20px) rotate(45deg)}
  13%{opacity:1;transform:translate(-3px,2px) rotate(-5deg)}
  16%{transform:translate(0,0) rotate(0)}
  78%{opacity:1}84%,100%{opacity:0}
}
/* beyaz pul: 97,40 → 440,40 hanesine gider (4'lük), sonra 440→523 üstüne biner gibi geri döngü */
.hero-tahta .demo-kayan{animation:demoKayan 9s cubic-bezier(.45,.05,.35,1) infinite}
@keyframes demoKayan{
  0%,20%{transform:translate(0,0)}
  30%{transform:translate(170px,-14px)}
  40%,76%{transform:translate(343px,0)}
  86%,100%{transform:translate(0,0);opacity:1}
  84%{opacity:0}
  85%{opacity:0}
}
/* siyah pul: beyaz gelince kırılır — bara zıplar, kaybolur, döngü başında geri gelir */
.hero-tahta .demo-kirilan{animation:demoKirilan 9s ease-in-out infinite}
@keyframes demoKirilan{
  0%,38%{transform:translate(0,0);opacity:1}
  46%{transform:translate(-160px,120px) scale(.92);opacity:1}
  52%,84%{transform:translate(-160px,140px) scale(.9);opacity:.85}
  90%,100%{transform:translate(0,0);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .hero-tahta .demo-zar,.hero-tahta .demo-kayan,.hero-tahta .demo-kirilan{animation:none}
  .hero-tahta .demo-zar{opacity:1}
}

/* v0.3.0: üst barda kullanıcı adı */
.ust-kadi{display:inline-block;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  vertical-align:middle;margin-right:14px;color:#1D1D1F;text-decoration:none;
  font:600 14px/1 system-ui,-apple-system,sans-serif;padding:8px 13px;border:1px solid #E2DCCE;border-radius:999px}
.ust-kadi:hover{background:#F5F1E8}

/* --- kayıt: avatar seçici + yaş onayı (v0.4.0) --- */
.avatarIzgara { display:flex; flex-wrap:wrap; gap:8px; }
.avatarSec { border:2px solid transparent; border-radius:50%; padding:0; background:none;
  cursor:pointer; line-height:0; transition:border-color .12s, transform .12s; }
.avatarSec svg { display:block; border-radius:50%; }
.avatarSec:hover { transform:translateY(-1px); }
.avatarSec.aktif { border-color:#0F766E; box-shadow:0 0 0 2px rgba(15,118,110,.18); }
.yasOnay { display:flex; align-items:flex-start; gap:9px; margin:2px 0 4px;
  font:400 13.5px/1.45 system-ui,-apple-system,sans-serif; color:#4A4A4F; cursor:pointer; }
.yasOnay input { margin-top:2px; flex:none; width:16px; height:16px; accent-color:#0F766E; }
.yasOnay a { color:#0F766E; font-weight:600; text-decoration:none; }