/* ================================================================
   BIRCOM TEMA - bircom-theme.css
   ================================================================ */

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

html, body {
    margin: 0; padding: 0;
    font-family: var(--clr-font-family);
    font-size: var(--clr-font-size-base);
    color: var(--clr-text-primary);
    background: var(--clr-bg-main);
    -webkit-font-smoothing: antialiased;
}

input, select, textarea, button {
    font-family: inherit;
    font-size: inherit;
    box-sizing: border-box;
    margin: 0;
}

#blazor-error-ui {
    background: #451a1a; color: #fca5a5;
    bottom: 0; left: 0; width: 100%;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed; display: none; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

:root {
    /* ── Arka plan katmanları ── */
    --clr-bg-deep:   #2d2d2d;   /* AppBar, Sidebar */
    --clr-bg-main:   #383838;   /* İçerik alanı, sayfa zemini */
    --clr-bg-card:   #424242;   /* Kartlar, paneller */
    --clr-bg-input:  #4a4a4a;   /* Input, select alanları */

    /* ── Aksent rengi ── */
    --clr-accent:        #3b82f6;
    --clr-accent-hover:  #2563eb;
    --clr-accent-muted:  rgba(59,130,246,.15);

    /* ── Metin renkleri ── */
    --clr-text-primary:   #f1f1f1;
    --clr-text-secondary: #a1a1a1;
    --clr-text-muted:     #6b7280;

    /* ── Kenarlıklar ── */
    --clr-border:        rgba(255,255,255,.08);
    --clr-border-strong: rgba(255,255,255,.14);

    /* ── Durum renkleri ── */
    --clr-danger:  #f87171;
    --clr-success: #34d399;
    --clr-warning: #fbbf24;

    /* ── Tipografi ── */
    --clr-font-family:        'Inter', 'Segoe UI', sans-serif;
    --clr-font-size-xs:       11px;
    --clr-font-size-sm:       12px;
    --clr-font-size-base:     13px;
    --clr-font-size-md:       14px;
    --clr-font-size-lg:       15px;
    --clr-font-size-xl:       16px;
    --clr-font-weight-normal: 400;
    --clr-font-weight-medium: 500;
    --clr-font-weight-bold:   600;

    /* ── Layout ── */
    --clr-radius-sm:      6px;
    --clr-radius-md:      8px;
    --clr-radius-lg:      12px;
    --clr-sidebar-width:  260px;
    --clr-appbar-height:  52px;
}

/* ================================================================
   SAYFA KAPSAYICI
   ================================================================ */
.brc-page {
    min-height: 100vh;
    background: var(--clr-bg-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    font-family: var(--clr-font-family);
}

/* ================================================================
   KART
   ================================================================ */
.brc-card {
    background: var(--clr-bg-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--clr-radius-lg);
    padding: 1.75rem 1.25rem;
}

/* ================================================================
   FORM ELEMANLARI
   ================================================================ */
.brc-input {
    width: 100%;
    background: var(--clr-bg-input);
    border: 1px solid var(--clr-border-strong);
    border-radius: var(--clr-radius-sm);
    padding: 7px 10px;
    font-size: var(--clr-font-size-sm);
    color: var(--clr-text-primary);
    font-family: var(--clr-font-family);
    outline: none;
    transition: border-color .15s;
    color-scheme: dark;
}
.brc-input:focus { border-color: var(--clr-accent); }
.brc-input-error { border-color: var(--clr-danger) !important; }
.brc-field-error {
    display: block;
    font-size: 10px;
    color: var(--clr-danger);
    margin-top: 3px;
    font-family: var(--clr-font-family);
}

/* Browser autocomplete beyaz/sarı zemin override */
.brc-input:-webkit-autofill,
.brc-input:-webkit-autofill:hover,
.brc-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--clr-bg-input) inset !important;
    -webkit-text-fill-color: var(--clr-text-primary) !important;
    caret-color: var(--clr-text-primary);
    border-color: var(--clr-border-strong) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.brc-label {
    display: block;
    font-size: var(--clr-font-size-xs);
    font-weight: var(--clr-font-weight-medium);
    color: var(--clr-text-secondary);
    margin-bottom: 3px;
    font-family: var(--clr-font-family);
}

.brc-zorunlu { color: var(--clr-danger); margin-left: 1px; }

/* ================================================================
   BUTONLAR
   ================================================================ */
.brc-btn {
    padding: 7px 16px;
    border-radius: var(--clr-radius-sm);
    font-size: var(--clr-font-size-sm);
    font-weight: var(--clr-font-weight-medium);
    cursor: pointer;
    font-family: var(--clr-font-family);
    border: 1px solid var(--clr-border-strong);
    color: var(--clr-text-secondary);
    background: var(--clr-bg-input);
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.brc-btn:hover { background: var(--clr-bg-deep); }

.brc-btn-primary {
    background: var(--clr-accent);
    color: #fff;
    border-color: var(--clr-accent);
}
.brc-btn-primary:hover {
    background: var(--clr-accent-hover);
    border-color: var(--clr-accent-hover);
}

/* Login ekranı butonları — logo zeminiyle uyumlu soft mavi */
.brc-btn-soft {
    background: rgba(59,130,246,.2);
    color: #93c5fd;
    border-color: rgba(59,130,246,.3);
}
.brc-btn-soft:hover {
    background: rgba(59,130,246,.3);
    color: #bfdbfe;
    border-color: rgba(59,130,246,.45);
}

/* ================================================================
   KARŞILAMA EKRANI — SEÇİM KARTLARI
   ================================================================ */
.brc-secim-kart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    cursor: pointer;
    border: 1.5px solid var(--clr-border) !important;
    transition: border-color .15s, transform .12s;
}
.brc-secim-kart:hover {
    border-color: var(--clr-accent) !important;
    transform: translateY(-2px);
}
.brc-secim-kart.secili {
    border-color: var(--clr-accent) !important;
}
.brc-kart-ikon {
    width: 72px;
    height: 72px;
    border-radius: var(--clr-radius-md);
    background: var(--clr-accent-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================================================================
   APP BAR
   ================================================================ */
.brc-appbar {
    height: var(--clr-appbar-height);
    background: var(--clr-bg-deep);
    border-bottom: 1px solid var(--clr-border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 10px;
    flex-shrink: 0;
    position: relative;
    font-family: var(--clr-font-family);
}

/* ================================================================
   SIDEBAR / NAVBAR
   ================================================================ */
.brc-sidebar {
    width: var(--clr-sidebar-width);
    background: var(--clr-bg-deep);
    border-right: 1px solid var(--clr-border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.brc-nav-group {
    padding: 10px 14px 2px;
    font-size: 9px;
    font-weight: var(--clr-font-weight-bold);
    color: rgba(255,255,255,.25);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-family: var(--clr-font-family);
}

/* <a> tag olarak kullanıldığında link stilini sıfırla */
a.brc-nav-item {
    text-decoration: none;
    display: flex;
}

.brc-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: var(--clr-font-size-base);
    color: rgba(255,255,255,.62);
    cursor: pointer;
    font-family: var(--clr-font-family);
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.brc-nav-item i { font-size: 15px; flex-shrink: 0; color: rgba(59,130,246,.75); }
.brc-nav-item:hover { background: rgba(255,255,255,.05); color: var(--clr-text-primary); }

/* Aktif — C versiyonu: ikon + metin glow */
.brc-nav-item.active {
    color: #93c5fd;
    background: rgba(59,130,246,.12);
    border-left: 2px solid #60a5fa;
    padding-left: 12px;
}
.brc-nav-item.active i {
    color: #bfdbfe;
    filter: drop-shadow(0 0 4px #bfdbfe) drop-shadow(0 0 12px rgba(147,197,253,.7));
}

/* Disabled (Yakında) */
.brc-nav-item.disabled {
    color: rgba(255,255,255,.25) !important;
    cursor: default;
    pointer-events: none;
}
.brc-nav-item.disabled i { color: rgba(59,130,246,.25) !important; }

.brc-nav-item.soluk { opacity: .45; }
.brc-nav-item.soluk:hover { opacity: .65; }

/* Collapse menü başlığı */
.brc-nav-item.brc-nav-collapse { color: var(--clr-text-primary); font-weight: 500; text-transform: none; letter-spacing: normal; }

/* CSS chevron — Tabler font olmadan da çalışır */
.brc-chevron {
    display: inline-block; width: 14px; height: 14px;
    flex-shrink: 0; position: relative; opacity: .8;
}
.brc-chevron::before, .brc-chevron::after {
    content: ''; position: absolute; top: 50%;
    width: 6px; height: 1.5px;
    background: rgba(255,255,255,.85); border-radius: 2px; transition: transform .2s;
}
.brc-chevron::before { left: 1px; }
.brc-chevron::after  { right: 1px; }
.brc-chevron.down::before { transform: translateY(-50%) rotate(45deg); }
.brc-chevron.down::after  { transform: translateY(-50%) rotate(-45deg); }
.brc-chevron.up::before   { transform: translateY(-50%) rotate(-45deg); }
.brc-chevron.up::after    { transform: translateY(-50%) rotate(45deg); }

/* Collapse menü başlığı — aktif highlight yok */
.brc-nav-item.brc-nav-collapse { color: var(--clr-text-primary); font-weight: 500; text-transform: none; letter-spacing: normal; }
.brc-nav-item.brc-nav-collapse:hover { background: rgba(255,255,255,.05); }

/* Collapse chevron — Tabler ikonundan bağımsız, CSS ile çizilir */
.brc-chevron {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    position: relative;
    opacity: .75;
}
.brc-chevron::before, .brc-chevron::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 6px;
    height: 1.5px;
    background: rgba(255,255,255,.85);
    border-radius: 2px;
    transition: transform .2s;
}
.brc-chevron::before { left: 1px; }
.brc-chevron::after  { right: 1px; }
/* Aşağı ok */
.brc-chevron.down::before { transform: translateY(-50%) rotate(45deg); }
.brc-chevron.down::after  { transform: translateY(-50%) rotate(-45deg); }
/* Yukarı ok */
.brc-chevron.up::before { transform: translateY(-50%) rotate(-45deg); }
.brc-chevron.up::after  { transform: translateY(-50%) rotate(45deg); }

.brc-nav-sub  { padding-left: 36px !important; }
.brc-nav-divider { height: 1px; background: var(--clr-border); margin: 6px 0; }

.brc-yakinda-badge {
    font-size: 8px;
    background: var(--clr-warning);
    color: #1a1a1a;
    font-weight: var(--clr-font-weight-bold);
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: var(--clr-font-family);
}

/* ================================================================
   İÇERİK ALANI
   ================================================================ */
.brc-main-content {
    flex: 1;
    padding: 18px 20px;
    background: var(--clr-bg-main);
    overflow-y: auto;
    font-family: var(--clr-font-family);
}

/* ================================================================
   YAKINDA EKRANI
   ================================================================ */
.brc-yakinda-ekran {
    background: var(--clr-bg-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--clr-radius-lg);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    text-align: center;
    font-family: var(--clr-font-family);
}

/* Google reCAPTCHA rozeti gizle — koruma aktif, bildirim metni sayfada mevcut */
.grecaptcha-badge { visibility: hidden !important; }
/* ================================================================
   SİDEBAR — masaüstü + mobil
   ================================================================ */

.brc-sidebar {
    width: 260px;
    flex-shrink: 0;
    overflow: hidden;
    transition: width .2s ease;
    background: var(--clr-bg-deep);
    border-right: 1px solid var(--clr-border);
    display: flex;
    flex-direction: column;
    z-index: 200;
}
.brc-sidebar.kapali { width: 0; }
.brc-sidebar.acik  { width: 260px; }

.brc-sidebar-scroll {
    width: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    padding: 6px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}

.brc-sidebar-overlay { display: none; }

/* ── Mobil (≤768px) ── */
@media (max-width: 768px) {

    /* Sidebar sabit konumda üste çıkar */
    .brc-sidebar {
        position: fixed;
        top: 0; left: 0;
        height: 100vh;
        width: 0;
        transition: width .25s ease;
        z-index: 400;
    }
    .brc-sidebar.acik  { width: 260px; box-shadow: 4px 0 24px rgba(0,0,0,.5); }
    .brc-sidebar.kapali { width: 0; }

    /* İçerik alanı her zaman tam genişlik */
    .brc-sidebar + div { width: 100% !important; }

    /* Overlay arka plan */
    .brc-sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.55);
        z-index: 399;
        backdrop-filter: blur(1px);
    }
}

/* ================================================================
   STEPPER — arızalı ürün bildirimi adım göstergesi
   ================================================================ */

.brc-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.brc-stepper-item {
    display: flex;
    align-items: center;
    gap: 0;
}

.brc-stepper-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    z-index: 1;
    background: var(--clr-bg-input);
    color: var(--clr-text-muted);
    border: 1px solid var(--clr-border-strong);
    transition: background .2s;
}

.brc-stepper-circle.aktif {
    background: var(--clr-accent);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(59,130,246,.25);
    border: none;
}

.brc-stepper-circle.tamam {
    background: var(--clr-accent);
    color: #fff;
    border: none;
}

.brc-stepper-line {
    width: 40px;
    height: 2px;
    background: var(--clr-border-strong);
    flex-shrink: 0;
    transition: background .2s;
}

.brc-stepper-line.tamam {
    background: var(--clr-accent);
}

/* Mobilde stepper küçül */
@media (max-width: 480px) {
    .brc-stepper-circle {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }
    .brc-stepper-line {
        width: 18px;
    }
}

/* ================================================================
   MOBİL GENEL DÜZELTMELER
   ================================================================ */

/* 2 kolonlu form grid'leri — mobilde tek kolon */
@media (max-width: 540px) {
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    [style*="grid-template-columns:1fr 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* Sayfa max-width padding */
    [style*="max-width:640px"],
    [style*="max-width:520px"],
    [style*="max-width:580px"],
    [style*="max-width:400px"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* ── Dönen yükleniyor ikonu (brc-spin) ─────────────────────────── */
@keyframes brc-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}