@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  /* Renkler logodan alındı */
  --gece:#1b1668;
  --gece-2:#151046;
  --panel:#29248c;      /* logonun indigo tonu */
  --panel-2:#3a32ab;
  --cizgi:#060512;      /* logonun siyah konturu */
  --stud:#fadd10;       /* BLOX sarısı */
  --mavi:#25c0dd;       /* CODES mavisi */
  --pembe:#ee2882;      /* ES pembesi */
  --metin:#f2f0ff;
  --soluk:#a9a3e0;
  --tugla: 5px 5px 0 var(--cizgi);
  --tugla-kucuk: 3px 3px 0 var(--cizgi);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(900px 500px at 15% -10%, #332bb0 0%, transparent 60%),
    var(--gece);
  color:var(--metin);
  font:400 16px/1.65 Inter, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.sarmal{width:min(1120px,92vw);margin-inline:auto}

/* ---------- Üst bar ---------- */
.ust{
  border-bottom:3px solid var(--cizgi);
  background:var(--gece-2);
  position:sticky;top:0;z-index:40;
}
.ust-ic{display:flex;align-items:center;gap:20px;height:72px}
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:34px;width:auto}
.logo-etiket{
  font:600 13px Inter;color:var(--metin);
  background:var(--pembe);border:2px solid var(--cizgi);
  border-radius:8px;padding:3px 8px;
}
.ust-menu{margin-left:auto;display:flex;gap:22px;font-weight:500;color:var(--soluk)}
.ust-menu a:hover{color:var(--stud)}

/* ---------- Kahraman + arama ---------- */
.kahraman{padding:52px 0 40px;text-align:center}
.kahraman-logo{
  height:clamp(58px,9vw,92px);width:auto;margin:0 auto 22px;
  filter:drop-shadow(0 6px 0 rgba(6,5,18,.35));
}
.kahraman h1{
  font:700 clamp(30px,5.4vw,52px)/1.1 Fredoka;
  margin:0 0 14px;letter-spacing:-.02em;
}
.kahraman p{color:var(--soluk);margin:0 auto 30px;max-width:56ch}

.arama{
  display:flex;gap:10px;max-width:620px;margin-inline:auto;
}
.arama input{
  flex:1;padding:16px 18px;font:500 16px Inter;
  color:var(--metin);background:var(--panel);
  border:3px solid var(--cizgi);border-radius:14px;
  box-shadow:var(--tugla);outline:none;
}
.arama input::placeholder{color:#8d80bb}
.arama input:focus{border-color:var(--stud)}

/* ---------- Butonlar ---------- */
.btn{
  display:inline-block;cursor:pointer;
  font:600 15px Inter;padding:14px 22px;
  border:3px solid var(--cizgi);border-radius:14px;
  box-shadow:var(--tugla);
  transition:transform .08s ease, box-shadow .08s ease;
}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--cizgi)}
.btn-birincil{background:var(--stud);color:#1a1200}
.btn-ikincil{background:var(--panel-2);color:var(--metin)}
.btn-tehlike{background:var(--pembe);color:#2a0010}
.btn-kucuk{padding:9px 14px;font-size:14px;box-shadow:var(--tugla-kucuk)}
.btn-kucuk:active{transform:translate(3px,3px)}

/* ---------- Bölüm başlığı ---------- */
.bolum{padding:38px 0}
.bolum-baslik{
  font:600 26px/1.2 Fredoka;margin:0 0 20px;
  display:flex;align-items:center;gap:12px;
}
.bolum-baslik::after{
  content:"";flex:1;height:3px;background:var(--panel-2);border-radius:2px;
}

/* ---------- Oyun kartları ---------- */
.izgara{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(236px,1fr));
}
.kart{
  background:var(--panel);
  border:3px solid var(--cizgi);border-radius:18px;
  box-shadow:var(--tugla);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .12s ease;
}
.kart:hover{transform:translateY(-4px)}
.kart-gorsel{aspect-ratio:16/10;background:var(--panel-2);object-fit:cover;width:100%;
  border-bottom:3px solid var(--cizgi)}
.kart-ic{padding:15px 16px 17px}
.kart h3{font:600 18px/1.25 Fredoka;margin:0 0 8px}
.kart-alt{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13.5px;color:var(--soluk)}

.rozet{
  font:600 12.5px Inter;padding:4px 9px;border-radius:8px;white-space:nowrap;
  border:2px solid var(--cizgi);background:var(--mavi);color:#04222b;
}
.rozet-sari{background:var(--stud);color:#2a1d00}
.rozet-gri{background:var(--panel-2);color:var(--soluk)}

/* ---------- Kod satırları ---------- */
.kod-liste{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.kod{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--panel);border:3px solid var(--cizgi);
  border-radius:16px;box-shadow:var(--tugla);padding:16px 18px;
}
.kod-metin{
  font:700 21px/1 Fredoka;letter-spacing:.06em;
  color:var(--stud);word-break:break-all;
}
.kod-odul{color:var(--soluk);font-size:14.5px;flex:1;min-width:180px}
.kod.bitti{background:transparent;border-color:var(--panel-2);box-shadow:none}
.kod.bitti .kod-metin{color:var(--soluk);text-decoration:line-through}

.kopyalandi{background:var(--mavi) !important;color:#04222b !important}

/* ---------- Oyun sayfası başlığı ---------- */
.oyun-ust{display:flex;gap:26px;align-items:center;flex-wrap:wrap;padding:34px 0 8px}
.oyun-ust img{
  width:180px;border:3px solid var(--cizgi);border-radius:18px;box-shadow:var(--tugla);
}
.oyun-ust h1{font:700 clamp(26px,4vw,40px)/1.15 Fredoka;margin:0 0 10px}
.oyun-ust p{color:var(--soluk);margin:0 0 14px;max-width:62ch}

.nasil{
  background:var(--panel);border:3px dashed var(--panel-2);
  border-radius:16px;padding:18px 22px;margin:30px 0;
}
.nasil h2{font:600 19px Fredoka;margin:0 0 10px}
.nasil ol{margin:0;padding-left:20px;color:var(--soluk)}
.nasil li{margin-bottom:5px}

/* ---------- Alt bilgi ---------- */
.alt{
  border-top:3px solid var(--cizgi);background:var(--gece-2);
  margin-top:60px;padding:28px 0;color:var(--soluk);font-size:14.5px;
}
.alt-ic{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- Boş durum ---------- */
.bos{
  text-align:center;padding:50px 20px;color:var(--soluk);
  border:3px dashed var(--panel-2);border-radius:18px;
}

/* ---------- Basit sayfalar (giriş, kurulum) ---------- */
.sade-sayfa{display:grid;place-items:center;min-height:100vh;padding:24px}
.kutu{
  width:min(420px,100%);background:var(--panel);
  border:3px solid var(--cizgi);border-radius:18px;box-shadow:var(--tugla);padding:28px;
}
.kutu-baslik{font:600 24px Fredoka;margin:0 0 18px}
.form{display:flex;flex-direction:column;gap:14px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--soluk)}
.form input,.form textarea,.form select{
  font:400 15px Inter;color:var(--metin);background:var(--gece);
  border:3px solid var(--cizgi);border-radius:12px;padding:12px 14px;outline:none;
}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--stud)}
.form textarea{min-height:100px;resize:vertical;font-family:Inter}
.uyari{
  background:var(--pembe);color:#2a0010;border:3px solid var(--cizgi);
  border-radius:12px;padding:12px 14px;font-weight:500;margin:0 0 16px;
}
.bilgi{background:var(--mavi);color:#04222b}

/* ---------- Yönetim tablosu ---------- */
.tablo{width:100%;border-collapse:separate;border-spacing:0 10px}
.tablo th{text-align:left;font:600 13px Inter;color:var(--soluk);padding:0 14px}
.tablo td{
  background:var(--panel);padding:14px;border-block:3px solid var(--cizgi);
  vertical-align:middle;
}
.tablo td:first-child{border-left:3px solid var(--cizgi);border-radius:14px 0 0 14px}
.tablo td:last-child{border-right:3px solid var(--cizgi);border-radius:0 14px 14px 0;text-align:right;white-space:nowrap}
.satir-islem{display:inline-flex;gap:8px}

@media (max-width:640px){
  .ust-menu{gap:14px;font-size:14px}
  .oyun-ust img{width:120px}
  .kod{gap:10px}
  .tablo, .tablo tbody, .tablo tr, .tablo td{display:block;width:100%}
  .tablo thead{display:none}
  .tablo td{border:3px solid var(--cizgi);border-radius:14px;margin-bottom:8px;text-align:left}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto}
}
:focus-visible{outline:3px solid var(--stud);outline-offset:3px}