/* Kapızili — genel stil */
:root {
    --renk-arka: #0f172a;
    --renk-yuzey: #1e293b;
    --renk-yuzey-2: #334155;
    --renk-metin: #f1f5f9;
    --renk-metin-zayif: #94a3b8;
    --renk-vurgu: #38bdf8;
    --renk-yesil: #22c55e;
    --renk-kirmizi: #ef4444;
    --renk-sari: #eab308;
    --kose: 14px;
    --golge: 0 10px 30px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--renk-arka);
    color: var(--renk-metin);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
input, textarea { user-select: text; }

a { color: var(--renk-vurgu); text-decoration: none; }
a:hover { text-decoration: underline; }

.kart {
    background: var(--renk-yuzey);
    border-radius: var(--kose);
    padding: 1.5rem;
    box-shadow: var(--golge);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--renk-yuzey-2);
    color: var(--renk-metin);
    border: 0;
    padding: .85rem 1.25rem;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: transform .05s, background .15s;
}
.btn:hover { background: #475569; }
.btn:active { transform: scale(.98); }
.btn-vurgu { background: var(--renk-vurgu); color: #0c2233; }
.btn-yesil  { background: var(--renk-yesil); color: #052e13; }
.btn-kirmizi { background: var(--renk-kirmizi); color: #2a0606; }
.btn-buyuk  { padding: 1.5rem 2rem; font-size: 1.25rem; border-radius: 14px; }

.form-grup { margin-bottom: 1rem; }
.form-grup label { display: block; margin-bottom: .35rem; color: var(--renk-metin-zayif); font-size: .9rem; }
.form-grup input, .form-grup select, .form-grup textarea {
    width: 100%;
    background: #0b1220;
    color: var(--renk-metin);
    border: 1px solid #334155;
    border-radius: 10px;
    padding: .75rem;
    font-size: 1rem;
}
.form-grup input:focus, .form-grup select:focus { outline: 2px solid var(--renk-vurgu); }

.uyari, .hata, .basari {
    padding: .75rem 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    font-size: .95rem;
}
.uyari  { background: #422a06; color: #fcd34d; }
.hata   { background: #450a0a; color: #fecaca; }
.basari { background: #052e16; color: #bbf7d0; }

.merkez {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.dar { max-width: 420px; width: 100%; }
.orta { max-width: 1000px; margin: 0 auto; padding: 1rem; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .65rem .5rem; border-bottom: 1px solid #334155; }
th { color: var(--renk-metin-zayif); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }

.rozet {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
}
.rz-yesil { background: #052e16; color: #86efac; }
.rz-kirmizi { background: #450a0a; color: #fca5a5; }
.rz-sari { background: #422a06; color: #fcd34d; }
.rz-gri { background: #1e293b; color: #cbd5e1; }