:root {
    --bg: #0f172a;
    --card: #111827;
    --text: #e5e7eb;
    --muted: #9ca3af;
    --brand: #7c3aed;
    --ok: #10b981;
    --err: #ef4444;
    --seed1: #6d28d9; /* mor ton (fide/algoritma rengi) */
    --seed2: #22d3ee; /* camgöbeği ışık */
    --seed3: #a78bfa; /* lila parıltı */
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.fullscreen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.safe {
    padding: 16px;
    padding-top: calc(env(safe-area-inset-top, 0) + 16px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 16px);
}

.wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Algoritma Bahçesi tarzı vektörel/animasyonlu arka plan (CSS-only) */
.fullscreen::before,
.fullscreen::after {
    content: "";
    position: absolute;
    inset: -20% -10% -10% -10%;
    z-index: 0;
    pointer-events: none;
}

/* Yumuşak gradient lekeler (organik fide şeklini çağrıştırır) */
.fullscreen::before {
    background:
        radial-gradient(64vmin 64vmin at 12% 18%, rgba(34, 211, 238, .22), transparent 62%),
        radial-gradient(76vmin 76vmin at 88% 12%, rgba(167, 139, 250, .20), transparent 62%),
        radial-gradient(82vmin 82vmin at 22% 86%, rgba(124, 58, 237, .18), transparent 60%),
        radial-gradient(46vmin 46vmin at 78% 78%, rgba(34, 211, 238, .16), transparent 58%);
    filter: blur(1.5px) saturate(110%);
    animation: move-blobs 22s ease-in-out infinite alternate;
}

/* İnce çizgisel ağ – vektörel hissi için SVG pattern (data URI) */
.fullscreen::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320" viewBox="0 0 320 320" fill="none"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop stop-color="%23ffffff" stop-opacity="0.06"/><stop offset="1" stop-color="%23ffffff" stop-opacity="0.00"/></linearGradient></defs><path d="M0 40 H320 M0 120 H320 M0 200 H320 M0 280 H320 M40 0 V320 M120 0 V320 M200 0 V320 M280 0 V320" stroke="url(%23g)" stroke-width="1"/></svg>');
    background-size: 320px 320px;
    opacity: .35;
    mix-blend-mode: screen;
    animation: grid-shift 40s linear infinite;
}

@keyframes move-blobs {
    0% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(2%, -2%, 0) scale(1.05); }
    100% { transform: translate3d(-2%, 2%, 0) scale(1.1); }
}

@keyframes grid-shift {
    0% { transform: translate3d(0,0,0) rotate(0deg); }
    100% { transform: translate3d(-160px, -160px, 0) rotate(0.01turn); }
}

/* Parçacık tohum efektleri */
.bg-seeds, .seed, .il-seedling, .il-leaf, .il-node, .bg-illustration { display: none; }

.card {
    width: 100%;
    max-width: 480px;
    background: var(--card);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    position: relative;
    z-index: 1; /* arka planın üstünde */
}

/* SVG fide/ikon illüstrasyonları */
/* illüstrasyonlar kaldırıldı */

/* Modal */
.modal-backdrop { position: fixed; inset:0; background: rgba(2,6,23,.6); backdrop-filter: blur(4px); display:none; align-items:center; justify-content:center; z-index: 50; }
.modal-card { width:92%; max-width:440px; background: #0b1220; border:1px solid #334155; border-radius: 14px; box-shadow: 0 20px 40px rgba(0,0,0,.5); color: var(--text); }
.modal-card .hd { padding:16px 18px; font-weight:800; font-size:18px; border-bottom:1px solid #1f2937; }
.modal-card .bd { padding:16px 18px; font-size:14px; color:#cbd5e1; }
.modal-card .ft { padding:14px 18px; display:flex; gap:10px; justify-content:flex-end; border-top:1px solid #1f2937; }
.btn-secondary { background:#0b1220; border:1px solid #334155; color:#e5e7eb; border-radius:10px; padding:10px 14px; font-weight:700; cursor:pointer; }
.btn-primary { background: linear-gradient(135deg, var(--brand), #9333ea); border:0; color:#fff; border-radius:10px; padding:10px 16px; font-weight:800; cursor:pointer; text-decoration:none; }
.modal-backdrop.show { display:flex; }

.title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .2px;
    margin: 0 0 6px;
}

.desc {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 16px;
    line-height: 1.45;
}

.badge {
    display: inline-block;
    background: rgba(124, 58, 237, .15);
    color: #c4b5fd;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
}

.field { margin: 12px 0; }
.label { font-size: 13px; color: #cbd5e1; margin-bottom: 6px; display: block; }

.input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #334155;
    background: #0b1220;
    color: #e5e7eb;
    font-size: 18px;
    outline: none;
    box-sizing: border-box;
    display: block;
}
.input.lg { font-size: 20px; padding: 16px; }
.input:focus { border-color: #475569; }

.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.row.resend { margin-top: 10px; }

.btn {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand), #9333ea);
    color: white;
    font-weight: 800;
    font-size: 16px;
    border: 0;
    cursor: pointer;
    box-sizing: border-box;
    display: block;
}
.btn.lg { padding: 16px; font-size: 18px; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

.muted { color: var(--muted); font-size: 12px; margin-top: 8px; }
.error { color: var(--err); font-size: 13px; margin-top: 6px; }
.success { color: var(--ok); font-size: 13px; margin-top: 6px; }

.otp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.otp-grid input { text-align: center; font-size: 22px; padding: 14px 0; }

.hidden { display: none; }
.spacer { height: 8px; }
.footnote { margin-top: 14px; font-size: 12px; color: #94a3b8; }

/* Güven/taahhüt satırı */
.trust-line {
    text-align: center;
    margin-top: 12px;
    font-weight: 800;
    font-size: 12.5px;
    color: #c4b5fd; /* badge ile uyumlu lila */
}
.trust-line .flag-tr {
    height: 14px;
    width: auto;
    vertical-align: -2px;
    margin-right: 6px;
}