/* ═══════════════════════════════════════════════════════════════════════════
   📌 LEPISTESEVI - BASE.CSS
   ═══════════════════════════════════════════════════════════════════════════
   
   Bu dosya tüm sayfalarda kullanılan temel stilleri içerir:
   - CSS Değişkenleri (Renkler, Boyutlar)
   - Temel Sıfırlama (Reset)
   - Body, HTML stilleri
   - Scrollbar stilleri
   - Hidden utility class
   
   🔄 Modüler yapıya geçiş: Ocak 2026
   ═══════════════════════════════════════════════════════════════════════════ */

@charset "UTF-8";

/* ═══════════════════════════════════════════════════════════════════════════
   🎨 CSS DEĞİŞKENLERİ (CUSTOM PROPERTIES)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ─── Ana Renkler ───────────────────────────────────────────────────── */
    --bg: #121212;
    /* Tam Gri/Siyah (Nötr) */
    --card: #1e1e1e;
    /* Nötr Gri Kart */
    --text: #f3f3f7;
    --muted: #b8b8c9;
    --accent: #4db8ff;

    /* ─── Ürün Kartları İçin Renkler ────────────────────────────────────── */
    --pr-bg: #1e1e1e;
    /* Tam Gri (Renksiz) */
    --pr-box: rgba(255, 255, 255, .03);
    --pr-border: rgba(255, 255, 255, .08);
    --pr-border-strong: rgba(255, 255, 255, .12);
    --pr-text: #ffffff;
    --pr-muted: rgba(255, 255, 255, .72);
    --pr-muted2: rgba(255, 255, 255, .58);
    --pr-accent: #4db8ff;
    --pr-star: #ffa04d;

    /* ─── Modern Efektler İçin Ek Değişkenler ───────────────────────────── */
    --gradient-primary: linear-gradient(135deg, #4db8ff 0%, #6c5ce7 100%);
    --gradient-dark: linear-gradient(135deg, #121212 0%, #1e1e1e 100%);
    --gradient-card: linear-gradient(145deg, #242424 0%, #1e1e1e 100%);
    /* Nötr Gri Gradyan */
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 20px rgba(77, 184, 255, 0.3);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
    --glass-bg: rgba(30, 30, 40, 0.85);
    /* Gri Glassmorphism (Hakkımızda ile aynı) */
    --glass-border: rgba(255, 255, 255, 0.1);
    --transition-fast: 0.2s ease;
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;

    /* ─── 🌗 Tema Değişkenleri (Dark - Varsayılan) ──────────────────────── */
    --surface: rgba(40, 40, 50, 0.95);
    --surface-light: rgba(30, 30, 40, 0.8);
    --surface-hover: rgba(0, 0, 0, 0.5);
    --surface-card: rgba(0, 0, 0, 0.4);
    --border: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.12);
    --border-stronger: rgba(255, 255, 255, 0.15);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.85);
    --text-muted: rgba(255, 255, 255, 0.7);
    --text-faint: rgba(255, 255, 255, 0.6);
    --text-fainter: rgba(255, 255, 255, 0.5);
    --text-faintest: rgba(255, 255, 255, 0.4);
    --input-bg: rgba(0, 0, 0, 0.4);
    --input-bg-focus: rgba(0, 0, 0, 0.5);
    --hover-bg: rgba(255, 255, 255, 0.1);
    --hover-bg-light: rgba(255, 255, 255, 0.08);
    --hover-bg-subtle: rgba(255, 255, 255, 0.04);
    --scrollbar-track: #121217;
    --scrollbar-thumb: #6d6a7b;
    --scrollbar-thumb-hover: #9e9bad;
    --modal-bg: #221b33;
    --modal-overlay: rgba(0, 0, 0, 0.55);
    --slider-bg: #181820;
    --featured-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    --old-price-color: #999;
    --code-color: #9aa4ff;
    --code-hover-color: #bdc3ff;
    --gray-btn: #6c757d;
    --danger-btn: #dc3545;
    --review-bg: #221b33;
    --review-input-bg: #2a2340;
    --forum-input-bg: rgba(20, 20, 25, 0.6);
    --forum-option-bg: #1e1e24;
    --disabled-bg: #444;
    --disabled-text: #888;
    --search-bg: rgba(30, 30, 45, 0.85);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ☀️ AYDINLIK TEMA (LIGHT THEME)
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
    /* ─── Ana Renkler ───────────────────────────────────────────────────── */
    --bg: #f0f2f5;
    --card: #ffffff;
    --text: #1a1a2e;
    --muted: #6b7280;
    --accent: #2196F3;

    /* ─── Ürün Kartları İçin Renkler ────────────────────────────────────── */
    --pr-bg: #ffffff;
    --pr-box: rgba(0, 0, 0, .02);
    --pr-border: rgba(0, 0, 0, .08);
    --pr-border-strong: rgba(0, 0, 0, .12);
    --pr-text: #1a1a2e;
    --pr-muted: rgba(0, 0, 0, .60);
    --pr-muted2: rgba(0, 0, 0, .50);
    --pr-accent: #2196F3;
    --pr-star: #ffa04d;

    /* ─── Modern Efektler ───────────────────────────────────────────────── */
    --gradient-dark: linear-gradient(135deg, #f0f2f5 0%, #ffffff 100%);
    --gradient-card: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-glow: 0 0 20px rgba(33, 150, 243, 0.2);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.1);
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(0, 0, 0, 0.08);

    /* ─── Tema Değişkenleri (Light) ─────────────────────────────────────── */
    --surface: rgba(255, 255, 255, 0.95);
    --surface-light: rgba(248, 249, 250, 0.9);
    --surface-hover: rgba(0, 0, 0, 0.03);
    --surface-card: rgba(0, 0, 0, 0.03);
    --border: rgba(0, 0, 0, 0.08);
    --border-medium: rgba(0, 0, 0, 0.1);
    --border-strong: rgba(0, 0, 0, 0.12);
    --border-stronger: rgba(0, 0, 0, 0.15);
    --text-primary: #1a1a2e;
    --text-secondary: rgba(0, 0, 0, 0.78);
    --text-muted: rgba(0, 0, 0, 0.55);
    --text-faint: rgba(0, 0, 0, 0.45);
    --text-fainter: rgba(0, 0, 0, 0.38);
    --text-faintest: rgba(0, 0, 0, 0.3);
    --input-bg: rgba(0, 0, 0, 0.04);
    --input-bg-focus: rgba(0, 0, 0, 0.06);
    --hover-bg: rgba(0, 0, 0, 0.06);
    --hover-bg-light: rgba(0, 0, 0, 0.04);
    --hover-bg-subtle: rgba(0, 0, 0, 0.02);
    --scrollbar-track: #f0f2f5;
    --scrollbar-thumb: #c1c1cd;
    --scrollbar-thumb-hover: #a0a0b0;
    --modal-bg: #ffffff;
    --modal-overlay: rgba(0, 0, 0, 0.35);
    --slider-bg: #e8eaed;
    --featured-gradient: linear-gradient(135deg, #e3e8f0 0%, #dfe4ec 100%);
    --old-price-color: #999;
    --code-color: #5c6bc0;
    --code-hover-color: #3949ab;
    --gray-btn: #78909c;
    --danger-btn: #e53935;
    --review-bg: #f3f0ff;
    --review-input-bg: #ede9f6;
    --forum-input-bg: rgba(0, 0, 0, 0.03);
    --forum-option-bg: #f5f5f5;
    --disabled-bg: #e0e0e0;
    --disabled-text: #9e9e9e;
    --search-bg: rgba(255, 255, 255, 0.95);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🔧 TEMEL SIFIRLAMA (CSS RESET)
   ═══════════════════════════════════════════════════════════════════════════ */

* {
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════════
   📄 HTML & BODY
   ═══════════════════════════════════════════════════════════════════════════ */

html {
    height: 100%;
    overflow-y: scroll;
    background-color: var(--bg);
    scrollbar-width: auto;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

body {
    margin: 0;
    font-family: system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100%;
    overflow: visible;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   📜 SCROLLBAR STİLLERİ
   ═══════════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
    width: 16px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 8px;
    border: 3px solid var(--scrollbar-track);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🔧 UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

.hidden {
    display: none !important;
}