/* ==========================================================
   NODUS HOSTING — Dizayn token sistemi
   Konsept: "Data-merkezi gecesi" — tund lacivert fon,
   elektrik firuzeyi vurgu, kehreba qiymet nishanlari.
   ========================================================== */

:root {
    /* Reng */
    --bg:         #0A0F1C;
    --bg-panel:   #101A2E;
    --bg-panel-2: #16223A;
    --border:     #223049;
    --accent:     #00E5C7;
    --accent-dim: #0A8A79;
    --amber:      #FFB020;
    --text:       #E7ECF5;
    --text-dim:   #8B97AD;
    --danger:     #FF5D6C;

    /* Tipografiya */
    --f-display: 'Space Grotesk', sans-serif;
    --f-body:    'Inter', sans-serif;
    --f-mono:    'JetBrains Mono', monospace;
}

/* ================== ISIQLI (GUNDUZ) TEMA ================== */
[data-theme="light"] {
    --bg:         #F5F7FA;
    --bg-panel:   #FFFFFF;
    --bg-panel-2: #EEF1F5;
    --border:     #E1E6ED;
    --accent:     #00A691;
    --accent-dim: #007A6B;
    --amber:      #C97A00;
    --text:       #10151F;
    --text-dim:   #5B6472;
    --danger:     #D9394A;
}
[data-theme="light"] body {
    background-image: radial-gradient(circle at 1px 1px, rgba(0,166,145,0.08) 1px, transparent 0);
}
[data-theme="light"] .navbar {
    background: rgba(245,247,250,0.88);
}
[data-theme="light"] .btn-primary {
    color: #fff;
}
[data-theme="light"] .hero-grid {
    background-image:
        linear-gradient(rgba(0,166,145,.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,166,145,.10) 1px, transparent 1px);
}
[data-theme="light"] .whatsapp-float {
    box-shadow: 0 4px 18px rgba(37,211,102,.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--f-body);
    line-height: 1.6;
    transition: background-color .25s ease, color .25s ease;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(0,229,199,0.07) 1px, transparent 0);
    background-size: 28px 28px;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 .5em;
    letter-spacing: -0.01em;
}

.container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Focus - erisebilirlik */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ---------------- Navbar ---------------- */
.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10,15,28,0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    position: relative;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--text);
}
.brand .dot {
    width: 10px; height: 10px;
    background: var(--accent);
    border-radius: 2px;
    box-shadow: 0 0 12px var(--accent);
}
.brand small {
    font-family: var(--f-mono);
    font-size: .6rem;
    color: var(--accent);
    display: block;
    letter-spacing: .12em;
}
.nav-links {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0; padding: 0;
    font-size: .93rem;
}
.nav-links a { color: var(--text-dim); transition: color .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.nav-actions { display: flex; align-items: center; gap: 14px; }

/* ---------------- Mobil menyu (hamburger) ---------------- */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    padding: 8px;
    align-items: center;
    justify-content: center;
}
.nav-toggle svg { width: 24px; height: 24px; }
.nav-mobile {
    display: block;
    max-height: 0;
    overflow: hidden;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    transition: max-height .25s ease;
}
.nav-mobile.open {
    max-height: 80vh;
    overflow-y: auto;
}
.nav-mobile-links { list-style: none; margin: 0; padding: 8px 20px 4px; }
.nav-mobile-links a {
    display: block;
    padding: 14px 2px;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    font-size: .95rem;
}
.nav-mobile-links a:hover, .nav-mobile-links a.active { color: var(--accent); }
.nav-mobile-actions { padding: 16px 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.nav-mobile-actions .dil-sira { display: flex; gap: 6px; align-items: center; }
.nav-mobile-actions .btn-block, .nav-mobile-actions a.btn.btn-ghost { width: 100%; }

/* ---------------- Duymeler ---------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 6px;
    font-family: var(--f-body);
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .12s, box-shadow .12s, background .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #06110F; }
.btn-primary:hover { box-shadow: 0 0 22px rgba(0,229,199,.45); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-amber { background: var(--amber); color: #221600; }
.btn-amber:hover { box-shadow: 0 0 22px rgba(255,176,32,.4); }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 14px; font-size: .82rem; }
.btn-danger { background: var(--danger); color: #2b0006; }

/* ---------------- Hero: sebeke sxemi imzasi ---------------- */
.hero {
    position: relative;
    overflow: hidden;
    padding: 96px 0 80px;
    border-bottom: 1px solid var(--border);
}
.hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(0,229,199,.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,199,.09) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 60% 60% at 70% 30%, #000 30%, transparent 75%);
    pointer-events: none;
}
.hero-pulse {
    position: absolute;
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(0,229,199,.6);
    animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0,229,199,.55); }
    70%  { box-shadow: 0 0 0 22px rgba(0,229,199,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,229,199,0); }
}
.hero-content { position: relative; z-index: 2; max-width: 640px; }
.eyebrow {
    font-family: var(--f-mono);
    font-size: .78rem;
    color: var(--accent);
    letter-spacing: .14em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}
.eyebrow::before {
    content: '';
    width: 7px; height: 7px;
    background: var(--accent);
    border-radius: 50%;
}
.hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.hero p.lead { color: var(--text-dim); font-size: 1.08rem; margin: 18px 0 30px; max-width: 520px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.uptime-strip {
    position: relative; z-index: 2;
    margin-top: 64px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(16,26,46,.6);
}
.uptime-strip div { padding: 18px 20px; border-right: 1px solid var(--border); }
.uptime-strip div:last-child { border-right: none; }
.uptime-strip strong {
    display: block;
    font-family: var(--f-mono);
    font-size: 1.3rem;
    color: var(--accent);
}
.uptime-strip span { font-size: .78rem; color: var(--text-dim); }

/* ---------------- Umumi bolmeler ---------------- */
.section { padding: 76px 0; }
.section-head { max-width: 620px; margin-bottom: 44px; }
.section-head .eyebrow { margin-bottom: 12px; }
.section-head p { color: var(--text-dim); }
.section-alt { background: var(--bg-panel); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ---------------- Xususiyyet kartlari ---------------- */
.feature-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 30px 26px;
    transition: border-color .18s, transform .18s, box-shadow .18s;
    box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.feature-card:hover { border-color: var(--accent-dim); transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.28); }
.feature-card .ic {
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,229,199,.1);
    border-radius: 12px;
    color: var(--accent);
    margin-bottom: 18px;
}
.feature-card .ic svg { width: 22px; height: 22px; }
.feature-card h3 { font-size: 1.08rem; letter-spacing: -.01em; }
.feature-card p { color: var(--text-dim); font-size: .92rem; margin: 0; line-height: 1.65; }

/* ---------------- Qiymet / spesifikasiya kartlari ---------------- */
.plan-tabs { display: flex; gap: 10px; margin-bottom: 36px; flex-wrap: wrap; }
.plan-tab {
    padding: 9px 18px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .85rem;
    color: var(--text-dim);
    background: transparent;
    cursor: pointer;
}
.plan-tab.active, .plan-tab:hover { color: var(--bg); background: var(--accent); border-color: var(--accent); }

.spec-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.12);
    transition: box-shadow .18s, transform .18s;
}
.spec-card:hover { box-shadow: 0 16px 32px rgba(0,0,0,.28); transform: translateY(-3px); }
.spec-card.featured { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.spec-card .tag {
    position: absolute; top: 16px; right: 16px;
    background: var(--amber); color: #221600;
    font-family: var(--f-mono); font-size: .68rem;
    padding: 4px 10px; border-radius: 999px;
    letter-spacing: .05em;
}
.spec-card .head { padding: 26px 24px 20px; border-bottom: 1px dashed var(--border); }
.spec-card .head .kateqoriya { font-family: var(--f-mono); font-size: .7rem; color: var(--accent); text-transform: uppercase; letter-spacing: .1em; }
.spec-card .head h3 { font-size: 1.3rem; margin: 6px 0 4px; }
.spec-card .head .desc { color: var(--text-dim); font-size: .85rem; }
.spec-card .price { padding: 20px 24px; border-bottom: 1px dashed var(--border); }
.spec-card .price .amount { font-family: var(--f-mono); font-size: 2.1rem; color: var(--text); }
.spec-card .price .amount span { font-size: .95rem; color: var(--text-dim); }
.spec-card .specs { padding: 20px 24px; flex: 1; font-family: var(--f-mono); font-size: .82rem; }
.spec-card .specs div { display: flex; justify-content: space-between; padding: 6px 0; color: var(--text-dim); border-bottom: 1px solid rgba(255,255,255,.03); }
.spec-card .specs div b { color: var(--text); font-weight: 500; }
.spec-card .foot { padding: 20px 24px 24px; }

/* ---------------- Formlar ---------------- */
.form-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 36px;
    max-width: 460px;
    margin: 0 auto;
}
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: .85rem; color: var(--text-dim); margin-bottom: 7px; }
.form-control {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    font-family: var(--f-body);
    font-size: .93rem;
}
.form-control:focus { border-color: var(--accent); outline: none; }
textarea.form-control { resize: vertical; min-height: 120px; }

.alert { padding: 13px 16px; border-radius: 8px; font-size: .88rem; margin-bottom: 20px; }
.alert-ok { background: rgba(0,229,199,.1); border: 1px solid var(--accent-dim); color: var(--accent); }
.alert-error { background: rgba(255,93,108,.1); border: 1px solid var(--danger); color: var(--danger); }

/* ---------------- Cedvel (admin) ---------------- */
table.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th, .data-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.data-table th { font-family: var(--f-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.badge { padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-family: var(--f-mono); }
.badge-yellow { background: rgba(255,176,32,.15); color: var(--amber); }
.badge-green { background: rgba(0,229,199,.15); color: var(--accent); }
.badge-red { background: rgba(255,93,108,.15); color: var(--danger); }

/* ---------------- Footer ---------------- */
footer {
    border-top: 1px solid var(--border);
    padding: 56px 0 30px;
    color: var(--text-dim);
    font-size: .88rem;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.footer-grid h4 { color: var(--text); font-size: .85rem; margin-bottom: 14px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 9px; }
.footer-grid a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---------------- Admin dashboard ---------------- */
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar {
    width: 240px; flex-shrink: 0;
    background: var(--bg-panel);
    border-right: 1px solid var(--border);
    padding: 24px 0;
}
.admin-sidebar .brand { padding: 0 24px 24px; }
.admin-sidebar nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 24px;
    color: var(--text-dim);
    font-size: .9rem;
}
.admin-sidebar nav a:hover, .admin-sidebar nav a.active { color: var(--accent); background: rgba(0,229,199,.06); }
.admin-main { flex: 1; padding: 32px 40px; }
.stat-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px;
}
.stat-card .num { font-family: var(--f-mono); font-size: 1.9rem; color: var(--accent); }
.stat-card .lbl { color: var(--text-dim); font-size: .82rem; margin-top: 4px; }

/* ---------------- Cart ---------------- */
.cart-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); }
.cart-row .name { font-weight: 600; }
.cart-row .meta { color: var(--text-dim); font-size: .82rem; font-family: var(--f-mono); }
.cart-total { display: flex; justify-content: space-between; padding-top: 18px; font-family: var(--f-mono); font-size: 1.2rem; }

/* ---------------- WhatsApp float duymesi ---------------- */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 60;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(37,211,102,.45);
    transition: transform .15s;
}
.whatsapp-float:hover { transform: scale(1.08); }

/* ---------------- Mehsul baxishi kartlari (dairevi nishan + qiymet) ---------------- */
.mehsul-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mehsul-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 32px 24px;
    text-align: center;
    transition: border-color .18s, transform .18s, box-shadow .18s;
    box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.mehsul-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.28); }
.mehsul-badge {
    width: 68px; height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-dim));
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 8px 20px rgba(0,229,199,.3);
}
.mehsul-badge svg { width: 30px; height: 30px; color: #06110F; }
.mehsul-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.mehsul-card p { color: var(--text-dim); font-size: .85rem; line-height: 1.6; margin: 0 0 20px; min-height: 62px; }
.mehsul-qiymet { font-size: .8rem; color: var(--text-dim); margin-bottom: 16px; }
.mehsul-qiymet b { color: var(--text); font-family: var(--f-mono); font-size: 1.15rem; }

/* ---------------- Kateqoriya kartlari (Hetzner-benzer naviqasiya) ---------------- */
.kat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.kat-card {
    display: block;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 26px 22px;
    transition: border-color .18s, transform .18s, box-shadow .18s;
    position: relative;
    overflow: hidden;
}
.kat-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.kat-card .kat-ic {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,229,199,.1);
    border-radius: 10px;
    margin-bottom: 18px;
    color: var(--accent);
}
.kat-card .kat-ic svg { width: 24px; height: 24px; }
.kat-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.kat-card p { color: var(--text-dim); font-size: .85rem; margin: 0 0 18px; line-height: 1.6; }
.kat-card .kat-link { color: var(--accent); font-size: .85rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.kat-card .kat-link .ox { transition: transform .18s; }
.kat-card:hover .kat-link .ox { transform: translateX(4px); }

/* ---------------- Etibar zolagi (trust bar) ---------------- */
.trust-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 28px 0;
    border-bottom: 1px solid var(--border);
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .85rem;
    color: var(--text-dim);
    justify-content: center;
}
.trust-item .ic { color: var(--accent); flex-shrink: 0; display: flex; }
.trust-item .ic svg { width: 20px; height: 20px; }

/* ---------------- Muqayise cedveli ---------------- */
.compare-table { width: 100%; border-collapse: collapse; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.compare-table th, .compare-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--border); font-size: .9rem; }
.compare-table th { font-family: var(--f-display); font-size: 1rem; background: var(--bg-panel-2); }
.compare-table th:first-child, .compare-table td:first-child { color: var(--text-dim); font-size: .82rem; font-family: var(--f-mono); }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table td.tovsiye { position: relative; }
.compare-table th.tovsiye-col { color: var(--amber); }

/* ---------------- Reyler ---------------- */
.rey-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 26px;
}
.rey-card .ulduzlar { color: var(--amber); font-size: .9rem; margin-bottom: 12px; letter-spacing: 2px; }
.rey-card p.metn { color: var(--text-dim); font-size: .92rem; line-height: 1.7; margin: 0 0 18px; }
.rey-card .muellif { display: flex; align-items: center; gap: 12px; }
.rey-card .avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-dim));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--f-display); font-weight: 700; color: #06110F; font-size: .95rem;
    flex-shrink: 0;
}
.rey-card .muellif .ad { font-weight: 600; font-size: .9rem; }
.rey-card .muellif .movqe { color: var(--text-dim); font-size: .78rem; }

/* ---------------- FAQ (accordion) ---------------- */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
    padding: 20px 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: .95rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.3rem; color: var(--accent); font-family: var(--f-mono); transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-cavab { padding: 0 4px 20px; color: var(--text-dim); font-size: .9rem; line-height: 1.7; }

/* ---------------- Animasiyali statistika ---------------- */
.sayilan { display: inline-block; }

/* ---------------- Responsive ---------------- */
@media (max-width: 880px) {
    .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .nav-links, .nav-actions { display: none; }
    .nav-toggle { display: flex; }
    .uptime-strip { grid-template-columns: repeat(2,1fr); }
    .trust-bar { grid-template-columns: repeat(2,1fr); }
    .compare-table { display: block; overflow-x: auto; white-space: nowrap; }
    .kat-grid { grid-template-columns: repeat(2,1fr); }
    .mehsul-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 480px) {
    .trust-bar { grid-template-columns: 1fr; }
    .kat-grid, .mehsul-grid { grid-template-columns: 1fr; }
    .uptime-strip { grid-template-columns: 1fr 1fr; }
    .hero h1 { font-size: 1.9rem; }
    .section-head h2, h2 { word-break: break-word; }
    .form-card { padding: 22px 18px; }
    .grid-2 > .form-card { max-width: 100%; }
}

/* ================= VPS / RESELLER CART V2 ================= */
.cart-v2 { max-width: 1180px !important; }
.cart-v2-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:28px; }
.cart-v2-head p { color:var(--text-dim); margin:8px 0 0; }
.cart-v2-total { background:var(--bg-panel); border:1px solid var(--border); border-radius:14px; padding:16px 20px; min-width:190px; }
.cart-v2-total small { display:block; color:var(--text-dim); margin-bottom:5px; }
.cart-v2-total strong { color:var(--accent); font-family:var(--f-mono); font-size:1.35rem; }
.cart-v2-grid { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:24px; align-items:start; }
.cart-product { position:relative; background:var(--bg-panel); border:1px solid var(--border); border-radius:18px; padding:24px; margin-bottom:20px; overflow:hidden; }
.cart-product-top { display:flex; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.cart-product-type { display:block; color:var(--accent); font:600 .7rem var(--f-mono); letter-spacing:.14em; }
.cart-product h2 { margin:7px 0 5px; }
.cart-product p { color:var(--text-dim); margin:0; }
.cart-product-price { text-align:right; white-space:nowrap; }
.cart-product-price strong { display:block; font:700 1.25rem var(--f-mono); color:var(--accent); }
.cart-product-price span { color:var(--text-dim); font-size:.78rem; }
.cart-specs { display:flex; flex-wrap:wrap; gap:8px; padding:16px 0; }
.cart-specs span { padding:7px 10px; border:1px solid var(--border); border-radius:9px; color:var(--text-dim); font-size:.78rem; }
.config-section { padding:20px 0; border-top:1px solid var(--border); }
.config-title { font-weight:700; margin-bottom:13px; }
.option-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.option-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.option-card { display:flex; flex-direction:column; gap:5px; min-height:82px; padding:13px; border:1px solid var(--border); border-radius:12px; cursor:pointer; background:rgba(255,255,255,.01); transition:.15s; }
.option-card:hover,.option-card.selected { border-color:var(--accent); background:rgba(0,229,199,.055); }
.option-card input { accent-color:var(--accent); margin:0 0 3px; }
.option-card span { font-weight:700; font-size:.86rem; }
.option-card small { color:var(--text-dim); font-size:.72rem; line-height:1.35; }
.option-card b { margin-top:auto; font:600 .75rem var(--f-mono); color:var(--accent); }
.check-grid { display:grid; gap:9px; }
.check-card { display:flex; align-items:center; gap:12px; padding:12px 13px; border:1px solid var(--border); border-radius:11px; cursor:pointer; }
.check-card:hover { border-color:var(--accent); }
.check-card input { accent-color:var(--accent); }
.check-card span { flex:1; display:flex; flex-direction:column; gap:3px; }
.check-card small { color:var(--text-dim); font-size:.72rem; }
.check-card strong { color:var(--accent); font:600 .76rem var(--f-mono); white-space:nowrap; }
.cart-product-bottom { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:18px; }
.qty-box { display:flex; align-items:center; gap:10px; color:var(--text-dim); font-size:.8rem; }
.qty-box input { width:72px; }
.remove-form { position:absolute; right:24px; bottom:24px; }
.config-summary { margin-top:15px; padding:12px 14px; border-radius:10px; background:rgba(0,229,199,.045); color:var(--text-dim); font: .76rem var(--f-mono); line-height:1.8; padding-right:150px; }
.cart-summary-v2 { min-width:0; }
.summary-sticky { position:sticky; top:24px; background:var(--bg-panel); border:1px solid var(--border); border-radius:18px; padding:22px; }
.summary-sticky h2 { margin:8px 0 18px; }
.summary-line { display:flex; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--border); font-size:.82rem; }
.summary-line b { font-family:var(--f-mono); white-space:nowrap; }
.summary-total { display:flex; justify-content:space-between; align-items:center; padding:18px 0; }
.summary-total strong { color:var(--accent); font:700 1.25rem var(--f-mono); }
.summary-note { color:var(--text-dim); font-size:.72rem; line-height:1.5; margin:12px 0 0; }
.cart-empty-v2 { text-align:center; background:var(--bg-panel); border:1px solid var(--border); border-radius:18px; padding:70px 25px; }
.cart-empty-icon { font-size:3rem; margin-bottom:12px; }
.config-note { padding:14px; border:1px dashed var(--border); border-radius:10px; color:var(--text-dim); font-size:.8rem; }

@media (max-width:900px) {
  .cart-v2-head { align-items:stretch; flex-direction:column; }
  .cart-v2-grid { grid-template-columns:1fr; }
  .summary-sticky { position:static; }
  .option-grid,.option-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
  .cart-product { padding:17px; border-radius:15px; }
  .cart-product-top { flex-direction:column; }
  .cart-product-price { text-align:left; }
  .option-grid,.option-grid-4 { grid-template-columns:1fr; }
  .cart-product-bottom { align-items:stretch; flex-direction:column; }
  .cart-actions .btn { width:100%; }
  .remove-form { position:static; margin-top:12px; }
  .remove-form .btn { width:100%; }
  .config-summary { padding-right:14px; }
  .check-card { align-items:flex-start; }
}

/* ============================================================
   NETHOST.AZ V2 — PREMIUM CLOUD FRONTEND
   ============================================================ */

:root{
  --nh-bg:#f7f9fc;
  --nh-card:#ffffff;
  --nh-ink:#0b1220;
  --nh-muted:#667085;
  --nh-line:#e7ebf2;
  --nh-primary:#2563eb;
  --nh-primary-dark:#1d4ed8;
  --nh-soft:#eef4ff;
  --nh-success:#16a34a;
  --nh-radius:18px;
  --nh-shadow:0 18px 50px rgba(15,23,42,.08);
}

.nh-container{width:min(1180px,calc(100% - 32px));margin:auto;}
.nh-hero{
  position:relative;overflow:hidden;
  padding:82px 0 70px;
  background:
    radial-gradient(circle at 80% 15%,rgba(37,99,235,.16),transparent 32%),
    radial-gradient(circle at 10% 80%,rgba(14,165,233,.10),transparent 28%),
    linear-gradient(180deg,#fff 0%,#f7f9fc 100%);
}
.nh-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;}
.nh-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border:1px solid #dbe5f4;border-radius:999px;
  background:#fff;color:#31527d;font-size:13px;font-weight:700;
}
.nh-dot{width:8px;height:8px;border-radius:50%;background:var(--nh-success);box-shadow:0 0 0 5px rgba(22,163,74,.10);}
.nh-hero h1{font-size:clamp(40px,5vw,68px);line-height:1.02;letter-spacing:-2.8px;margin:20px 0 18px;}
.nh-hero h1 span{color:var(--nh-primary);}
.nh-hero p{max-width:650px;color:var(--nh-muted);font-size:18px;line-height:1.75;margin:0 0 30px;}
.nh-actions{display:flex;gap:12px;flex-wrap:wrap;}
.nh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 20px;border-radius:12px;text-decoration:none;
  font-weight:800;border:1px solid transparent;transition:.2s ease;
}
.nh-btn-primary{background:var(--nh-primary);color:#fff;box-shadow:0 10px 24px rgba(37,99,235,.22);}
.nh-btn-primary:hover{background:var(--nh-primary-dark);transform:translateY(-1px);}
.nh-btn-light{background:#fff;color:var(--nh-ink);border-color:var(--nh-line);}
.nh-btn-light:hover{border-color:#cbd5e1;transform:translateY(-1px);}

.nh-config{
  background:#0b1220;color:#fff;border-radius:24px;padding:24px;
  box-shadow:0 30px 70px rgba(15,23,42,.22);position:relative;
}
.nh-config:before{
  content:"";position:absolute;inset:1px;border-radius:23px;pointer-events:none;
  background:linear-gradient(135deg,rgba(59,130,246,.20),transparent 45%);
}
.nh-config>*{position:relative;}
.nh-config-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.nh-config-title{font-weight:800;font-size:16px;}
.nh-live{font-size:11px;color:#86efac;display:flex;gap:6px;align-items:center;}
.nh-live:before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e;}
.nh-config-row{
  display:flex;justify-content:space-between;gap:15px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.09);
}
.nh-config-row:last-of-type{border-bottom:0;}
.nh-config-label{color:#94a3b8;font-size:13px;}
.nh-config-value{font-weight:700;font-size:14px;}
.nh-price{display:flex;align-items:end;justify-content:space-between;padding-top:20px;}
.nh-price strong{font-size:32px;letter-spacing:-1px;}
.nh-price small{color:#94a3b8;font-size:12px;margin-bottom:5px;}
.nh-config .nh-btn{width:100%;margin-top:18px;}

.nh-section{padding:76px 0;}
.nh-section-head{text-align:center;max-width:720px;margin:0 auto 38px;}
.nh-section-head h2{font-size:clamp(30px,4vw,44px);letter-spacing:-1.6px;margin:0 0 12px;}
.nh-section-head p{color:var(--nh-muted);line-height:1.7;margin:0;}

.nh-products{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.nh-product{
  background:#fff;border:1px solid var(--nh-line);border-radius:var(--nh-radius);
  padding:24px;box-shadow:0 4px 18px rgba(15,23,42,.03);transition:.22s ease;
}
.nh-product:hover{transform:translateY(-5px);box-shadow:var(--nh-shadow);border-color:#d5def0;}
.nh-product-icon{font-size:27px;margin-bottom:22px;}
.nh-product h3{margin:0 0 8px;font-size:20px;}
.nh-product p{color:var(--nh-muted);font-size:14px;line-height:1.6;min-height:45px;}
.nh-product-price{font-weight:900;font-size:22px;margin-top:18px;}
.nh-product-price span{font-size:12px;color:var(--nh-muted);font-weight:500;}

.nh-infra{
  background:#0b1220;color:#fff;border-radius:28px;padding:42px;
  display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center;
}
.nh-infra h2{font-size:38px;letter-spacing:-1.4px;margin:0 0 12px;}
.nh-infra p{color:#aab6c8;line-height:1.7;}
.nh-status{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  border-radius:18px;padding:20px;
}
.nh-status-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.nh-status-ok{color:#86efac;font-size:13px;font-weight:800;}
.nh-status-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.nh-status-item{padding:13px;border-radius:12px;background:rgba(255,255,255,.045);}
.nh-status-item b{display:block;font-size:18px;}
.nh-status-item span{color:#94a3b8;font-size:12px;}

.nh-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.nh-plan{
  background:#fff;border:1px solid var(--nh-line);border-radius:20px;padding:26px;
  position:relative;transition:.22s ease;
}
.nh-plan.featured{border:2px solid var(--nh-primary);box-shadow:0 20px 50px rgba(37,99,235,.12);}
.nh-badge{position:absolute;right:18px;top:18px;background:var(--nh-soft);color:var(--nh-primary);padding:6px 9px;border-radius:999px;font-size:11px;font-weight:800;}
.nh-plan h3{margin:0 0 8px;font-size:21px;}
.nh-plan .nh-plan-price{font-size:34px;font-weight:900;letter-spacing:-1px;margin:18px 0;}
.nh-plan .nh-plan-price span{font-size:12px;color:var(--nh-muted);font-weight:500;}
.nh-plan ul{list-style:none;padding:0;margin:20px 0;}
.nh-plan li{padding:9px 0;border-bottom:1px solid #eef1f5;color:#475467;font-size:14px;}
.nh-plan li:last-child{border-bottom:0;}

.nh-cta{
  text-align:center;background:linear-gradient(135deg,#eaf2ff,#f8fbff);
  border:1px solid #dce8fb;border-radius:28px;padding:58px 25px;
}
.nh-cta h2{font-size:clamp(30px,4vw,44px);letter-spacing:-1.5px;margin:0 0 12px;}
.nh-cta p{color:var(--nh-muted);margin:0 auto 24px;max-width:650px;line-height:1.7;}

@media(max-width:1000px){
  .nh-hero-grid,.nh-infra{grid-template-columns:1fr;}
  .nh-products{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:700px){
  .nh-container{width:min(100% - 22px,1180px);}
  .nh-hero{padding:54px 0 45px;}
  .nh-hero h1{letter-spacing:-1.8px;}
  .nh-hero p{font-size:16px;}
  .nh-products,.nh-plan-grid{grid-template-columns:1fr;}
  .nh-infra{padding:26px;}
  .nh-infra h2{font-size:30px;}
  .nh-status-grid{grid-template-columns:1fr 1fr;}
  .nh-section{padding:54px 0;}
}

/* ============================================================
   NETHOST.AZ — COMPLETE DARK MODE FIX (unchanged from your file)
   ============================================================ */

html.dark, html[data-theme="dark"], body.dark, body[data-theme="dark"]{ color-scheme:dark; }
html.dark body, html[data-theme="dark"] body, body.dark, body[data-theme="dark"]{ background:#070b14 !important; color:#e5e7eb !important; }
html.dark .nh-hero, html[data-theme="dark"] .nh-hero, body.dark .nh-hero, body[data-theme="dark"] .nh-hero{
  background: radial-gradient(circle at 80% 15%,rgba(37,99,235,.20),transparent 32%), radial-gradient(circle at 10% 80%,rgba(14,165,233,.08),transparent 28%), linear-gradient(180deg,#0b1220 0%,#070b14 100%) !important;
}
html.dark .nh-section, html[data-theme="dark"] .nh-section, body.dark .nh-section, body[data-theme="dark"] .nh-section{ background:#070b14 !important; }
html.dark .nh-section-head h2, html[data-theme="dark"] .nh-section-head h2, body.dark .nh-section-head h2, body[data-theme="dark"] .nh-section-head h2,
html.dark .nh-hero h1, html[data-theme="dark"] .nh-hero h1, body.dark .nh-hero h1, body[data-theme="dark"] .nh-hero h1{ color:#f8fafc !important; }
html.dark .nh-hero p, html[data-theme="dark"] .nh-hero p, body.dark .nh-hero p, body[data-theme="dark"] .nh-hero p,
html.dark .nh-section-head p, html[data-theme="dark"] .nh-section-head p, body.dark .nh-section-head p, body[data-theme="dark"] .nh-section-head p{ color:#aab6c8 !important; }
html.dark .nh-eyebrow, html[data-theme="dark"] .nh-eyebrow, body.dark .nh-eyebrow, body[data-theme="dark"] .nh-eyebrow{ background:#101827 !important; border-color:#263247 !important; color:#bfdbfe !important; }
html.dark .nh-btn-light, html[data-theme="dark"] .nh-btn-light, body.dark .nh-btn-light, body[data-theme="dark"] .nh-btn-light{ background:#111827 !important; border-color:#293548 !important; color:#f1f5f9 !important; }
html.dark .nh-product, html[data-theme="dark"] .nh-product, body.dark .nh-product, body[data-theme="dark"] .nh-product,
html.dark .nh-plan, html[data-theme="dark"] .nh-plan, body.dark .nh-plan, body[data-theme="dark"] .nh-plan{ background:#0f1726 !important; border-color:#243047 !important; color:#f8fafc !important; box-shadow:0 12px 35px rgba(0,0,0,.20) !important; }
html.dark .nh-product:hover, html[data-theme="dark"] .nh-product:hover, body.dark .nh-product:hover, body[data-theme="dark"] .nh-product:hover{ border-color:#36547f !important; box-shadow:0 20px 50px rgba(0,0,0,.32) !important; }
html.dark .nh-product p, html[data-theme="dark"] .nh-product p, body.dark .nh-product p, body[data-theme="dark"] .nh-product p,
html.dark .nh-product-price span, html[data-theme="dark"] .nh-product-price span, body.dark .nh-product-price span, body[data-theme="dark"] .nh-product-price span,
html.dark .nh-plan li, html[data-theme="dark"] .nh-plan li, body.dark .nh-plan li, body[data-theme="dark"] .nh-plan li{ color:#9aa9bd !important; }
html.dark .nh-plan li, html[data-theme="dark"] .nh-plan li, body.dark .nh-plan li, body[data-theme="dark"] .nh-plan li{ border-color:#253147 !important; }
html.dark .nh-plan.featured, html[data-theme="dark"] .nh-plan.featured, body.dark .nh-plan.featured, body[data-theme="dark"] .nh-plan.featured{ border-color:#3b82f6 !important; box-shadow:0 20px 55px rgba(37,99,235,.15) !important; }
html.dark .nh-badge, html[data-theme="dark"] .nh-badge, body.dark .nh-badge, body[data-theme="dark"] .nh-badge{ background:#102448 !important; color:#93c5fd !important; }
html.dark .nh-cta, html[data-theme="dark"] .nh-cta, body.dark .nh-cta, body[data-theme="dark"] .nh-cta{ background:linear-gradient(135deg,#0e1b31,#0b1220) !important; border-color:#243a5c !important; }
html.dark .nh-cta h2, html[data-theme="dark"] .nh-cta h2, body.dark .nh-cta h2, body[data-theme="dark"] .nh-cta h2{ color:#f8fafc !important; }
html.dark .nh-cta p, html[data-theme="dark"] .nh-cta p, body.dark .nh-cta p, body[data-theme="dark"] .nh-cta p{ color:#aab6c8 !important; }
html.dark header, html.dark nav, html[data-theme="dark"] header, html[data-theme="dark"] nav, body.dark header, body.dark nav, body[data-theme="dark"] header, body[data-theme="dark"] nav{ background:#0b1220 !important; color:#e5e7eb !important; border-color:#1f2b3d !important; }
html.dark header a, html.dark nav a, html[data-theme="dark"] header a, html[data-theme="dark"] nav a, body.dark header a, body.dark nav a, body[data-theme="dark"] header a, body[data-theme="dark"] nav a{ color:#dbe4f0 !important; }
html.dark .card, html.dark .box, html.dark .feature-card, html.dark .pricing-card, html.dark .testimonial-card, html.dark .faq-item, html.dark .comparison, html.dark .table-wrap,
html[data-theme="dark"] .card, html[data-theme="dark"] .box, html[data-theme="dark"] .feature-card, html[data-theme="dark"] .pricing-card, html[data-theme="dark"] .testimonial-card, html[data-theme="dark"] .faq-item, html[data-theme="dark"] .comparison, html[data-theme="dark"] .table-wrap,
body.dark .card, body.dark .box, body.dark .feature-card, body.dark .pricing-card, body.dark .testimonial-card, body.dark .faq-item, body.dark .comparison, body.dark .table-wrap,
body[data-theme="dark"] .card, body[data-theme="dark"] .box, body[data-theme="dark"] .feature-card, body[data-theme="dark"] .pricing-card, body[data-theme="dark"] .testimonial-card, body[data-theme="dark"] .faq-item, body[data-theme="dark"] .comparison, body[data-theme="dark"] .table-wrap{ background:#0f1726 !important; color:#e5e7eb !important; border-color:#243047 !important; }
html.dark input, html.dark select, html.dark textarea, html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea, body.dark input, body.dark select, body.dark textarea, body[data-theme="dark"] input, body[data-theme="dark"] select, body[data-theme="dark"] textarea{ background:#0b1220 !important; color:#e5e7eb !important; border-color:#2b3a52 !important; }
html.dark input::placeholder, html.dark textarea::placeholder, html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder, body.dark input::placeholder, body.dark textarea::placeholder, body[data-theme="dark"] input::placeholder, body[data-theme="dark"] textarea::placeholder{ color:#64748b !important; }

/* ==========================================================
   NETHOST — CART V2 FINAL LAYOUT FIX
   ========================================================== */
.cart-v2, .cart-v2 * { box-sizing: border-box; }
.cart-v2 { width: 100%; max-width: 1180px !important; margin-left: auto; margin-right: auto; }
.cart-v2 .cart-product { position: relative !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; overflow: visible !important; margin: 0 0 24px !important; padding: 26px !important; }
.cart-v2 .config-section { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; padding: 22px 0 !important; margin: 0 !important; clear: both !important; }
.cart-v2 .config-title { display: block !important; width: 100% !important; margin: 0 0 14px !important; line-height: 1.4 !important; }
.cart-v2 .option-grid { display: grid !important; width: 100% !important; height: auto !important; min-height: 0 !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; align-items: stretch !important; }
.cart-v2 .option-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.cart-v2 .option-card { position: relative !important; display: flex !important; flex-direction: column !important; width: 100% !important; height: auto !important; min-height: 88px !important; max-height: none !important; margin: 0 !important; padding: 15px !important; gap: 6px !important; border: 1px solid var(--border) !important; border-radius: 12px !important; background: rgba(255,255,255,.015) !important; overflow: hidden !important; }
.cart-v2 .option-card input { width: auto !important; height: auto !important; margin: 0 0 5px !important; flex: 0 0 auto !important; }
.cart-v2 .option-card span { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; line-height: 1.35 !important; }
.cart-v2 .option-card small { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; line-height: 1.4 !important; }
.cart-v2 .option-card b { display: block !important; width: 100% !important; height: auto !important; margin: auto 0 0 !important; padding-top: 5px !important; line-height: 1.3 !important; }
.cart-v2 .option-card:hover, .cart-v2 .option-card.selected { transform: none !important; border-color: var(--accent) !important; }
.cart-v2 .check-grid { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; gap: 10px !important; }
.cart-v2 .check-card { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; height: auto !important; min-height: 62px !important; max-height: none !important; margin: 0 !important; padding: 13px 15px !important; gap: 12px !important; border: 1px solid var(--border) !important; border-radius: 11px !important; overflow: hidden !important; }
.cart-v2 .check-card input { flex: 0 0 auto !important; width: auto !important; height: auto !important; margin: 0 !important; }
.cart-v2 .check-card span { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 3px !important; }
.cart-v2 .check-card span b { display: block !important; line-height: 1.35 !important; }
.cart-v2 .check-card small { display: block !important; line-height: 1.35 !important; }
.cart-v2 .check-card strong { flex: 0 0 auto !important; width: auto !important; white-space: nowrap !important; margin-left: auto !important; }
.cart-v2 .cart-product-bottom { position: relative !important; display: flex !important; width: 100% !important; min-height: 60px !important; margin-top: 8px !important; padding-top: 20px !important; border-top: 1px solid var(--border) !important; clear: both !important; }
.cart-v2 .remove-form { position: relative !important; right: auto !important; bottom: auto !important; display: block !important; width: 100% !important; margin: 14px 0 0 !important; clear: both !important; }
.cart-v2 .remove-form .btn { width: auto !important; }
.cart-v2 .config-summary { position: relative !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 15px 0 0 !important; padding: 13px 15px !important; clear: both !important; }
.cart-v2 .qty-box { display: flex !important; align-items: center !important; gap: 10px !important; }
.cart-v2 .qty-box input { width: 72px !important; max-width: 72px !important; }
.cart-v2 .summary-sticky { position: sticky !important; top: 24px !important; width: 100% !important; height: auto !important; }

@media (max-width: 1000px) {
    .cart-v2 .option-grid, .cart-v2 .option-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .cart-v2-grid { grid-template-columns: 1fr !important; }
    .cart-v2 .summary-sticky { position: static !important; }
}
@media (max-width: 600px) {
    .cart-v2 { width: 100% !important; padding-left: 14px !important; padding-right: 14px !important; }
    .cart-v2 .cart-product { padding: 17px !important; border-radius: 15px !important; }
    .cart-v2 .cart-product-top { display: flex !important; flex-direction: column !important; gap: 12px !important; }
    .cart-v2 .cart-product-price { text-align: left !important; }
    .cart-v2 .option-grid, .cart-v2 .option-grid-4 { grid-template-columns: 1fr !important; }
    .cart-v2 .check-card { align-items: flex-start !important; min-height: 58px !important; }
    .cart-v2 .check-card strong { font-size: .72rem !important; }
    .cart-v2 .cart-product-bottom { flex-direction: column !important; align-items: stretch !important; }
    .cart-v2 .cart-actions, .cart-v2 .cart-actions .btn { width: 100% !important; }
    .cart-v2 .remove-form, .cart-v2 .remove-form .btn { width: 100% !important; }
    .cart-v2 .config-summary { padding-right: 14px !important; }
    .cart-v2 .check-card { align-items: flex-start !important; }
}

/* ==========================================================
   NETHOST.AZ — INDEX / FULL DARK MODE FIX (unchanged)
   ========================================================== */
html[data-theme="dark"], body[data-theme="dark"], html.dark, body.dark { color-scheme: dark; }
html[data-theme="dark"] body, body[data-theme="dark"], html.dark body, body.dark { background: #070b14 !important; color: #e5e7eb !important; }
html[data-theme="dark"] .navbar, body[data-theme="dark"] .navbar, html.dark .navbar, body.dark .navbar { background: rgba(7, 11, 20, .94) !important; border-color: #1e293b !important; }
html[data-theme="dark"] .nh-hero, body[data-theme="dark"] .nh-hero, html.dark .nh-hero, body.dark .nh-hero {
    background: radial-gradient( circle at 80% 15%, rgba(0,229,199,.12), transparent 32% ), radial-gradient( circle at 10% 80%, rgba(14,165,233,.07), transparent 28% ), linear-gradient( 180deg, #0b1220 0%, #070b14 100% ) !important;
    color: #e5e7eb !important;
}
html[data-theme="dark"] .nh-hero h1, body[data-theme="dark"] .nh-hero h1, html.dark .nh-hero h1, body.dark .nh-hero h1 { color: #f1f5f9 !important; }
html[data-theme="dark"] .nh-hero p, body[data-theme="dark"] .nh-hero p, html.dark .nh-hero p, body.dark .nh-hero p { color: #94a3b8 !important; }
html[data-theme="dark"] .nh-eyebrow, body[data-theme="dark"] .nh-eyebrow, html.dark .nh-eyebrow, body.dark .nh-eyebrow { background: #0f1726 !important; border-color: #263650 !important; color: #b7c4d8 !important; }
html[data-theme="dark"] .nh-btn-light, body[data-theme="dark"] .nh-btn-light, html.dark .nh-btn-light, body.dark .nh-btn-light { background: #0f1726 !important; color: #e5e7eb !important; border-color: #263650 !important; }
html[data-theme="dark"] .nh-btn-light:hover, body[data-theme="dark"] .nh-btn-light:hover, html.dark .nh-btn-light:hover, body.dark .nh-btn-light:hover { border-color: var(--accent) !important; }
html[data-theme="dark"] .nh-config, body[data-theme="dark"] .nh-config, html.dark .nh-config, body.dark .nh-config { background: #0b1220 !important; color: #f1f5f9 !important; border: 1px solid #263650 !important; }
html[data-theme="dark"] .nh-product, body[data-theme="dark"] .nh-product, html.dark .nh-product, body.dark .nh-product { background: #0f1726 !important; border-color: #243047 !important; color: #e5e7eb !important; box-shadow: 0 10px 30px rgba(0,0,0,.18) !important; }
html[data-theme="dark"] .nh-product p, body[data-theme="dark"] .nh-product p, html.dark .nh-product p, body.dark .nh-product p { color: #94a3b8 !important; }
html[data-theme="dark"] .nh-product-price, body[data-theme="dark"] .nh-product-price, html.dark .nh-product-price, body.dark .nh-product-price { color: #f1f5f9 !important; }
html[data-theme="dark"] .nh-infra, body[data-theme="dark"] .nh-infra, html.dark .nh-infra, body.dark .nh-infra { background: #0b1220 !important; border: 1px solid #263650 !important; }
html[data-theme="dark"] .nh-plan, body[data-theme="dark"] .nh-plan, html.dark .nh-plan, body.dark .nh-plan { background: #0f1726 !important; border-color: #243047 !important; color: #e5e7eb !important; }
html[data-theme="dark"] .nh-plan li, body[data-theme="dark"] .nh-plan li, html.dark .nh-plan li, body.dark .nh-plan li { color: #aab6c8 !important; border-color: #263650 !important; }
html[data-theme="dark"] .nh-badge, body[data-theme="dark"] .nh-badge, html.dark .nh-badge, body.dark .nh-badge { background: rgba(0,229,199,.10) !important; color: var(--accent) !important; }
html[data-theme="dark"] .nh-cta, body[data-theme="dark"] .nh-cta, html.dark .nh-cta, body.dark .nh-cta { background: linear-gradient( 135deg, #0d1a2d, #0a111f ) !important; border-color: #263650 !important; color: #f1f5f9 !important; }
html[data-theme="dark"] .nh-cta p, body[data-theme="dark"] .nh-cta p, html.dark .nh-cta p, body.dark .nh-cta p { color: #94a3b8 !important; }
html[data-theme="dark"] .nh-section, body[data-theme="dark"] .nh-section, html.dark .nh-section, body.dark .nh-section { background: #070b14 !important; }
html[data-theme="dark"] footer, body[data-theme="dark"] footer, html.dark footer, body.dark footer { background: #070b14 !important; border-color: #1e293b !important; color: #94a3b8 !important; }

/* ==========================================================
   NETHOST — UNIVERSAL THEME FIX (unchanged)
   ========================================================== */
html, body { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
[data-theme="light"] body { background-color: #f5f7fa !important; color: #10151f !important; }
[data-theme="light"] .navbar { background: rgba(245, 247, 250, .94) !important; border-bottom-color: #dfe5ec !important; }
[data-theme="light"] .nav, [data-theme="light"] header, [data-theme="light"] main, [data-theme="light"] section, [data-theme="light"] footer { color: var(--text); }
[data-theme="light"] .card, [data-theme="light"] .panel, [data-theme="light"] .box, [data-theme="light"] .plan-card, [data-theme="light"] .cart-card, [data-theme="light"] .cart-summary { background: #ffffff !important; border-color: #dfe5ec !important; color: #10151f !important; }
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background: #ffffff !important; color: #10151f !important; border-color: #dfe5ec !important; }
[data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: #7b8798 !important; }
[data-theme="light"] .text-muted, [data-theme="light"] .muted, [data-theme="light"] small { color: #5b6472; }
[data-theme="light"] .theme-toggle, [data-theme="light"] #themeToggle { background: #ffffff; color: #172033; border-color: #dfe5ec; }
[data-theme="dark"] body { background-color: #0a0f1c !important; color: #e7ecf5 !important; }
[data-theme="dark"] .navbar { background: rgba(10, 15, 28, .92) !important; }
[data-theme="dark"] .card, [data-theme="dark"] .panel, [data-theme="dark"] .box, [data-theme="dark"] .plan-card, [data-theme="dark"] .cart-card, [data-theme="dark"] .cart-summary { background: #101a2e !important; border-color: #223049 !important; color: #e7ecf5 !important; }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: #0a0f1c !important; color: #e7ecf5 !important; border-color: #223049 !important; }
.theme-toggle, #themeToggle { cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.theme-toggle:hover, #themeToggle:hover { transform: translateY(-1px); border-color: var(--accent); }
body *, .navbar, .card, .panel, .box, .plan-card, .cart-card, .cart-summary, input, select, textarea, button {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* ==========================================================
   ADMIN PANEL — DESKTOP BASE (consolidated, single source of truth)
   ========================================================== */
.admin-shell { min-height: 100vh; display: flex; background: var(--bg); }
.admin-sidebar {
    width: 264px; flex: 0 0 264px;
    display: flex; flex-direction: column;
    background: #0d1729; border-right: 1px solid #1d2b42;
    padding: 0;
}
.admin-sidebar-head { min-height: 92px; padding: 0 18px 0 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #1d2b42; }
.admin-brand-text { display: flex; flex-direction: column; gap: 3px; }
.admin-brand-text strong { font-family: var(--f-display); font-size: 1.22rem; letter-spacing: -.025em; color: #eef3fb; }
.admin-brand-text small { font-family: var(--f-mono); color: var(--accent); font-size: .58rem; letter-spacing: .16em; }
.admin-theme-button { width: 38px; height: 34px; padding: 0; border: 1px solid #263650; border-radius: 8px; background: #111e33; color: #dbe4f1; cursor: pointer; font-size: .95rem; display: inline-flex; align-items: center; justify-content: center; }
.admin-theme-button:hover { border-color: var(--accent); color: var(--accent); }
.admin-nav { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 13px 10px 18px; }
.admin-nav-main, .admin-nav-group > summary {
    min-height: 42px; width: 100%; box-sizing: border-box;
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; border-radius: 8px;
    color: #9aa8bc; font-size: .86rem; font-weight: 500;
    cursor: pointer; list-style: none; text-decoration: none;
}
.admin-nav-main:hover, .admin-nav-group > summary:hover { color: #e8eef7; background: #132238; }
.admin-nav-main.active { color: var(--accent); background: rgba(0,229,199,.075); }
.nav-icon { width: 19px; height: 19px; flex: 0 0 19px; display: inline-flex; align-items: center; justify-content: center; color: currentColor; }
.nav-icon svg { width: 18px; height: 18px; display: block; }
.admin-section-title { margin: 18px 10px 6px; color: #53647c; font-family: var(--f-mono); font-size: .57rem; font-weight: 600; letter-spacing: .16em; }
.admin-nav-group > summary::-webkit-details-marker { display: none; }
.admin-nav-group > summary { position: relative; }
.nav-chevron { width: 7px; height: 7px; margin-left: auto; border-right: 1px solid #687a93; border-top: 1px solid #687a93; transform: rotate(45deg); transition: transform .16s ease, border-color .16s ease; }
.admin-nav-group[open] > summary { color: #e8eef7; background: #101f34; }
.admin-nav-group[open] .nav-chevron { transform: rotate(135deg); border-color: var(--accent); }
.admin-nav-sub { margin: 2px 0 2px 20px; padding: 2px 0 3px 13px; border-left: 1px solid #263650; }
.admin-nav-sub a { display: block; padding: 7px 9px; border-radius: 6px; color: #8291a7; font-size: .78rem; line-height: 1.35; text-decoration: none; }
.admin-nav-sub a:hover { color: #dce5f1; background: #122238; }
.admin-nav-sub a.active { color: var(--accent); background: rgba(0,229,199,.06); }
.admin-sidebar-bottom { padding: 10px; border-top: 1px solid #1d2b42; }
.admin-bottom-link { min-height: 40px; display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 8px; color: #8593a8; font-size: .82rem; text-decoration: none; }
.admin-bottom-link:hover { color: #e8eef7; background: #132238; }
.admin-bottom-link.logout:hover { color: #ff7b87; background: rgba(255,93,108,.06); }
.admin-main { min-width: 0; flex: 1; padding: 34px 42px; }
.admin-mobile-bar, .admin-nav-overlay { display: none; }

[data-theme="light"] .admin-sidebar { background: #ffffff; border-right-color: #dfe5ec; }
[data-theme="light"] .admin-sidebar-head, [data-theme="light"] .admin-sidebar-bottom { border-color: #dfe5ec; }
[data-theme="light"] .admin-brand-text strong { color: #172033; }
[data-theme="light"] .admin-theme-button { background: #f5f7fa; border-color: #dfe5ec; color: #334155; }
[data-theme="light"] .admin-section-title { color: #8994a5; }
[data-theme="light"] .admin-nav-main:hover, [data-theme="light"] .admin-nav-group > summary:hover, [data-theme="light"] .admin-nav-group[open] > summary, [data-theme="light"] .admin-nav-sub a:hover, [data-theme="light"] .admin-bottom-link:hover { background: #f4f7fa; }
[data-theme="light"] .admin-nav-sub { border-color: #dfe5ec; }

/* ==========================================================
   ADMIN PANEL — MOBILE DRAWER (single definitive block)
   Bu, sondadir ve butun evvelki mobil admin qaydalarini
   qeti sekilde evez edir. Sebeb: eskiden bir nece cakisan
   "fix" bloku var idi (V3/V4/V5/V5.1/FINAL), her biri ustunde
   islemeye calisirdi ve biri (.admin-sidebar { overflow:hidden })
   ich menyunun bir hissesini kesib gizledirdi.
   ========================================================== */
@media (max-width: 880px) {
    body.admin-menu-open { overflow: hidden; }

    .admin-shell { display: block; }

    .admin-mobile-bar {
        position: sticky; top: 0; z-index: 70;
        width: 100%; height: 62px; box-sizing: border-box;
        padding: 0 14px; margin: 0;
        display: flex; align-items: center; gap: 12px;
        background: rgba(10,15,28,.96);
        border-bottom: 1px solid #1d2b42;
        backdrop-filter: blur(12px);
    }
    .admin-mobile-title { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.05; }
    .admin-mobile-title strong { font-family: var(--f-display); font-size: .98rem; color: #eef3fb; }
    .admin-mobile-title small { margin-top: 4px; font-family: var(--f-mono); color: var(--accent); font-size: .52rem; letter-spacing: .15em; }
    .admin-menu-button {
        width: 40px; height: 40px; box-sizing: border-box;
        padding: 9px; border: 1px solid #263650; border-radius: 8px;
        background: #111e33; display: flex; flex-direction: column;
        justify-content: center; align-items: center; gap: 4px; cursor: pointer;
    }
    .admin-menu-button span { display: block; width: 19px; height: 2px; margin: 0 auto; background: #dbe4f1; border-radius: 2px; }
    .admin-mobile-bar .admin-theme-button { width: 40px; height: 40px; }

    /*
      VACIB: sidebar oz ichinde SCROLL edebilmelidir, ona gore
      bu konteynerin OZUNE overflow:hidden qoymuruq — yalniz
      .admin-nav-a (ich hisseye) auto-scroll veririk.
    */
    .admin-sidebar {
        position: fixed;
        left: 0; top: 0;
        width: min(340px, 88vw);
        max-width: 88vw;
        height: 100vh;
        height: 100dvh;
        margin: 0; padding: 0;
        box-sizing: border-box;
        display: flex; flex-direction: column;
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: 18px 0 45px rgba(0,0,0,.28);
        z-index: 85;
    }
    .admin-sidebar.is-open { transform: translateX(0); }

    .admin-sidebar-head { flex: 0 0 auto; }
    .admin-sidebar-bottom { flex: 0 0 auto; }

    /* Bu, en vacib setirdir: ich menyu oz-ozune scroll ede bilsin */
    .admin-nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 16px 14px 20px;
    }

    .admin-nav-overlay {
        position: fixed; inset: 0; z-index: 80;
        width: 100vw; height: 100vh; height: 100dvh;
        margin: 0; padding: 0; box-sizing: border-box;
        display: block;
        background: rgba(0,0,0,.55);
        opacity: 0; pointer-events: none;
        transition: opacity .2s ease;
        backdrop-filter: blur(2px);
    }
    .admin-nav-overlay.is-visible { opacity: 1; pointer-events: auto; }

    .admin-main { width: 100%; max-width: 100%; margin: 0; box-sizing: border-box; padding: 24px 16px 40px; }
}

@media (max-width: 480px) {
    .admin-sidebar { width: 90vw; max-width: 360px; }
    .admin-mobile-bar { height: 58px; }
    .admin-main { padding: 20px 14px 36px; }
}

/* ==========================================================
   AI SÖHBƏT VİDJETİ
   ========================================================== */
.ai-chat-float {
    position: fixed;
    bottom: 96px;
    right: 24px;
    z-index: 61;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: #06110F;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(0,229,199,.45);
    cursor: pointer;
    transition: transform .15s;
}
.ai-chat-float:hover { transform: scale(1.08); }
.ai-chat-float svg { width: 26px; height: 26px; }

.ai-chat-panel {
    position: fixed;
    bottom: 96px;
    right: 24px;
    z-index: 65;
    width: 360px;
    max-width: calc(100vw - 32px);
    height: 500px;
    max-height: calc(100vh - 140px);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(16px) scale(.97);
    opacity: 0;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
}
.ai-chat-panel.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}
.ai-chat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-panel-2);
}
.ai-chat-head strong { display: block; font-size: .95rem; }
.ai-chat-head small { display: block; color: var(--accent); font-family: var(--f-mono); font-size: .68rem; margin-top: 2px; }
.ai-chat-head button {
    background: none; border: none; color: var(--text-dim); font-size: 1rem; cursor: pointer;
    width: 28px; height: 28px; border-radius: 6px;
}
.ai-chat-head button:hover { color: var(--text); background: rgba(255,255,255,.06); }

.ai-chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ai-chat-msg { max-width: 85%; padding: 10px 13px; border-radius: 12px; font-size: .87rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.ai-chat-msg-ai { align-self: flex-start; background: var(--bg-panel-2); color: var(--text); border-bottom-left-radius: 3px; }
.ai-chat-msg-istifadeci { align-self: flex-end; background: var(--accent); color: #06110F; border-bottom-right-radius: 3px; }
.ai-chat-yuklenir { opacity: .5; }

.ai-chat-foot { border-top: 1px solid var(--border); padding: 10px 12px 12px; }
.ai-chat-insana {
    display: block; width: 100%; margin-bottom: 8px;
    background: none; border: 1px dashed var(--border); color: var(--text-dim);
    font-size: .74rem; padding: 7px; border-radius: 8px; cursor: pointer;
}
.ai-chat-insana:hover { border-color: var(--accent); color: var(--accent); }
.ai-chat-form { display: flex; gap: 8px; }
.ai-chat-form input {
    flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 12px; color: var(--text); font-family: var(--f-body); font-size: .87rem;
}
.ai-chat-form input:focus { outline: none; border-color: var(--accent); }
.ai-chat-form button {
    width: 40px; height: 40px; flex-shrink: 0;
    background: var(--accent); color: #06110F; border: none; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ai-chat-form button svg { width: 18px; height: 18px; }

@media (max-width: 480px) {
    .ai-chat-float { bottom: 88px; right: 16px; width: 50px; height: 50px; }
    .ai-chat-panel { bottom: 0; right: 0; left: 0; width: 100%; max-width: 100%; height: 78vh; max-height: 78vh; border-radius: 16px 16px 0 0; }
}