/* ==================================================================
   SanalSunucun — WHMCS (Nexus) özelleştirmeleri
   1) Nexus değişkenlerini marka paletine eşler (açık + koyu tema)
   2) Site kabuğu (header/footer) ile WHMCS düzeni arasındaki uyum
   3) Sepet düğmesi vb. site başlığı ekleri
   Panel tasarımı: css/panel.css — koyu tema katmanı: css/panel-dark.css

   Site renkleri css/site.css içindeki --ss-* değişkenlerinden gelir;
   koyu tema html[data-theme="dark"] ile açılır (js/site-theme.js).
   ================================================================== */

/* ---------- 1) Nexus değişkenleri → site değişkenleri ----------
   Nexus/WHMCS bileşenleri bu değişkenleri kullanır. Hepsi site paletine
   (--ss-*, css/site.css + css/panel.css) bağlıdır; açık/koyu tema
   değerleri tek kaynaktan gelir, burada ayrı koyu tema bloğu yoktur. */
:root {
    --white: #fff;

    /* Nötr tonlar (Nexus yardımcı sınıfları için) */
    --neutral-50: #fbf7f3;
    --neutral-100: #f6f4f2;
    --neutral-200: #ececef;
    --neutral-300: #dfe0e4;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #5c6472;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #161a20;
    --neutral-950: #0f1318;

    /* Marka (turuncu) skalası */
    --primary-50: #fff7f0;
    --primary-100: #fff2e8;
    --primary-200: #ffd9bf;
    --primary-300: #ffb780;
    --primary-400: #ff9440;
    --primary-500: #ff7a1f;
    --primary-600: #ff6a00;
    --primary-700: #ed5e00;
    --primary-800: #cc5200;
    --primary-900: #a34200;
    --primary-950: #7a3100;

    --primary: var(--ss-accent);
    --primary-lifted: var(--ss-accent-hover);
    --primary-accented: var(--ss-accent-hover);

    --secondary: var(--ss-text-muted);
    --secondary-lifted: var(--ss-text);
    --secondary-accented: var(--ss-heading);

    --success: var(--ss-success);
    --success-lifted: var(--ss-success);
    --success-accented: var(--ss-success);

    --info: var(--ss-info);
    --info-lifted: var(--ss-info);
    --info-accented: var(--ss-info);

    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    --warning: var(--ss-warning);
    --warning-lifted: var(--ss-warning);
    --warning-accented: var(--ss-warning);

    --error: var(--ss-danger);
    --error-lifted: var(--ss-danger);
    --error-accented: var(--ss-danger);

    /* Nexus "grayscale"/"bg-inverted": üstünde beyaz yazı olan koyu zemin
       (durum etiketleri, bazı düğmeler) → iki temada da koyu kalan nötr */
    --grayscale: var(--ss-inverted);
    --grayscale-lifted: var(--ss-inverted-2);
    --grayscale-accented: var(--ss-surface-3);

    --neutral: var(--ss-text-muted);
    --neutral-lifted: var(--ss-text);
    --neutral-accented: var(--ss-heading);

    --text-inverted: #f6f7f9; /* ters (koyu) zemin üstündeki yazı: iki temada açık */
    --text-muted: var(--ss-text-faint);
    --text-lifted: var(--ss-text-muted);
    --text-accented: var(--ss-text);
    --text: var(--ss-text);

    --border-muted: var(--ss-border);
    --border: var(--ss-border-strong);
    --border-lifted: var(--ss-border-strong);
    --border-accented: var(--ss-text-faint);

    --bg: var(--ss-surface);
    --bg-muted: var(--ss-surface-2);
    --bg-lifted: var(--ss-panel-bg);
    --bg-accented: var(--ss-surface-3);
    --bg-inverted: var(--ss-inverted);

    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Site ile uyumlu yuvarlatma */
    --rounding-sm: 8px;
    --rounding-md: 10px;
    --rounding-lg: 14px;

    --letter-spacing: 0em;
    --disabled-opacity: 45%;
}

[data-theme="dark"] { color-scheme: dark; }

/* ---------- 2) Genel düzen ---------- */
html,
body {
    /* Nexus height:100% veriyor; sticky site header'ı bozmaması için sıfırla */
    height: auto;
    min-height: 100%;
    background-color: var(--ss-bg);
}

body.ss-body {
    font-family: var(--ss-font-body);
    color: var(--ss-text);
    overflow-x: clip;
}

/* Kabuk sarmalayıcıları kutu üretmez: sticky header body'ye göre çalışır */
.ss-contents { display: contents; }

/* Bootstrap'ın temel link rengi (sınıflı linklere dokunmaz) */
a { color: var(--ss-accent-text); }
a:hover { color: var(--ss-accent-hover); }

/* ---------- 3) Site başlığı: WHMCS ekleri ---------- */
.ss .topbar__logout {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.84rem;
}
.ss .topbar__logout:hover { color: var(--ss-orange); }

/* Sepet düğmesi */
.ss .header-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1.5px solid var(--ss-border);
    color: var(--ss-heading);
    background: var(--ss-surface);
    transition: border-color var(--ss-t-fast), color var(--ss-t-fast), transform var(--ss-t-fast);
}
.ss .header-cart:hover {
    color: var(--ss-orange);
    border-color: var(--ss-orange);
    transform: translateY(-1px);
}
.ss .header-cart svg { width: 21px; height: 21px; }
.ss .header-cart__count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--ss-radius-pill);
    background: var(--ss-orange);
    color: #fff;
    font-family: var(--ss-font-head);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--ss-bg);
}
.ss .header-cart__count.is-empty { display: none; }

.ss .header-actions__panel { padding: 12px 18px; }
@media (max-width: 1240px) {
    .ss .header-actions__panel { display: none; }
}

/* ---------- Site footer: dil/para birimi düğmesi ---------- */
.ss .site-footer__locale {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--ss-radius-pill);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.88rem;
    cursor: pointer;
    transition: border-color var(--ss-t-fast), color var(--ss-t-fast);
}
.ss .site-footer__locale:hover { border-color: var(--ss-orange); color: var(--ss-orange); }
.ss .site-footer__locale svg { width: 16px; height: 16px; }

/* ---------- Tema modülü ekleri ---------- */
/* Bülten formu bal küpü (botlar doldurur, insanlar görmez) */
.ss .newsletter__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* Footer iletişim listesinde adres satırı */
.ss .footer-contact li > span:last-child { line-height: 1.5; }
/* Font Awesome ile gelen ek sosyal medya simgeleri */
.ss .site-footer__social i,
.ss .contact-social i { font-size: 17px; line-height: 1; }