/* --- 1. ASOSIY RANGLAR (Variable) --- */
:root {
    --primary: #2563eb;
    --dark: #1e293b;
    --light: #f8fafc;
    --gray: #64748b;
    --white: #ffffff;
    --footer-bg: #172554; /* Yangi chiroyli to'q ko'k rang */
    --bg-body: #ffffff;          /* Kunduzgi fon */
    --text-main: #333333;        /* Kunduzgi yozuv */
    --bg-card: #ffffff;          /* Karta foni */
    --bg-header: #f8f9fa;        /* Jadval boshidagi fon */
    --shadow: 0 5px 15px rgba(0,0,0,0.05);
    --primary: #0066cc;          /* Asosiy ko'k rang o'zgarmaydi */
}

/* --- 2. TUNGI REJIM (DARK MODE) SOZLAMALARI --- */
[data-theme="dark"] {
    --bg-body: #0f172a;          /* Tungi to'q ko'k fon */
    --text-main: #e2e8f0;        /* Tungi oqish yozuv */
    --bg-card: #1e293b;          /* Tungi karta foni */
    --bg-header: #334155;        /* Tungi jadval boshi */
    --shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Tugma dizayni */
.theme-btn {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    transition: 0.3s;
    margin-left: 10px;
}
.theme-btn:hover {
    background: var(--primary);
    color: white;
    transform: rotate(30deg); /* Qiziqarli effekt */
}

/* --- 4. ELEMENTLARNI DARK MODEGA MOSLASH --- */

/* Kartalar va Jadvallar */
.price-card, .service-card, .faq-item {
    background: var(--bg-card) !important;
    box-shadow: var(--shadow);
}

/* Jadval yozuvlari */
.price-table td {
    color: var(--text-main) !important;
    border-bottom-color: rgba(255,255,255,0.1); /* Chiziqlarni xira qilish */
}

/* Jadval sarlavhasi */
.price-table thead th {
    background-color: var(--bg-header) !important;
    color: var(--text-main) !important;
    border-bottom-color: rgba(255,255,255,0.1);
}

/* Footer (agar oq bo'lsa) */
footer {
    background: #0b1120; /* Footer doim qora tursa ham bo'ladi */
}

/* Price Card ichidagi narxlar */
.price-val {
    color: #38bdf8 !important; /* Tunda ko'k rangni ochroq qilish */
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
body { 
    
    background-color: var(--bg-body);
    color: var(--text-main);
    transition: background 0.3s, color 0.3s; /* Silliq o'tish */

}
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* NAVBAR */
.navbar { background: var(--white); padding: 15px 0; box-shadow: 0 2px 15px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 100; }
.nav-content { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 20px; font-weight: 800; color: var(--dark); display: flex; align-items: center; gap: 10px; text-decoration: none; transition: 0.3s; }
.logo:hover { color: var(--primary); }
.logo i { color: var(--primary); font-size: 24px; }
.nav-actions { display: flex; align-items: center; gap: 20px; }
.phone-btn { text-decoration: none; color: var(--dark); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.phone-btn:hover { color: var(--primary); }

/* SETTINGS & THEME */
.theme-switch-wrapper { position: relative; }
.settings-btn { background: var(--light); border: 1px solid #e2e8f0; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; color: var(--dark); transition: 0.3s; font-size: 18px; }
.settings-btn:hover { background: var(--primary); color: white; transform: rotate(90deg); }
.theme-dropdown { display: none; position: absolute; right: 0; top: 50px; background: var(--white); border: 1px solid #e2e8f0; border-radius: 12px; width: 220px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 10px; overflow: hidden; z-index: 200; }
.theme-dropdown.active { display: block; animation: slideUp 0.3s ease; }
.dropdown-header { font-size: 10px; color: var(--gray); font-weight: bold; margin-bottom: 8px; padding-left: 10px; }
.theme-item { display: flex; align-items: center; gap: 10px; padding: 10px; text-decoration: none; color: var(--dark); font-size: 14px; font-weight: 500; border-radius: 8px; transition: 0.2s; }
.theme-item:hover { background: var(--light); }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.blue { background: var(--primary); }
.red { background: #ff0000; box-shadow: 0 0 5px #ff0000; }
.green { background: #00ff00; box-shadow: 0 0 5px #00ff00; }

/* HERO */
.hero { padding: 80px 0; background: linear-gradient(to right, #eff6ff, #ffffff); overflow: hidden; }
.hero-content { display: flex; align-items: center; justify-content: space-between; }
.badge { background: #dbeafe; color: var(--primary); padding: 5px 15px; border-radius: 20px; font-size: 12px; font-weight: bold; display: inline-block; margin-bottom: 20px; }
.hero-text h1 { font-size: 48px; line-height: 1.1; margin-bottom: 20px; color: var(--dark); }
.text-blue { color: var(--primary); }
.hero-text p { color: var(--gray); font-size: 18px; margin-bottom: 30px; line-height: 1.6; }
.hero-buttons { display: flex; gap: 15px; }
.btn { padding: 12px 30px; border-radius: 8px; font-weight: 600; cursor: pointer; border: none; font-size: 16px; transition: 0.3s; }
.btn-primary { background: var(--primary); color: white; display: flex; align-items: center; gap: 10px; }
.btn-primary:hover { background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(37,99,235,0.3); }
.btn-outline { background: transparent; border: 2px solid #e2e8f0; color: var(--dark); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.hero-image i { font-size: 200px; color: #dbeafe; }
.floating-icon { animation: float 3s ease-in-out infinite; }

/* SERVICES */
.section-title { text-align: center; font-size: 30px; margin: 60px 0 40px; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 80px; }
.card { background: var(--white); padding: 30px; border-radius: 16px; border: 1px solid #f1f5f9; transition: 0.3s; text-align: center; }
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(37, 99, 235, 0.1); border-color: var(--primary); }
.icon-box { width: 60px; height: 60px; background: #eff6ff; color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 20px; }

/* STATISTIKA */
.stats-section { background: var(--primary); color: white; padding: 50px 0; margin-top: 50px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; text-align: center; }
.stat-box i { font-size: 40px; margin-bottom: 10px; opacity: 0.8; }
.stat-box h3 { font-size: 36px; font-weight: 800; margin-bottom: 5px; }

/* MIJOZLAR FIKRI */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin-top: 30px; }
.review-card { background: white; padding: 25px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); transition: 0.3s; }
.review-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.stars { color: #f59e0b; margin-bottom: 15px; letter-spacing: 2px; font-size: 14px; }
.user-info { display: flex; align-items: center; gap: 15px; }
.avatar { width: 40px; height: 40px; background: var(--primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; }

/* FAQ */
.faq-container { max-width: 800px; margin: 30px auto 0; }
.faq-item { background: white; border-radius: 10px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); overflow: hidden; }
.faq-question { padding: 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 600; font-size: 18px; transition: 0.3s; }
.faq-question:hover { color: var(--primary); background: #f8fafc; }
.faq-answer { max-height: 0; overflow: hidden; transition: 0.3s ease; padding: 0 20px; color: #4b5563; line-height: 1.6; }
.faq-item.active .faq-answer { max-height: 200px; padding-bottom: 20px; }
.faq-item.active .faq-question i { transform: rotate(180deg); }

/* FOOTER (YANGILANGAN DIZAYN) */
footer { background: var(--footer-bg); color: white; padding: 60px 0 20px; margin-top: 50px; }
.footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 40px; }
.footer-logo { text-decoration: none; display: inline-block; margin-bottom: 15px; }
.footer-logo h3 { color: white; font-weight: 800; font-size: 22px; }
.footer-block h4 { font-size: 18px; margin-bottom: 20px; color: #93c5fd; }
.contact-line { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.contact-line i { color: #93c5fd; width: 20px; }
.contact-line a { color: #e2e8f0; text-decoration: none; transition: 0.3s; }
.contact-line a:hover { color: white; text-decoration: underline; }
.footer-socials a { width: 40px; height: 40px; background: rgba(255,255,255,0.1); color: white; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; margin-right: 10px; transition: 0.3s; margin-top: 10px; text-decoration: none; }
.footer-socials a:hover { background: var(--primary); transform: scale(1.1); }
.dev-badge a { background: rgba(255,255,255,0.05); padding: 8px 15px; border-radius: 8px; color: #94a3b8; text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; transition: 0.3s; border: 1px solid rgba(255,255,255,0.1); }
.dev-badge a:hover { background: rgba(255,255,255,0.1); color: white; border-color: var(--primary); }
.footer-bottom { text-align: center; padding-top: 20px; color: #64748b; font-size: 14px; }

/* MODALS */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: 0.3s; z-index: 1000; }
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-content { background: white; padding: 30px; border-radius: 16px; width: 90%; max-width: 500px; position: relative; transform: translateY(20px); transition: 0.3s; }
.modal-overlay.open .modal-content { transform: translateY(0); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #f1f5f9; padding-bottom: 15px; }
.close-btn { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--gray); }
.price-list .price-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f8fafc; font-size: 15px; }
.full-width { width: 100%; justify-content: center; margin-top: 10px; }

/* FORM */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 500; font-size: 14px; color: var(--dark); }
.form-group input, .form-group select { width: 100%; padding: 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 16px; outline: none; transition: 0.3s; }
.form-group input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 768px) {
    .hero-content { flex-direction: column; text-align: center; }
    .hero-text h1 { font-size: 32px; }
    .hero-buttons { justify-content: center; }
    .hero-image { display: none; }
    .footer-content { flex-direction: column; text-align: left; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* --- PRELOADER (YUKLASH EKRANI) --- */
#preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #ffffff; z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    transition: 0.5s ease-out;
}
.loader-content { text-align: center; }
.loader-content h3 { margin-top: 15px; color: var(--dark); font-weight: 800; letter-spacing: 2px; }
/* Sayt yuklanib bo'lganda yo'qolishi uchun klass */
#preloader.hide { opacity: 0; visibility: hidden; }


/* --- LOGO BANNER SOZLAMALARI (IXCHAM VERSIYA) --- */

/* 1. Tepadagi (Navbar) logo */
.nav-logo-img {
    height: 35px;       /* 45px dan 35px ga kichraytirdik */
    width: auto;        
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease; /* Sichqoncha borganda chiroyli effekt */
}

/* Hover effekti (ixtiyoriy): Sichqoncha borganda ozgina kattalashadi */
.logo:hover .nav-logo-img {
    transform: scale(1.05);
}

/* 2. Pastdagi (Footer) logo */
.footer-logo-img {
    height: 50px;       /* 60px dan 50px ga kichraytirdik */
    width: auto;
    margin-bottom: 15px;
    display: block;
}

/* 3. Telefonda (Mobil) */
@media (max-width: 768px) {
    .nav-logo-img {
        height: 30px;   /* Telefonda yanada ixchamroq (35 dan 30 ga) */
    }
    .footer-logo-img {
        height: 45px;   /* Footerda ham kichraytirdik (50 dan 45 ga) */
    }
}

/* --- FOOTER BRANDING (LOGO + TEXT) --- */

.footer-brand {
    display: flex;              /* Yonma-yon qo'yish rejimi */
    align-items: center;        /* Vertikal o'rtaga tekislash */
    gap: 12px;                  /* Logo va Yozuv orasi */
    text-decoration: none;      /* Tagiga chiziq chizmaslik */
    margin-bottom: 20px;        /* Pastdagi matndan uzoqlashtirish */
}

/* Kichkina Logo (Favicon) */
.footer-icon {
    height: 40px;               /* O'lchami */
    width: auto;
    display: block;
}

/* PCXIZMAT.UZ Yozuvi */
.footer-text {
    color: #ffffff;             /* Oppog' rang */
    font-size: 17px;            /* Katta shrift */
    font-weight: 900;           /* Qalin (Bold) */
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;  /* Hammasi katta harfda */
    letter-spacing: 1px;        /* Harflar orasini sal ochish */
}

/* Hover effekti (Sichqoncha borganda) */
.footer-brand:hover .footer-text {
    color: var(--primary);      /* Ko'k rangga o'tish (agar xohlasangiz) */
    transition: 0.3s;
}

/* Mobil telefon uchun moslashuv */
@media (max-width: 768px) {
    .footer-brand {
        justify-content: center; /* Telefonda o'rtada turishi uchun */
    }
    .footer-text {
        font-size: 22px;        /* Telefonda sal kichikroq */
    }
}


/* --- PRICE LIST STYLES (OFIS) --- */
.prices-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.price-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    padding: 25px;
    border-top: 4px solid var(--primary);
    transition: 0.3s;
}

.price-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }

.price-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
.price-icon { font-size: 30px; color: var(--primary); }
.price-header h3 { font-size: 20px; margin: 0; color: #333; }

.price-table { width: 100%; border-collapse: collapse; }
.price-table th { text-align: left; color: #888; font-size: 14px; padding-bottom: 10px; }
.price-table td { padding: 8px 0; border-bottom: 3px dashed #eee; color: #333; font-weight: 500; }
.free-badge { color: green; font-weight: bold; text-align: center; background: #e6fffa; border-radius: 5px; }

.price-list-item { background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 10px; }
.price-list-item p { margin: 0; font-size: 14px; color: #555; }
.price-tag { display: block; font-weight: bold; color: var(--primary); font-size: 18px; margin-top: 5px; }

.simple-price-list { list-style: none; }
.simple-price-list li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee; }
.simple-price-list li strong { color: var(--primary); }

/* --- YANGILANGAN PRICE LIST STYLES (6 GRID) --- */

.prices-wrapper {
    display: grid;
    /* Ekranga sig'ishiga qarab 3 ta ustun hosil qiladi */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
    gap: 25px;
    margin-top: 40px;
}

.price-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    padding: 25px;
    border-top: 4px solid var(--primary);
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    /* Hamma kartalar bir xil balandlikda bo'lishi uchun: */
    height: 100%; 
}

.price-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.12); 
}

/* Header qismi */
.price-header { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    margin-bottom: 20px; 
    border-bottom: 1px solid #f0f0f0; 
    padding-bottom: 15px; 
}
.price-icon { font-size: 24px; color: var(--primary); }
.price-header h3 { font-size: 18px; font-weight: 700; margin: 0; color: #222; }

/* --- JADVAL DIZAYNI (FINAL: CHROYLI VA AVTO-RANG) --- */

.price-table { 
    width: 100%; 
    border-collapse: separate; /* Chiroyli ramka uchun */
    border-spacing: 0; 
    font-size: 13px; 
    table-layout: fixed; /* Yozuvlar jadvalni buzib yubormasligi uchun */
    margin-top: 10px;
}

/* 1. SARLAVHALAR (Xizmat, Ofisda, Joyida) - "KULTURNIY" STIL */
.price-table thead th {
    background-color: #f8f9fa;  /* Och kulrang fon */
    color: #444;                /* To'q kulrang yozuv (qora emas) */
    font-weight: 800;           /* Qalin shrift */
    text-transform: uppercase;  /* HAMMASI KATTA HARFDA */
    font-size: 11px;            /* Ixchamroq */
    letter-spacing: 1px;        /* Harflar orasi ochiq */
    padding: 12px 8px;
    border-radius: 6px;         /* Chetлари yumaloq */
    border-bottom: 2px solid #e9ecef;
}

/* 2. NARXLARNI AVTOMATIK KO'K QILISH (2 va 3-ustunlar) */
/* HTMLda span qo'ymansangiz ham o'zi ko'k qiladi */
.price-table tbody td:nth-child(2), 
.price-table tbody td:nth-child(3) {
    color: #0056b3;     /* Asosiy KO'K rang (Primary) */
    font-weight: 700;   /* Qalin */
    font-family: 'Inter', sans-serif; /* Chiroyli raqam fonti */
    font-size: 14px;
    text-align: center;
    vertical-align: middle;
}

/* 1-USTUN: Xizmat nomi */
.price-table tbody td:first-child {
    width: 45%;         /* Eng katta joy xizmat nomiga */
    text-align: left;
    padding: 12px 5px;
    color: #333;        /* Oddiy qora matn */
    font-weight: 500;
    line-height: 1.4;   /* Qatorlar orasi ochiqroq */
    border-bottom: 1px dashed #eee; /* Ostiga chiziq */
}

/* Umumiy katakchalar stili */
.price-table td {
    padding: 10px 5px;
    border-bottom: 1px solid #f1f1f1;
}

/* Agar "Kelishiladi" yoki "Bepul" so'zlari bo'lsa */
.price-table td span.text-muted {
    color: #888 !important; /* Kulrang */
    font-weight: normal;
    font-size: 12px;
}

.free-badge {
    background: #d4edda;
    color: #155724 !important; /* To'q yashil */
    font-weight: bold;
    border-radius: 4px;
    padding: 5px;
}

/* Narxlarni chiroyli ko'rsatish */
.price-val {
    color: var(--primary);
    font-weight: 700;
    display: block; /* Alohida qatorda tursin */
}

/* Ro'yxatli kartalar uchun */
.simple-price-list { list-style: none; padding: 0; margin: 0; }
.simple-price-list li { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 12px 0; 
    border-bottom: 1px solid #f5f5f5; 
    font-size: 14px;
}
.simple-price-list li b { color: var(--primary); font-weight: 700; }
.simple-price-list li span { color: #555; }

/* Upgrade qutisi */
.upgrade-box { display: flex; flex-direction: column; gap: 15px; }
.upgrade-item { 
    background: #f8f9fa; 
    padding: 15px; 
    border-radius: 8px; 
    border-left: 3px solid var(--primary);
}
.upgrade-item span { display: block; font-size: 15px; color: #333; margin-bottom: 2px; }
.upgrade-item small { display: block; font-size: 12px; color: #777; margin-bottom: 8px; }
.upgrade-item .price-tag { 
    font-size: 16px; 
    color: var(--primary); 
    font-weight: 800; 
}

/* --- BEPUL (FREE) BADGE SOZLAMALARI --- */
.free-badge {
    /* KUNDUZGI (LIGHT) HOLAT */
    background-color: #dcfce7;   /* Juda och yashil */
    color: #14532d !important;   /* To'q o'rmon yashil */
    
    font-weight: 800;
    text-align: center;
    padding: 6px 15px;
    border-radius: 6px;
    font-size: 13px;
    letter-spacing: 1px;
    display: block;              /* To'liq qatorni egallaydi */
    width: 100%;
    border: 1px solid #bbf7d0;
}

/* TUNGI (DARK) HOLAT UCHUN MAXSUS QOIDA */
[data-theme="dark"] .free-badge {
    background-color: #064e3b;   /* To'q yashil fon */
    color: #4ade80 !important;   /* Neon yashil yozuv (Yaxshi ko'rinadi) */
    border-color: #065f46;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.15); /* Ozgina nur taratish effekti */
}

.text-right { text-align: right; font-size: 13px; color: #666; }

/* MOBILGA MOSLASHUV */
@media (max-width: 768px) {
    .prices-wrapper {
        grid-template-columns: 1fr; /* Telefonda bitta ustun */
    }
}

/* =========================================
   1. GLOBAL RANGLAR VA O'ZGARUVCHILAR
   ========================================= */
:root {
    /* --- KUNDUZGI (LIGHT) REJIM --- */
    --primary: #2563eb;           /* Asosiy ko'k */
    --primary-dark: #1d4ed8;      /* To'qroq ko'k (hover uchun) */
    
    --bg-body: #ffffff;           /* Sahifa foni */
    --bg-card: #ffffff;           /* Kartalar foni */
    --bg-light: #f8fafc;          /* Och kulrang fon (Hero, Upgrade box) */
    --bg-header: #f1f5f9;         /* Jadval sarlavhasi */
    
    --text-main: #1e293b;         /* Asosiy qora matn */
    --text-muted: #64748b;        /* Kulrang matn */
    --text-inverse: #ffffff;      /* Oq matn (tugmalar ichida) */
    
    --border: #e2e8f0;            /* Ramkalar rangi */
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    
    --footer-bg: #172554;         /* Footer foni (Doimiy to'q ko'k) */
    --footer-text: #93c5fd;       /* Footer yozuvi */
}

/* --- TUNGI (DARK) REJIM --- */
[data-theme="dark"] {
    --primary: #3b82f6;           /* Tunda sal yorqinroq ko'k */
    --primary-dark: #60a5fa;
    
    --bg-body: #0f172a;           /* To'q ko'k (Slate 900) */
    --bg-card: #1e293b;           /* Kartalar foni (Slate 800) */
    --bg-light: #334155;          /* Yordamchi fonlar (Slate 700) */
    --bg-header: #1e293b;         /* Jadval sarlavhasi */
    
    --text-main: #f1f5f9;         /* Oqish matn */
    --text-muted: #94a3b8;        /* Kulrang matn */
    --text-inverse: #0f172a;      /* Qora matn */
    
    --border: #334155;            /* Ramkalar rangi */
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    
    /* Footer o'zgarishsiz qoladi yoki sal to'qroq bo'ladi */
    --footer-bg: #020617; 
}

/* =========================================
   2. ASOSIY SOZLAMALAR (RESET)
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }

body { 
    background-color: var(--bg-body);
    color: var(--text-main);
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* =========================================
   3. NAVBAR & BUTTONS
   ========================================= */
.navbar {
    background: var(--bg-card); /* White -> Dark */
    padding: 15px 0;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border);
    transition: 0.3s;
}

.nav-content { display: flex; justify-content: space-between; align-items: center; }

/* Logo */
.nav-logo-img { height: 35px; width: auto; object-fit: contain; display: block; transition: 0.3s; }
.logo:hover .nav-logo-img { transform: scale(1.05); }

/* Buttons */
.phone-btn { text-decoration: none; color: var(--text-main); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.phone-btn:hover { color: var(--primary); }

.theme-btn {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
    width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; font-size: 18px; transition: 0.3s; margin-left: 10px;
    display: flex; align-items: center; justify-content: center;
}
.theme-btn:hover { background: var(--primary); color: white; transform: rotate(30deg); }

.settings-btn { 
    background: var(--bg-light); border: 1px solid var(--border); color: var(--text-main);
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer; transition: 0.3s; font-size: 18px; 
}

/* =========================================
   4. HERO SECTION
   ========================================= */
.hero { 
    padding: 80px 0; 
    /* Gradientni o'zgaruvchiga moslash qiyin, shuning uchun background-color ishlatamiz */
    background: var(--bg-light); 
    position: relative;
    overflow: hidden;
}

/* Dark mode uchun Hero fonini to'g'irlash */
[data-theme="dark"] .hero {
    background: linear-gradient(to right, #0f172a, #1e293b);
}

.badge { background: rgba(37, 99, 235, 0.1); color: var(--primary); padding: 5px 15px; border-radius: 20px; font-size: 12px; font-weight: bold; display: inline-block; margin-bottom: 20px; border: 1px solid var(--primary); }

.hero-text h1 { font-size: 48px; line-height: 1.1; margin-bottom: 20px; color: var(--text-main); }
.hero-text p { color: var(--text-muted); font-size: 18px; margin-bottom: 30px; line-height: 1.6; }

.btn { padding: 12px 30px; border-radius: 8px; font-weight: 600; cursor: pointer; border: none; font-size: 16px; transition: 0.3s; }
.btn-primary { background: var(--primary); color: white; display: flex; align-items: center; gap: 10px; }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); }

.btn-outline { background: transparent; border: 2px solid var(--border); color: var(--text-main); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }

.hero-image i { font-size: 200px; color: var(--primary); opacity: 0.2; }
.floating-icon { animation: float 3s ease-in-out infinite; }

/* =========================================
   5. NARXLAR VA KARTALAR (PRICE LIST)
   ========================================= */
.section-title { text-align: center; font-size: 30px; margin: 60px 0 20px; color: var(--text-main); }
.section-subtitle { text-align: center; margin-bottom: 40px; color: var(--text-muted); }

.prices-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.price-card {
    background: var(--bg-card); /* MUHIM: Dark mode uchun o'zgaradi */
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 25px;
    border-top: 4px solid var(--primary);
    transition: 0.3s;
    height: 100%;
    border: 1px solid var(--border); /* Cheti ko'rinishi uchun */
}
.price-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.2); }

/* Header */
.price-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 15px; }
.price-icon { font-size: 24px; color: var(--primary); }
.price-header h3 { font-size: 18px; font-weight: 700; margin: 0; color: var(--text-main); }

/* JADVAL (TABLE) MUAMMOLARINI YECHISH */
.price-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; table-layout: fixed; margin-top: 10px; }

/* Sarlavha (Thead) */
.price-table thead th {
    background-color: var(--bg-header);
    color: var(--text-muted);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 12px 8px;
    border-radius: 6px;
    border-bottom: 2px solid var(--border);
}

/* Katakchalar (Td) */
.price-table tbody td {
    padding: 12px 5px;
    border-bottom: 1px solid var(--border);
    color: var(--text-main); /* MUHIM: Dark modeda oq bo'ladi */
    font-weight: 500;
    vertical-align: middle;
}

/* Narxlar (Ko'k rang) */
.price-table tbody td:nth-child(2), 
.price-table tbody td:nth-child(3) {
    color: var(--primary);
    font-weight: 700;
    text-align: center;
}
.price-val { color: var(--primary); font-weight: 700; display: block; }

/* Upgrade Box (Tezlashtirish) */
.upgrade-item { 
    background: var(--bg-light); /* MUHIM: Dark modeda to'q bo'ladi */
    padding: 15px; 
    border-radius: 8px; 
    border-left: 3px solid var(--primary);
    margin-bottom: 10px;
}
.upgrade-item span { display: block; font-size: 15px; color: var(--text-main); margin-bottom: 2px; }
.upgrade-item small { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.upgrade-item .price-tag { color: var(--primary); font-weight: 800; font-size: 16px; }

/* Simple List */
.simple-price-list { list-style: none; }
.simple-price-list li { 
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-main);
}
.simple-price-list li b { color: var(--primary); }

/* =========================================
   6. TESTIMONIALS (MIJOZLAR)
   ========================================= */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin-top: 30px; }

.review-card { 
    background: var(--bg-card); /* Oq -> Qora */
    padding: 25px; 
    border-radius: 15px; 
    box-shadow: var(--shadow); 
    border: 1px solid var(--border);
}
.review-card p { color: var(--text-main); font-style: italic; font-size: 14px; margin-bottom: 15px; }

.stars { color: #f59e0b; margin-bottom: 15px; }
.user-info span { color: var(--text-main); font-weight: bold; font-size: 14px; }
.avatar { width: 40px; height: 40px; background: var(--primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; }

/* =========================================
   7. FAQ (SAVOLLAR)
   ========================================= */
.faq-container { max-width: 800px; margin: 30px auto 0; }
.faq-item { 
    background: var(--bg-card); 
    border-radius: 10px; margin-bottom: 15px; 
    box-shadow: var(--shadow); 
    border: 1px solid var(--border);
    overflow: hidden; 
}
.faq-question { 
    padding: 20px; display: flex; justify-content: space-between; align-items: center; 
    cursor: pointer; font-weight: 600; font-size: 18px; color: var(--text-main);
    transition: 0.3s; 
}
.faq-question:hover { background: var(--bg-light); color: var(--primary); }
.faq-answer { 
    max-height: 0; overflow: hidden; transition: 0.3s ease; 
    padding: 0 20px; color: var(--text-muted); line-height: 1.6; 
}
.faq-item.active .faq-answer { max-height: 200px; padding-bottom: 20px; }

/* =========================================
   8. FOOTER
   ========================================= */
footer { 
    background: var(--footer-bg); 
    color: white; 
    padding: 60px 0 20px; 
    margin-top: 80px; 
}
.footer-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-bottom: 20px; }
.footer-icon { height: 40px; width: auto; }
.footer-text { color: white; font-size: 17px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }

.footer-content { border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 40px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
.footer-block h4 { font-size: 18px; margin-bottom: 20px; color: var(--footer-text); }
.contact-line a { color: #cbd5e1; text-decoration: none; }
.contact-line i { color: var(--footer-text); margin-right: 10px; }
.footer-bottom { text-align: center; padding-top: 20px; color: #64748b; font-size: 14px; }

/* =========================================
   9. MODAL & PRELOADER
   ========================================= */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: 0.3s; z-index: 1000; backdrop-filter: blur(5px); }
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-content { 
    background: var(--bg-card); /* Dark mode uchun */
    color: var(--text-main);
    padding: 30px; border-radius: 16px; width: 90%; max-width: 500px; 
    position: relative; transform: translateY(20px); transition: 0.3s; border: 1px solid var(--border);
}
.modal-overlay.open .modal-content { transform: translateY(0); }
.modal-header { border-bottom: 1px solid var(--border); }
.close-btn { color: var(--text-muted); background: none; border: none; font-size: 24px; cursor: pointer; }

/* Form Elements */
.form-group label { color: var(--text-main); font-weight: 500; margin-bottom: 5px; display: block; }
.form-group input, .form-group select { 
    width: 100%; padding: 12px; 
    background: var(--bg-light); /* Input foni */
    border: 1px solid var(--border); 
    color: var(--text-main);
    border-radius: 8px; outline: none; transition: 0.3s; 
}
.form-group input:focus { border-color: var(--primary); }

#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-body); z-index: 9999; display: flex; justify-content: center; align-items: center; transition: 0.5s ease-out; }
#preloader.hide { opacity: 0; visibility: hidden; }

/* MOBILGA MOSLASHUV */
@media (max-width: 768px) {
    .hero-content { flex-direction: column; text-align: center; }
    .hero-image { display: none; }
    .nav-logo-img { height: 30px; }
    .footer-logo-img { height: 45px; }
    .footer-content { flex-direction: column; }
    .hero-text h1 { font-size: 32px; }
}

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }


/*02.02.2026*/

/* --- YUGURUVCHI SATR (BOXY STYLE) --- */

.alert-container {
    /* 1. O'LCHAM VA JOYLASHUV (Eng muhim joyi) */
    width: 95%;              /* Mobil telefonda chetiga yopishib qolmasligi uchun */
    max-width: 1200px;       /* Saytingni asosiy kengligi bilan bir xil bo'lishi kerak (masalan 1200px) */
    margin: 10px auto;       /* Tepadan 10px joy va O'RTAGA joylashtirish (auto) */
    
    /* 2. DIZAYN (Sariq quti) */
    background-color: #FEF3C7; 
    border: 1px solid #F59E0B;
    border-radius: 8px;      /* Burchaklarini biroz qayiramiz (Boxy style) */
    
    /* 3. ICHKI TUZILMA */
    overflow: hidden;        /* Yozuv qutidan chiqib ketmasin */
    height: 44px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Ozgina soya beramiz, chiroyli turadi */
}

.alert-track {
    display: flex;
    width: max-content;
    animation: infinite-scroll 10s linear infinite; /* Sekinroq va ravon */
}

.alert-item {
    font-size: 14px;
    font-weight: 700;
    color: #ff0000;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif; /* Sayt shrifti */
    white-space: nowrap;
    
    /* Yozuvlar orasi */
    padding-right: 80px; 
    padding-left: 20px;
}

/* Animatsiya */
@keyframes infinite-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Sichqoncha borganda to'xtash */
.alert-container:hover .alert-track {
    animation-play-state: paused;
}

/* MOBILGA MOSLASHUV */
@media (max-width: 768px) {
    .alert-container {
        width: 92%;       /* Telefonda sal kengroq */
        font-size: 12px;
        height: 40px;
        margin-top: 5px;
    }
    .alert-item { font-size: 11px; padding-right: 40px; }
}