/* ============================================
   COMMON.CSS - GENEL STİLLER
   ============================================
   Font, renk paleti, temel resetler ve
   tüm sayfaların kullanabileceği ortak stiller
   ============================================ */

/* ============================================
   0. FONTLAR (kendi sunucumuzdan; Google Fonts'a istek gitmez)
   ============================================
   wwwroot/fonts — Poppins (Google Fonts, OFL): public site, hesap sayfaları ve panelin TEK yazı ailesi.
   Başlık/metin ayrımı ağırlık ve boyutla yapılır; serif ya da ikinci bir aile EKLENMEZ.
   İtalik yüz yüklü değil — font-style: italic yazma (tarayıcı sahte eğik çizer).
   Her yüz TEK dosya: Latin-1 + Latin Genişletilmiş-A (ç ğ ı İ ö ş ü) + noktalama + para birimleri.
   Google'ın latin / latin-ext ikilisi Türkçe metinde yüz başına iki istek demekti.
   Aralık dışı karakterler (ör. Vietnamca) yığındaki sistem fontuyla çizilir.
   Tarayıcı yalnızca sayfada gerçekten kullanılan yüzleri indirir. Lisans: fonts/OFL-*.txt */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/poppins-300.woff2') format('woff2');
    unicode-range: U+0020-007E, U+00A0-017F, U+0192, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-400.woff2') format('woff2');
    unicode-range: U+0020-007E, U+00A0-017F, U+0192, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins-500.woff2') format('woff2');
    unicode-range: U+0020-007E, U+00A0-017F, U+0192, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-600.woff2') format('woff2');
    unicode-range: U+0020-007E, U+00A0-017F, U+0192, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-700.woff2') format('woff2');
    unicode-range: U+0020-007E, U+00A0-017F, U+0192, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/poppins-800.woff2') format('woff2');
    unicode-range: U+0020-007E, U+00A0-017F, U+0192, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* ============================================
   1. TEMEL RESETLER
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* DİKKAT: html'e overflow VERME. Kökte overflow-x:hidden olduğunda body'nin
       overflow'u viewport'a yayılamaz; scroll kilidi kullanan her şey (SweetAlert'in
       body.swal2-shown'u, body.nav-open, lightbox) body'yi kendi kaydırma kabına
       çevirir ve sticky öğeler (admin sidebar, navbar) belge başına ışınlanır —
       "sidebar'ın yarısı beyaz" bozulması. Yatay kırpma body'de (aşağıda). */
}

body {
    font-family: var(--font-body);
    background-color: #FFFFFF;
    line-height: 1.6;
    /* Scroll reveal animasyonları ve off-canvas menü kaynaklı yatay taşmayı engeller.
       html'in overflow'u visible olduğundan bu değer viewport'a yayılır:
       etki html'dekiyle aynı, ama body kaydırma kabı OLMAZ (spec gereği
       yayılan body'nin kendi used value'su visible kalır) — sticky güvende. */
    overflow-x: hidden;
}

/* Üçüncü parti bileşenler kendi yazı ailesini dayatmasın (jQuery UI: Arial, Select2 arama: sans-serif). */
.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button,
.select2-container .select2-search__field {
    font-family: var(--font-body);
}

/* ============================================
   2. RENK PALETİ (Kurumsal Profesyonel)
   ============================================ */
:root {
    /* Gold */
    --color-gold: #D4AF37;
    --color-gold-soft: #C9A961;
    --color-gold-dark: #996515;
    --color-gold-light: #E8CE7B;
    --color-navy: #001a38; /* Ana koyu navy */
    --color-navy-800: #04244a;
    --color-navy-700: #0a2f5c;

    --color-dark: #1A1A1A;
    --color-grey: #64748B;
    --color-grey-light: #F8FAFC;
    --color-white: #FFFFFF;
    --color-shadow: rgba(0, 0, 0, 0.15);
    --gold-gradient: linear-gradient(135deg, #E8CE7B 0%, #D4AF37 45%, #996515 100%);
    --navy-gradient: linear-gradient(135deg, #0b0c20 0%, #14162e 100%);
    --transition: all 0.2s ease-in-out;

    /* ---- 2026 Modern tasarım token'ları (additive) ---- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-fast: 0.18s var(--ease-out);
    --t-base: 0.32s var(--ease-out);
    --t-slow: 0.5s var(--ease-out);

    /* Yarıçap skalası */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* Katmanlı gölgeler (yumuşak, premium) */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 2px 8px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.05);
    --shadow-lg: 0 18px 48px rgba(16, 24, 40, 0.12), 0 6px 14px rgba(16, 24, 40, 0.06);
    --shadow-gold: 0 10px 30px rgba(212, 175, 55, 0.35);
    --shadow-gold-lg: 0 16px 44px rgba(212, 175, 55, 0.42);

    /* ---- TİPOGRAFİ — public site + hesap sayfaları TEK ölçekten beslenir ----
       Yeni metin stili yazarken yalnızca bu token'ları kullan; ara değer (0.86rem, 13px, 900 …) EKLEME,
       medya sorgusunda font küçültme yazma (akışkan değerler clamp ile zaten küçülür).
       Tek aile (Poppins). --font-display yalnızca başlık rolünü işaretler: display · h1 · h2 (ağırlık --fw-display)
       --font-body: h3 kart/blok/SSS başlığı (600) · lead · body · sm · xs
                · label = BÜYÜK HARF etiket (700, --ls-caps; bölüm üstü eyebrow --ls-eyebrow) · stat = büyük rakam (800) */
    --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: var(--font-body);

    --fs-display: clamp(2.1rem, 4.4vw, 3.75rem);    /* ana sayfa hero, CTA bandı */
    --fs-h1: clamp(1.75rem, 3vw, 2.5rem);            /* sayfa başlığı + bölüm başlığı */
    --fs-h2: clamp(1.35rem, 2.1vw, 1.75rem);         /* alt başlık, metin/yan panel başlığı, ürün/tanıtım adı */
    --fs-h3: 1.05rem;                                /* kart / blok / SSS sorusu */
    --fs-lead: 1.05rem;                              /* hero/bölüm açıklaması, giriş paragrafı */
    --fs-body: 0.95rem;                              /* okuma metni */
    --fs-sm: 0.875rem;                               /* kart açıklaması, buton, menü, form */
    --fs-xs: 0.8rem;                                 /* not, meta, rozet, kırıntı */
    --fs-label: 0.72rem;                             /* BÜYÜK HARF etiket, eyebrow, tablo başlığı */
    --fs-stat: clamp(1.75rem, 3vw, 2.4rem);          /* sayaç / büyük rakam */

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-heavy: 800;
    --fw-display: 600;

    --lh-display: 1.12;
    --lh-heading: 1.25;
    --lh-snug: 1.4;
    --lh-body: 1.75;

    --ls-display: -0.02em;
    --ls-eyebrow: 0.2em;
    --ls-caps: 0.1em;
    --ls-btn: 0.02em;

    --text-heading: var(--color-dark);
    --text-body: var(--color-grey);

    /* Nav ölçüleri */
    --nav-h: 74px;
    --nav-h-scrolled: 62px;
}

.btn{
    margin:3px;
}

.btn-gold {
    background-color: var(--color-gold);
    color: var(--color-white);
    transition: var(--transition);
}

    .btn-gold:hover {
        background-color: var(--color-gold-dark);
        color: var(--color-white);
        box-shadow: 0 4px 12px var(--color-shadow);
    }

/* Harici giriş (Google vb.) — Views/Account/_ExternalLoginButtons.cshtml */
.external-login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    color: var(--color-grey);
    font-size: var(--fs-sm);
}

    .external-login-divider::before,
    .external-login-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: rgba(100, 116, 139, 0.25);
    }

.btn-external {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0.625rem 1rem;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: var(--fw-semibold);
    transition: var(--transition);
}

/* Google marka yönergesine uygun nötr (beyaz) buton */
.btn-external--google {
    background: #fff;
    color: #1f1f1f;
    border: 1px solid #dadce0;
}

    .btn-external--google:hover,
    .btn-external--google:focus-visible {
        background: #f8f9fa;
        color: #1f1f1f;
        border-color: #c6c9cd;
        box-shadow: 0 1px 3px rgba(60, 64, 67, 0.15);
    }

    .btn-external--google:disabled {
        background: #fff;
        color: #1f1f1f;
        border-color: #dadce0;
        opacity: 0.6;
    }

.btn-external__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

/* ============================================
  4. BACKGROUND RENKLER
   ============================================ */

.bg-gold {
    background-color: var(--color-gold);
}

.bg-grey {
    background-color: var(--color-grey);
}

.bg-grey-light {
    background-color: var(--color-grey-light);
}

.bg-white {
    background-color: var(--color-white);
}
.bg-navy-gradient {
    background: var(--navy-gradient);
}
/* ============================================
   11. TEXT RENKLER
   ============================================ */

.text-gold {
    color: var(--color-gold);
}

.text-gold-dark {
    color: var(--color-gold-dark);
}

.text-grey {
    color: var(--color-grey);
}

.text-white {
    color: var(--color-white);
}

.text-dark {
    color: var(--color-dark);
}





/* ============================================
   1. NAVBAR — MODERN GLASSMORPHIC (2026)
   ============================================ */

/* Shared Base Styles */
.navbar-custom {
    position: sticky;
    top: 0;
    z-index: 1050;
    padding: 0;
    background: transparent;
    border-bottom: 1px solid rgba(16, 24, 40, 0.06);
    transition: box-shadow var(--t-base), border-color var(--t-base);
}

/* Frosted-glass katmanı ::before üzerinde tutulur.
   Böylece .navbar-custom'ın kendisinde backdrop-filter olmaz; aksi hâlde
   position:fixed olan mobil drawer için "containing block" oluşturur ve
   drawer navbar yüksekliğine hapsolurdu. */
.navbar-custom::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    transition: background var(--t-base);
}

/* Sticky "scrolled" state — set via JS */
.navbar-custom.scrolled::before {
    background: rgba(255, 255, 255, 0.92);
}

.navbar-custom.scrolled {
    box-shadow: 0 6px 24px rgba(16, 24, 40, 0.08);
    border-bottom-color: rgba(212, 175, 55, 0.18);
}

.navbar-inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--nav-h);
    transition: height var(--t-base);
}

.navbar-custom.scrolled .navbar-inner {
    height: var(--nav-h-scrolled);
}

/* Not: z-index verilmez — mobil drawer (z:1056) açıldığında logonun
   drawer'ın üzerine binmemesi gerekir. */
.navbar-logo {
    display: inline-flex;
    align-items: center;
}

.navbar-logo-img {
    height: 44px;
    width: auto;
    object-fit: contain;
    transition: height var(--t-base);
}

.navbar-custom.scrolled .navbar-logo-img {
    height: 38px;
}

/* DESKTOP STYLES (Min 992px) */
@media (min-width: 992px) {
    .navbar-toggle {
        display: none !important;
    }

    .navbar-menu {
        display: flex !important;
        list-style: none;
        margin: 0;
        padding: 0;
        align-items: center;
        gap: 2px;
    }

    .navbar-separator {
        width: 1px;
        height: 22px;
        background: rgba(16, 24, 40, 0.12);
        margin: 0 12px;
    }

    .nav-link {
        position: relative;
        color: #33415c !important;
        text-decoration: none;
        font-weight: var(--fw-medium);
        font-size: var(--fs-sm);
        padding: 10px 16px;
        border-radius: var(--radius-sm);
        transition: color var(--t-fast), background var(--t-fast);
    }

    /* Center-growing gold underline */
    .nav-link::after {
        content: '';
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 4px;
        height: 2px;
        border-radius: 2px;
        background: var(--gold-gradient);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform var(--t-base);
    }

    .nav-link:hover {
        color: var(--color-gold-dark) !important;
        background: rgba(212, 175, 55, 0.07);
    }

    .nav-link:hover::after {
        transform: scaleX(1);
    }
}

/* ---- "Makaleler" açılır menüsü (navbar) ----
   Masaüstü: üzerine gelince ya da klavye odağında açılır (JS yok). Mobil çekmece: alt liste.
   Tür renkleri BlogPostType değerine göre TEK yerde; blog.css de bunları kullanır. */
:root {
    --bl-t1: #b8892a;  --bl-t1-soft: #fbf4e2;   /* Haftalık Altın Yorumu — altın */
    --bl-t2: #1f4f8a;  --bl-t2-soft: #e8f0fa;   /* Piyasa Analizi — mavi */
    --bl-t3: #0f766e;  --bl-t3-soft: #e3f4f1;   /* Haber & Duyuru — turkuaz */
    --bl-t4: #7c3aed;  --bl-t4-soft: #f1ebfd;   /* Trend & Koleksiyon — mor */
    --bl-t5: #b4532a;  --bl-t5-soft: #fbece5;   /* Rehber — kil */
}

.nav-dd__caret {
    margin-left: 6px;
    font-size: 0.7em;
    vertical-align: 1px;
    transition: transform var(--t-fast);
}

.nav-dd__link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-heading);
}

.nav-dd__icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    font-size: 1rem;
}

.nav-dd__icon--t1 { color: var(--bl-t1); background: var(--bl-t1-soft); }
.nav-dd__icon--t2 { color: var(--bl-t2); background: var(--bl-t2-soft); }
.nav-dd__icon--t3 { color: var(--bl-t3); background: var(--bl-t3-soft); }
.nav-dd__icon--t4 { color: var(--bl-t4); background: var(--bl-t4-soft); }
.nav-dd__icon--t5 { color: var(--bl-t5); background: var(--bl-t5-soft); }

.nav-dd__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: var(--lh-snug);
}

.nav-dd__title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

.nav-dd__desc {
    font-size: var(--fs-xs);
    color: var(--text-body);
}

@media (min-width: 992px) {
    .nav-dd {
        position: relative;
    }

    .nav-dd__menu {
        position: absolute;
        top: 100%;
        left: 50%;
        z-index: 1070;
        width: 330px;
        margin: 0;
        padding: 8px;
        list-style: none;
        background: #ffffff;
        border: 1px solid rgba(16, 24, 40, 0.08);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 10px);
        transition: opacity var(--t-fast), transform var(--t-fast), visibility 0s linear 0.2s;
    }

    /* Bağlantı ile menü arasındaki boşlukta hover kopmasın */
    .nav-dd__menu::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: -14px;
        height: 14px;
    }

    .nav-dd:hover .nav-dd__menu,
    .nav-dd:focus-within .nav-dd__menu {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 4px);
        transition: opacity var(--t-fast), transform var(--t-fast), visibility 0s;
    }

    .nav-dd:hover .nav-dd__caret,
    .nav-dd:focus-within .nav-dd__caret {
        transform: rotate(180deg);
    }

    .nav-dd__link {
        padding: 10px 12px;
        border-radius: var(--radius-md);
        transition: background var(--t-fast);
    }

    .nav-dd__link:hover,
    .nav-dd__link:focus-visible,
    .nav-dd__link.is-active {
        background: rgba(212, 175, 55, 0.08);
    }

    .nav-dd__link:hover .nav-dd__title,
    .nav-dd__link.is-active .nav-dd__title {
        color: var(--color-gold-dark);
    }

    .nav-dd__all {
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid rgba(16, 24, 40, 0.06);
    }

    .nav-dd__all a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 9px 12px;
        border-radius: var(--radius-md);
        color: var(--color-gold-dark);
        font-size: var(--fs-sm);
        font-weight: var(--fw-semibold);
        text-decoration: none;
    }

    .nav-dd__all a:hover {
        background: rgba(212, 175, 55, 0.08);
    }
}

@media (max-width: 991px) {
    .nav-dd__caret {
        display: none;
    }

    .nav-dd__menu {
        margin: 2px 0 8px;
        padding: 0 0 0 12px;
        list-style: none;
    }

    .nav-dd__link {
        padding: 9px 10px;
        border-radius: var(--radius-sm);
    }

    .nav-dd__link:active,
    .nav-dd__link.is-active {
        background: rgba(212, 175, 55, 0.08);
    }

    .nav-dd__icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .nav-dd__desc,
    .nav-dd__all {
        display: none;
    }
}

/* "Hesabım" pill button in navbar */
.navbar-menu .btn-gold {
    display: inline-flex;
    align-items: center;
    background: var(--gold-gradient);
    border: none;
    border-radius: var(--radius-pill);
    padding: 9px 22px;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    box-shadow: var(--shadow-gold);
    transition: transform var(--t-base), box-shadow var(--t-base), filter var(--t-base);
}

.navbar-menu .btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold-lg);
    filter: brightness(1.04);
    background: var(--gold-gradient);
}

/* Drawer header (logo + close) — only visible inside the mobile drawer */
.navbar-drawer-head {
    display: none;
}

.navbar-drawer-logo {
    height: 36px;
    width: auto;
    object-fit: contain;
}

.navbar-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(16, 24, 40, 0.05);
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: var(--radius-sm);
    color: var(--color-navy);
    font-size: 1.15rem;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.navbar-drawer-close:hover {
    background: rgba(212, 175, 55, 0.12);
    color: var(--color-gold-dark);
    transform: rotate(90deg);
}

/* Backdrop for mobile drawer.
   Kept BELOW the navbar's stacking context (z:1050) so the in-nav drawer
   (z:1056) and toggle (z:1060) always paint above it. */
.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 12, 26, 0.5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    z-index: 1045;
    transition: opacity var(--t-base), visibility var(--t-base);
}

.nav-backdrop.active {
    opacity: 1;
    visibility: visible;
}

@media (min-width: 992px) {
    .nav-backdrop { display: none; }
}

/* MOBILE STYLES (Max 991px) — slide-in drawer */
@media (max-width: 991px) {
    .navbar-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        background: rgba(212, 175, 55, 0.08);
        border: 1px solid rgba(212, 175, 55, 0.2);
        border-radius: var(--radius-sm);
        cursor: pointer;
        z-index: 1060;
        transition: background var(--t-fast), border-color var(--t-fast);
    }

    .navbar-toggle:hover {
        background: rgba(212, 175, 55, 0.14);
    }

    .navbar-toggle span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--color-navy);
        border-radius: 2px;
        transition: transform var(--t-base), opacity var(--t-fast), background var(--t-fast);
    }

    /* Toggle → X animation (yalnızca AÇMA için; açıkken drawer'ın kendi
       kapatma butonu devreye girer, hamburger gizlenir) */
    .navbar-toggle.active {
        opacity: 0;
        pointer-events: none;
    }

    /* Drawer başlığı: logo + kapatma */
    .navbar-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 0 16px;
        margin-bottom: 12px;
        border-bottom: 1px solid rgba(16, 24, 40, 0.08);
    }

    .navbar-menu {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(86vw, 340px);
        background: linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 2px;
        list-style: none;
        margin: 0;
        padding: 18px 24px 32px;
        box-shadow: -20px 0 60px rgba(6, 12, 26, 0.22);
        border-left: 1px solid rgba(212, 175, 55, 0.18);
        overflow-y: auto;
        z-index: 1056;
        /* Panel her zaman viewport içinde (right:0) durur; kapalıyken clip-path
           ile gizlenir. translateX ile ekran dışına itmek yatay scroll yaratırdı;
           clip-path yaklaşımı bunu tamamen önler. */
        clip-path: inset(0 0 0 100%);
        visibility: hidden;
        transition: clip-path 0.45s var(--ease-out), visibility 0.45s var(--ease-out);
    }

    .navbar-menu.active {
        clip-path: inset(0 0 0 0);
        visibility: visible;
    }

    .navbar-item {
        width: 100%;
        margin: 0;
        opacity: 0;
        transform: translateX(16px);
    }

    /* Staggered entrance when drawer is open */
    .navbar-menu.active .navbar-item {
        animation: navItemIn 0.4s var(--ease-out) forwards;
    }
    .navbar-menu.active .navbar-item:nth-child(1) { animation-delay: 0.08s; }
    .navbar-menu.active .navbar-item:nth-child(2) { animation-delay: 0.13s; }
    .navbar-menu.active .navbar-item:nth-child(3) { animation-delay: 0.18s; }
    .navbar-menu.active .navbar-item:nth-child(4) { animation-delay: 0.23s; }
    .navbar-menu.active .navbar-item:nth-child(5) { animation-delay: 0.28s; }
    .navbar-menu.active .navbar-item:nth-child(6) { animation-delay: 0.33s; }
    .navbar-menu.active .navbar-item:nth-child(7) { animation-delay: 0.36s; }
    .navbar-menu.active .navbar-item:nth-child(8) { animation-delay: 0.4s; }

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

    .nav-link {
        display: block;
        padding: 15px 12px;
        font-size: var(--fs-lead);
        font-weight: var(--fw-medium);
        color: var(--color-navy) !important;
        border-radius: var(--radius-sm);
        border-bottom: 1px solid rgba(16, 24, 40, 0.06);
        transition: background var(--t-fast), color var(--t-fast), padding-left var(--t-fast);
    }

    .nav-link:hover,
    .nav-link:active {
        color: var(--color-gold-dark) !important;
        background: rgba(212, 175, 55, 0.08);
        padding-left: 20px;
    }

    .navbar-separator {
        height: 1px;
        width: 100%;
        background: linear-gradient(to right, rgba(212, 175, 55, 0.35), transparent);
        margin: 14px 0 6px;
    }

    .navbar-menu .btn-gold {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 8px 0 0;
        padding: 14px 20px;
        font-weight: var(--fw-semibold);
        background: var(--gold-gradient);
        border: none;
        border-radius: var(--radius-pill);
        box-shadow: var(--shadow-gold);
    }

    /* Lock scroll when drawer open */
    body.nav-open {
        overflow: hidden;
    }
}


/* ============================================
   7. FOOTER
   ============================================ */

/* Sıcak siyah zemin + marka izinin arkasında yumuşak altın ışıma (lacivert/fotoğraf yok) */
.footer-modern {
    background:
        radial-gradient(ellipse 55% 45% at 50% 100%, rgba(212, 175, 55, 0.13) 0%, transparent 70%),
        radial-gradient(ellipse 45% 55% at 0% 0%, rgba(212, 175, 55, 0.06) 0%, transparent 70%),
        linear-gradient(180deg, #121110 0%, #0b0a09 55%, #070706 100%);
    color: rgba(255, 255, 255, 0.85);
    padding: 0;
    position: relative;
    overflow: hidden;
}

    /* Üst kenarda ince altın çizgi */
    .footer-modern::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.7), transparent);
    }

/* Footer Main Content */
.footer-main {
    padding: 72px 0 48px;
}

.footer-col {
    position: relative;
}

/* Footer Column Title */
.footer-col-title {
    color: var(--color-white);
    margin-bottom: 22px;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

    .footer-col-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 38px;
        height: 3px;
        border-radius: 3px;
        background: var(--gold-gradient);
    }

/* Logo dalam Footer */
.footer-logo-dark {
    color: var(--color-white);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 0.5px;
}

.footer-logo-gold {
    color: var(--color-gold);
    font-weight: 800;
    font-size: 1.5rem;
}

/* Footer Description */
.footer-description {
    color: rgba(255, 255, 255, 0.66);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    margin: 18px 0 22px;
}

/* Footer Contact Quick */
.footer-contact-quick {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 22px;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.8);
    transition: color var(--t-fast);
}

    .footer-contact-item i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        color: var(--color-gold);
        font-size: 0.95rem;
        transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
    }

    .footer-contact-item a {
        color: rgba(255, 255, 255, 0.8);
        transition: color var(--t-fast);
    }

    .footer-contact-item:hover i {
        background: rgba(212, 175, 55, 0.14);
        border-color: rgba(212, 175, 55, 0.45);
        transform: translateY(-2px);
    }

    .footer-contact-item:hover a {
        color: var(--color-gold);
    }

/* Footer Link List */
.footer-link-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 0;
}

    .footer-link-list li {
        margin: 0;
    }

    .footer-link-list a {
        color: rgba(255, 255, 255, 0.68);
        font-size: var(--fs-sm);
        text-decoration: none;
        transition: color var(--t-fast), padding-left var(--t-base);
        position: relative;
        padding-left: 0;
    }

        .footer-link-list a::before {
            content: '›';
            position: absolute;
            left: -12px;
            opacity: 0;
            transition: opacity var(--t-base), left var(--t-base);
            color: var(--color-gold);
            font-weight: 700;
        }

        .footer-link-list a:hover {
            color: var(--color-gold);
            padding-left: 14px;
        }

            .footer-link-list a:hover::before {
                opacity: 1;
                left: 0;
            }

/* Footer Hours */
.footer-hours {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hour-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    font-size: var(--fs-sm);
}

.hour-item:last-child {
    border-bottom: 0;
}

.hour-day {
    color: rgba(255, 255, 255, 0.72);
    font-weight: var(--fw-medium);
}

.hour-time {
    color: var(--color-gold);
    font-weight: var(--fw-semibold);
}

/* Social Icons Modern */
.footer-socials-modern {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    transition: transform var(--t-base), background var(--t-base), box-shadow var(--t-base), color var(--t-base), border-color var(--t-base);
}

    .social-icon:hover {
        background: var(--gold-gradient);
        color: #0b0a09;
        border-color: transparent;
        transform: translateY(-4px);
        box-shadow: var(--shadow-gold);
    }

/* Footer app store badges */
.footer-app-label {
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    margin: 6px 0 12px;
}

.footer-stores {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-store-btn {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 9px 18px 9px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-pill);
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
}

    .footer-store-btn i {
        font-size: 1.4rem;
        color: #ffffff;
        line-height: 1;
    }

    .footer-store-btn span {
        display: flex;
        flex-direction: column;
        line-height: 1.15;
    }

    .footer-store-btn small {
        font-size: var(--fs-label);
        text-transform: uppercase;
        letter-spacing: var(--ls-caps);
        opacity: 0.65;
    }

    .footer-store-btn strong {
        font-size: var(--fs-sm);
        font-weight: var(--fw-semibold);
    }

    .footer-store-btn:hover {
        background: rgba(212, 175, 55, 0.1);
        border-color: rgba(212, 175, 55, 0.55);
        transform: translateY(-2px);
    }

        .footer-store-btn:hover i {
            color: var(--color-gold-light);
        }


/* Footer Bottom */
.footer-bottom {
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 26px;
    flex-wrap: wrap;
}

.footer-bottom-text {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.58);
    font-size: var(--fs-xs);
    margin: 0;
}

    .footer-bottom-text::before {
        content: '';
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--gold-gradient);
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
        flex-shrink: 0;
    }

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}

.footer-bottom-links a {
    position: relative;
    color: rgba(255, 255, 255, 0.62);
    font-size: var(--fs-xs);
    text-decoration: none;
    transition: color var(--t-fast);
}

    .footer-bottom-links a:not(:first-child)::before {
        content: '';
        position: absolute;
        left: -13px;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: rgba(212, 175, 55, 0.55);
    }

    .footer-bottom-links a:hover {
        color: var(--color-gold);
    }

/* Eski "|" ayraç artık kullanılmıyor; geriye dönük gizle */
.footer-bottom .divider {
    display: none;
}

@media (max-width: 768px) {
    .footer-bottom-inner {
        justify-content: center;
        text-align: center;
    }

    .footer-bottom-links {
        justify-content: center;
        gap: 22px;
    }
}

/* Mobile Footer */
@media (max-width: 768px) {
    .footer-main {
        padding: 48px 0 32px;
    }

    .footer-col {
        margin-bottom: 8px;
    }

        .footer-col-title::after {
            width: 30px;
        }
}



/* ============================================
   8. RESPONSİVİTY (MOBİL)
   ============================================ */

@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1.25rem;
    }

    .nav-link {
        margin: 8px 0;
    }

}

@media (max-width: 576px) {
    .navbar {
        padding: 10px 0;
    }

    .navbar-brand {
        font-size: 1.1rem;
    }

}



/* ===============================
   LADDA (GLOBAL)
================================ */

/* 1. Temel Yapı ve Geçişlerin Kapatılması */
.ladda-button,
.ladda-button .ladda-label,
.ladda-button .ladda-spinner {
    position: relative !important;
    transition: none !important; /* Tüm gecikmeleri global olarak sıfırladık */
}

    /* 2. Yükleme (Loading) Durumu - Buton Genel */
    .ladda-button[data-loading] {
        pointer-events: none !important;
        opacity: 0.65 !important;
        cursor: not-allowed !important;
    }

        /* 3. Yükleme Anında İçerik (Label ve Spinner) */
        .ladda-button[data-loading] .ladda-label {
            opacity: 0.2 !important;
        }

    .ladda-button .ladda-spinner {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
        z-index: 10 !important;
    }

        .ladda-button .ladda-spinner div {
            background: currentColor !important;
        }

    /* 4. Durma (Stop) Durumu - Spinner'ı Anında Yok Et */
    .ladda-button:not([data-loading]) .ladda-spinner {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }


/* Bootstrap'in varsayılan okunu Sidebar'a göre özelleştiriyoruz */
#sidebar .dropdown-toggle::after {
    
    transition: transform 0.3s ease;
}

/* Menü AÇIKKEN (collapsed sınıfı YOKKEN) oku döndür */
/* NOT: Boşluk bırakmadan yazmalısın (.dropdown-toggle:not(.collapsed)::after) */
#sidebar .dropdown-toggle:not(.collapsed)::after {
    transform: rotate(180deg);
}


.bg-navy {
    background: var(--color-navy);
}

.card-header .bi-chevron-down {
    transition: transform 0.3s ease;
}

/* ===============================
   DATA TABLE
================================ */

/* dom ayarındaki bootstrap .row negatif margin'i .table-responsive içinde
   yatay taşma yaratıyor; veri yokken bile scrollbar çıkmasın */
.table-responsive > .dataTables_wrapper > .row {
    margin-left: 0;
    margin-right: 0;
}

.table-responsive > .dataTables_wrapper > .row > [class*="col-"]:first-child {
    padding-left: 0;
}

.table-responsive > .dataTables_wrapper > .row > [class*="col-"]:last-child {
    padding-right: 0;
}


/* ===============================
   PREMIUM CATEGORY BADGES
================================ */
.bg-purple { background-color: #6f42c1 !important; color: white !important; }
.bg-indigo { background-color: #6610f2 !important; color: white !important; }
.bg-teal   { background-color: #20c997 !important; color: white !important; }
.bg-navy-soft { background-color: #1a237e !important; color: white !important; }
.bg-gold-soft { background-color: #C9A961 !important; color: white !important; }

/* Header kapalıyken (collapsed iken) ikonu yan çevir veya ters çevir */
.card-header.collapsed .bi-chevron-down {
    transform: rotate(180deg); /* Kapalıyken sola baksın */
}

/* Genel Tablo Tasarımı */
table.dataTable {
    border-collapse: collapse !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.02);

}

    /* Header: Koyu/Modern Görünüm */
    table.dataTable thead th {
        background-color: var(--color-navy) !important; /* Sedir gold Sidebar uyumlu koyu renk */
        color: #e9ecef !important;
        font-weight: 600;
        font-size: 0.8rem;
        letter-spacing: 0.5px;
        padding: 15px !important;
        border: none;

    }



    /* Hücre İçerikleri */
    table.dataTable tbody td {
        padding: 12px !important;
        color: #495057;
        font-size: 0.9rem;
        vertical-align: middle;
      
    }

/* Pagination (Sayfalama) Tasarımı */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.5rem 0.75rem !important;
    margin-left: 2px !important;
    border-radius: 6px !important;
    border: 1px solid #dee2e6 !important;
    background: #fff !important;
    color: #0d6efd !important;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background-color: #0d6efd !important; /* Primary Mavi */
        color: white !important;
        border-color: #0d6efd !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: #e9ecef !important;
        color: #0a58ca !important;
    }

/* Arama Kutusu ve Selectbox */
.dataTables_filter input {
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    margin-left: 10px !important;
    padding: 4px 8px !important;
}

.w-30{
    width:30%;
}
.modal-xl {
    max-width: 90%;
}
@media (max-width: 768px) {
    .modal-xl {
        max-width: 100%;
    }
}

.swal2-container {
    z-index: 10000 !important;
}
/* 1. Kutunun col-md-6 içinde tam genişlikte durmasını sağlar */
.select2-container {
    width: 100% !important;
}

/* 2. Hepsini Seç butonunu kutunun içine sağa yaslar */
.select2-container-multipicker {
    position: relative;
}

.select-all {
    position: absolute;
    right: 35px; /* Ok işaretinin veya çarpının üzerine gelmemesi için */
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    font-size: 10px !important;
    font-weight: bold;
    color: #0d6efd;
    cursor: pointer;
    background: rgba(13, 110, 253, 0.1);
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
    user-select: none;
}

    .select-all:hover {
        background: #0d6efd;
        color: #fff;
    }

/* 3. Seçilen öğelerin butona çarpmasını engellemek için sağdan boşluk */
.select2-container--default .select2-selection--multiple {
    padding-right: 90px !important;
    min-height: 38px; /* Standart input yüksekliği */
    border: 1px solid #dee2e6 !important;
}

/* 4. Single select (tekli seçim) için yükseklik düzeltmesi */
.select2-container--default .select2-selection--single {
    height: 38px !important;
    border: 1px solid #dee2e6 !important;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 36px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
    }





/* Ana Takvim Kutusu */
.ui-datepicker {
    background: #ffffff !important;
    border: 1px solid #1a237e !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
    z-index: 9999 !important;
}

/* Başlık (Header) Lacivert */
.ui-datepicker-header {
    background: #1a237e !important;
    color: #ffffff !important;
    border: none !important;
}



/* Sağ-Sol Okları Görünür Yapma */
.ui-datepicker-prev span, .ui-datepicker-next span {
    display: none !important; /* Varsayılan ikonları gizle */
}

.ui-datepicker-prev::after {
    content: '◀';
    color: white;
    position: absolute;
    left: 10px;
    top: 8px;
    cursor: pointer;
}

.ui-datepicker-next::after {
    content: '▶';
    color: white;
    position: absolute;
    right: 10px;
    top: 8px;
    cursor: pointer;
}

/* Gün İsimleri */
.ui-datepicker th {
    color: #1a237e !important;
}

/* Seçili Gün */
.ui-datepicker td .ui-state-active {
    background: #1a237e !important;
    color: white !important;
    border-radius: 4px !important;
    border: none !important;
}

/* Bugün */
.ui-datepicker td .ui-state-highlight {
    background: #f1f3f9 !important;
    border: 1px solid #1a237e !important;
    color: #1a237e !important;
}

/* Sadece custom-tabs içinde çalışır */
.custom-tabs .nav-tabs {
    border-bottom: 1px solid #dee2e6;
    flex-wrap: nowrap; /* alt satıra düşmesin */
    overflow-x: auto; /* yatay scroll */
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none; /* Firefox */
}

    .custom-tabs .nav-tabs::-webkit-scrollbar {
        display: none; /* Chrome */
    }

    .custom-tabs .nav-tabs .nav-item {
        flex: 0 0 auto; /* sıkışmayı engeller */
    }

    .custom-tabs .nav-tabs .nav-link {
        color: #6c757d;
        border: none;
        border-bottom: 2px solid transparent;
        background: transparent;
        transition: all 0.2s ease;
        padding: 0.5rem 1rem;
        font-size: 0.95rem;
    }

        .custom-tabs .nav-tabs .nav-link:hover {
            color: #0d6efd;
        }

        .custom-tabs .nav-tabs .nav-link.active {
            color: #0d6efd;
            background: transparent;
            border-bottom: 2px solid #0d6efd;
        }
@media (max-width: 768px) {
    .custom-tabs .nav-tabs .nav-link {
        margin-left:10px
    }
}

/* ============================================
   12. PREMIUM SOFT BADGE STYLES (GOLDIFY STYLE)
   ============================================ */
.bg-soft-purple { background-color: rgba(111, 66, 193, 0.12) !important; color: #6f42c1 !important; border: 1px solid rgba(111, 66, 193, 0.3) !important; }
.bg-soft-indigo { background-color: rgba(102, 16, 242, 0.12) !important; color: #6610f2 !important; border: 1px solid rgba(102, 16, 242, 0.3) !important; }
.bg-soft-primary { background-color: rgba(13, 110, 253, 0.12) !important; color: #0d6efd !important; border: 1px solid rgba(13, 110, 253, 0.3) !important; }
.bg-soft-teal { background-color: rgba(32, 201, 151, 0.12) !important; color: #20c997 !important; border: 1px solid rgba(32, 201, 151, 0.3) !important; }
.bg-soft-info { background-color: rgba(13, 202, 240, 0.12) !important; color: #0dcaf0 !important; border: 1px solid rgba(13, 202, 240, 0.3) !important; }
.bg-soft-warning { background-color: rgba(255, 193, 7, 0.12) !important; color: #b27b00 !important; border: 1px solid rgba(255, 193, 7, 0.3) !important; }
.bg-soft-success { background-color: rgba(25, 135, 84, 0.12) !important; color: #198754 !important; border: 1px solid rgba(25, 135, 84, 0.3) !important; }
.bg-soft-danger { background-color: rgba(220, 53, 69, 0.12) !important; color: #dc3545 !important; border: 1px solid rgba(220, 53, 69, 0.3) !important; }
.bg-soft-secondary { background-color: rgba(108, 117, 125, 0.12) !important; color: #6c757d !important; border: 1px solid rgba(108, 117, 125, 0.3) !important; }
.bg-soft-dark { background-color: rgba(33, 37, 41, 0.12) !important; color: #212529 !important; border: 1px solid rgba(33, 37, 41, 0.3) !important; }
.bg-soft-navy { background-color: rgba(0, 26, 56, 0.12) !important; color: #001a38 !important; border: 1px solid rgba(0, 26, 56, 0.3) !important; }
.bg-soft-gold { background-color: rgba(212, 175, 55, 0.12) !important; color: #996515 !important; border: 1px solid rgba(212, 175, 55, 0.3) !important; }

/* ============================================
   13. SEKONDER PUBLIC SAYFA BAŞLIĞI (.sp-header)
   Ürün kataloğu, tanıtım detayı gibi ana sayfa dışındaki
   public sayfaların ortak kompakt hero'su.
   ============================================ */
.sp-header {
    background: linear-gradient(135deg, #101418 0%, #1d232b 55%, #2a2417 100%);
    padding: 44px 0 40px;
    border-bottom: 1px solid rgba(212,175,55,0.15);
    position: relative;
    overflow: hidden;
}

/* Canlı fiyatlar hero'sundaki altın parıltı */
.sp-header::before {
    content: '';
    position: absolute;
    right: -100px;
    top: -100px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.22), transparent 70%);
    pointer-events: none;
}

.sp-header::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 5%, var(--color-gold) 50%, transparent 95%);
}

.sp-header__title {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: var(--fw-display);
    color: #ffffff;
    letter-spacing: var(--ls-display);
    margin: 0 0 6px;
    line-height: var(--lh-heading);
}

.sp-header__sub {
    font-size: var(--fs-body);
    color: rgba(255,255,255,0.65);
    margin: 0;
}

.sp-header__count {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--color-gold-soft);
}

@media (max-width: 575px) {
    .sp-header { padding: 26px 0; }
}


/* ============================================
   14. GÜVEN BANDI (.sg-prefooter)
   _PreFooter.cshtml partial'ı ile birlikte kullanılır. Partial birden çok
   sayfada (ana sayfa, hakkımızda, iletişim, tanıtım detayı) render edildiği
   için stilleri index.css'te değil burada durur.
   ============================================ */
.sg-prefooter {
    background: var(--color-white, #fff);
    padding: 68px 0;
    border-top: 1px solid #f1f3f5;
}

.sg-trust-card {
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 26px 24px;
    border-radius: var(--radius-lg, 20px);
    background: #fff;
    border: 1px solid rgba(16, 24, 40, 0.07);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(16, 24, 40, 0.05));
    overflow: hidden;
    transition: transform var(--t-base, .32s ease), box-shadow var(--t-base, .32s ease), border-color var(--t-base, .32s ease);
}

/* Üstteki altın şerit hover'da kartın enine yayılır */
.sg-trust-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 3px;
    border-radius: 0 0 var(--radius-pill, 999px) var(--radius-pill, 999px);
    background: var(--gold-gradient, linear-gradient(135deg, #e8ce7b, #d4af37 45%, #996515));
    transition: width var(--t-base, .32s ease);
}

.sg-trust-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 175, 55, 0.35);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(16, 24, 40, 0.08));
}

.sg-trust-card:hover::before {
    width: 100%;
}

.sg-trust-card__icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md, 14px);
    font-size: 1.2rem;
    color: var(--color-gold-dark, #996515);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.28));
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.22);
    transition: transform var(--t-base, .32s ease);
}

.sg-trust-card:hover .sg-trust-card__icon {
    transform: scale(1.06) rotate(-4deg);
}

.sg-trust-card__body {
    min-width: 0;
}

.sg-trust-card h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--color-dark, #101418);
    margin: 2px 0 5px;
    line-height: var(--lh-snug);
}

.sg-trust-card p {
    font-size: var(--fs-sm);
    color: var(--color-grey);
    line-height: var(--lh-body);
    margin: 0;
}

@media (max-width: 767.98px) {
    .sg-prefooter {
        padding: 44px 0;
    }

    .sg-trust-card {
        padding: 20px 18px;
        border-radius: var(--radius-md, 14px);
    }
}


/* ============================================
   15. HESAP SAYFALARI (Giriş / Kayıt / Şifremi Unuttum)
   Views/Account/_AuthSidePanel + _AuthTopBar
   ============================================ */
.auth-side__logo {
    height: 56px;
    width: auto;
}

.auth-side__subtitle {
    font-size: var(--fs-lead);
    color: rgba(255, 255, 255, 0.8);
}

.auth-side__item-title {
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
}

/* Hesap formları public iletişim formuyla (.sg-form__label / .sg-btn) aynı ölçekte */
.auth-main .form-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
}

.auth-main .form-control,
.auth-main .input-group-text {
    font-size: var(--fs-sm);
}

.auth-main .btn {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-btn);
}

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

.auth-topbar__logo img {
    height: 36px;
    width: auto;
}

.auth-topbar__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-grey);
    text-decoration: none;
    transition: color var(--t-fast);
}

.auth-topbar__back:hover {
    color: var(--color-gold-dark);
}

.auth-title {
    font-size: var(--fs-h2);
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-display);
}

/* Kayıt formu: sözleşme onay kutusu */
.auth-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin: 0;
    border-radius: 12px;
    border: 1px solid rgba(100, 116, 139, 0.22);
    background: rgba(212, 175, 55, 0.06);
}

.auth-consent .form-check-input {
    flex: 0 0 auto;
    float: none;
    margin: 3px 0 0;
    width: 1.15em;
    height: 1.15em;
    border-color: rgba(100, 116, 139, 0.55);
    cursor: pointer;
}

.auth-consent .form-check-input:checked {
    background-color: var(--color-gold-dark);
    border-color: var(--color-gold-dark);
}

.auth-consent .form-check-input:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
}

.auth-consent .form-check-label {
    font-size: var(--fs-xs);
    line-height: 1.55;
    color: var(--color-grey);
    cursor: pointer;
}

.auth-consent a {
    color: var(--color-gold-dark);
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ============================================
   FOOTER — MODERN KOYU TEMA (2026-10)
   Sıcak siyah zemin + film greni + dev marka izi
   (fotoğraf zemin ve lacivert degrade kaldırıldı)
   ============================================ */
/* Film greni (hero ile aynı doku) */
.footer-modern::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.05;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.footer-modern > .container-lg {
    position: relative;
    z-index: 1;
}

.footer-col-title {
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--color-gold);
    padding-bottom: 0;
    margin-bottom: 20px;
}

.footer-col-title::after {
    display: none;
}

.footer-link-list a {
    color: rgba(255, 255, 255, 0.64);
    /* padding-left geçişi listede kalmalı; yoksa hover'da kayma anlık olur */
    transition: color var(--t-fast), padding-left var(--t-base);
}

.footer-link-list a:hover {
    color: var(--color-gold-light);
}

/* Dev marka izi: yalnızca arka plan filigranı — akışta yer kaplamaz,
   içerik (z-index 1) üstünde kalır; aşağı doğru saydamlaşır */
.footer-mark {
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    width: max-content;
    z-index: 0;
    font-family: var(--font-display);
    font-size: clamp(3rem, 13vw, 12rem);
    font-weight: var(--fw-display);
    line-height: 1.1; /* daha düşükte harf üstleri (İ noktası) kırpılıyor */
    letter-spacing: -0.02em;
    text-align: center;
    white-space: nowrap;
    color: transparent;
    background: linear-gradient(180deg, rgba(240, 214, 140, 0.26) 0%, rgba(212, 175, 55, 0.1) 55%, rgba(212, 175, 55, 0.02) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    user-select: none;
    pointer-events: none;
}

/* Kompakt dikey ritim */
.footer-main {
    position: relative;
    z-index: 1;
    padding: 56px 0 30px;
}

.footer-bottom {
    position: relative;
    z-index: 1;
    padding: 18px 0;
    border-top-color: rgba(255, 255, 255, 0.1);
}

.footer-description {
    margin: 16px 0 20px;
}

.footer-socials-modern {
    margin-bottom: 16px;
}

.footer-link-list {
    gap: 10px;
}

.footer-contact-quick {
    gap: 10px;
    margin-top: 0;
}

.footer-hours .hour-item {
    padding: 8px 0;
}

@media (max-width: 767.98px) {
    .footer-main {
        padding: 40px 0 22px;
    }

    .footer-mark {
        bottom: 150px; /* çok satırlı alt şeridin üstünde, iletişim bloğunun arkasında */
    }
}

.footer-to-top {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: color var(--t-fast), transform var(--t-fast);
}

.footer-to-top i {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--color-gold);
    font-size: 0.85rem;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.footer-to-top:hover {
    color: var(--color-gold);
    transform: translateY(-2px);
}

.footer-to-top:hover i {
    background: var(--gold-gradient);
    border-color: transparent;
    color: #0b0a09;
}