:root{--zemin:#fff8f2;--yazi:#1f1a4d;--soluk:#6b6690;--kart:#ffffff;--cizgi:#ece4f7;--mor:#6c4df6;--lavanta:#efeaff;--seftali:#ffe9dc;--sari:#ffd23f;--yesil:#1f9d6b;--yesil-acik:#e3f6ee;--gri:#f3f1f7;--golge:0 6px 18px rgba(31,26,77,.08)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--zemin);color:var(--yazi);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.5}
a{color:inherit}
.sayfa{max-width:1180px;margin:0 auto;padding:28px 16px 64px}
.ust{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.geri{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:600;color:var(--mor);padding:8px 12px;border-radius:10px;background:var(--lavanta)}
.geri:hover{background:#e3dcff}
h1{font-size:clamp(26px,4vw,40px);margin:0;letter-spacing:-.02em}
.alt{color:var(--soluk);margin:4px 0 0}
/* giris */
.seviyeler{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:28px}
.seviye{display:block;text-decoration:none;background:var(--kart);border:2px solid var(--cizgi);border-radius:22px;padding:26px;box-shadow:var(--golge);transition:transform .15s,border-color .15s}
.seviye:hover,.seviye:focus-visible{transform:translateY(-3px);border-color:var(--mor);outline:none}
.seviye .ikon{font-size:44px}
.seviye h2{margin:10px 0 4px;font-size:24px}
.seviye p{margin:0;color:var(--soluk)}
.seviye .say{margin-top:14px;display:inline-block;font-weight:700;background:var(--sari);border-radius:999px;padding:4px 12px;font-size:14px}
/* filtre */
.arac{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.arac input{flex:1 1 240px;min-width:0;padding:11px 14px;border:2px solid var(--cizgi);border-radius:12px;font:inherit;background:#fff;color:var(--yazi)}
.arac input:focus{outline:none;border-color:var(--mor)}
.cip{border:2px solid var(--cizgi);background:#fff;color:var(--yazi);border-radius:999px;padding:7px 14px;font:inherit;font-weight:600;cursor:pointer}
.cip[aria-pressed=true]{background:var(--yazi);border-color:var(--yazi);color:#fff}
/* kartlar */
.kartlar{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.kart{position:relative;text-align:left;background:var(--kart);border:2px solid var(--cizgi);border-radius:18px;padding:16px 16px 14px;cursor:pointer;font:inherit;color:inherit;box-shadow:var(--golge);display:flex;flex-direction:column;gap:10px;min-height:132px;transition:transform .12s,border-color .12s}
.kart:hover,.kart:focus-visible{transform:translateY(-2px);border-color:var(--mor);outline:none}
.kart.pasif{opacity:.62;box-shadow:none}
.no{align-self:flex-start;display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 8px;border-radius:12px;background:var(--sari);font-weight:800;font-size:17px}
.kart .ad{font-weight:700;font-size:15.5px;line-height:1.3}
.etiketler{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap}
.etiket{font-size:12px;font-weight:700;border-radius:999px;padding:3px 9px;background:var(--gri);color:var(--soluk)}
.etiket.ai{background:var(--lavanta);color:var(--mor)}
.etiket.oyun{background:var(--seftali);color:#b4541f}
.etiket.hazir{background:var(--yesil-acik);color:var(--yesil)}
.bos{color:var(--soluk);padding:30px 0;text-align:center}
/* detay */
.detay{background:var(--kart);border:2px solid var(--cizgi);border-radius:22px;padding:24px;box-shadow:var(--golge)}
.detay-bas{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.detay-bas .no{min-width:52px;height:52px;font-size:22px;border-radius:16px}
.detay h2{margin:0;font-size:clamp(22px,3vw,30px);line-height:1.2}
.detay .etiketler{margin-top:8px}
.baglanti{margin-top:22px;display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.baglanti code{flex:1 1 280px;min-width:0;overflow-wrap:anywhere;background:var(--gri);border-radius:12px;padding:12px 14px;font-size:14px}
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:12px;padding:11px 16px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;background:var(--mor);color:#fff}
.dugme.ikincil{background:var(--lavanta);color:var(--mor)}
.dugme:hover{filter:brightness(1.07)}
.not{margin-top:18px;background:var(--seftali);border-radius:14px;padding:14px 16px}
.onizleme{margin-top:20px;border-radius:16px;overflow:hidden;border:2px solid var(--cizgi);background:#fff;aspect-ratio:16/10}
.onizleme iframe{width:100%;height:100%;border:0;display:block}
.gezinme{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;margin-top:22px;align-items:center}.gezinme>:first-child{justify-self:start}.gezinme>:last-child{justify-self:end}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--yazi);color:#fff;padding:10px 16px;border-radius:12px;font-weight:600;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.goster{opacity:1}
@media (max-width:520px){.gezinme{grid-template-columns:1fr 1fr}.gezinme>a[href="#"]{grid-column:1/-1;grid-row:2}.gezinme .dugme{padding:10px 12px}.kartlar{grid-template-columns:1fr 1fr}.kart{min-height:120px;padding:12px}.detay{padding:18px}}
@media (max-width:360px){.kartlar{grid-template-columns:1fr}}