/* ==================================================================
   SanalSunucun — Müşteri paneli tasarımı (WHMCS / Nexus bileşenleri)

   Yükleme sırası (includes/head.tpl):
     all.min.css → theme.min.css → site.css → panel-dark.css (üretilir)
     → custom.css → panel.css (bu dosya, en son)

   - Renkler yalnız --ss-* değişkenlerinden gelir (açık + koyu tema).
   - Turuncu yalnız vurgu: etkin menü, birincil düğme, bağlantı, odak.
   - Sabit renk içeren WHMCS kurallarının koyu karşılığı panel-dark.css'te
     otomatik üretilir; burada yalnız bilinçli tasarım kararları var.
   ================================================================== */

/* ---------- 0) Panel değişkenleri (site paletinin tamamlayıcıları) ---------- */
:root {
    --ss-panel-bg:      #f8f6f3;
    --ss-surface-3:     #f3f1ee;
    --ss-hover:         #faf7f4;
    --ss-text-faint:    #8a909b;
    --ss-input-bg:      #ffffff;
    --ss-inverted:      #2a2f37;   /* beyaz yazılı koyu zemin (Nexus bg-inverted) */
    --ss-inverted-2:    #3a4049;

    --ss-accent:        #ff6a00;
    --ss-accent-hover:  #e35d00;
    --ss-accent-text:   #d45500;
    --ss-accent-soft:   #fff2e8;
    --ss-accent-border: #ffd6b8;
    --ss-accent-ring:   rgba(255, 106, 0, 0.2);

    --ss-success:       #1f9d55;
    --ss-success-soft:  #e8f6ee;
    --ss-danger:        #d64545;
    --ss-danger-soft:   #fdeeee;
    --ss-warning:       #c98a12;
    --ss-warning-soft:  #fcf5e3;
    --ss-info:          #2f7fc1;
    --ss-info-soft:     #eaf2fa;
    --ss-pink:          #c2477c;
    --ss-pink-soft:     #f9ebf1;

    --ss-card-shadow:   0 1px 2px rgba(20, 24, 31, 0.04), 0 8px 24px -16px rgba(20, 24, 31, 0.16);
    --ss-pop-shadow:    0 18px 40px -16px rgba(20, 24, 31, 0.28);
    --ss-radius-sm:     10px;
}

[data-theme="dark"] {
    --ss-panel-bg:      #0d0e11;
    --ss-surface-3:     #1f2125;
    --ss-hover:         #1b1c20;
    --ss-text-faint:    #6f7480;
    --ss-input-bg:      #101114;
    --ss-inverted:      #34373e;
    --ss-inverted-2:    #43474f;

    --ss-accent:        #f57a24;
    --ss-accent-hover:  #ff8c3d;
    --ss-accent-text:   #ff9a52;
    --ss-accent-soft:   #2a1a0d;
    --ss-accent-border: #5a3414;
    --ss-accent-ring:   rgba(255, 122, 31, 0.28);

    --ss-success:       #4fb57e;
    --ss-success-soft:  #15241c;
    --ss-danger:        #e06a6a;
    --ss-danger-soft:   #2b1a1b;
    --ss-warning:       #d9a441;
    --ss-warning-soft:  #2a2316;
    --ss-info:          #6aa6d6;
    --ss-info-soft:     #16212d;
    --ss-pink:          #d9749f;
    --ss-pink-soft:     #2a1b22;

    --ss-card-shadow:   0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -18px rgba(0, 0, 0, 0.8);
    --ss-pop-shadow:    0 20px 44px -16px rgba(0, 0, 0, 0.85);
}

/* ---------- 1) Genel ---------- */
.ss-body--panel {
    background-color: var(--ss-panel-bg);
    color: var(--ss-text);
    font-size: 15px;
}
.ss-body--panel h1, .ss-body--panel h2, .ss-body--panel h3,
.ss-body--panel h4, .ss-body--panel h5, .ss-body--panel h6,
.ss-body--panel .h1, .ss-body--panel .h2, .ss-body--panel .h3,
.ss-body--panel .h4, .ss-body--panel .h5, .ss-body--panel .h6 {
    font-family: var(--ss-font-head);
    color: var(--ss-heading);
    letter-spacing: -0.01em;
}
.ss-body--panel hr { border-top-color: var(--ss-border); }
.ss-body--panel .text-muted,
.ss-body--panel small.text-muted { color: var(--ss-text-muted) !important; }
.ss-body--panel ::selection { background: var(--ss-accent); color: #fff; }
.ss-body--panel :focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 2px; }

/* Panel kapsayıcıları site header'ı ile aynı genişlikte */
@media (min-width: 1200px) {
    .ss-body--panel #main-body > .container {
        max-width: var(--ss-container);
        padding-inline: clamp(22px, 4vw, 56px);
    }
}

/* ---------- 2) Panel düzeni: sol hesap menüsü + içerik ----------
   Site başlığının hemen altında tek sayfa. Ayrı bant/sekme şeridi yok;
   başlık içerik sütununun üstünde, hesap menüsü solda. */
.ss-panel__grid { display: grid; gap: 24px; }
.ss-panel__grid > * { min-width: 0; }
/* DOM sırası: başlık, sol sütun, ikincil kartlar, içerik.
   Masaüstü: sol sütun 1-2. satır, ikincil kartlar altında; başlık + içerik sağda.
   Mobil: başlık → hesap menüsü/bağlam kartları → içerik → ikincil kartlar. */
.ss-panel__grid { row-gap: 0; }
@media (min-width: 992px) {
    .ss-panel__grid.has-aside {
        grid-template-columns: 260px minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        column-gap: 32px;
        align-items: start;
    }
    .ss-panel__grid.has-aside > .ss-panel__head { grid-column: 2; grid-row: 1; }
    .ss-panel__grid.has-aside > .ss-panel__aside { grid-column: 1; grid-row: 1 / span 2; }
    .ss-panel__grid.has-aside > .ss-panel__aside--alt { grid-row: 3; }
    .ss-panel__grid.has-aside > .ss-panel__main { grid-column: 2; grid-row: 2 / span 2; }
}
@media (max-width: 991.98px) {
    .ss-panel__grid > .ss-panel__main { order: 3; }
    .ss-panel__grid > .ss-panel__aside--alt { order: 4; }
    .ss-panel__grid > .ss-panel__aside { margin-bottom: 8px; }
}
.ss-panel__aside .sidebar:empty { display: none; }

/* Sayfa başlığı (içerik sütununun üstünde) */
.ss-panel__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.ss-panel__titles { min-width: 0; }
.ss-panel__head .master-breadcrumb,
.ss-panel__head .master-breadcrumb .breadcrumb {
    background: transparent;
    margin: 0;
    padding: 0;
}
.ss-panel__head .breadcrumb { font-size: 0.84rem; margin-bottom: 6px !important; }
.ss-panel__head .breadcrumb-item,
.ss-panel__head .breadcrumb-item a { color: var(--ss-text-muted); }
.ss-panel__head .breadcrumb-item a:hover { color: var(--ss-accent-text); }
.ss-panel__head .breadcrumb-item.active { color: var(--ss-text); }
.ss-panel__head .breadcrumb-item + .breadcrumb-item { padding-left: 0.5rem; }
.ss-panel__head .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--ss-text-faint);
    padding-right: 0.5rem;
}
.ss-body--panel .ss-panel__title {
    margin: 0;
    font-size: clamp(1.45rem, 2.4vw, 1.9rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ss-heading);
}
.ss-panel__lead {
    margin: 6px 0 0;
    color: var(--ss-text-muted);
    font-size: 0.96rem;
}

/* Araçlar: bildirimler, hesap değiştir, yöneticiye dön */
.ss-panel__tools { display: flex; align-items: center; gap: 8px; }
.ss-panel__tool {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 38px;
    height: 38px;
    padding: 0 11px;
    border: 1px solid var(--ss-border-strong);
    border-radius: var(--ss-radius-pill);
    background: var(--ss-surface);
    color: var(--ss-text-muted);
    font-family: var(--ss-font-head);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--ss-t-fast), border-color var(--ss-t-fast);
}
.ss-panel__tool:hover,
.ss-panel__tool:focus {
    color: var(--ss-accent-text);
    border-color: var(--ss-accent-border);
    text-decoration: none;
}
.ss-panel__tool.has-alerts { color: var(--ss-accent-text); }
.ss-panel__count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--ss-radius-pill);
    background: var(--ss-accent);
    color: #fff;
    font-size: 0.7rem;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--ss-panel-bg);
}
.ss-panel__tool--admin {
    border-color: var(--ss-accent-border);
    background: var(--ss-accent-soft);
    color: var(--ss-accent-text);
}

/* Hesap menüsü */
.ss-hnav {
    margin-bottom: 16px;
    padding: 8px;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
    background: var(--ss-surface);
    box-shadow: var(--ss-card-shadow);
    font-family: var(--ss-font-head);
}
.ss-hnav__toggle {
    display: none;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ss-heading);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.ss-hnav__toggle .ss-hnav__caret { margin-left: auto; }
.ss-hnav__toggle[aria-expanded="true"] .ss-hnav__caret { transform: rotate(180deg); }
@media (min-width: 992px) {
    .ss-hnav__body.collapse { display: block; height: auto !important; }
}
@media (max-width: 991.98px) {
    .ss-hnav { padding: 4px; }
    .ss-hnav__toggle { display: flex; }
    .ss-hnav__body { padding: 4px 4px 6px; }
}

.ss-hnav__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    color: var(--ss-text);
    font-size: 0.93rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
    transition: background var(--ss-t-fast), color var(--ss-t-fast);
}
.ss-hnav__link::-webkit-details-marker { display: none; }
.ss-hnav__link > i:first-child { width: 18px; color: var(--ss-text-faint); font-size: 0.95rem; }
.ss-hnav__link:hover,
.ss-hnav__link:focus-visible {
    background: var(--ss-hover);
    color: var(--ss-heading);
    text-decoration: none;
}
.ss-hnav__link .badge,
.ss-hnav__alt .badge {
    margin-left: auto;
    background: var(--ss-surface-3);
    color: var(--ss-text-muted);
    border-radius: var(--ss-radius-pill);
}
.ss-hnav__caret { font-size: 0.7rem; color: var(--ss-text-faint); transition: transform var(--ss-t-fast); }
.ss-hnav__grup > summary .ss-hnav__caret { margin-left: auto; }
.ss-hnav__grup[open] > summary .ss-hnav__caret { transform: rotate(180deg); }
.ss-hnav__grup[open] > summary { color: var(--ss-heading); }

.ss-hnav__alt {
    margin: 2px 0 6px;
    padding: 0 0 0 21px;
    list-style: none;
}
.ss-hnav__alt li { position: relative; border-left: 1px solid var(--ss-border); }
.ss-hnav__alt a {
    display: flex;
    align-items: center;
    margin-left: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--ss-text-muted);
    font-family: var(--ss-font-body);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
}
.ss-hnav__alt a:hover { background: var(--ss-hover); color: var(--ss-heading); text-decoration: none; }

/* Etkin sayfa (js/site.js işaretler) */
.ss-hnav a.is-active,
.ss-hnav a.is-active:hover {
    background: var(--ss-accent-soft);
    color: var(--ss-accent-text);
}
.ss-hnav__link.is-active > i:first-child { color: var(--ss-accent); }
.ss-hnav__alt li.is-active { border-left-color: var(--ss-accent); }
.ss-hnav__alt a.is-active { font-weight: 600; }
.ss-hnav__grup.has-active > summary > i:first-child { color: var(--ss-accent); }

/* Açılır menüler (panel + genel) */
.ss-body--panel .dropdown-menu {
    padding: 6px;
    border: 1px solid var(--ss-border);
    border-radius: 12px;
    background: var(--ss-surface);
    box-shadow: var(--ss-pop-shadow);
    color: var(--ss-text);
    font-size: 0.92rem;
}
.ss-body--panel .dropdown-menu li.dropdown-item { padding: 0 !important; background: none; }
.ss-body--panel .dropdown-item,
.ss-body--panel .dropdown-menu li.dropdown-item > a {
    display: block;
    border-radius: 8px;
    padding: 7px 12px !important;
    color: var(--ss-text);
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: nowrap;
}
.ss-body--panel .dropdown-item:hover,
.ss-body--panel .dropdown-item:focus,
.ss-body--panel .dropdown-menu li.dropdown-item > a:hover {
    background: var(--ss-accent-soft);
    color: var(--ss-accent-text);
    text-decoration: none;
}
.ss-body--panel .dropdown-item.active,
.ss-body--panel .dropdown-item:active {
    background: var(--ss-accent-soft);
    color: var(--ss-accent-text);
}
.ss-body--panel .dropdown-menu li.dropdown-item > a i { width: 18px; color: var(--ss-text-faint); }
.ss-body--panel .dropdown-divider { border-top-color: var(--ss-border); margin: 6px 4px; }
.ss-body--panel .dropdown-header { color: var(--ss-text-faint); }

/* Bildirim açılır kutusu (Bootstrap popover) */
.ss-body--panel .popover {
    border: 1px solid var(--ss-border);
    border-radius: 12px;
    background: var(--ss-surface);
    box-shadow: var(--ss-pop-shadow);
    font-family: var(--ss-font-body);
}
.ss-body--panel .popover-header { background: var(--ss-surface-2); border-bottom-color: var(--ss-border); color: var(--ss-heading); }
.ss-body--panel .popover-body { color: var(--ss-text); }
.ss-body--panel .bs-popover-bottom > .arrow::after,
.ss-body--panel .bs-popover-auto[x-placement^="bottom"] > .arrow::after { border-bottom-color: var(--ss-surface); }
.ss-body--panel .bs-popover-bottom > .arrow::before,
.ss-body--panel .bs-popover-auto[x-placement^="bottom"] > .arrow::before { border-bottom-color: var(--ss-border); }
.popover .client-alerts { margin: 0; padding: 0; list-style: none; }
.popover .client-alerts li a,
.popover .client-alerts li.none {
    display: flex;
    gap: 10px;
    padding: 8px 4px;
    color: var(--ss-text);
    text-decoration: none;
}
.popover .client-alerts li + li { border-top: 1px solid var(--ss-border); }
.popover .client-alerts li a:hover { color: var(--ss-accent-text); }
.popover .client-alerts .fa-exclamation-circle { color: var(--ss-danger); }
.popover .client-alerts .fa-exclamation-triangle { color: var(--ss-warning); }
.popover .client-alerts .fa-info-circle { color: var(--ss-info); }
.popover .client-alerts .fa-check-circle { color: var(--ss-success); }

/* ---------- 3) İçerik alanı ---------- */
section#main-body {
    background-color: var(--ss-panel-bg);
    min-height: 50vh;
    padding: 32px 0 64px;
}
.ss-body--panel .primary-content { min-width: 0; }

/* WHMCS "Powered by" satırı (lisans gereği kalır) — sade */
.ss-body--panel #main-body p.text-center:last-child,
.ss-body--panel .primary-content ~ p { color: var(--ss-text-faint); font-size: 0.82rem; }

/* ---------- 4) Kartlar ---------- */
.ss-body--panel .card,
.ss-body--panel .mc-promo-manage,
.ss-body--panel .mc-promo-login {
    background-color: var(--ss-surface);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
    box-shadow: var(--ss-card-shadow);
    color: var(--ss-text);
}
.ss-body--panel .primary-content .card,
.ss-body--panel .primary-content .mc-promo-manage,
.ss-body--panel .primary-content .mc-promo-login { margin-bottom: 20px; }
.ss-body--panel .card > .card-header,
.ss-body--panel .card > .card-footer { background-color: transparent; border-color: var(--ss-border); }
.ss-body--panel .card > .card-header {
    padding: 15px 22px;
    border-bottom: 1px solid var(--ss-border);
}
.ss-body--panel .card > .card-header:first-child { border-radius: calc(var(--ss-radius) - 1px) calc(var(--ss-radius) - 1px) 0 0; }
.ss-body--panel .card > .card-footer {
    padding: 12px 22px;
    border-top: 1px solid var(--ss-border);
    background-color: var(--ss-surface-2);
    font-size: 0.88rem;
}
.ss-body--panel .card > .card-footer:last-child { border-radius: 0 0 calc(var(--ss-radius) - 1px) calc(var(--ss-radius) - 1px); }
.ss-body--panel .card-header .card-title,
.ss-body--panel .card-header h3,
.ss-body--panel .card-header .h3 {
    font-family: var(--ss-font-head);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ss-heading);
    margin: 0;
}
.ss-body--panel .card-header .card-title > i { color: var(--ss-accent); margin-right: 2px; }
.ss-body--panel .primary-content .card-body { padding: 22px; }
.ss-body--panel .primary-content .card-body.extra-padding { padding: clamp(22px, 3vw, 36px); }
.ss-body--panel .primary-content > .card > .card-body > .card-title,
.ss-body--panel .primary-content .card-body > h3.card-title {
    font-size: 1.2rem;
    margin-bottom: 18px;
}

/* Renkli üst kenar vurguları (card-accent-*) → ince, sakin çizgi */
.ss-body--panel .card[class*="card-accent-"] { border-top-width: 1px; border-top-color: var(--ss-border); }

/* Anasayfa kartlarındaki başlık düğmeleri */
.ss-body--panel .primary-content .client-home-cards .card .card-header .btn,
.ss-body--panel .card-header .btn-xs,
.ss-body--panel .card-header .btn-sm {
    padding: 5px 12px;
    border: 1px solid var(--ss-border-strong);
    border-radius: var(--ss-radius-pill);
    background: var(--ss-surface);
    color: var(--ss-text);
    font-family: var(--ss-font-head);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
}
.ss-body--panel .primary-content .client-home-cards .card .card-header .btn:hover,
.ss-body--panel .card-header .btn-xs:hover,
.ss-body--panel .card-header .btn-sm:hover {
    border-color: var(--ss-accent-border);
    color: var(--ss-accent-text);
    background: var(--ss-accent-soft);
}
.ss-body--panel .client-home-cards .card-body { color: var(--ss-text-muted); }
.ss-body--panel .client-home-cards .card .list-group-item { padding: 12px 22px; }

/* Anasayfa: istatistik kutuları → site kartları */
.ss-body--panel .tiles { margin-bottom: 24px !important; }
.ss-body--panel .tiles > .row { margin: -8px; }
.ss-body--panel .tiles > .row > div { padding: 8px; }
.ss-body--panel .tiles .tile {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 22px;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
    background: var(--ss-surface);
    box-shadow: var(--ss-card-shadow);
    color: var(--ss-text);
    text-decoration: none;
    transition: transform var(--ss-t-fast), border-color var(--ss-t-fast), box-shadow var(--ss-t-fast);
}
.ss-body--panel .tiles .row > div:last-child .tile { border: 1px solid var(--ss-border); }
.ss-body--panel .tiles .tile:hover {
    background: var(--ss-surface);
    border-color: var(--ss-accent-border);
    transform: translateY(-2px);
    box-shadow: var(--ss-shadow);
}
.ss-body--panel .tiles .tile i,
.ss-body--panel .tiles .tile:hover i {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 18px;
    line-height: 1;
    color: var(--ss-accent);
    background: var(--ss-accent-soft);
}
.ss-body--panel .tiles .tile:has(.bg-color-blue) i { color: var(--ss-info); background: var(--ss-info-soft); }
.ss-body--panel .tiles .tile:has(.bg-color-green) i { color: var(--ss-success); background: var(--ss-success-soft); }
.ss-body--panel .tiles .tile:has(.bg-color-red) i { color: var(--ss-danger); background: var(--ss-danger-soft); }
.ss-body--panel .tiles .tile:has(.bg-color-gold) i { color: var(--ss-warning); background: var(--ss-warning-soft); }
.ss-body--panel .tiles .tile .stat {
    order: 2;
    margin-top: 6px;
    font-family: var(--ss-font-head);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ss-heading);
}
.ss-body--panel .tiles .tile .title {
    order: 1;
    padding-right: 52px;
    font-family: var(--ss-font-head);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ss-text-muted);
}
.ss-body--panel .tiles .tile .highlight { display: none; }

/* ---------- 5) Kenar çubuğu ---------- */
.ss-body--panel .sidebar .card { margin-bottom: 16px; overflow: hidden; }
.ss-body--panel .sidebar .card-header {
    padding: 13px 18px;
    background: transparent;
    border-bottom: 1px solid var(--ss-border);
}
.ss-body--panel .sidebar .card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ss-font-head);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ss-heading);
}
.ss-body--panel .sidebar .card-title > i:first-child { color: var(--ss-accent); }
.ss-body--panel .sidebar .card-minimise {
    margin-left: auto;
    color: var(--ss-text-faint);
    font-size: 0.75rem;
    cursor: pointer;
}
.ss-body--panel .sidebar .card-title .badge { margin-left: auto; }
.ss-body--panel .sidebar .card-body { padding: 16px 18px; font-size: 0.92rem; color: var(--ss-text); }
.ss-body--panel .sidebar .list-group { padding: 6px; }
.ss-body--panel .sidebar .list-group-item {
    margin: 0;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ss-text);
    font-size: 0.92rem;
    line-height: 1.35;
}
.ss-body--panel .sidebar .list-group-item + .list-group-item { margin-top: 1px; }
.ss-body--panel .sidebar .list-group-item-action:hover,
.ss-body--panel .sidebar .list-group-item-action:focus {
    background: var(--ss-hover);
    color: var(--ss-heading);
}
.ss-body--panel .sidebar .list-group-item i,
.ss-body--panel .sidebar .sidebar-menu-item-icon { color: var(--ss-text-faint); }
.ss-body--panel .sidebar .list-group-item.active,
.ss-body--panel .sidebar .list-group-item.active:hover,
.ss-body--panel .sidebar .list-group-item.active:focus {
    background: var(--ss-accent-soft);
    color: var(--ss-accent-text);
    font-weight: 600;
}
.ss-body--panel .sidebar .list-group-item.active { position: relative; }
.ss-body--panel .sidebar .list-group-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ss-accent);
}
.ss-body--panel .sidebar .list-group-item.active i,
.ss-body--panel .sidebar .list-group-item.active .sidebar-menu-item-icon { color: inherit; }
.ss-body--panel .sidebar .list-group-item .badge {
    background: var(--ss-surface-3);
    color: var(--ss-text-muted);
    border-radius: var(--ss-radius-pill);
    font-weight: 600;
}
.ss-body--panel .sidebar .card-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--ss-border);
    background: transparent;
}

/* ---------- 6) Düğmeler (yalnız WHMCS alanı; site .ss .btn ayrı) ---------- */
.ss-body--panel .btn:not(.ss *) {
    border-radius: var(--ss-radius-sm);
    font-family: var(--ss-font-head);
    font-weight: 600;
    transition: color var(--ss-t-fast), background-color var(--ss-t-fast), border-color var(--ss-t-fast), box-shadow var(--ss-t-fast);
}
.ss-body--panel .btn-lg:not(.ss *) { border-radius: 12px; }

.btn-default,
.btn-secondary,
.btn-light,
.btn-outline-secondary {
    background-color: var(--ss-surface);
    border-color: var(--ss-border-strong);
    color: var(--ss-text);
}
.btn-default:hover, .btn-default:focus, .btn-default.focus,
.btn-secondary:hover, .btn-secondary:focus,
.btn-light:hover, .btn-light:focus,
.btn-outline-secondary:hover {
    background-color: var(--ss-surface);
    border-color: var(--ss-accent-border);
    color: var(--ss-accent-text);
}
.btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default,
.btn-default:active:hover, .btn-default.active:hover,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle,
.btn-light:not(:disabled):not(.disabled):active {
    background-color: var(--ss-accent-soft);
    border-color: var(--ss-accent-border);
    color: var(--ss-accent-text);
}
.btn-default.disabled:hover, .btn-default[disabled]:hover,
.btn-default.disabled:focus, .btn-default[disabled]:focus {
    background-color: var(--ss-surface) !important;
    border-color: var(--ss-border-strong) !important;
}

.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
    color: #fff !important;
    background-color: var(--ss-accent);
    border-color: var(--ss-accent);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #fff !important;
    background-color: var(--ss-accent-hover);
    border-color: var(--ss-accent-hover);
}
.btn:focus, .btn.focus,
.btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus { box-shadow: 0 0 0 0.2rem var(--ss-accent-ring); }

.btn-outline-primary {
    color: var(--ss-accent-text) !important;
    border-color: var(--ss-accent-border);
    background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    color: #fff !important;
    background-color: var(--ss-accent);
    border-color: var(--ss-accent);
}

/* Durum düğmeleri: sabit Bootstrap renkleri yerine palet */
.btn-success { background-color: var(--ss-success); border-color: var(--ss-success); color: #fff; }
.btn-danger { background-color: var(--ss-danger); border-color: var(--ss-danger); color: #fff; }
.btn-info { background-color: var(--ss-info); border-color: var(--ss-info); color: #fff; }
.btn-warning { background-color: var(--ss-warning); border-color: var(--ss-warning); color: #fff; }
.btn-success:hover, .btn-danger:hover, .btn-info:hover, .btn-warning:hover { color: #fff; filter: brightness(1.07); }
.btn-success:hover { background-color: var(--ss-success); border-color: var(--ss-success); }
.btn-danger:hover { background-color: var(--ss-danger); border-color: var(--ss-danger); }
.btn-info:hover { background-color: var(--ss-info); border-color: var(--ss-info); }
.btn-warning:hover { background-color: var(--ss-warning); border-color: var(--ss-warning); }
.btn-outline-success { color: var(--ss-success); border-color: var(--ss-success); }
.btn-outline-danger { color: var(--ss-danger); border-color: var(--ss-danger); }
.btn-outline-info { color: var(--ss-info); border-color: var(--ss-info); }
.btn-outline-warning { color: var(--ss-warning); border-color: var(--ss-warning); }
.btn-dark { background-color: var(--ss-heading); border-color: var(--ss-heading); color: var(--ss-surface); }
.btn-link { color: var(--ss-accent-text); }
.btn-link:hover { color: var(--ss-accent-hover); }

/* Kenar çubuğu düğmeleri (ör. "Güncelle"): siyah yerine sakin çerçeveli */
body.ss-body--panel .sidebar .btn:not(.btn-primary):not(.btn-danger) {
    background-color: var(--ss-surface);
    border: 1px solid var(--ss-border-strong);
    color: var(--ss-text);
    border-radius: var(--ss-radius-pill);
    font-size: 0.85rem;
}
body.ss-body--panel .sidebar .btn:not(.btn-primary):not(.btn-danger):hover {
    border-color: var(--ss-accent-border);
    color: var(--ss-accent-text);
    background-color: var(--ss-accent-soft);
}

/* ---------- 7) Formlar ---------- */
.ss-body--panel .form-control,
.ss-body--panel .custom-select,
.ss-body--panel select.form-control,
.ss-body--panel .field,
.ss-body--panel .tt-input {
    background-color: var(--ss-input-bg);
    border: 1px solid var(--ss-border-strong);
    border-radius: var(--ss-radius-sm);
    color: var(--ss-text);
}
.ss-body--panel .form-control::placeholder { color: var(--ss-text-faint); opacity: 1; }
.ss-body--panel .form-control:focus,
.ss-body--panel .custom-select:focus {
    background-color: var(--ss-input-bg);
    border-color: var(--ss-accent-border);
    color: var(--ss-text);
    box-shadow: 0 0 0 0.2rem var(--ss-accent-ring);
}
.ss-body--panel .form-control:disabled,
.ss-body--panel .form-control[readonly] {
    background-color: var(--ss-surface-2);
    color: var(--ss-text-muted);
}
.ss-body--panel .input-group-text {
    background-color: var(--ss-surface-2);
    border-color: var(--ss-border-strong);
    color: var(--ss-text-muted);
    border-radius: var(--ss-radius-sm);
}
.ss-body--panel .input-group > .form-control:not(:first-child),
.ss-body--panel .input-group > .input-group-append > .btn,
.ss-body--panel .input-group > .input-group-append > .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ss-body--panel .input-group > .form-control:not(:last-child),
.ss-body--panel .input-group > .input-group-prepend > .btn,
.ss-body--panel .input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ss-body--panel label,
.ss-body--panel .col-form-label { color: var(--ss-text); font-weight: 500; }
.ss-body--panel .form-text,
.ss-body--panel .help-block { color: var(--ss-text-muted); }
.ss-body--panel .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ss-accent);
    border-color: var(--ss-accent);
}
.ss-body--panel .custom-control-label::before {
    background-color: var(--ss-input-bg);
    border-color: var(--ss-border-strong);
}
.ss-body--panel .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem var(--ss-accent-ring); }
.ss-body--panel .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--ss-accent-border); }
.ss-body--panel input[type="checkbox"],
.ss-body--panel input[type="radio"] { accent-color: var(--ss-accent); }

/* ---------- 8) Tablolar ---------- */
.ss-body--panel .table { color: var(--ss-text); }
.ss-body--panel .table th,
.ss-body--panel .table td { border-color: var(--ss-border); vertical-align: middle; }
.ss-body--panel .table thead th {
    border-bottom: 1px solid var(--ss-border);
    background: var(--ss-surface-2);
    color: var(--ss-text-muted);
    font-family: var(--ss-font-head);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.ss-body--panel .table-striped tbody tr:nth-of-type(odd) { background-color: var(--ss-surface-2); }
.ss-body--panel .table-hover tbody tr:hover,
.ss-body--panel .table-list tbody tr:hover { background-color: var(--ss-hover); color: var(--ss-text); }
.ss-body--panel .table-list { border-radius: var(--ss-radius); overflow: hidden; }
.ss-body--panel .table-container,
.ss-body--panel .dataTables_wrapper { color: var(--ss-text); }
.ss-body--panel .dataTables_wrapper .dataTables_info,
.ss-body--panel .dataTables_wrapper .dataTables_length { color: var(--ss-text-muted); }
.ss-body--panel .dataTables_wrapper .dataTables_filter label .form-control { background: var(--ss-input-bg); }

/* ---------- 9) Uyarılar, rozetler, sekmeler, sayfalama ---------- */
.ss-body--panel .alert {
    border: 1px solid var(--ss-border);
    border-left-width: 3px;
    border-radius: var(--ss-radius-sm);
    background: var(--ss-surface);
    color: var(--ss-text);
}
.ss-body--panel .alert-success { background: var(--ss-success-soft); border-color: var(--ss-success-soft); border-left-color: var(--ss-success); }
.ss-body--panel .alert-danger { background: var(--ss-danger-soft); border-color: var(--ss-danger-soft); border-left-color: var(--ss-danger); }
.ss-body--panel .alert-warning { background: var(--ss-warning-soft); border-color: var(--ss-warning-soft); border-left-color: var(--ss-warning); }
.ss-body--panel .alert-info { background: var(--ss-info-soft); border-color: var(--ss-info-soft); border-left-color: var(--ss-info); }
.ss-body--panel .alert-primary { background: var(--ss-accent-soft); border-color: var(--ss-accent-soft); border-left-color: var(--ss-accent); }
.ss-body--panel .alert-secondary,
.ss-body--panel .alert-light { background: var(--ss-surface-2); border-left-color: var(--ss-border-strong); }
.ss-body--panel .alert a:not(.btn),
.ss-body--panel .alert .alert-link { color: var(--ss-accent-text); }
.ss-body--panel .alert .close { color: var(--ss-text); text-shadow: none; }

.ss-body--panel .badge { border-radius: var(--ss-radius-pill); font-weight: 600; }
.ss-body--panel .badge-primary { background: var(--ss-accent); }
.ss-body--panel .badge-success { background: var(--ss-success); }
.ss-body--panel .badge-danger { background: var(--ss-danger); }
.ss-body--panel .badge-warning { background: var(--ss-warning); color: #fff; }
.ss-body--panel .badge-info { background: var(--ss-info); }
.ss-body--panel .badge-secondary,
.ss-body--panel .badge-light { background: var(--ss-surface-3); color: var(--ss-text); }

.ss-body--panel .nav-tabs { border-bottom-color: var(--ss-border); }
.ss-body--panel .nav-tabs .nav-link {
    color: var(--ss-text-muted);
    border-radius: var(--ss-radius-sm) var(--ss-radius-sm) 0 0;
    font-family: var(--ss-font-head);
    font-weight: 600;
}
.ss-body--panel .nav-tabs .nav-link:hover { border-color: transparent; color: var(--ss-heading); }
.ss-body--panel .nav-tabs .nav-link.active,
.ss-body--panel .nav-tabs .nav-item.show .nav-link {
    background: var(--ss-surface);
    border-color: var(--ss-border) var(--ss-border) var(--ss-surface);
    color: var(--ss-accent-text);
}
.ss-body--panel .nav-pills .nav-link { border-radius: var(--ss-radius-pill); color: var(--ss-text-muted); }
.ss-body--panel .nav-pills .nav-link.active,
.ss-body--panel .nav-pills .show > .nav-link { background: var(--ss-accent); color: #fff; }

.ss-body--panel .page-link {
    background: var(--ss-surface);
    border-color: var(--ss-border);
    color: var(--ss-text);
}
.ss-body--panel .page-link:hover { background: var(--ss-hover); color: var(--ss-accent-text); border-color: var(--ss-border); }
.ss-body--panel .page-item.active .page-link { background: var(--ss-accent); border-color: var(--ss-accent); color: #fff; }
.ss-body--panel .page-item.disabled .page-link { background: var(--ss-surface); border-color: var(--ss-border); color: var(--ss-text-faint); }
.ss-body--panel .page-item:first-child .page-link { border-radius: var(--ss-radius-sm) 0 0 var(--ss-radius-sm); }
.ss-body--panel .page-item:last-child .page-link { border-radius: 0 var(--ss-radius-sm) var(--ss-radius-sm) 0; }

.ss-body--panel .list-group-item {
    background-color: var(--ss-surface);
    border-color: var(--ss-border);
    color: var(--ss-text);
}
.ss-body--panel .list-group-item-action:hover,
.ss-body--panel .list-group-item-action:focus { background-color: var(--ss-hover); color: var(--ss-heading); }
.ss-body--panel .list-group-item.active {
    background-color: var(--ss-accent-soft);
    border-color: var(--ss-border);
    color: var(--ss-accent-text);
}
.ss-body--panel .list-group-item.disabled { background-color: var(--ss-surface); color: var(--ss-text-faint); }

.ss-body--panel .progress { background-color: var(--ss-surface-3); border-radius: var(--ss-radius-pill); }
.ss-body--panel .progress-bar { background-color: var(--ss-accent); }

/* ---------- 10) Modallar (panel ve site sayfalarında aynı) ---------- */
.modal-content {
    background-color: var(--ss-surface);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
    box-shadow: var(--ss-pop-shadow);
    color: var(--ss-text);
}
.modal-header,
.modal-footer { border-color: var(--ss-border); }
.modal-header .modal-title { font-family: var(--ss-font-head); font-weight: 700; color: var(--ss-heading); }
.modal .close { color: var(--ss-text); text-shadow: none; }
.modal-backdrop.show { opacity: 0.55; }
.modal-localisation .modal-content { background: var(--ss-surface); }
.modal-localisation .item-selector .item {
    border-radius: var(--ss-radius-sm);
    color: var(--ss-text);
    border: 1px solid var(--ss-border);
}
.modal-localisation .item-selector .item:hover,
.modal-localisation .item-selector .item.active {
    background: var(--ss-accent-soft);
    border-color: var(--ss-accent-border);
    color: var(--ss-accent-text);
}

/* ---------- 11) Nexus'un siyah (bg-inverted) düğmeleri → marka ---------- */
body.ss-body--panel #main-body .btn-outline-primary {
    color: var(--ss-accent-text) !important;
    border: 1px solid var(--ss-accent-border);
    background: transparent;
}
body.ss-body--panel #main-body .btn-outline-primary:hover,
body.ss-body--panel #main-body .btn-outline-primary:focus {
    background-color: var(--ss-accent);
    border-color: var(--ss-accent);
    color: #fff !important;
}
/* Anasayfa alan adı arama kutusu: Kayıt = birincil, Transfer = ikincil */
body.ss-body--panel #frmDomainHomepage .btn {
    border-radius: var(--ss-radius-sm) !important;
    font-family: var(--ss-font-head);
    font-weight: 600;
}
body.ss-body--panel #frmDomainHomepage .btn:not(#btnTransfer) {
    background: var(--ss-accent);
    border-color: var(--ss-accent);
    color: #fff;
}
body.ss-body--panel #frmDomainHomepage .btn:not(#btnTransfer):hover,
body.ss-body--panel #frmDomainHomepage .btn:not(#btnTransfer):focus {
    background: var(--ss-accent-hover);
    border-color: var(--ss-accent-hover);
    color: #fff;
}
body.ss-body--panel #frmDomainHomepage #btnTransfer,
body.ss-body--panel #frmDomainHomepage #btnTransfer:focus {
    background: var(--ss-surface);
    border-color: var(--ss-border-strong);
    color: var(--ss-text);
    box-shadow: none;
}
body.ss-body--panel #frmDomainHomepage #btnTransfer:hover {
    background: var(--ss-accent-soft);
    border-color: var(--ss-accent-border);
    color: var(--ss-accent-text);
}
body.ss-body--panel .btn.btn-success.open-modal.twofa-config-link.enable:hover {
    background-color: var(--ss-success);
    border-color: var(--ss-success);
    filter: brightness(1.07);
}

/* Sipariş formu ürün kartı: "Satın Al" ana eylemdir → turuncu */
body.ss-body--panel #order-standard_cart .products .product footer .btn-order-now {
    background: var(--ss-accent);
    border-color: var(--ss-accent);
    color: #fff;
    border-radius: var(--ss-radius-pill);
}
body.ss-body--panel #order-standard_cart .products .product footer .btn-order-now:hover {
    background: var(--ss-accent-hover);
    border-color: var(--ss-accent-hover);
    color: #fff;
}

/* ---------- 12) Sipariş formu kenar çubuğu (.cart-sidebar) = panel kenar çubuğu ----------
   Nexus bunları #order-standard_cart ID'si ile yazdığı için aynı ağırlıkta karşılanır. */
body.ss-body--panel #order-standard_cart .cart-sidebar .card { margin-bottom: 16px; overflow: hidden; }
body.ss-body--panel #order-standard_cart .cart-sidebar .card-header {
    padding: 13px 18px;
    border-bottom: 1px solid var(--ss-border);
}
body.ss-body--panel #order-standard_cart .cart-sidebar .card-title,
body.ss-body--panel #order-standard_cart .cart-sidebar .card-sidebar .panel-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ss-font-head);
    font-size: 0.92rem !important;
    font-weight: 700;
    color: var(--ss-heading);
}
body.ss-body--panel #order-standard_cart .cart-sidebar .card-minimise { margin-left: auto; color: var(--ss-text-faint); font-size: 0.75rem; }
body.ss-body--panel #order-standard_cart .cart-sidebar .list-group { padding: 6px; font-size: 0.92rem; }
body.ss-body--panel #order-standard_cart .cart-sidebar .list-group-item {
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ss-text);
    font-size: 0.92rem;
}
body.ss-body--panel #order-standard_cart .cart-sidebar .list-group-item-action:hover {
    background: var(--ss-hover);
    color: var(--ss-heading);
}
body.ss-body--panel #order-standard_cart .cart-sidebar .list-group-item i { color: var(--ss-text-faint); }
body.ss-body--panel #order-standard_cart .cart-sidebar .list-group-item.active,
body.ss-body--panel #order-standard_cart .cart-sidebar .list-group-item.active:hover,
body.ss-body--panel #order-standard_cart .cart-sidebar .list-group-item.active:focus {
    position: relative;
    background: var(--ss-accent-soft);
    color: var(--ss-accent-text);
    font-weight: 600;
}
body.ss-body--panel #order-standard_cart .cart-sidebar .list-group-item.active i { color: inherit; }
body.ss-body--panel #order-standard_cart .cart-sidebar .list-group-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ss-accent);
}
body.ss-body--panel #order-standard_cart .cart-sidebar .list-group-item .badge {
    background: var(--ss-surface-3);
    color: var(--ss-text-muted);
    border-radius: var(--ss-radius-pill);
}
body.ss-body--panel #order-standard_cart .cart-sidebar .card-footer { background: transparent; border-top: 1px solid var(--ss-border); }

/* Sayfa başlığıyla aynı olan ilk kart başlığı (js/site.js işaretler) */
.ss-body--panel .ss-baslik-kopya { display: none !important; }
.ss-body--panel .card-header:has(> .ss-baslik-kopya:only-child) { display: none; }

/* ---------- 13) İçerik başlık ölçeği ----------
   WHMCS şablonları h3/h4'ü alt başlık ve etiket olarak kullanır; Bootstrap'ın
   iri boyutları yerine panel ölçeği. */
.ss-body--panel .primary-content h2 { font-size: 1.35rem; }
.ss-body--panel .primary-content h3 { font-size: 1.15rem; }
.ss-body--panel .primary-content h4 { font-size: 1rem; }
.ss-body--panel .primary-content h5 { font-size: 0.95rem; }

/* Ürün / hizmet detayı: durum kutusu + bilgi listesi */
.ss-body--panel div.product-details div.product-icon {
    padding: 28px 20px 22px;
    background: var(--ss-surface-2);
    border: 1px solid var(--ss-border);
    border-bottom: 0;
    border-radius: var(--ss-radius) var(--ss-radius) 0 0;
    font-size: 44px;
}
.ss-body--panel div.product-details .product-icon .fa-stack .fa-circle { color: var(--ss-surface-3); }
.ss-body--panel div.product-details .product-icon .fa-inverse { color: var(--ss-text-muted); }
.ss-body--panel div.product-details .product-icon h3 { margin: 12px 0 2px; font-size: 1.25rem; }
.ss-body--panel div.product-details .product-icon h4 { margin: 0; font-size: 0.92rem; font-weight: 500; color: var(--ss-text-muted); font-family: var(--ss-font-body); }
.ss-body--panel .product-status { border-radius: var(--ss-radius); overflow: hidden; }
.ss-body--panel .product-status-text {
    padding: 7px;
    font-family: var(--ss-font-head);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.ss-body--panel .product-status-active { background-color: var(--ss-success); }
.ss-body--panel .product-status-pending { background-color: var(--ss-warning); }
.ss-body--panel .product-status-suspended { background-color: var(--ss-info); }
.ss-body--panel .product-status-terminated,
.ss-body--panel .product-status-cancelled,
.ss-body--panel .product-status-fraud { background-color: var(--ss-inverted); }
.ss-body--panel .product-details > .row > .col-md-6.text-center {
    text-align: left !important;
    color: var(--ss-heading);
    font-weight: 600;
}
.ss-body--panel .product-details > .row > .col-md-6.text-center h4 {
    margin: 16px 0 3px;
    font-family: var(--ss-font-head);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ss-text-muted);
}
.ss-body--panel .product-details > .row > .col-md-6.text-center h4:first-child { margin-top: 0; }

/* Liste tabloları dar ekranda yatay kaydırılır (sayfa taşmaz) */
.ss-body--panel .table-container .listtable,
.ss-body--panel .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- 14) Müşteri bilgileri: hesap türü, firma bilgileri (js/musteri-alanlari.js) ---------- */
.ss-gizli { display: none !important; }
.ss-zorunlu { color: var(--ss-danger); }
.ss-hesap-turu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 30px; /* sütun aralığı alttaki İsim / Soyisim satırıyla aynı */
}
.ss-hesap-turu__secenek {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 72px;
    padding: 14px 16px;
    border: 1px solid var(--ss-border-strong);
    border-radius: 14px;
    background: var(--ss-input-bg);
    color: var(--ss-text);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.ss-hesap-turu__secenek:hover { border-color: var(--ss-accent-border); }
.ss-hesap-turu__secenek:focus-visible { outline: none; box-shadow: 0 0 0 .2rem var(--ss-accent-ring); }
.ss-hesap-turu__simge {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--ss-surface-3);
    color: var(--ss-text-muted);
    font-size: 17px;
    transition: background-color .15s ease, color .15s ease;
}
.ss-hesap-turu__metin { flex: 1 1 auto; min-width: 0; }
.ss-hesap-turu__metin strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.ss-hesap-turu__metin small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--ss-text-muted); }
.ss-hesap-turu__radyo {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 2px solid var(--ss-border-strong);
    border-radius: 50%;
    background: var(--ss-input-bg);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ss-hesap-turu__secenek[aria-checked="true"] {
    border-color: var(--ss-accent);
    background: var(--ss-accent-soft);
}
.ss-hesap-turu__secenek[aria-checked="true"] .ss-hesap-turu__simge { background: var(--ss-accent); color: #fff; }
.ss-hesap-turu__secenek[aria-checked="true"] .ss-hesap-turu__radyo {
    border-color: var(--ss-accent);
    box-shadow: inset 0 0 0 4px var(--ss-input-bg);
    background: var(--ss-accent);
}
.ss-hesap-turu-grup { margin-bottom: 1.25rem; container-type: inline-size; }
.ss-firma-grup {
    margin: 4px 0 16px;
    padding: 14px 16px 4px;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-sm);
    background: var(--ss-surface-2);
}
.ss-firma-grup__baslik { font-weight: 600; color: var(--ss-text); }
/* Seçici dar bir alandaysa (profil sayfasının sütunu, telefon) kartlar alt alta */
@container (max-width: 560px) {
    .ss-hesap-turu { grid-template-columns: 1fr; }
}

/* ---------- 15) Açık / kapalı anahtarları (bootstrap-switch: e-posta listesi, SSO, kart saklama) ----------
   WHMCS anahtarları bootstrap-switch ile kurar (SSO ve ödeme sayfası onun olaylarını dinler), bu yüzden
   eklenti kalır, yalnız görünümü değişir: yazısız küçük ray + kayan yuvarlak tutamaç (yönetim modüllerindeki
   anahtarla aynı). Tüm ray tıklanabilir: tutamaç (label) rayı kaplar; eklenti tıklamada durumu çevirir.
   Sürükleme görsel olarak kapalı (margin-left sabit), bırakınca eklentinin kararı uygulanır. */
.bootstrap-switch {
    --ss-anahtar-kapali: #cfd3da;
    position: relative;
    display: inline-block;
    width: 44px !important;
    min-width: 0 !important; /* Nexus: -small 79px, -mini 71px */
    height: 24px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    background: var(--ss-anahtar-kapali);
    overflow: hidden;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color .2s ease, box-shadow .15s ease;
}
[data-theme="dark"] .bootstrap-switch { --ss-anahtar-kapali: #43474f; }
.bootstrap-switch.bootstrap-switch-on { background: var(--ss-accent); }
.bootstrap-switch.bootstrap-switch-focused { box-shadow: 0 0 0 .2rem var(--ss-accent-ring); }
.bootstrap-switch.bootstrap-switch-disabled,
.bootstrap-switch.bootstrap-switch-readonly { opacity: .5; cursor: not-allowed; }
.bootstrap-switch .bootstrap-switch-container {
    position: absolute;
    inset: 0;
    width: auto !important;
    margin-left: 0 !important;
}
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.bootstrap-switch .bootstrap-switch-label {
    position: absolute !important;
    inset: 0;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 0;
    color: transparent;
}
.bootstrap-switch .bootstrap-switch-label::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(20, 24, 31, 0.3);
    transition: transform .2s ease;
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label::before { transform: translateX(20px); }

/* Anahtar + yanındaki metin (metne tıklamak da anahtarı çevirir) */
.ss-anahtar-satir {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    cursor: pointer;
    font-weight: 500;
    color: var(--ss-text);
    user-select: none;
}

/* ---------- 16) Form hataları (js/form-hatalari.js): kırmızı alan + kart başlığı altında hata listesi ---------- */
.ss-body--panel .form-control.ss-hatali,
.ss-body--panel .field.ss-hatali,
.ss-body--panel .custom-select.ss-hatali,
.ss-hatali {
    border-color: var(--ss-danger) !important;
    box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--ss-danger) 18%, transparent) !important;
}
.ss-grup-hatali > label:not(.field-icon),
.ss-grup-hatali .field-icon,
.ss-grup-hatali .field-icon i { color: var(--ss-danger) !important; }
input[type="checkbox"].ss-hatali { outline: 2px solid var(--ss-danger); outline-offset: 2px; }
.ss-kart-hata,
.ss-alan-hata {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 4px 0 18px;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--ss-danger) 35%, transparent);
    border-radius: var(--ss-radius-sm);
    background: var(--ss-danger-soft);
    color: var(--ss-danger);
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
}
.ss-alan-hata { margin: 8px auto 14px; max-width: 560px; }
.ss-kart-hata > i,
.ss-alan-hata > i { margin-top: 3px; }
.ss-kart-hata ul,
.ss-alan-hata ul { margin: 0; padding: 0; list-style: none; }
.ss-kart-hata li + li,
.ss-alan-hata li + li { margin-top: 3px; }
.ss-hata-var { scroll-margin-top: 110px; }

/* ---------- 17) Müşteri girişi (login.tpl): kayıt formuyla aynı dil ---------- */
.ss-giris { display: flex; justify-content: center; padding: 8px 0 28px; }
.ss-giris .login-form { width: 100%; max-width: 460px; }
.ss-giris__kart { border-radius: 18px; overflow: hidden; }
.ss-giris__kart > .card-body { padding: 32px 32px 28px; }
.ss-giris__bas { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.ss-giris__simge {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--ss-accent-soft);
    color: var(--ss-accent);
    font-size: 20px;
}
.ss-body--panel .ss-giris__baslik { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; }
.ss-giris__aciklama { margin: 3px 0 0; font-size: 14px; color: var(--ss-text-muted); }
.ss-giris .form-group { margin-bottom: 16px; }
.ss-giris .form-group > label { display: block; margin-bottom: 6px; font-weight: 500; }
.ss-giris .field { height: 44px; }
/* Nexus'un simgeli alan stilleri yalnız #registration / sipariş formuna bağlı; girişte kendimiz */
.ss-giris .prepend-icon { position: relative; }
.ss-giris .prepend-icon .field-icon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    width: 42px;
    height: 44px;
    margin: 0;
    line-height: 44px;
    text-align: center;
    color: var(--ss-text-faint);
    pointer-events: none;
}
.ss-giris .prepend-icon .field { padding-left: 40px; }
.ss-sifre { position: relative; flex-wrap: nowrap; }
.ss-body--panel .ss-sifre > .pw-input {
    padding-right: 46px;
    border-radius: var(--ss-radius-sm) !important;
}
.ss-sifre .btn-reveal-pw {
    position: absolute;
    top: 50%;
    right: 6px;
    z-index: 5;
    padding: 6px 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ss-text-faint);
    line-height: 1;
    transform: translateY(-50%);
    cursor: pointer;
}
.ss-sifre .btn-reveal-pw:hover { color: var(--ss-text); background: var(--ss-surface-3); }
.ss-sifre .btn-reveal-pw:focus-visible { outline: none; box-shadow: 0 0 0 .2rem var(--ss-accent-ring); }
.ss-giris__satir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin: 4px 0 22px;
    font-size: 14px;
}
.ss-body--panel .ss-onay {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 400;
    color: var(--ss-text);
    cursor: pointer;
    user-select: none;
}
.ss-onay input { width: 16px; height: 16px; margin: 0; accent-color: var(--ss-accent); cursor: pointer; }
.ss-body--panel .ss-giris__unuttum { color: var(--ss-accent-text); font-weight: 500; }
.ss-giris__dugme {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px !important;
    font-size: 16px;
    font-weight: 600;
}
.ss-giris__kayit {
    padding: 16px 24px;
    border-top: 1px solid var(--ss-border);
    background: var(--ss-surface-2);
    font-size: 14px;
    text-align: center;
    color: var(--ss-text-muted);
}
.ss-body--panel .ss-giris__kayit a { color: var(--ss-accent-text); font-weight: 600; }
@media (max-width: 575.98px) {
    .ss-giris__kart > .card-body { padding: 24px 20px 22px; }
}
.ss-hatali:focus,
.ss-hatali:focus-visible { outline: none !important; }

/* ---------- 18) Şifre sıfırlama (password-reset-*.tpl): giriş kartının devamı ---------- */
.ss-giris__kapsayici { width: 100%; max-width: 460px; }
.ss-giris__simge--basari { background: var(--ss-success-soft); color: var(--ss-success); }
.ss-giris__not { margin: 0 0 18px; font-size: 14px; color: var(--ss-text-muted); }
.ss-giris a.ss-giris__dugme { text-decoration: none; text-align: center; }
.ss-giris .btn-default.ss-giris__dugme { border: 1px solid var(--ss-border-strong); background: var(--ss-surface); color: var(--ss-text); }
/* Şifre gücü (includes/pwstrength.tpl): ince çubuk, palet renkleri, sade ipucu kutusu */
.ss-sifre-guc > br { display: none; }
.ss-giris #passwordStrengthBar {
    height: 6px;
    margin: 4px 0 12px !important;
    border-radius: 99px;
    background: var(--ss-surface-3);
}
.ss-giris #passwordStrengthBar .progress-bar { border-radius: 99px; transition: width .2s ease; }
.ss-giris #passwordStrengthBar .bg-danger { background-color: var(--ss-danger) !important; }
.ss-giris #passwordStrengthBar .bg-warning { background-color: var(--ss-warning) !important; }
.ss-giris #passwordStrengthBar .bg-success { background-color: var(--ss-success) !important; }
.ss-sifre-guc .alert {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-sm);
    background: var(--ss-surface-2);
    color: var(--ss-text-muted);
    line-height: 1.5;
}
.ss-sifre-guc .alert strong { color: var(--ss-text); }
.ss-sifre-guc .alert .fa-info-circle { display: none; }
/* WHMCS'in güç / eşleşme sınıfları: Bootstrap'in simgesi yerine sade çerçeve rengi */
.ss-giris .form-control.is-invalid,
.ss-giris .form-control.is-warning,
.ss-giris .form-control.is-valid { background-image: none; padding-right: 46px; }
.ss-giris .form-control.is-invalid { border-color: var(--ss-danger); }
.ss-giris .form-control.is-warning { border-color: var(--ss-warning); }
.ss-giris .form-control.is-valid { border-color: var(--ss-success); }
#inputNewPassword2Msg .form-text { margin: 6px 0 0; font-size: 13px; color: var(--ss-danger) !important; }