:root{
    --bg: #020308;
    --card:#16181f;
    --text:#e9edf1;
    --muted:#9aa5b1;
    --accent:#FF0066;
    --border:#23262b;
}
@media (prefers-color-scheme: light){
    :root{
        --bg:#f6f7f9; --card:#ffffff; --text:#0c0d10; --muted:#5b6571; --accent:#0e77ff; --border:#e7e9ee;
    }
}
*{ box-sizing:border-box }
body{
    margin:0; font: 16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
    background:var(--bg); color:var(--text);
}
.wrap{ max-width:920px; margin:24px auto; padding:0 16px; }
header{
    display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:16px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: .2px;
    font-size: 18px;
    color: var(--text);
    text-decoration: none; /* çok önemli */
}
.brand:hover {
    opacity: 0.8;
}
.lang{
    display:flex; align-items:center; gap:8px;
    background:var(--card); border:1px solid var(--border); border-radius:10px; padding:6px 10px;
}
.lang label{ color:var(--muted); font-size:13px }
select{
    appearance:none; background:transparent; color:var(--text); border:none; padding:6px 26px 6px 8px;
    border-radius:8px; outline: none;
}
.card{
    background:var(--card); border:1px solid var(--border); border-radius:16px; padding:22px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
h1{ font-size:28px; margin:.2em 0 .4em }
h2{ font-size:20px; margin:1.4em 0 .5em }
p, li{ color:var(--text); }
.muted{ color:var(--muted) }
.pill{
    display:inline-block; padding:4px 10px; border:1px solid var(--border); border-radius:999px; font-size:12px; color:var(--muted);
}
.list{ padding-left:1.1em }
footer{ margin:24px 0; color:var(--muted); font-size:13px; text-align:center }
.hr{ height:1px; background:var(--border); margin:18px 0 }
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }