/* Bejomi Games — ortak stil.
   Oyunun paletiyle aynı: koyu ceviz zemin, altın vurgu, kece yeşili.
   Dış bağımlılık yok; tek dosya, tüm sayfalar paylaşır. */

:root{
  --bg:#100e0c; --panel:#1b1714; --line:#332b24; --text:#f0e9df;
  --dim:#a09384; --acc:#f0b429; --ok:#5dd39e; --bad:#e8615a;
  --kece:#1f6b4f;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--text);
  font:16px/1.65 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background-image:
    radial-gradient(900px 520px at 78% -8%, #2a1f16 0%, transparent 60%),
    radial-gradient(700px 460px at 8% 102%, #16241d 0%, transparent 62%);
  background-attachment:fixed;
}

.sar{width:min(980px,92vw);margin:0 auto}

/* ---- üst bar ---- */
header{border-bottom:1px solid var(--line);background:rgba(16,14,12,.86);
  backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}
header .sar{display:flex;align-items:center;gap:14px;padding:14px 0}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text)}
.logo img{width:34px;height:34px;border-radius:9px;display:block}
.logo b{font-size:18px;letter-spacing:.4px}
.logo span{color:var(--acc)}
nav{margin-inline-start:auto;display:flex;gap:6px;flex-wrap:wrap}
nav a{color:var(--dim);text-decoration:none;font-size:14px;padding:7px 12px;
  border-radius:8px}
nav a:hover{color:var(--text);background:#221c18}
nav a[aria-current]{color:var(--acc);background:#221c18}

/* ---- içerik ---- */
main{padding:44px 0 72px}
h1{font:700 clamp(30px,5vw,44px)/1.15 Georgia,'Times New Roman',serif;
  letter-spacing:1px;margin:0 0 10px}
h2{font-size:22px;margin:38px 0 12px;letter-spacing:.3px}
h3{font-size:17px;margin:26px 0 8px;color:var(--acc)}
p{margin:0 0 14px;color:#ded4c7}
a{color:var(--acc)}
.alt{color:var(--dim);font-size:15px}
ul{padding-inline-start:22px}
li{margin:6px 0;color:#ded4c7}
code{background:#221c18;border:1px solid var(--line);border-radius:5px;
  padding:1px 6px;font-size:14px}

.kart{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:22px 24px;margin:18px 0}

/* ---- oyun ızgarası ---- */
.oyunlar{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  margin-top:26px}
.oyun{display:block;text-decoration:none;color:inherit;background:var(--panel);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  transition:border-color .16s,transform .16s}
.oyun:hover{border-color:#5a4a37;transform:translateY(-2px)}
.oyun .gorsel{aspect-ratio:16/9;background:#0c0a09;display:block;width:100%;
  object-fit:cover}
/* Görseli olmayan "yolda" kartları: düz siyah kutu yerine dokulu bir zemin */
div.gorsel{background:
  repeating-linear-gradient(45deg,#141110 0 12px,#181413 12px 24px);
  position:relative}
div.gorsel::after{content:'';position:absolute;inset:0;
  background:radial-gradient(220px 140px at 50% 50%,rgba(240,180,41,.07),transparent 70%)}
.oyun .yz{padding:15px 17px 18px}
.oyun h3{margin:0 0 4px;font-size:18px;color:var(--text)}
.oyun p{margin:0;font-size:14px;color:var(--dim)}
.rozet{display:inline-block;font-size:11px;letter-spacing:.7px;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;margin-bottom:9px}
.rozet.canli{background:rgba(93,211,158,.14);color:var(--ok);border:1px solid rgba(93,211,158,.3)}
.rozet.yakinda{background:rgba(160,147,132,.12);color:var(--dim);border:1px solid var(--line)}

/* ---- sürüm notları ---- */
.surum{border-inline-start:2px solid var(--line);padding-inline-start:20px;margin:0 0 30px}
.surum .ust{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:7px}
.surum .no{font:700 17px/1 system-ui,sans-serif;color:var(--acc)}
.surum .tar{font-size:13px;color:var(--dim)}

/* ---- form ---- */
label{display:block;font-size:14px;color:var(--dim);margin:16px 0 6px}
input[type=text]{width:100%;background:#0c0a09;border:1px solid var(--line);
  border-radius:10px;color:var(--text);padding:12px 14px;font:15px/1.4 ui-monospace,
  SFMono-Regular,Menlo,monospace}
input[type=text]:focus{outline:none;border-color:var(--acc)}
button{background:var(--acc);border:0;border-radius:10px;color:#231a06;
  font:600 15px/1 system-ui,sans-serif;padding:13px 20px;cursor:pointer}
button:disabled{opacity:.5;cursor:default}
button.tehlike{background:var(--bad);color:#2a0f0e}
.uyari{background:rgba(232,97,90,.09);border:1px solid rgba(232,97,90,.32);
  border-radius:12px;padding:15px 18px;margin:18px 0}
.uyari b{color:var(--bad)}
.sonuc{margin-top:16px;padding:13px 16px;border-radius:10px;font-size:15px;display:none}
.sonuc.gor{display:block}
.sonuc.iyi{background:rgba(93,211,158,.11);border:1px solid rgba(93,211,158,.32);color:var(--ok)}
.sonuc.kotu{background:rgba(232,97,90,.11);border:1px solid rgba(232,97,90,.32);color:var(--bad)}

/* ---- alt ---- */
footer{border-top:1px solid var(--line);padding:26px 0 40px;margin-top:40px}
footer .sar{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
footer a{color:var(--dim);text-decoration:none;font-size:14px}
footer a:hover{color:var(--text)}
footer .tel{margin-inline-start:auto;color:#6f6559;font-size:13px}

@media (max-width:560px){
  header .sar{padding:11px 0}
  nav a{padding:6px 9px;font-size:13px}
  main{padding:30px 0 50px}
}