/* =========================================
   FOCUS STATE
   ========================================= */

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem var(--color-primary);
}

/* =========================================
   ROOT & TYPOGRAFI
   ========================================= */

:root {
    /* Light tema paleti */
    --color-bg: #f8f9fa;
    --color-surface: #ffffff;
    --color-surface-soft: #f1f3f5;
    --color-header: #ffffff;
    --color-border: #dee2e6;
    --color-text: #212529;
    --color-muted: #6c757d;
    --color-primary: #0d6efd;
    --color-danger: #dc3545;
}

html {
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth;
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Admin sayfalar için min yükseklik */
.admin-page {
    min-height: 90vh !important;
}

/* Form placeholder davranışı */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* =========================================
   HERO / ÜRÜN KARTLARI / DİĞER GLOBALLER
   ========================================= */

.hero-section {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://placehold.co/1920x850/EAE6E1/333333?text=Havloo');
    background-size: cover;
    background-position: center;
    height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

    .hero-section h1 {
        font-weight: 700;
        font-size: 3.5rem;
    }

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

.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .product-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
    }

    .product-card .card-img-top {
        aspect-ratio: 1 / 1.1;
        object-fit: cover;
    }

.feature-icon {
    font-size: 2.5rem;
    color: var(--color-primary);
}

.sale-section {
    background-color: var(--color-surface-soft);
}

.text-justified {
    text-align: justify;
}

/* =========================================
   SOFT DARK MODE – GLOBAL TEMA
   ========================================= */

body.dark-mode {
    /* Soft slate taban */
    --color-bg: #0f172a; /* body background */
    --color-surface: #111827; /* kartlar / paneller */
    --color-surface-soft: #1f2937; /* hover / ikincil yüzey */
    --color-header: #020617; /* navbar / footer barlar */
    --color-border: #1e293b; /* çizgiler */
    --color-text: #e5e7eb; /* ana metin */
    --color-muted: #9ca3af; /* açıklama metinleri */
    --color-primary: #60a5fa; /* accent */
    --color-danger: #fb7185; /* hata / silme aksiyonları */

    background-color: var(--color-bg);
    color: var(--color-text);
}

    /* NAVBAR */
    body.dark-mode .navbar {
        background-color: var(--color-header) !important;
        border-bottom: 1px solid var(--color-border);
    }

        body.dark-mode .navbar .navbar-brand,
        body.dark-mode .navbar .nav-link {
            color: var(--color-text) !important;
        }

            body.dark-mode .navbar .nav-link:hover,
            body.dark-mode .navbar .nav-link:focus {
                color: var(--color-primary) !important;
            }

    /* GENEL YÜZEYLER */
    body.dark-mode .bg-white {
        background-color: var(--color-surface) !important;
    }

    body.dark-mode .text-muted {
        color: var(--color-muted) !important;
    }

    body.dark-mode .card {
        background-color: var(--color-surface);
        color: var(--color-text);
        border-color: var(--color-border);
    }

        body.dark-mode .card .text-muted {
            color: var(--color-muted) !important;
        }

    /* Hero */
    body.dark-mode .hero-section {
        color: var(--color-text);
    }

    /* Sale section */
    body.dark-mode .sale-section {
        background-color: var(--color-surface-soft);
    }

        body.dark-mode .sale-section .opportunityBtn {
            border-color: var(--color-text);
            color: var(--color-text);
        }

    /* Pagination */
    body.dark-mode .page-link {
        background-color: var(--color-surface-soft) !important;
        color: var(--color-text);
        border-color: var(--color-border);
    }

    /* Footer */
    body.dark-mode footer.bg-dark {
        background-color: var(--color-header) !important;
    }

        body.dark-mode footer.bg-dark .text-white-50 {
            color: var(--color-muted) !important;
        }

    /* Tema toggle butonu */
    body.dark-mode #themeToggle.btn-outline-secondary {
        border-color: var(--color-text);
        color: var(--color-text);
    }

        body.dark-mode #themeToggle.btn-outline-secondary:hover {
            background-color: var(--color-text);
            color: #111827;
        }

    /* =========================================
       PROFIL / HESAP – ORTAK DARK MODE
       (Light tema tarafı profile.css içinde)
       ========================================= */

    /* Sidebar linkleri */
    body.dark-mode .profile-sidebar .nav-link {
        color: var(--color-text);
        background-color: transparent;
    }

        body.dark-mode .profile-sidebar .nav-link.active {
            background-color: var(--color-primary);
            color: #ffffff;
        }

        body.dark-mode .profile-sidebar .nav-link:hover:not(.active) {
            background-color: var(--color-surface-soft);
        }

    /* Sipariş kartları */
    body.dark-mode .order-item {
        background-color: var(--color-surface);
        border-color: var(--color-border);
    }

        body.dark-mode .order-item:hover {
            transform: translateY(-3px);
        }

    /* Tab içerikleri */
    body.dark-mode .profile-tab-content {
        background-color: var(--color-surface);
    }

    /* Profil foto alanı */
    body.dark-mode .profile-picture-wrapper {
        border-color: #374151;
        background-color: var(--color-surface-soft);
    }

        body.dark-mode .profile-picture-wrapper .fallback-icon {
            background-color: #111827;
            color: var(--color-primary);
        }

    body.dark-mode .profile-picture-overlay {
        background: rgba(0, 0, 0, 0.65);
        color: var(--color-text);
    }

    /* =========================================
       ACCORDION – DARK MODE
       ========================================= */

    body.dark-mode .accordion-button {
        background-color: var(--color-surface);
        color: var(--color-text);
        border-color: var(--color-border);
    }

        body.dark-mode .accordion-button:not(.collapsed) {
            background-color: rgba(96, 165, 250, 0.18);
            color: var(--color-primary);
            font-weight: 600;
        }

        body.dark-mode .accordion-button:focus {
            box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.4);
        }

    body.dark-mode .accordion-body {
        background-color: var(--color-surface);
        color: var(--color-muted);
        border-top: 1px solid var(--color-border);
    }