/* ═══════════════════════════════════════════════════════════════════════════
   TRADEFLOW DESIGN SYSTEM
   "Gelenekten gelen güven, dijitalde zirve"
   ═══════════════════════════════════════════════════════════════════════════ */

/* Global Vars & Reset */
:root {
    /* ═══ PREMIUM COLOR PALETTE ═══ */

    /* Primary: Derin Zümrüt Yeşili - Güven, Zenginlik, Tarih, Asalet */
    --primary-color: #0F3D2E;
    --primary-dark: #0A2A1F;
    --primary-light: #1A5A44;

    /* Accent: Şampanya Altını - Başarı, Değer, Zirve (Max %10 kullanım) */
    --accent-color: #D4AF70;
    --accent-hover: #C49B5A;
    --accent-light: #E8D5B0;
    --accent-glow: rgba(212, 175, 112, 0.3);

    /* Secondary: Lacivert - Yapısal, Gölge, İkon (Asla ana zemin olarak değil) */
    --navy-color: #0A1F33;
    --navy-light: #1A3A5C;

    /* Steel Blue: Dijital Dokunuş - Teknoloji hissi, Fintech soğuğu yok */
    --steel-blue: #5F7D99;
    --steel-light: #8BA3B9;

    /* Surfaces: İnci/Krem Tonları - Premium, Göz yormaz */
    --ivory: #F4F3EF;
    --cream: #FAF9F6;
    --pearl: #F0EDE6;
    --secondary-bg: #F4F1EC;

    /* Text Colors */
    --text-color: #2C3E50;
    --text-light: #6B7C8A;
    --heading-color: #0F3D2E;
    --white: #ffffff;

    /* Shadows - Soft, Premium */
    --border-radius: 10px;
    --border-radius-lg: 16px;
    --shadow-sm: 0 2px 8px -2px rgba(15, 61, 46, 0.08), 0 2px 4px -2px rgba(10, 31, 51, 0.04);
    --shadow-md: 0 8px 24px -4px rgba(15, 61, 46, 0.12), 0 4px 8px -4px rgba(10, 31, 51, 0.06);
    --shadow-lg: 0 16px 40px -8px rgba(15, 61, 46, 0.16), 0 8px 16px -8px rgba(10, 31, 51, 0.08);
    --shadow-gold: 0 4px 20px -4px rgba(212, 175, 112, 0.25);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease-out;

    /* Dashboard Specific */
    --sidebar-width: 280px;
    --header-height: 72px;
    --success-color: #2E7D5A;
    --warning-color: #C49B5A;
    --danger-color: #B54A4A;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Typography: Manrope - Modern, Güçlü, Sert değil, Güven verir */
body {
    font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-color);
    line-height: 1.7;
    background-color: var(--cream);
    font-weight: 400;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section {
    padding: 5rem 0;
}

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

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Typography */
h1,
h2,
h3 {
    color: var(--heading-color);
    font-weight: 700;
    line-height: 1.2;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    position: relative;
}

.section-subtitle {
    text-align: center;
    margin-top: -2rem;
    margin-bottom: 3rem;
    color: #64748b;
}

/* Navbar */
.navbar {
    height: 80px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(250, 249, 246, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 1000;
    box-shadow: 0 1px 0 rgba(15, 61, 46, 0.06);
    border-bottom: 1px solid rgba(15, 61, 46, 0.04);
}

/* Mobile Menu Button - Default Hidden (Desktop) */
.mobile-menu-btn {
    display: none !important;
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--heading-color);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

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

.logo .highlight {
    color: var(--accent-color);
}

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-links a:not(.btn) {
    font-weight: 500;
    color: var(--text-color);
    transition: var(--transition);
}

.nav-links a:not(.btn):hover {
    color: var(--accent-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS - Premium CTA System
   "Bağlantı kur", "Teklif ver" - Agresif dil yok
   ═══════════════════════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    transition: var(--transition);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
}

/* Primary CTA: Şampanya Altını zemin, Petrol Mavisi yazı */
.btn-primary {
    background-color: var(--accent-color);
    color: var(--primary-dark);
    border-color: var(--accent-color);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

/* Golden Glow Button - Extra Premium */
.btn-gold-glow {
    background: linear-gradient(135deg, var(--accent-color) 0%, #E5C078 100%);
    color: var(--primary-dark);
    border: none;
    font-weight: 600;
    box-shadow: 0 4px 16px -4px rgba(212, 175, 112, 0.4);
}

.btn-gold-glow:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px -4px rgba(212, 175, 112, 0.5);
}

/* Green Elite Button */
.btn-green-elite {
    background: var(--primary-color);
    color: var(--ivory);
    border-color: var(--primary-color);
}

.btn-green-elite:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Secondary */
.btn-secondary {
    background-color: transparent;
    color: var(--heading-color);
    font-weight: 500;
}

.btn-secondary:hover {
    color: var(--accent-color);
}

/* Outline */
.btn-outline {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: transparent;
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: var(--ivory);
}

/* Gold Outline */
.btn-outline-gold {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: transparent;
}

.btn-outline-gold:hover {
    background-color: var(--accent-color);
    color: var(--primary-dark);
}

.btn-lg {
    padding: 1rem 2.25rem;
    font-size: 1rem;
    border-radius: 10px;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.full-width {
    width: 100%;
    text-align: center;
}

/* Hero Section */
.hero {
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: #f8fafc;
    /* Fallback */
}

.hero-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.mobile-video {
    display: none;
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Derin Zümrüt ile Premium Overlay */
    background: linear-gradient(135deg,
            rgba(15, 61, 46, 0.85) 0%,
            rgba(10, 42, 31, 0.9) 50%,
            rgba(10, 31, 51, 0.8) 100%);
    backdrop-filter: blur(2px);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.hero h1 {
    font-family: 'Manrope', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--ivory);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.hero h1 .gradient-text {
    background: linear-gradient(135deg, var(--accent-color) 0%, #E8D5B0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    font-size: 1.15rem;
    color: var(--pearl);
    margin-bottom: 2.5rem;
    max-width: 560px;
    line-height: 1.7;
    opacity: 0.9;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS - Glass & Premium
   ═══════════════════════════════════════════════════════════════════════════ */

.card {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(15, 61, 46, 0.06);
    transition: var(--transition);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(212, 175, 112, 0.3);
}

/* Glass Card - Premium Glassmorphism */
.glass-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px -8px rgba(15, 61, 46, 0.1);
}

.glass-card:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: var(--shadow-lg);
}

/* Premium Hover Effect */
.premium-hover {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -12px rgba(15, 61, 46, 0.15);
}

.category-card {
    text-align: center;
}

.icon-box {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: var(--accent-color);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1.5rem;
}

.category-card h3 {
    margin-bottom: 1rem;
}

.category-card ul li {
    color: #64748b;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

/* How It Works Steps */
.steps-grid {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.step-item {
    flex: 1;
    min-width: 250px;
    text-align: center;
    padding: 2rem;
    background: var(--white);
    border-radius: var(--border-radius);
    position: relative;
}

.step-number {
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 1.5rem;
}

/* Pricing */
.pricing-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.pricing-card.popular {
    border: 2px solid var(--accent-color);
    transform: scale(1.05);
}

.badge {
    position: absolute;
    top: -12px;
    background: var(--accent-color);
    color: var(--white);
    padding: 0.25rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.pricing-card .price {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 1rem 0;
    color: var(--primary-color);
}

.pricing-card .credits {
    font-size: 1.1rem;
    color: #64748b;
    margin-bottom: 2rem;
}

/* Footer */
footer {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 2rem 0;
    text-align: center;
    margin-top: 5rem;
}

/* ---------------- AUTH PAGES ---------------- */
.auth-body {
    background-color: var(--secondary-bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.auth-container {
    width: 100%;
    max-width: 450px;
}

.auth-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}

.register-card {
    max-width: 600px;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-header h2 {
    margin-top: 1rem;
    font-size: 1.5rem;
}

.auth-header p {
    color: #64748b;
    font-size: 0.9rem;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--heading-color);
}

.input-icon {
    position: relative;
}

.input-icon i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

.input-icon input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius);
    outline: none;
    transition: var(--transition);
    font-family: inherit;
}

.input-icon input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.forgot-password {
    color: var(--accent-color);
    font-weight: 500;
}

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: #64748b;
}

.auth-footer a {
    color: var(--accent-color);
    font-weight: 600;
}

.checkbox-label a {
    color: var(--accent-color);
}

/* ---------------- DASHBOARD ---------------- */
.dashboard-body {
    background-color: var(--secondary-bg);
    height: 100vh;
    overflow: hidden;
}

.dashboard-wrapper {
    display: flex;
    height: 100%;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--white);
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 10;
}

.sidebar-header {
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.sidebar-nav {
    flex: 1;
    padding: 1.5rem 0;
    overflow-y: auto;
}

.sidebar-nav ul li {
    margin-bottom: 0.25rem;
}

.sidebar-nav ul li a {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    color: #64748b;
    font-weight: 500;
    transition: var(--transition);
    gap: 0.75rem;
}

.sidebar-nav ul li a:hover,
.sidebar-nav ul li.active a {
    background-color: #f0fdf4;
    color: var(--primary-color);
    border-right: 3px solid var(--primary-color);
}

/* Fix for sidebar badge alignment */
.sidebar-nav .badge {
    position: static;
    top: auto;
    margin-left: auto;
    transform: none;
    /* Reset if any transform exists */
    display: inline-flex;
    /* Ensure it behaves nicely in flex parent */
    align-items: center;
    justify-content: center;
}

.sidebar-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.logout {
    color: var(--danger-color);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.dashboard-header {
    height: var(--header-height);
    background-color: var(--white);
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    flex-shrink: 0;
}

.header-title h1 {
    font-size: 1.25rem;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.credit-badge {
    background-color: #fff7ed;
    color: var(--warning-color);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    border: 1px solid #ffedd5;
}

.add-credit-btn {
    background: var(--warning-color);
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    text-decoration: none;
}

.user-profile img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    object-fit: cover;
}

.content-container {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
}

/* Dashboard Widgets */
.stat-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    border: none;
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

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

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

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

.stat-info h3 {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--heading-color);
}

.mt-2 {
    margin-top: 2rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h2 {
    font-size: 1.25rem;
    margin-bottom: 0;
}

/* Tables */
.table-card {
    padding: 0;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 1rem 1.5rem;
    text-align: left;
}

th {
    background-color: #f8fafc;
    font-weight: 600;
    color: #64748b;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #e2e8f0;
}

td {
    border-bottom: 1px solid #e2e8f0;
    color: var(--heading-color);
    font-size: 0.95rem;
}

tr:last-child td {
    border-bottom: none;
}

.expired-row {
    background: linear-gradient(to right, #fff5f5, #ffffff);
    border-left: 4px solid #ef4444 !important;
}

.expired-row td {
    color: #991b1b !important;
    /* Dark red text */
}

.expired-row .status-badge {
    background-color: #fca5a5 !important;
    color: #7f1d1d !important;
}

.status {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status.active {
    background-color: #dcfce7;
    color: var(--success-color);
}

.status.pending {
    background-color: #fff7ed;
    color: var(--warning-color);
}


.active-row {
    background: linear-gradient(to right, #f0fdf4, #ffffff);
    border-left: 4px solid #22c55e !important;
}



.warning-row {
    background: linear-gradient(to right, #fffbeb, #ffffff);
    border-left: 4px solid #f59e0b !important;
}

.warning-row td {
    color: #92400e !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    .pricing-card.popular {
        transform: scale(1);
    }

    /* Mobile Menu Changes */
    .mobile-menu-btn {
        display: block !important;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: var(--white);
        padding: 1rem;
        box-shadow: var(--shadow-md);
        text-align: center;
        gap: 1rem;
        z-index: 999;
    }

    .nav-links.active {
        display: flex;
    }

    /* End Mobile Menu Changes */

    .dashboard-wrapper {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }

    .sidebar-nav {
        display: none;
    }

    .main-content {
        height: calc(100vh - var(--header-height));
    }

    .dashboard-header {
        padding: 0 1rem;
    }

    .header-title h1 {
        font-size: 1rem;
    }
}

/* MARKETPLACE ADDITIONS (Inspired by Polymerio) */

/* Ticker Bar */
.ticker-bar {
    background-color: var(--secondary-bg);
    border-bottom: 1px solid #e2e8f0;
    padding: 0.5rem 2rem;
    display: flex;
    gap: 2rem;
    font-size: 0.85rem;
    color: #64748b;
    align-items: center;
}

.landing-ticker {
    margin-top: 80px;
}

/* Autocomplete/Google Places Mock Styles */
.autocomplete-wrapper {
    position: relative;
    width: 100%;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #e2e8f0;
    border-radius: 0 0 12px 12px;
    border-top: none;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
}

.autocomplete-item {
    padding: 10px 15px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-color);
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover {
    background-color: #f1f5f9;
}

.autocomplete-item-main {
    font-weight: 500;
    color: var(--heading-color);
}

.autocomplete-item-desc {
    font-size: 0.8rem;
    color: #64748b;
}

.autocomplete-icon {
    color: #94a3b8;
    font-size: 1.1rem;
}

/* LISTING WIZARD STYLES */
.wizard-container {
    max-width: 900px;
    margin: 0 auto;
}

.wizard-steps {
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
    position: relative;
    gap: 4rem;
}

/* Connecting line (optional visual flair) */
.wizard-steps::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20%;
    right: 20%;
    height: 2px;
    background-color: #e2e8f0;
    z-index: 0;
}

.step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    opacity: 0.6;
    transition: var(--transition);
}

.step-indicator.active {
    opacity: 1;
    font-weight: 600;
}

.step-indicator.active .step-circle {
    background-color: var(--accent-color);
    transform: scale(1.1);
    box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.2);
}

.step-indicator.completed {
    opacity: 1;
    color: var(--success-color);
}

.step-indicator.completed .step-circle {
    background-color: var(--success-color);
}

.step-circle {
    width: 40px;
    height: 40px;
    background-color: #cbd5e1;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 0.5rem;
    transition: var(--transition);
}

.step-content {
    display: none;
    animation: fadeIn 0.4s ease;
}

.step-content.active {
    display: block;
}

/* Category Selection Cards */
.category-selection input[type='radio'] {
    display: none;
}

.category-selection {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.category-selection label {
    cursor: pointer;
    display: block;
    height: 100%;
}

.category-box {
    background-color: var(--white);
    border: 2px solid #e2e8f0;
    border-radius: var(--border-radius);
    padding: 2rem;
    text-align: center;
    transition: var(--transition);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.category-selection input:checked+.category-box {
    border-color: var(--accent-color);
    background-color: #eff6ff;
}

.category-box:hover {
    border-color: var(--accent-color);
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.category-box i {
    color: #94a3b8;
    transition: var(--transition);
}

.category-selection input:checked+.category-box i {
    color: var(--accent-color);
}

.category-box h3 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Dynamic Form Grid */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .wizard-steps {
        gap: 1rem;
    }

    .wizard-steps::before {
        display: none;
    }

    .category-selection,
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* MARKETPLACE FILTERS & STYLES */
.filter-section {
    margin-bottom: 2rem;
}

.filter-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.search-box {
    position: relative;
    flex: 1;
    min-width: 300px;
}

.search-box i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

.search-box input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius);
    outline: none;
    transition: var(--transition);
    font-family: inherit;
}

.search-box input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.quick-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-pill {
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    background: var(--white);
    border-radius: 20px;
    font-size: 0.9rem;
    color: #64748b;
    cursor: pointer;
    transition: var(--transition);
}

.filter-pill:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.filter-pill.active {
    background: var(--accent-color);
    color: var(--white);
    border-color: var(--accent-color);
}

.status-toggle {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: var(--border-radius);
}

.status-btn {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: var(--transition);
}

.status-btn.active {
    background: var(--white);
    color: var(--heading-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.filter-advanced {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f1f5f9;
}

.form-select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius);
    outline: none;
    color: var(--text-color);
    background-color: var(--white);
    font-family: inherit;
}

.form-select:focus {
    border-color: var(--accent-color);
}

/* Badge colors if missing */
.badge-yellow {
    background-color: #fef9c3;
    color: #854d0e;
}

.badge-blue {
    background-color: #dbeafe;
    color: #1e40af;
}

.badge-orange-soft {
    background-color: #ffedd5;
    color: #9a3412;
}

.badge-green-soft {
    background-color: #dcfce7;
    color: #166534;
}

.product-sub {
    margin-left: 8px;
    color: #64748b;
    font-size: 0.9em;
}

.badge-purple-soft {
    background-color: #f3e8ff;
    color: #7e22ce;
}

.badge-gray {
    background-color: #f1f5f9;
    color: #475569;
}

/* Fix for overlapping badges in table */
table .badge,
.market-table .badge {
    position: static !important;
    display: inline-block;
    margin: 0;
    top: auto;
    transform: none;
}

/* Ensure these badge colors exist */
.badge-danger {
    background-color: #fee2e2;
    color: #991b1b;
}

.badge-success {
    background-color: #dcfce7;
    color: #166534;
}

.badge-warning {
    background-color: #fef9c3;
    color: #854d0e;
}

.badge-secondary {
    background-color: #f1f5f9;
    color: #475569;
}

/* --- COMPREHENSIVE MOBILE DASHBOARD FIX --- */

/* Sidebar Toggle Button (Hidden on Desktop) */
.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--heading-color);
    margin-right: 1rem;
}

@media (max-width: 768px) {

    /* Show Toggle */
    .sidebar-toggle {
        display: block !important;
    }

    /* Fix Wrapper Layout */
    .dashboard-wrapper {
        flex-direction: row !important;
        position: relative;
        overflow-x: hidden;
    }

    /* Off-Canvas Sidebar */
    .sidebar {
        position: fixed !important;
        top: 0;
        left: -280px;
        width: 280px !important;
        height: 100vh !important;
        z-index: 9999;
        border-right: 1px solid #e2e8f0;
        transition: left 0.3s ease-in-out;
        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
        display: flex !important;
        flex-direction: column;
        background-color: #fff;
    }

    .sidebar.active {
        left: 0;
    }

    .sidebar-nav {
        display: block !important;
        flex: 1;
        overflow-y: auto;
    }

    /* Hide Desktop-oriented header elements to save space */
    .user-profile,
    .credit-badge {
        display: none !important;
    }

    .header-title h1 {
        font-size: 1rem;
        max-width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Adjust Content Padding */
    .content-container {
        padding: 1rem;
    }

    /* Make stats grid partial scroll or stack */
    .grid-3,
    .grid-4,
    .grid-2 {
        grid-template-columns: 1fr !important;
    }

    .ticker-bar {
        display: none !important;
        /* Hide ticker on mobile to save vertical space */
    }
}


/* Mobile Sidebar Close Button */
.sidebar-close-btn {
    display: none;
    color: var(--heading-color);
}

@media (max-width: 768px) {
    .sidebar-close-btn {
        display: block;
    }
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}

.modal.show {
    display: flex;
}

.modal-content {
    background-color: var(--white);
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 90%;
    max-width: 600px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    position: relative;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }

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

.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 10;
}

.close-modal:hover,
.close-modal:focus {
    color: var(--text-color);
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.modal-title {
    margin: 0;
    font-size: 1.25rem;
    color: var(--heading-color);
}

/* --- Incoterms Modal Styles --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    background: var(--white);
    border-radius: 16px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2rem;
    position: relative;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    color: #94a3b8;
    transition: color 0.2s;
}

.modal-close:hover {
    color: var(--danger-color);
}

.incoterms-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

.incoterms-table th,
.incoterms-table td {
    border: 1px solid #e2e8f0;
    padding: 0.75rem;
    text-align: center;
    vertical-align: middle;
}

.incoterms-table th {
    background: #f8fafc;
    color: #64748b;
    font-weight: 600;
}

.incoterms-table td:first-child {
    text-align: left;
    color: var(--primary-color);
}

.incoterms-table .text-xs {
    font-size: 0.8em;
}

.buyer-bg {
    background-color: #fee2e2;
    color: #991b1b;
    font-weight: 500;
}

.seller-bg {
    background-color: #dcfce7;
    color: #166534;
    font-weight: 500;
}

.modal-body {
    padding: 1.5rem;
    max-height: 70vh;
    overflow-y: auto;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-weight: 500;
    color: #64748b;
}

.detail-value {
    font-weight: 600;
    color: var(--heading-color);
    text-align: right;
    max-width: 60%;
}

/* Address Truncation */
.text-truncate-address {
    max-width: 15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Sidebar Submenu Styles */
.ms-auto {
    margin-left: auto;
}

.sidebar-nav .submenu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav .submenu li a {
    padding-left: 3.5rem !important;
    /* Visual indentation */
    background-color: #f8fafc;
    font-size: 0.9em;
}

.sidebar-nav .submenu li a:hover,
.sidebar-nav .submenu li.active a {
    background-color: #f0fdf4;
    color: var(--primary-color);
    border-right: 3px solid var(--primary-color);
}

/* --- RESPONSIVE TABLE (CARD VIEW) --- */
@media (max-width: 768px) {
    .market-table-card .table-responsive {
        overflow-x: visible;
    }

    .market-table {
        display: block;
        width: 100%;
    }

    .market-table thead {
        display: none;
    }

    .market-table tbody {
        display: block;
        width: 100%;
    }

    .market-table tr {
        display: block;
        margin-bottom: 1.5rem;
        background: var(--white);
        border: 1px solid #e2e8f0;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-sm);
        padding: 1rem;
    }

    .market-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 0;
        border-bottom: 1px solid #f1f5f9;
        text-align: right;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .market-table td:last-child {
        border-bottom: none;
        padding-top: 1rem;
    }

    .market-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #64748b;
        font-size: 0.9rem;
        flex-shrink: 0;
    }

    /* Value alignment */
    .market-table td>*:not(:first-child) {
        text-align: right;
    }

    /* Adjust specific contents to align right */
    .market-table td div {
        text-align: right;
        /* Default flex alignment might handle, but ensure text is right */
        width: auto;
    }

    /* Allow address to wrap on mobile card */
    .text-truncate-address {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        max-width: 100%;
    }

    /* Badges might need to be flex-ended */
    .market-table td .badge {
        display: inline-block;
        margin: 0;
    }

    /* Actions buttons full width or better layout */
    .market-table td[data-label="İşlemler"] {
        justify-content: stretch;
        gap: 0.5rem;
    }

    .market-table td[data-label="İşlemler"] button {
        flex: 1;
    }
}

/* --- PREMIUM / CAFCAFLI STYLES --- */
.text-gold {
    color: var(--accent-color) !important;
}

.bg-gold {
    background-color: var(--accent-color) !important;
    color: white;
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border: 1px solid var(--primary-dark);
    box-shadow: 0 4px 6px rgba(0, 96, 57, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    box-shadow: 0 6px 15px rgba(0, 96, 57, 0.5);
    transform: translateY(-2px);
    border-color: var(--accent-color);
}

.btn-outline {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
}

.btn-outline:hover {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 10px rgba(0, 96, 57, 0.2);
    border-color: var(--primary-color);
}

/* Glassmorphism Card */
.glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px 0 rgba(0, 96, 57, 0.08);
}

/* Premium Card Hover */
.premium-hover {
    transition: all 0.4s ease;
}

.premium-hover:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 96, 57, 0.15);
    border: 1px solid var(--accent-color);
}

.premium-hover:hover .icon-box {
    background: var(--accent-color);
    color: white;
    transform: rotateY(180deg);
    transition: all 0.6s ease;
    box-shadow: 0 5px 15px rgba(197, 160, 89, 0.4);
}

/* Ticker Bar Premium */
.ticker-bar {
    background: var(--primary-dark);
    color: var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
    font-family: 'Courier New', monospace;
    /* Market feel */
}

.ticker-item span:first-child {
    color: white;
    font-weight: 600;
}

.ticker-item .buy {
    color: #4ade80;
}

.ticker-item .sell {
    color: #f87171;
}

/* Navbar Premium */
.navbar {
    border-bottom: 1px solid rgba(197, 160, 89, 0.2);
    background: rgba(255, 255, 255, 0.95);
}

.logo {
    color: var(--primary-color);
    letter-spacing: -1px;
}

.logo .highlight {
    color: var(--accent-color);
}

.logo-img {
    height: 60px;
    /* Adjust based on navbar height which is usually around 80px */
    width: auto;
    object-fit: contain;
    display: block;
}

/* Hero Revamp */
.hero {
    background: radial-gradient(circle at top right, rgba(197, 160, 89, 0.1), transparent 50%),
        radial-gradient(circle at bottom left, rgba(0, 96, 57, 0.08), transparent 50%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    overflow: hidden;
}

/* Animations */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

.float-anim {
    animation: float 6s ease-in-out infinite;
}

.hero-bg-shape {
    position: absolute;
    right: -5%;
    top: -10%;
    width: 700px;
    height: 700px;
    background: conic-gradient(from 180deg at 50% 50%, var(--primary-color), var(--accent-light), var(--primary-dark));
    opacity: 0.05;
    border-radius: 50%;
    filter: blur(60px);
    z-index: 1;
    animation: spin 20s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

/* Footer Premium */
footer {
    background: linear-gradient(135deg, #002e1b 0%, #004529 100%);
    border-top: 4px solid var(--accent-color);
    color: #e2e8f0;
}

/* Pricing Card Premium */
.pricing-card.popular {
    border: 2px solid var(--accent-color);
    position: relative;
    overflow: hidden;
}

.pricing-card.popular::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--accent-color);
}

.pricing-card .price {
    color: var(--primary-color);
}

.pricing-card .badge {
    background: var(--accent-color);
}

/* Help Pulse Button */
.btn-help-pulse {
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    /* Soft Indigo/Purple Gradient */
    color: white;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
    cursor: pointer;
    font-size: 0.8rem;
    box-shadow: 0 4px 6px rgba(99, 102, 241, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.btn-help-pulse:hover {
    transform: scale(1.15) rotate(10deg);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.6);
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.btn-help-pulse::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all 0.5s;
}

.btn-help-pulse:active::after {
    transform: translate(-50%, -50%) scale(2);
    opacity: 1;
    transition: 0s;
}

/* --- PREMIUM BUTTON DESIGN 2.0 --- */

/* 1. The Gold Standard (Hemen Başla) */
.btn-gold-glow {
    position: relative;
    background: linear-gradient(135deg, #C5A059 0%, #E6C885 50%, #C5A059 100%);
    color: #004529 !important;
    /* Dark Green Text */
    border: none;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    /* Pillow shape */
    box-shadow: 0 10px 20px rgba(197, 160, 89, 0.4);
    /* Gold Shadow */
    overflow: hidden;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-gold-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transition: 0.5s;
    z-index: -1;
}

.btn-gold-glow:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 30px rgba(197, 160, 89, 0.6);
    color: #002e1b !important;
}

.btn-gold-glow:hover::before {
    left: 100%;
}

.btn-gold-glow i {
    margin-right: 10px;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.btn-gold-glow:hover i {
    transform: rotate(-15deg) scale(1.2);
}

/* 2. The Green Elite (Sistemi Keşfet) */
.btn-green-elite {
    position: relative;
    background: transparent;
    color: #006039 !important;
    font-weight: 700;
    padding: 1rem 2.5rem;
    border: 2px solid #006039;
    border-radius: 50px;
    overflow: hidden;
    transition: all 0.4s ease;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-green-elite::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: #006039;
    transition: all 0.4s ease;
    z-index: -1;
}

.btn-green-elite:hover {
    color: #C5A059 !important;
    /* Gold Text */
    border-color: #006039;
    box-shadow: 0 10px 20px rgba(0, 96, 57, 0.2);
    transform: translateY(-3px);
}

.btn-green-elite:hover::after {
    height: 100%;
}

.btn-green-elite i {
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.btn-green-elite:hover i {
    transform: translateX(5px);
}

/* --- LANDING PAGE RESPONSIVE DESIGN --- */

/* Mobile Navigation Menu */
@media (max-width: 768px) {
    .navbar {
        height: auto;
        padding: 1rem 0;
    }

    .navbar .container {
        flex-wrap: wrap;
        /* Allow wrapping for menu */
    }

    .mobile-menu-btn {
        display: block !important;
        /* Show hamburger */
        margin-left: auto;
        font-size: 1.5rem;
        background: none;
        border: none;
        color: var(--heading-color);
        cursor: pointer;
    }

    .nav-links {
        display: none;
        /* Hide links by default */
        width: 100%;
        flex-direction: column;
        gap: 1rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        background: var(--white);
        border-top: 1px solid #f1f5f9;
        margin-top: 0.5rem;
        animation: slideDownMenu 0.3s ease-out;
    }

    .nav-links.active {
        display: flex;
        /* Show when active */
    }

    @keyframes slideDownMenu {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

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

    .nav-links a {
        width: 100%;
        text-align: center;
        padding: 0.5rem 0;
    }

    .nav-links .btn {
        display: block;
        width: 100%;
        margin: 0;
    }

    /* Hero Section Mobile */
    .hero {
        min-height: 100vh;
        /* Ensure full screen on mobile for video */
        padding: 8rem 0 4rem 0;
        text-align: center;
        /* Video background handles visual, ensure relative positioning for overlay */
        position: relative;
    }

    /* Video Toggle */
    .desktop-video {
        display: none;
    }

    .mobile-video {
        display: block;
    }

    .hero h1 {
        font-size: 2.5rem;
        /* Smaller Font */
        line-height: 1.2;
    }

    .hero p {
        font-size: 1rem;
        max-width: 100%;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }

    .btn-gold-glow,
    .btn-green-elite {
        width: 100%;
        /* Full width buttons */
        padding: 1rem;
        font-size: 1rem;
    }

    .hero-stats {
        flex-direction: column;
        /* Stack stats */
        margin-top: 3rem !important;
        gap: 1.5rem !important;
    }

    .hero-bg-shape {
        width: 300px;
        height: 300px;
        right: -100px;
        top: 0;
    }

    /* General Layouts */
    .section-title {
        font-size: 2rem;
    }

    .grid-4,
    .grid-3,
    .grid-2 {
        grid-template-columns: 1fr !important;
        /* Single column */
    }

    .pricing-card.popular {
        transform: none;
        /* Reset scale */
        margin: 2rem 0;
    }

    .d-flex,
    .d-flex-ticker {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .d-flex-ticker {
        gap: 0.5rem;
    }

    .ticker-scroll {
        margin-left: 0 !important;
        width: 100%;
    }

    .d-flex.align-items-center {
        /* Keep icon/text pairs aligned */
        flex-direction: row;
    }

    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 1rem;
    }

    /* Steps Grid (How it works) */
    .steps-grid {
        flex-direction: column;
        gap: 1rem;
    }

    .step-item {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1.5rem;
        /* Tighter padding on very small screens */
    }

    .hero h1 {
        font-size: 2rem;
    }

    .ticker-bar {
        display: none;
        /* Often too crowded on mobile */
    }

    .btn-gold-glow,
    .btn-green-elite {
        padding: 0.85rem;
    }
}

/* ---------------- TOAST NOTIFICATIONS ---------------- */

.toast-container {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.toast {
    display: flex;
    align-items: center;
    background: var(--white);
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    min-width: 300px;
    max-width: 450px;
    transform: translateX(120%);
    animation: slideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    border-left: 4px solid transparent;
    position: relative;
    overflow: hidden;
}

.toast.hide {
    animation: slideOut 0.4s ease forwards;
}

@keyframes slideIn {
    to {
        transform: translateX(0);
    }
}

@keyframes slideOut {
    to {
        transform: translateX(120%);
        opacity: 0;
    }
}

.toast-icon {
    font-size: 1.5rem;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: var(--heading-color);
}

.toast-message {
    font-size: 0.9rem;
    color: #64748b;
}

.toast-close {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.2rem;
    margin-left: 1rem;
    transition: var(--transition);
}

.toast-close:hover {
    color: var(--danger-color);
}

/* Success Toast */
.toast.success {
    border-left-color: var(--success-color);
}

.toast.success .toast-icon {
    color: var(--success-color);
}

/* Error Toast */
.toast.error {
    border-left-color: var(--danger-color);
}

.toast.error .toast-icon {
    color: var(--danger-color);
}

/* Info Toast */
.toast.info {
    border-left-color: var(--accent-color);
}

.toast.info .toast-icon {
    color: var(--accent-color);
}

/* Progress Bar */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
}

.toast-progress-bar {
    height: 100%;
    background: currentColor;
    /* Inherits from toast color */
    width: 100%;
    animation: progress linear forwards;
}

.toast.success .toast-progress-bar {
    background: var(--success-color);
}

.toast.error .toast-progress-bar {
    background: var(--danger-color);
}

.toast.info .toast-progress-bar {
    background: var(--accent-color);
}

@keyframes progress {
    to {
        width: 0%;
    }
}

/* Filter Collapsible Animation */
.filter-collapsible {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
    opacity: 0;
}

.filter-collapsible.open {
    max-height: 1000px;
    opacity: 1;
}

/* Rotate filter icon or button active state if needed */
.btn-active-filter {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* Mobile Adjustments for Filter and Header */
@media (max-width: 768px) {
    .filter-header-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    .filter-header-bar .search-box {
        width: 100% !important;
    }

    .filter-header-bar button {
        width: 100% !important;
    }

    /* Fix Header Layout on Mobile */
    .dashboard-header {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .header-controls {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
    }

    .header-controls .btn {
        flex: 1;
        /* Make 'İlan Ver' button take available space or be proportional */
        justify-content: center;
    }

    .credit-badge {
        display: none !important;
        /* Hide credit badge on mobile as per previous rules or to save space */
    }

    /* Ensure Create Listing Button looks good */
    .header-controls .btn-primary {
        padding: 0.6rem;
        font-size: 0.9rem;
        white-space: nowrap;
    }
}

/* Further Mobile Polish */
@media (max-width: 768px) {

    /* Make the 'İlan Ver' button larger and more clickable on mobile */
    .header-controls .btn-sm {
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
        width: 100%;
        /* Full width for easy access */
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0.5rem;
    }

    /* Ensure the icon has spacing */
    .header-controls .btn-sm i {
        margin-right: 8px;
    }

    /* Adjust filter styling for mobile */
    .filter-section .btn-outline,
    .filter-section .btn-primary {
        width: 100%;
        margin-top: 5px;
        padding: 0.75rem;
    }
}

/* Fix 'Create Listing' Button on Mobile - Compact Single Row Layout */
@media (max-width: 768px) {
    .dashboard-header {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        padding: 0.75rem 1rem !important;
        gap: 0.5rem !important;
        height: auto !important;
        align-items: center !important;
    }

    .header-controls {
        width: auto !important;
        margin-top: 0 !important;
        flex: 0 0 auto !important;
    }

    /* Revert full width button */
    .header-controls .btn-sm {
        width: auto !important;
        margin-top: 0 !important;
        padding: 0.6rem 1rem !important;
        font-size: 0.9rem !important;
        display: inline-flex;
        border-radius: 8px !important;
    }

    .header-title {
        flex: 1;
        min-width: 0;
        /* Allow shrinking */
        margin-right: 0.5rem;
    }

    .header-title h1 {
        font-size: 1.1rem !important;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }

    /* Adjust Sidebar Toggle */
    .sidebar-toggle {
        font-size: 1.25rem !important;
        margin-right: 0.75rem !important;
    }
}

/* --- Market Table Action Buttons (Premium Look) --- */

.action-cell {
    white-space: nowrap;
    text-align: right;
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;
}

.btn-action {
    border: none;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-view {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.btn-view:hover {
    background-color: #e2e8f0;
    color: var(--heading-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-contact {
    background: linear-gradient(135deg, var(--accent-color) 0%, #d4af37 100%);
    /* Gold/Premium */
    color: #fff;
    border: none;
}

.btn-contact:hover {
    background: linear-gradient(135deg, #d4af37 0%, var(--accent-color) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(197, 160, 89, 0.4);
}

/* Mobile Adjustments for Actions */
@media (max-width: 768px) {
    .action-buttons {
        width: 100%;
        justify-content: space-between;
        gap: 0.75rem;
        margin-top: 0.5rem;
    }

    .btn-action {
        flex: 1;
        justify-content: center;
        padding: 0.7rem;
        font-size: 0.9rem;
    }

    .d-none.d-md-inline {
        display: inline !important;
        /* Force text show on mobile for better UX if desired, or keep simplified */
    }
}

/* Optimize Desktop Table Fit */
@media (min-width: 992px) {
    .content-container {
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: 100%;
        /* Ensure container uses full width if constrained */
    }

    .market-table th,
    .market-table td {
        padding: 1rem 0.5rem;
        /* Reduced horizontal padding */
        font-size: 0.9rem;
        /* Slightly smaller text for better fit */
    }

    /* Wrap text for addresses instead of truncate to save width issues or force width */
    .text-truncate-address {
        white-space: normal;
        overflow: visible;
        max-width: 140px;
        /* Allow wrapping */
        line-height: 1.2;
    }

    /* Adjust specific columns */
    .action-cell {
        min-width: 180px;
        /* Ensure buttons have space without scroll if possible */
    }
}

/* Sortable Table Headers */
.sortable {
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: color 0.2s;
}

.sortable:hover {
    color: var(--accent-color);
    background-color: #f8fafc;
}

.sortable::after {
    content: '\f0dc';
    /* fa-sort default */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: 8px;
    opacity: 0.3;
    font-size: 0.8em;
}

.sortable.asc::after {
    content: '\f0de';
    /* fa-sort-up */
    opacity: 1;
    color: var(--accent-color);
}

.sortable.desc::after {
    content: '\f0dd';
    /* fa-sort-down */
    opacity: 1;
    color: var(--accent-color);
}

/* Accordion Style Mobile Table Rows */
@media (max-width: 768px) {
    .market-table tr {
        cursor: pointer;
        position: relative;
        padding-bottom: 2.5rem;
        /* Space for the expand icon/indicator */
    }

    /* Primary Infos - Always Visible */
    .market-table td.mobile-visible {
        display: flex !important;
        border-bottom: 1px solid #f8fafc;
    }

    /* Secondary Infos - Hidden by Default */
    .market-table td {
        display: none;
    }

    /* Helper: Show all when expanded */
    .market-table tr.expanded td {
        display: flex;
        animation: fadeIn 0.3s ease;
    }

    /* Action Buttons always visible or just when expanded? Let's make visible only when expanded for cleaner look, 
       OR keep them visible but at bottom. User said "click to see others". 
       Let's hide actions initially too to save space. */

    .market-table tr.expanded td[data-label="İşlemler"] {
        display: flex;
        justify-content: space-between;
        margin-top: 1rem;
        border-top: 1px dashed #e2e8f0;
        padding-top: 1rem;
    }

    /* Expand Indicator */
    .market-table tr::after {
        content: '\f078';
        /* fa-chevron-down */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        bottom: 0.5rem;
        left: 50%;
        transform: translateX(-50%);
        color: #94a3b8;
        font-size: 1rem;
        transition: transform 0.3s;
    }

    .market-table tr.expanded::after {
        transform: translateX(-50%) rotate(180deg);
        color: var(--accent-color);
    }

    /* Highlight main info styling */
    .market-table td[data-label="Ürün"] .badge {
        font-size: 1rem;
        /* Larger product name */
    }
}

/* Mobile Sort Bar Premium Redesign */
.mobile-sort-bar {
    margin-bottom: 1rem;
    position: relative;
    z-index: 50;
    /* Ensure it stays above the table */
}

.sort-container {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(197, 160, 89, 0.3);
    /* Gold tint border */
    border-radius: 12px;
    padding: 0.6rem 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
}

.sort-container:active {
    transform: scale(0.99);
}

.sort-label-icon {
    color: var(--accent-color);
    margin-right: 0.8rem;
    font-size: 1.1rem;
}

.sort-select-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.sort-select {
    width: 100%;
    border: none;
    background: transparent;
    font-weight: 600;
    color: var(--heading-color);
    outline: none;
    font-family: inherit;
    font-size: 0.95rem;
    appearance: none;
    /* Hide default arrow */
    -webkit-appearance: none;
    padding-right: 1.5rem;
    cursor: pointer;
}

/* Custom dropdown arrow for select */
.sort-caret {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    font-size: 0.8rem;
}

.sort-divider {
    width: 1px;
    height: 24px;
    background: #e2e8f0;
    margin: 0 1rem;
}

.sort-dir-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #f8fafc;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.sort-dir-btn:hover,
.sort-dir-btn:active {
    background: var(--accent-color);
    color: white;
    transform: rotate(180deg);
    /* Text/Icon rotation handled by logic, but button spin is cool */
    box-shadow: 0 4px 8px rgba(197, 160, 89, 0.3);
}

/* Fix icon inside button not rotating with button if button rotates */
.sort-dir-btn i {
    transition: transform 0.3s;
}

/* Custom Dropdown Styling (Replaces Native Select) */
.custom-dropdown {
    position: relative;
    cursor: pointer;
    flex: 1;
}

.custom-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.5rem;
    font-weight: 600;
    color: var(--heading-color);
    font-size: 0.95rem;
}

.custom-dropdown-options {
    position: absolute;
    top: 120%;
    /* Space below trigger */
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
}

.custom-dropdown.active .custom-dropdown-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-option {
    padding: 0.75rem 1rem;
    transition: background 0.2s;
    border-bottom: 1px solid #f1f5f9;
}

.custom-option:last-child {
    border-bottom: none;
}

.custom-option:hover {
    background-color: #f8fafc;
    color: var(--accent-color);
}

.custom-option.selected {
    background-color: #eff6ff;
    color: var(--accent-color);
    font-weight: 700;
}

/* Prevent shaking by ensuring stable layout */
.sort-select-wrapper {
    overflow: visible !important;
    /* Allow dropdown to overflow */
}

/* Custom Dropdown Styling (Replaces Native Select) */
.custom-dropdown {
    position: relative;
    cursor: pointer;
    flex: 1;
}

.custom-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.5rem;
    font-weight: 600;
    color: var(--heading-color);
    font-size: 0.95rem;
}

.custom-dropdown-options {
    position: absolute;
    top: 120%;
    /* Space below trigger */
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
}

.custom-dropdown.active .custom-dropdown-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-option {
    padding: 0.75rem 1rem;
    transition: background 0.2s;
    border-bottom: 1px solid #f1f5f9;
}

.custom-option:last-child {
    border-bottom: none;
}

.custom-option:hover {
    background-color: #f8fafc;
    color: var(--accent-color);
}

.custom-option.selected {
    background-color: #eff6ff;
    color: var(--accent-color);
    font-weight: 700;
}

/* Prevent shaking by ensuring stable layout */
.sort-select-wrapper {
    overflow: visible !important;
    /* Allow dropdown to overflow */
}

/* Empty State Row Mobile Fixes */
.market-table tr.empty-row {
    cursor: default !important;
    padding-bottom: 0 !important;
    background: transparent !important;
}

.market-table tr.empty-row::after {
    display: none !important;
}

.market-table tr.empty-row:hover {
    background: transparent !important;
}

@media (max-width: 768px) {
    .market-table tr.empty-row td {
        display: block !important;
        width: 100%;
        text-align: center;
        border: none !important;
        padding: 2rem 1rem !important;
    }

    .market-table tr.empty-row {
        border-bottom: none !important;
    }
}

.badge-pink-soft {
    background-color: #fce7f3;
    color: #be185d;
}


.badge-teal-soft {
    background-color: #ccfbf1;
    color: #0f766e;
}


.badge-cyan-soft {
    background-color: #cffafe;
    color: #0e7490;
}

/* Added for Seller Verification Badge */
.badge-blue-soft {
    background-color: #dbeafe;
    color: #1e40af;
}

.badge-red-soft {
    background-color: #fee2e2;
    color: #991b1b;
}

.badge-indigo-soft {
    background-color: #e0e7ff;
    color: #3730a3;
}

.badge-orange-soft {
    background-color: #ffedd5;
    color: #9a3412;
}

/* Ensure detail-seller-info alignment */
.detail-seller-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Allow wrapping on very small screens */
}

/* Multi-Select Styles */
.multiselect-container {
    position: relative;
    width: 100%;
}

.multiselect-select {
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
}

.multiselect-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 0.375rem;
    margin-top: 2px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.multiselect-options.show {
    display: block;
}

.multiselect-option {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.multiselect-option:hover {
    background-color: #f8f9fa;
}

.multiselect-option input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
}

.display-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.display-tag {
    background: #e9ecef;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}

/* Tooltip Styles */
.info-tooltip {
    position: relative;
    cursor: help;
    color: var(--accent-color);
    margin-left: 0.5rem;
}

.info-tooltip:hover {
    color: var(--accent-hover);
}

.info-tooltip:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #334155;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: normal;
    min-width: 200px;
    max-width: 300px;
    z-index: 1000;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
}

.info-tooltip:hover::before {
    content: '';
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #334155 transparent transparent transparent;
    z-index: 1000;
}

/* Checkbox Groups Fix */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-left: 0.25rem;
}

.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0;
    cursor: pointer;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    position: relative;
    transition: all 0.2s;
}

.form-check-input:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    background-image: url('data:image/svg+xml,%3csvg viewBox=%220 0 16 16%22 fill=%22white%22 xmlns=%22http://www.w3.org/2000/svg%22%3e%3cpath d=%22M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%22/%3e%3c/svg%3e');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}

.form-check-label {
    cursor: pointer;
    user-select: none;
    font-size: 0.95rem;
    color: var(--text-color);
}


/* --- BOTTOM NAVIGATION BAR (Shared) --- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 8px 16px 24px 16px;
    z-index: 1000;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.03);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    flex: 1;
    padding: 8px 0;
    transition: color 0.2s;
    cursor: pointer;
}

.nav-item span {
    white-space: nowrap;
    font-size: 0.65rem;
}

.nav-item i {
    font-size: 1.4rem;
    margin-bottom: 2px;
    transition: transform 0.2s;
}

.nav-item.active {
    color: #0f172a;
}

.nav-item.active i {
    transform: translateY(-2px);
    color: #2563eb;
}

.nav-fab-wrapper {
    position: relative;
    top: -24px;
    margin: 0 12px;
}

.nav-fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #0f172a;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 8px 16px -4px rgba(15, 23, 42, 0.3);
    border: 4px solid #f8fafc;
    transition: transform 0.2s;
    text-decoration: none;
}

.nav-fab:active {
    transform: scale(0.95);
}


/* --- BOTTOM SHEET DRAWER --- */
.sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.sheet-overlay.show {
    opacity: 1;
    visibility: visible;
}

.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: 100%;
    max-width: 500px;
    background: #f8fafc;
    border-radius: 24px 24px 0 0;
    padding: 0;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    z-index: 10000;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bottom-sheet.show {
    transform: translateX(-50%) translateY(0);
}

.drawer-header {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border-bottom: 1px solid #f1f5f9;
    border-radius: 24px 24px 0 0;
}

.grid-menu-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 8px;
    gap: 8px;
    text-decoration: none;
    color: #1e293b;
    transition: transform 0.2s;
}

.grid-menu-item:active {
    transform: scale(0.96);
    background: #f1f5f9;
}

.grid-menu-item i {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.grid-menu-item span {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM UTILITY CLASSES
   "Güç bağırmaz, duruşla belli olur"
   ═══════════════════════════════════════════════════════════════════════════ */

/* Text Colors */
.text-gold {
    color: var(--accent-color) !important;
}

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

.text-ivory {
    color: var(--ivory) !important;
}

.text-muted {
    color: var(--text-light) !important;
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, var(--accent-color) 0%, #E8D5B0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Font Weights */
.fw-bold {
    font-weight: 700 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.fw-medium {
    font-weight: 500 !important;
}

/* Background Colors */
.bg-emerald {
    background-color: var(--primary-color) !important;
}

.bg-ivory {
    background-color: var(--ivory) !important;
}

.bg-cream {
    background-color: var(--cream) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER - Premium Dark
   ═══════════════════════════════════════════════════════════════════════════ */

footer {
    background: linear-gradient(180deg, var(--primary-dark) 0%, #061A14 100%);
    color: var(--ivory);
    padding: 4rem 0 2rem;
    margin-top: 5rem;
}

footer a {
    color: var(--pearl);
    transition: var(--transition-fast);
}

footer a:hover {
    color: var(--accent-color);
}

footer h4 {
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: 1.25rem;
}

footer ul li {
    margin-bottom: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TICKER BAR - Live Market
   ═══════════════════════════════════════════════════════════════════════════ */

.ticker-bar {
    background: var(--primary-dark);
    color: var(--ivory);
    padding: 0.75rem 0;
    font-size: 0.85rem;
    font-weight: 500;
}

.ticker-bar.landing-ticker {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    z-index: 999;
}

.ticker-label {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ticker-item .buy {
    color: #4ADE80;
}

.ticker-item .sell {
    color: #FB923C;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.float-anim {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* Badge Styles */
.badge-green-soft {
    background: rgba(46, 125, 90, 0.15);
    color: var(--success-color);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-orange-soft {
    background: rgba(196, 155, 90, 0.15);
    color: var(--warning-color);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.25rem;
    }

    .section-title {
        font-size: 1.75rem;
    }

    body {
        font-size: 15px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM MOBILE TOOLTIP (Glassmorphism + Animation)
   ═══════════════════════════════════════════════════════════════════════════ */
.info-tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
    margin-left: 8px;
    color: #10b981;
    transition: all 0.3s ease;
}

.info-tooltip:hover {
    color: #059669;
    transform: scale(1.15);
}

.info-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 160%;
    left: 50%;
    transform: translateX(-50%) translateY(10px) scale(0.85);
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: #ffffff !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    width: max-content;
    max-width: 220px;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    text-align: center;
    line-height: 1.5;
    word-wrap: break-word;
    white-space: normal;
}

.info-tooltip::before {
    content: '';
    position: absolute;
    bottom: 135%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px 8px 0 8px;
    border-style: solid;
    border-color: rgba(16, 185, 129, 0.5) transparent transparent transparent;
    opacity: 0;
    z-index: 10000;
    pointer-events: none;
}

.info-tooltip:hover::after {
    opacity: 1;
    animation: tooltipBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.info-tooltip:hover::before {
    opacity: 1;
    transition: opacity 0.3s ease 0.2s;
}

@keyframes tooltipBounce {
    0% { transform: translateX(-50%) translateY(10px) scale(0.85); opacity: 0; }
    100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}

@media (max-width: 768px) {
    .info-tooltip::after {
        width: 180px;
        left: 50%;
        transform: translateX(-50%);
    }
}