/* ============================================================================
   site.css — ligtv-beinconnect.com.tr özel stilleri (eskiden _Layout, form ve
   footer içinde inline <style> bloklarındaydı; tek dosyada toplandı).
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1) Genel kurumsal bileÅŸenler (eski _Layout.cshtml <style>)
   --------------------------------------------------------------------------- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

    .material-symbols-outlined.fill {
        font-variation-settings: 'FILL' 1;
    }

/* AOS Alternative Simple Animations */
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .fade-up.visible {
        opacity: 1;
        transform: translateY(0);
    }

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 7rem;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0c1927;
}

::-webkit-scrollbar-thumb {
    background: #1f3650;
    border-radius: 4px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #00d4ff;
    }

/* Pulse Animation */
@keyframes pulse-whatsapp {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.animate-pulse-whatsapp {
    animation: pulse-whatsapp 2s infinite;
}

/* Corporate UI */
.corp-section-label {
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #00d4ff;
}

.corp-card {
    background: #0e2438;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
}

.corp-card-accent {
    border-left: 4px solid #00d4ff;
}

.corp-input {
    width: 100%;
    border: 1px solid #1f3650;
    border-radius: 0.75rem;
    padding: 0.875rem 1rem 0.875rem 2.75rem;
    background: #0c2236;
    color: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

    .corp-input::placeholder {
        color: #6b8099;
    }

    .corp-input:focus {
        outline: none;
        border-color: #00d4ff;
        background: #0e2438;
        box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.18);
    }

.corp-select {
    width: 100%;
    border: 1px solid #1f3650;
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    background: #0c2236;
    color: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .corp-select:focus {
        outline: none;
        border-color: #00d4ff;
        background: #0e2438;
        box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.18);
    }

.corp-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.95rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #e53935 0%, #dd1936 100%);
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 18px rgba(221, 25, 54, 0.4);
}

    .corp-btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 26px rgba(221, 25, 54, 0.5);
    }

.corp-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    color: #00d4ff;
    background: transparent;
    border: 2px solid #00d4ff;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
}

    .corp-btn-secondary:hover {
        background: #00d4ff;
        color: #062033;
    }

.corp-segment {
    display: inline-flex;
    padding: 0.25rem;
    background: #0c2236;
    border: 1px solid #1f3650;
    border-radius: 9999px;
}

    .corp-segment a, .corp-segment button {
        border-radius: 9999px;
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: #9fb3c7;
        transition: all 0.2s;
    }

    .corp-segment .active {
        background: #00d4ff;
        color: #062033;
        box-shadow: 0 2px 8px rgba(0, 212, 255, 0.35);
    }

.corp-table th {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
}

.corp-hero-strip {
    background: linear-gradient(135deg, #0c1927 0%, #0c2e4e 50%, #0c1927 100%);
    border-bottom: 1px solid #1f3650;
}

.prose-campaign {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #b9c7d6;
}

    .prose-campaign br {
        display: block;
        margin-bottom: 0.35rem;
    }

    .prose-campaign h2 {
        font-size: 1.125rem;
        font-weight: 700;
        color: #ffffff;
        margin-top: 1.75rem;
        margin-bottom: 0.5rem;
    }

    .prose-campaign h3 {
        font-size: 1rem;
        font-weight: 600;
        color: #00d4ff;
    }

/* Başlıklar – beyaz, mobil uyumlu */
main h1,
main h2,
main h3,
main h4,
footer h4 {
    color: #ffffff !important;
}

main h1 {
    font-family: Mulish, system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
}

main h2,
main h3 {
    font-family: Mulish, system-ui, sans-serif;
    font-weight: 700;
}

@media (max-width: 767px) {
    main h1 {
        font-size: 1.625rem;
        line-height: 2.125rem;
    }

    main h2 {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    main h3 {
        font-size: 1.0625rem;
        line-height: 1.5rem;
    }

    footer h4 {
        font-size: 1rem;
    }
}

.prose-campaign ul {
    margin: 0.5rem 0 1rem;
}

.package-detail-panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding-top 0.25s ease;
}

    .package-detail-panel.is-open {
        max-height: 900px;
        opacity: 1;
    }

.package-detail-toggle[aria-expanded="true"] .package-detail-toggle-icon {
    transform: rotate(180deg);
}

/* ──────────────────────────────────────────────
           Bölgesel paket kartı – siteye özel "bilet" stili
           (diğer sitelerin tek tip kart düzeninden ayrışır)
           ────────────────────────────────────────────── */
.rpc {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 1.25rem;
    background: linear-gradient(165deg, #10324c 0%, #0a1c2e 58%, #091726 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

    .rpc:hover {
        transform: translateY(-6px);
        border-color: rgba(0, 212, 255, 0.45);
        box-shadow: 0 18px 44px rgba(0, 212, 255, 0.18), 0 8px 24px rgba(0, 0, 0, 0.45);
    }

.rpc-head {
    position: relative;
    padding: 1.2rem 1.25rem 1.15rem;
    background: linear-gradient(120deg, #0c2e4e 0%, #0f3a5e 100%);
}

    .rpc-head::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: linear-gradient(90deg, #00d4ff 0%, #ffc400 50%, #dd1936 100%);
    }

.rpc-region-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #062033;
    background: linear-gradient(135deg, #ffe27a, #ffc400);
    padding: 0.22rem 0.6rem;
    border-radius: 9999px;
    margin-bottom: 0.55rem;
}

.rpc-title {
    font-family: Mulish, system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.4;
    color: #ffffff;
}

.rpc-price {
    margin: 1.1rem 1.25rem 0;
    padding: 0.85rem 1rem;
    border-radius: 0.9rem;
    background: rgba(0, 212, 255, 0.06);
    border: 1px solid rgba(0, 212, 255, 0.18);
    border-left: 4px solid #00d4ff;
}

.rpc-price-label {
    display: block;
    font-size: 0.78rem;
    color: #9fb3c7;
}

.rpc-price-amount {
    font-weight: 800;
    line-height: 1;
    font-size: 2.35rem;
    color: #ffc400;
    margin: 0.15rem 0;
}

.rpc-price-unit {
    font-size: 1.1rem;
    font-weight: 700;
    vertical-align: baseline;
}

.rpc-price-alt {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: #9fb3c7;
}

    .rpc-price-alt strong {
        color: #ffffff;
        font-weight: 700;
    }

.rpc-map {
    display: flex;
    justify-content: center;
    padding: 0.9rem 1.25rem 0;
}

    .rpc-map img {
        width: 100%;
        max-width: 210px;
        height: auto;
        object-fit: contain;
    }

.rpc-body {
    padding: 1.1rem 1.25rem 1.25rem;
    flex-grow: 1;
}

.rpc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.rpc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.7rem;
    border-radius: 9999px;
    border: 1px solid transparent;
}

.rpc-chip--cyan {
    color: #aee9ff;
    background: rgba(0, 212, 255, 0.10);
    border-color: rgba(0, 212, 255, 0.25);
}

    .rpc-chip--cyan .material-symbols-outlined {
        color: #00d4ff;
    }

.rpc-chip--gold {
    color: #ffe27a;
    background: rgba(255, 196, 0, 0.10);
    border-color: rgba(255, 196, 0, 0.25);
}

    .rpc-chip--gold .material-symbols-outlined {
        color: #ffc400;
    }

.rpc-detail {
    margin-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.85rem;
}

.rpc-detail-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #00d4ff;
    cursor: pointer;
}

.rpc-detail-body {
    padding-top: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    text-align: left;
}

    .rpc-detail-body > p {
        font-size: 0.78rem;
        line-height: 1.6;
        color: #9fb3c7;
    }

.rpc-detail-heading {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.4rem;
}

.rpc-detail-body ul {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.rpc-detail-body li {
    display: flex;
    gap: 0.45rem;
    font-size: 0.78rem;
    line-height: 1.55;
    color: #9fb3c7;
}

    .rpc-detail-body li span.dot {
        color: #ffc400;
    }

.rpc-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #00d4ff;
    transition: color 0.2s;
}

    .rpc-detail-link:hover {
        color: #33ddff;
    }
/* Bilet kesiği – kart kenarından oyulmuş yarım daireler */
.rpc-perf {
    position: relative;
    height: 0;
    margin: 0 1.25rem;
    border-top: 2px dashed rgba(255, 255, 255, 0.14);
}

    .rpc-perf::before,
    .rpc-perf::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 18px;
        height: 18px;
        border-radius: 9999px;
        background: #091521; /* paket bölümünün arka planıyla aynı */
        transform: translateY(-50%);
    }

    .rpc-perf::before {
        left: -1.6rem;
    }

    .rpc-perf::after {
        right: -1.6rem;
    }

.rpc-foot {
    padding: 1.1rem 1.25rem 1.25rem;
    margin-top: auto;
}

.rpc-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem 1.25rem;
    border-radius: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #ffffff;
    background: linear-gradient(135deg, #e53935 0%, #dd1936 100%);
    box-shadow: 0 6px 20px rgba(221, 25, 54, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

    .rpc-cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 28px rgba(221, 25, 54, 0.5);
    }

.rpc-cta-arrow {
    transition: transform 0.25s ease;
}

.rpc-cta:hover .rpc-cta-arrow {
    transform: translateX(4px);
}

/* ---------------------------------------------------------------------------
   2) BaÅŸvuru formu (eski _BasvuruFormSection.cshtml <style>)
   --------------------------------------------------------------------------- */
/* Bolum basliklari (sade) */
.form-section-head {
    margin-bottom: 1.1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.toast {
    border-radius: 0.85rem;
    box-shadow: 0 14px 38px rgba(18, 28, 42, 0.18);
    padding: 0.85rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.875rem;
    pointer-events: auto;
    animation: toastIn 220ms ease;
}

.toast-exit {
    animation: toastOut 200ms ease forwards;
}

.toast-success {
    background: #ecfdf3;
    border: 1px solid #86efac;
    color: #166534;
}

.toast-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.loading-card {
    animation: loadingPulse 1.6s ease-in-out infinite;
}

@keyframes loadingPulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.015);
    }
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

.basvuru-package-select {
    padding: 0.625rem 0.875rem;
    min-height: 2.75rem;
    font-size: 0.9375rem;
    line-height: 1.35;
}

/* Standalone basvuru sayfasinda sabit header ile form karti arasinda nefes boslugu. */
#basvuru-bolum.pt-28 {
    padding-top: 8rem;
}

/* ---- Adim adim sihirbaz ---- */
.wizard-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 1.5rem;
}

.wizard-step-dot {
    flex: 0 0 auto;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    background: rgba(120, 120, 120, 0.2);
    color: rgba(90, 90, 90, 0.85);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

    .wizard-step-dot.is-active {
        color: #fff;
        transform: scale(1.08);
    }

    .wizard-step-dot.is-done {
        color: #fff;
    }

.wizard-step-connector {
    flex: 1 1 auto;
    height: 2px;
    min-width: 0.75rem;
    background: rgba(120, 120, 120, 0.2);
    transition: background 0.25s ease;
}

/* Gezinme cubugu: Geri / Ileri / Tamamla yan yana */
.wizard-nav {
    display: flex;
    gap: 0.75rem;
}

    .wizard-nav .corp-btn-primary,
    .wizard-nav .corp-btn-secondary {
        width: auto;
        flex: 1 1 0;
    }

    .wizard-nav .wizard-back {
        flex: 0 0 auto;
        min-width: 6rem;
    }

    .wizard-nav .hidden {
        display: none;
    }

/* Adimlar arasi yumusak gecis */
#basvuru-form.wizard-active .form-step:not(.hidden) {
    animation: wizardStepIn 0.25s ease;
}

@keyframes wizardStepIn {
    from {
        opacity: 0;
        transform: translateX(8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    #basvuru-form.wizard-active .form-step:not(.hidden) {
        animation: none;
    }

    .wizard-step-dot, .wizard-step-connector {
        transition: none;
    }
}

/* ===== Kurumsal başvuru formu — sade resmi mavi ===== */
.gov-form {
    --gov-primary: #12467e;
    --gov-primary-dark: #0e3862;
    --gov-primary-soft: #eaf1f9;
    --gov-border: #d5dbe3;
    --gov-ink: #1b2733;
    --gov-muted: #5c6773;
    --gov-req: #d92d20;
}

    .gov-form.corp-card {
        /* e-Devlet tarzı AÇIK form kartı: koyu ink etiketler + beyaz inputlar okunur olsun. */
        background: #ffffff;
        border: 1px solid var(--gov-border);
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(16, 32, 52, 0.06), 0 10px 28px rgba(16, 32, 52, 0.06);
    }
    /* Paket detay kartındaki metinler açık zemin üzerinde her koşulda okunur olsun
       (Tailwind renk sınıfı purge edilse/inherit edilse bile net renk verilir). */
    .gov-form #campaign-price,
    .gov-form #campaign-monthly {
        color: var(--gov-primary) !important;
    }

    .gov-form #campaign-description {
        color: var(--gov-req) !important;
    }

    .gov-form #campaign-note,
    .gov-form #campaign-payment-note {
        color: var(--gov-ink) !important;
    }

    .gov-form #campaign-payment-note-secondary {
        color: var(--gov-req) !important;
    }

    .gov-form .form-section-head {
        border-bottom: 1px solid var(--gov-border);
    }

        .gov-form .form-section-head h3 {
            color: var(--gov-ink);
            font-weight: 700;
        }

    .gov-form label {
        color: var(--gov-ink);
    }

    /* Beyaz kart üzerinde koyu tema metin yardımcıları okunur olsun
       (ör. "Aylık Faturalı" radyo etiketi, "Toplam Fiyat / Aylık Taksit" başlıkları). */
    .gov-form .text-on-surface {
        color: var(--gov-ink) !important;
    }

    .gov-form .text-on-surface-variant {
        color: var(--gov-muted) !important;
    }

    .gov-form .gov-req {
        color: var(--gov-req);
        font-weight: 700;
        margin-left: 2px;
    }

    .gov-form .corp-select {
        background: #fff;
        /* Beyaz kart üzerinde metin/seçili değer KOYU olmalı (temel .corp-select beyaz metin veriyor). */
        color: var(--gov-ink);
        border: 1px solid var(--gov-border);
        border-radius: 8px;
    }

        .gov-form .corp-select::placeholder {
            color: var(--gov-muted);
        }

        .gov-form .corp-select option {
            color: var(--gov-ink);
        }

        .gov-form .corp-select:focus {
            border-color: var(--gov-primary);
            color: var(--gov-ink);
            box-shadow: 0 0 0 3px rgba(18, 70, 126, 0.15);
            background: #fff;
        }

    .gov-form input[type="radio"] {
        accent-color: var(--gov-primary);
    }

    /* Cinsiyet seçimi: dropdown yerine tıklanabilir Erkek/Kadın butonları. */
    .gov-form .gender-option {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        flex: 1 1 0;
        padding: 0.7rem 1rem;
        border: 1px solid var(--gov-border);
        border-radius: 8px;
        background: #fff;
        color: var(--gov-ink);
        cursor: pointer;
        user-select: none;
        transition: border-color 0.15s, background 0.15s, color 0.15s;
    }

        .gov-form .gender-option.is-selected {
            border-color: var(--gov-primary);
            background: var(--gov-primary-soft);
            color: var(--gov-primary);
            font-weight: 700;
        }

    .gov-form .text-primary {
        color: var(--gov-primary) !important;
    }

    .gov-form .corp-btn-primary {
        background: var(--gov-primary);
        border-radius: 8px;
        box-shadow: none;
    }

        .gov-form .corp-btn-primary:hover {
            background: var(--gov-primary-dark);
            transform: none;
            box-shadow: 0 4px 12px rgba(18, 70, 126, 0.25);
        }

    .gov-form .corp-btn-secondary {
        color: var(--gov-primary);
        border: 1px solid var(--gov-border);
        border-radius: 8px;
    }

        .gov-form .corp-btn-secondary:hover {
            background: var(--gov-primary-soft);
            color: var(--gov-primary-dark);
        }

    .gov-form .wizard-step-dot.is-active,
    .gov-form .wizard-step-dot.is-done {
        background: var(--gov-primary);
        color: #fff;
    }

    .gov-form .wizard-step-connector.is-done {
        background: var(--gov-primary);
    }

    .gov-form #campaign-details {
        background: var(--gov-primary-soft) !important;
        border-color: var(--gov-border) !important;
        border-radius: 8px;
    }

/* ---------------------------------------------------------------------------
   Cihaz Türü seçim modalı (Üye Ol / Satın Al ve İzle → Kutusuz / Kutulu)
   --------------------------------------------------------------------------- */
.device-modal {
    position: fixed;
    inset: 0;
    z-index: 300; /* sabit header (z 100) + maç/duyuru bantlarının ÜSTÜNDE */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

    .device-modal[hidden] {
        display: none;
    }

.device-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 12, 22, 0.72);
    backdrop-filter: blur(3px);
    border: 0;
    padding: 0;
    cursor: pointer;
}

.device-modal__panel {
    position: relative;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    background: #0e2438;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1.25rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    padding: 1.75rem 1.5rem 2rem;
    -webkit-overflow-scrolling: touch;
}

.device-modal__close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
    color: #cdd8e6;
    cursor: pointer;
}

    .device-modal__close:hover {
        background: rgba(255, 255, 255, 0.10);
        color: #fff;
    }

.device-modal__title {
    text-align: center;
    color: #fff;
    font-weight: 800;
    font-size: 1.5rem;
    margin: 0 2.5rem 0.35rem;
}

.device-modal__desc {
    text-align: center;
    color: #9fb3c7;
    font-size: 0.9rem;
    margin: 0 0 1.5rem;
}

.device-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.device-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.02);
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s, background 0.15s;
    cursor: pointer;
}

    .device-option:hover,
    .device-option:focus-visible {
        border-color: #15409e;
        background: rgba(21, 64, 158, 0.14);
        transform: translateY(-2px);
        outline: none;
    }

.device-option__media {
    display: block;
    width: 100%;
    border-radius: 0.75rem;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

    .device-option__media img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 900 / 630;
        object-fit: cover;
    }

.device-option__title {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}

.device-option__lead {
    color: #35c2ff;
    font-weight: 700;
    font-size: 0.9rem;
}

.device-option__text {
    color: #9fb3c7;
    font-size: 0.82rem;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .device-modal {
        padding: 0.75rem;
    }

    .device-modal__panel {
        padding: 1.25rem 1rem 1.5rem;
        border-radius: 1rem;
    }

    .device-modal__title {
        font-size: 1.2rem;
    }

    .device-options {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    /* Mobilde iki kart da ekrana sığsın diye görseller kısaltılır. */
    .device-option__media img {
        aspect-ratio: 16 / 8;
    }
}

/* ---------------------------------------------------------------------------
   3) Mobil sabit alt bar (eski footer.cshtml <style>)
   --------------------------------------------------------------------------- */
.mobile-actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    display: none; /* varsayılan gizli */
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    background: rgba(9, 21, 33, 0.97);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.25);
}

.mobile-actionbar__btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 3rem;
    border-radius: 0.85rem;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

    .mobile-actionbar__btn .material-symbols-outlined {
        font-size: 1.25rem;
    }

.mobile-actionbar__call {
    background: #15409e;
    color: #fff;
}

    .mobile-actionbar__call:active {
        background: #0f3378;
    }

.mobile-actionbar__apply {
    background: #D9004C;
    color: #fff;
}

    .mobile-actionbar__apply:active {
        background: #b80040;
    }
/* Alt bar içeriğin üzerine binmesin diye mobilde gövdeye taban boşluğu.
       Bar gizliyse (form ekranı → body.no-sticky-bar) boşluk da kaldırılır. */
@media (max-width: 767px) {
    body {
        padding-bottom: 4.5rem;
    }

        body.no-sticky-bar {
            padding-bottom: 0;
        }
}

/* Mobil sabit alt bar yalnızca telefon genişliğinde görünür. */
@media (max-width: 767px) {
    .mobile-actionbar {
        display: flex;
    }

    .gov-form .form-section-head {
        display: none
    }

    .wizard-steps {
        display: none !important;
    }
}