/* Lillian SMP — launcher ile aynı sakura + Minecraft blok görünümü */

@font-face {
    font-family: "Monocraft";
    src: url("/fonts/Monocraft.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Monocraft";
    src: url("/fonts/Monocraft-Bold.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
}

:root {
    --outline: #120a10;
    --text: #fff0f5;
    --muted: #bfa0b0;
    --sakura: #ff8fb1;
    --sakura-light: #ffc2d4;
    --accent: #e76a94;
    --accent-hover: #f58bb0;
    --stone: #3a2a40;
    --stone-hover: #4e3a56;
    --card: rgba(42, 28, 47, 0.85);
    --danger: #a8304a;
    --ok: #2f7a4f;
    --bevel: inset 0 3px 0 0 rgba(255, 255, 255, 0.33), inset 0 -4px 0 0 rgba(0, 0, 0, 0.4);
    --card-bevel: inset 2px 2px 0 0 rgba(255, 255, 255, 0.1), inset -2px -2px 0 0 rgba(0, 0, 0, 0.33);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family: "Monocraft", monospace;
    color: var(--text);
    background: linear-gradient(135deg, #241526 0%, #1a1020 55%, #2b1530 100%) fixed;
    line-height: 1.6;
}

#petals {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.page {
    position: relative;
    z-index: 1;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 20px 48px;
}

a { color: var(--sakura); }
a:hover { color: #ffffa0; }

/* ---------- Üst menü ---------- */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    flex-wrap: wrap;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text);
}
.logo img { width: 44px; height: 44px; }
.logo b { font-size: 24px; text-shadow: 3px 3px 0 #3a1426; display: block; line-height: 1; }
.logo small { color: var(--sakura); font-size: 10px; }

.nav { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Bloklar ---------- */

.card {
    background: var(--card);
    border: 2px solid var(--outline);
    box-shadow: var(--card-bevel);
    padding: 28px;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 12px; }
h1 { font-size: 34px; text-shadow: 3px 3px 0 #3a1426; }
h2 { font-size: 22px; text-shadow: 2px 2px 0 #3a1426; }
.muted { color: var(--muted); font-size: 13px; }
.label { color: var(--sakura-light); font-size: 11px; display: block; margin-bottom: 4px; }

/* ---------- Butonlar (Minecraft butonu gibi) ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    border: 2px solid var(--outline);
    box-shadow: var(--bevel);
    padding: 12px 22px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover { background: var(--accent-hover); border-color: #fff; color: #ffffa0; }
.btn:active { box-shadow: inset 0 4px 0 0 rgba(0, 0, 0, 0.4); }
.btn.stone { background: var(--stone); }
.btn.stone:hover { background: var(--stone-hover); }
.btn.big { font-size: 18px; padding: 16px 30px; }
.btn.block { width: 100%; }
.btn.disabled, .btn:disabled {
    background: #2a2030;
    color: #8a7a86;
    border-color: var(--outline);
    box-shadow: inset 0 4px 0 0 rgba(0, 0, 0, 0.4);
    cursor: not-allowed;
}

/* ---------- Form ---------- */

.form { display: grid; gap: 16px; }

.field input {
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    background: #0e080c;
    border: 2px solid #6e5767;
    padding: 12px;
    outline: none;
}
.field input:hover { border-color: #a08898; }
.field input:focus { border-color: var(--sakura-light); }

/* Botlar için gizli tuzak alanı */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.alert {
    border: 2px solid var(--outline);
    padding: 12px 14px;
    font-size: 13px;
}
.alert.error { background: #7a2438; color: #ffd0d8; }
.alert.ok { background: var(--ok); color: #e6ffef; }

/* ---------- Ana sayfa ---------- */

.hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    background: linear-gradient(135deg, rgba(90, 35, 80, 0.8), rgba(58, 26, 62, 0.67) 60%, rgba(231, 84, 127, 0.53));
    margin-bottom: 20px;
}
.hero img { width: 180px; height: 180px; filter: drop-shadow(0 8px 24px rgba(255, 127, 166, 0.35)); }
.hero p { color: #e9cfdb; max-width: 520px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.steps li { counter-increment: step; display: flex; gap: 12px; align-items: flex-start; }
.steps li::before {
    content: counter(step);
    flex: 0 0 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: var(--accent);
    border: 2px solid var(--outline);
    box-shadow: var(--bevel);
    font-weight: 700;
}

.downloads { display: grid; gap: 10px; }

/* ---------- Hesabım ---------- */

.badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.badge {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--stone);
    border: 1px solid var(--outline);
    color: var(--sakura-light);
}
.badge.ok { background: var(--ok); color: #e6ffef; }
.badge.danger { background: #7a2438; color: #ffd0d8; }

.info { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 8px; }
.info div { word-break: break-word; }

.narrow { max-width: 460px; margin: 20px auto 0; }
.narrow.wide { max-width: 560px; }
.center { text-align: center; }

footer { text-align: center; margin-top: 40px; }

@media (max-width: 640px) {
    .hero { grid-template-columns: 1fr; text-align: center; }
    .hero img { margin: 0 auto; width: 120px; height: 120px; order: -1; }
    .actions { justify-content: center; }
    h1 { font-size: 26px; }
}