:root {
    --brand: #1593d4;
    --brand-600: #117fb5;
    --success: #16a34a;
    --ink: #0f172a;
    --muted: #64748b;
    --surface: #ffffff;
    --ring: rgba(21,147,212,.18);
}

html, body {
    height: 100%;
}

    body.bg-body {
        /* arka plan – form ile yumuşak geçiş */
        background: radial-gradient(1200px 520px at 12% -12%, rgba(21,147,212,.06), transparent 55%), radial-gradient(900px 420px at 88% -8%, rgba(22,163,74,.05), transparent 55%), #f7f9fc;
        color: var(--ink);
    }

/* ========= Zengin Brand Header ========= */
.brand-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: transparent;
    border: 0;
}

    /* brandbar'ı sabitlemek için referans */
    .brand-header .container {
        position: relative;
    }

/* üst blok: min-height yok; logo büyüyünce çizgi kaçmasın diye alt padding küçük */
.brand-top {
    min-height: 0;
    padding: 8px 0 6px;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.96)), radial-gradient(700px 220px at 10% 0%, rgba(21,147,212,.10), transparent 65%);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(2,6,23,.06);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 6px 20px rgba(2,6,23,.06);
}

/* logo büyük ve net (istediğin gibi 150px) */
.brand-logo-lg {
    height: 150px;
    width: auto;
    object-fit: contain;
    transition: transform .15s ease-in-out;
}

    .brand-logo-lg:hover {
        transform: scale(1.03);
    }

.brand-titles .brand-title {
    font-weight: 700;
    letter-spacing: .2px;
}

    .brand-titles .brand-title .bi {
        color: var(--brand-600);
    }

.brand-subtitle {
    margin-top: 2px;
}

/* Sağdaki küçük “güven” rozeti */
.pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .95rem;
    background: #fff;
    border: 1px solid rgba(2,6,23,.08);
    box-shadow: 0 1px 2px rgba(2,6,23,.05);
    color: var(--ink);
}

/* Brandbar: her zaman başlığın dibinde kalsın */
.brandbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px; /* -1px sınırı kapatır */
    height: 4px;
    background: linear-gradient(90deg, var(--brand), #28a5e5 40%, #8ed8f9 100%);
    border-radius: 0 0 14px 14px;
    border: 1px solid rgba(2,6,23,.06);
    border-top: 0;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}

/* ---------- Genel UI ---------- */
.card-elegant {
    background: var(--surface);
    border: 1px solid rgba(2,6,23,.06);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(2,6,23,.06);
}

    .card-elegant .card-header {
        background: linear-gradient(180deg, rgba(21,147,212,.07), rgba(21,147,212,.03));
        border-bottom: 1px solid rgba(2,6,23,.06);
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

.section-title {
    font-weight: 600;
    margin: 4px 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .section-title .bi {
        color: var(--brand-600);
    }

.form-label {
    font-weight: 600;
}

.form-control, .form-select {
    border-radius: 12px;
}

.input-group-text {
    border-radius: 12px 0 0 12px;
    background: #f1f5f9;
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .25rem var(--ring);
}

.btn {
    border-radius: 12px;
    padding: .625rem 1rem;
}

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-600);
    --bs-btn-hover-border-color: var(--brand-600);
}

.btn-success {
    --bs-btn-bg: var(--success);
    --bs-btn-border-color: var(--success);
}

.modal-content {
    border-radius: 16px;
    border: 1px solid rgba(2,6,23,.06);
    box-shadow: 0 10px 40px rgba(2,6,23,.16);
}

/* OTP / toast */
.toast .toast-body {
    font-size: .95rem;
}

.otp-inline {
    background: #fbfdff;
}

    .otp-inline .form-control {
        min-width: 220px;
    }

    .otp-inline .otp-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: .25rem .5rem;
        border-radius: 999px;
        font-size: .875rem;
        background: #f1f5f9;
        border: 1px solid rgba(2,6,23,.06);
    }

.otp-chip.ok {
    background: #e8f6ee;
    border-color: #ccebd9;
    color: #137b36;
}

.otp-chip.sent {
    background: #ecf5fd;
    border-color: #cfe8fb;
    color: #0b65a4;
}

/* Mobil ince ayar */
@media (max-width: 576px) {
    .brand-top {
        padding: 8px 12px 6px;
        border-radius: 12px 12px 0 0;
    }

    .brand-logo-lg {
        height: 96px;
    }

    .brandbar {
        border-radius: 0 0 12px 12px;
    }
}