/* ============================================================================
   SMMSPOT — SosyalX Perfect Panel Teması
   ----------------------------------------------------------------------------
   Figma (gorsell/*.PNG) birebir uygulama. Koyu tema varsayılan, .sx-light ile
   gündüz modu. bootstrap.css'ten sonra yüklenir ve onu tamamen ezer.
   Panelin kendi JS'inin ürettiği yapılar (select2, #required_fields,
   .services-search-container, #notify-wrapper, .tickets-uploader, modallar,
   tooltip) bu dosyada tasarıma bağlanır — ID/hook'lara dokunulmaz.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;450;500;550;600;700&display=swap');

/* ----------------------------- 1. Değişkenler ---------------------------- */
:root {
    --sx-bg: #060608;
    --sx-shell: #0a0a0d;
    --sx-card: #0d0d11;
    --sx-card-2: #121217;
    --sx-field: #15151b;
    --sx-field-2: #1a1a21;
    --sx-border: rgba(255, 255, 255, .07);
    --sx-border-2: rgba(255, 255, 255, .13);
    --sx-text: #f4f4f6;
    --sx-text-2: #9a9aa6;
    --sx-text-3: #6b6b77;
    --sx-inv: #0b0b0e;

    --sx-accent: #2f6bff;
    --sx-accent-2: #5b8cff;
    --sx-accent-tx: #7ea6ff;
    --sx-accent-soft: rgba(47, 107, 255, .14);

    --sx-green: #22c55e;
    --sx-green-tx: #4ade80;
    --sx-green-soft: rgba(34, 197, 94, .12);
    --sx-red: #ef4444;
    --sx-red-tx: #f87171;
    --sx-red-soft: rgba(239, 68, 68, .12);
    --sx-amber: #f59e0b;
    --sx-amber-tx: #fbbf24;
    --sx-amber-soft: rgba(245, 158, 11, .12);
    --sx-cyan: #22d3ee;
    --sx-cyan-soft: rgba(34, 211, 238, .12);
    --sx-pink: #ec4899;
    --sx-pink-soft: rgba(236, 72, 153, .13);
    --sx-orange-tx: #fb923c;
    --sx-orange-soft: rgba(251, 146, 60, .12);

    --sx-r-lg: 16px;
    --sx-r: 12px;
    --sx-r-sm: 9px;
    --sx-side-w: 224px;
    --sx-top-h: 58px;
    --sx-shadow: 0 20px 44px -24px rgba(0, 0, 0, .85);
    --sx-dots: rgba(255, 255, 255, .065);

    --sx-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --sx-display: 'Space Grotesk', 'Inter', sans-serif;
    color-scheme: dark;
}

.sx-light {
    --sx-bg: #f4f5f8;
    --sx-shell: #ffffff;
    --sx-card: #ffffff;
    --sx-card-2: #f4f5f8;
    --sx-field: #eef0f4;
    --sx-field-2: #e6e8ee;
    --sx-border: rgba(15, 23, 42, .09);
    --sx-border-2: rgba(15, 23, 42, .16);
    --sx-text: #0f172a;
    --sx-text-2: #475569;
    --sx-text-3: #64748b;
    --sx-inv: #ffffff;
    --sx-accent-tx: #2456d6;
    --sx-accent-soft: rgba(47, 107, 255, .1);
    --sx-green-tx: #15803d;
    --sx-red-tx: #b91c1c;
    --sx-amber-tx: #b45309;
    --sx-orange-tx: #c2410c;
    --sx-shadow: 0 18px 40px -26px rgba(15, 23, 42, .35);
    --sx-dots: rgba(15, 23, 42, .08);
    color-scheme: light;
}

/* ------------------------------- 2. Taban -------------------------------- */
html { font-size: 15px; }

body {
    margin: 0;
    background: var(--sx-bg);
    color: var(--sx-text);
    font-family: var(--sx-font);
    font-size: .93rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.sx-notrans *, .sx-notrans *::before, .sx-notrans *::after { transition: none !important; }

::selection { background: var(--sx-accent); color: #fff; }

* { box-sizing: border-box; }

a { color: var(--sx-accent-tx); text-decoration: none; transition: color .18s; }
a:hover, a:focus { color: var(--sx-accent-2); text-decoration: none; }

h1, h2, h3, h4, h5, h6 { font-family: var(--sx-display); color: var(--sx-text); margin: 0 0 10px; font-weight: 600; letter-spacing: -.01em; }

img { max-width: 100%; }

button { font-family: inherit; cursor: pointer; }

:focus-visible { outline: 2px solid var(--sx-accent); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* İnce kaydırma çubukları */
* { scrollbar-width: thin; scrollbar-color: var(--sx-field-2) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--sx-field-2); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* --------------------------- 3. Genel yardımcılar ------------------------ */
.sx-mb { margin-bottom: 18px; }
.sx-mt { margin-top: 18px; }
.sx-grow { flex: 1 1 auto; min-width: 0; }
.sx-break { word-break: break-all; overflow-wrap: anywhere; }
.sx-muted { color: var(--sx-text-2); }
.sx-dim { color: var(--sx-text-3); }
.sx-strong { color: var(--sx-text); font-weight: 600; }
.sx-xs { font-size: .78rem; }
.sx-sm { font-size: .86rem; }
.sx-center { text-align: center; }
.sx-right { text-align: right; }
.sx-nowrap { white-space: nowrap; }
.sx-hide { display: none !important; }
.sx-flex { display: flex; align-items: center; gap: 10px; }
.sx-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sx-wrap-gap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

@media (max-width: 767px) { .sx-hide-xs { display: none !important; } }
@media (min-width: 1024px) { .sx-only-mobile { display: none !important; } }

/* Nokta deseni (sayfa başlıkları) */
.sx-dotted {
    position: relative;
}
.sx-dotted::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--sx-dots) 1.1px, transparent 1.1px);
    background-size: 13px 13px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 82%), linear-gradient(to right, #000, transparent 30%, transparent 70%, #000);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 82%);
    pointer-events: none;
}

/* ------------------------------ 4. Uygulama kabuğu ----------------------- */
.sx-app {
    display: flex;
    min-height: 100vh;
    background: var(--sx-bg);
}

/* ---- Sol menü ---- */
.sx-side {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sx-side-w);
    background: var(--sx-shell);
    border-right: 1px solid var(--sx-border);
    display: flex;
    flex-direction: column;
    z-index: 40;
    transition: transform .22s ease, width .18s ease;
}

.sx-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 15px 14px 12px;
}

.sx-logo { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.sx-logo img { max-height: 30px; width: auto; }
.sx-logo-mark {
    width: 30px; height: 30px; flex: 0 0 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, var(--sx-accent-2), var(--sx-accent) 60%, #1741b5);
    color: #fff; font-family: var(--sx-display); font-weight: 700; font-size: 1rem;
    box-shadow: 0 0 0 3px var(--sx-accent-soft);
}
.sx-logo-txt { font-family: var(--sx-display); font-size: 1.06rem; font-weight: 500; color: var(--sx-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-logo-txt b { font-weight: 700; }

.sx-iconbtn {
    width: 34px; height: 34px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-sm);
    color: var(--sx-text-2);
    font-size: .92rem;
    transition: color .18s, background .18s, border-color .18s;
}
.sx-iconbtn:hover { color: var(--sx-text); background: var(--sx-card-2); border-color: var(--sx-border-2); }

/* Kullanıcı kutusu */
.sx-user {
    position: relative;
    margin: 2px 12px 12px;
    padding: 9px 10px;
    display: flex; align-items: center; gap: 10px;
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r);
    cursor: pointer;
    transition: border-color .18s, background .18s;
}
.sx-user:hover { border-color: var(--sx-border-2); }
.sx-user > .fa-solid.fa-angle-down { color: var(--sx-text-3); font-size: .8rem; }

.sx-av {
    width: 34px; height: 34px; flex: 0 0 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #3d3d46, #232329);
    border: 1px solid var(--sx-border-2);
    color: #fff; font-weight: 600; font-size: .95rem; text-transform: uppercase;
}
.sx-light .sx-av { background: linear-gradient(135deg, #dde1e9, #c3c9d4); color: #0f172a; }

.sx-user-in { min-width: 0; flex: 1; }
.sx-user-name { display: flex; align-items: center; gap: 5px; font-size: .84rem; font-weight: 600; color: var(--sx-text); white-space: nowrap; overflow: hidden; }
.sx-user-name .fa-circle-check { color: var(--sx-accent); font-size: .78rem; }
.sx-user-bal { display: block; font-size: .74rem; color: var(--sx-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Menü listesi */
.sx-nav { flex: 1 1 auto; overflow-y: auto; padding: 2px 12px; display: flex; flex-direction: column; gap: 2px; }
.sx-side-foot { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--sx-border); }

.sx-nav-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px;
    border-radius: var(--sx-r-sm);
    border: 1px solid transparent;
    color: var(--sx-text-2);
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background .16s, color .16s, border-color .16s;
    cursor: pointer;
    background: transparent;
    width: 100%;
    text-align: left;
}
.sx-nav-item i { width: 17px; flex: 0 0 17px; text-align: center; font-size: .9rem; color: var(--sx-text-3); transition: color .16s; }
.sx-nav-item:hover { background: var(--sx-card-2); color: var(--sx-text); }
.sx-nav-item:hover i { color: var(--sx-text-2); }
.sx-nav-item.is-active { background: var(--sx-card-2); border-color: var(--sx-border); color: var(--sx-text); }
.sx-nav-item.is-active i { color: var(--sx-text); }

/* Panel çekirdeğinin menüye enjekte ettiği rozetler gizlenir (bizimki kalır) */
.sx-nav-item .badge:not(.sx-nav-badge),
.sx-nav-item [class*="notification"]:not(.sx-nav-badge),
.sx-nav-item [class*="unread"]:not(.sx-nav-badge) {
    display: none !important;
}

.sx-nav-badge {
    margin-left: auto;
    min-width: 20px; height: 20px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: var(--sx-accent-soft);
    color: var(--sx-accent-tx);
    font-size: .7rem; font-weight: 600;
}

/* Raf (daraltılmış) kipi */
.sx-rail .sx-side { width: 68px; }
.sx-rail .sx-side .sx-logo-txt,
.sx-rail .sx-side .sx-user-in,
.sx-rail .sx-side .sx-user > .fa-angle-down,
.sx-rail .sx-side .sx-nav-item span,
.sx-rail .sx-side .sx-nav-badge { display: none; }
.sx-rail .sx-side .sx-logo img { max-width: 34px; object-fit: contain; }
.sx-rail .sx-side-head { flex-direction: column; }
.sx-rail .sx-user { justify-content: center; padding: 8px; }
.sx-rail .sx-nav-item { justify-content: center; padding: 10px 0; }
.sx-rail .sx-nav-item i { width: auto; }
.sx-rail .sx-main { margin-left: 68px; }

/* ---- Sağ kolon ---- */
.sx-main {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: var(--sx-side-w);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left .18s ease;
}

.sx-top {
    position: sticky; top: 0; z-index: 30;
    height: var(--sx-top-h);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 0 20px;
    background: color-mix(in srgb, var(--sx-shell) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--sx-border);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .sx-top { background: var(--sx-shell); }
}

.sx-top-title { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: .9rem; color: var(--sx-text); }
.sx-top-title i { color: var(--sx-text-3); font-size: .95rem; }
.sx-top-title b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sx-top-acts { display: flex; align-items: center; gap: 8px; }

.sx-top-btn {
    position: relative;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--sx-border);
    border-radius: 999px;
    color: var(--sx-text-2);
    font-size: .88rem;
    transition: color .18s, background .18s, border-color .18s;
    cursor: pointer;
}
.sx-top-btn:hover { color: var(--sx-text); background: var(--sx-card-2); border-color: var(--sx-border-2); }
.sx-top-btn .sx-dot {
    position: absolute; top: 6px; right: 7px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--sx-accent);
    box-shadow: 0 0 0 2px var(--sx-shell);
}

.sx-ic-sun { display: none; }
.sx-ic-moon { display: inline-block; }
.sx-light .sx-ic-sun { display: inline-block; }
.sx-light .sx-ic-moon { display: none; }

/* Üst seçiciler (dil / para birimi / hesap) */
.sx-pick {
    position: relative;
    display: inline-flex; align-items: center; gap: 7px;
    height: 34px; padding: 0 12px;
    background: transparent;
    border: 1px solid var(--sx-border);
    border-radius: 999px;
    color: var(--sx-text-2);
    font-size: .82rem; font-weight: 500;
    cursor: pointer;
    transition: color .18s, background .18s, border-color .18s;
    white-space: nowrap;
}
.sx-pick:hover { color: var(--sx-text); background: var(--sx-card-2); border-color: var(--sx-border-2); }
.sx-pick > .fa-chevron-down { font-size: .62rem; color: var(--sx-text-3); }

.sx-content {
    flex: 1 1 auto;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 26px 22px 46px;
}

/* Sayfa başlığı */
.sx-head { padding: 26px 2px 22px; }
.sx-head.is-center { text-align: center; }
.sx-head h1 {
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 0 0 8px;
}
.sx-head p { margin: 0; color: var(--sx-text-3); font-size: .875rem; max-width: 520px; }
.sx-head.is-center p { margin: 0 auto; }

/* Görünme animasyonu */
@keyframes sxFade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.sx-fade { animation: sxFade .3s ease both; }

/* ------------------------------ 5. Açılır menü --------------------------- */
.sx-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 208px;
    background: var(--sx-card);
    border: 1px solid var(--sx-border-2);
    border-radius: var(--sx-r);
    box-shadow: var(--sx-shadow);
    padding: 6px;
    display: none;
    z-index: 60;
    text-align: left;
}
.sx-menu[open] { display: block; animation: sxFade .16s ease both; }
.sx-menu.is-right { left: auto; right: 0; }

.sx-menu-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0; background: transparent;
    border-radius: 7px;
    color: var(--sx-text-2);
    font-size: .84rem; font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-align: left;
    white-space: nowrap;
}
.sx-menu-item i { width: 16px; text-align: center; color: var(--sx-text-3); font-size: .85rem; }
.sx-menu-item:hover { background: var(--sx-card-2); color: var(--sx-text); }
.sx-menu-item:hover i { color: var(--sx-text-2); }
.sx-menu-item.is-on { color: var(--sx-text); background: var(--sx-card-2); }
.sx-menu-sep { height: 1px; margin: 5px 4px; background: var(--sx-border); }
.sx-menu-head { padding: 9px 10px 7px; display: flex; align-items: center; gap: 10px; }

/* Menü içi anahtar (Darkmode satırı) */
.sx-switch {
    margin-left: auto;
    width: 32px; height: 18px; flex: 0 0 32px;
    border-radius: 999px;
    background: var(--sx-field-2);
    border: 1px solid var(--sx-border-2);
    position: relative;
    transition: background .18s;
}
.sx-switch::after {
    content: "";
    position: absolute; top: 2px; left: 2px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #fff;
    transition: left .18s;
}
.is-on > .sx-switch, .sx-switch.is-on { background: var(--sx-accent); border-color: var(--sx-accent); }
.is-on > .sx-switch::after, .sx-switch.is-on::after { left: 16px; }

/* Seçici (dil/para) arama kutulu panel */
.sx-picker { min-width: 236px; max-width: 300px; }
.sx-picker-search { position: relative; margin: 2px 2px 6px; }
.sx-picker-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: .75rem; color: var(--sx-text-3); }
.sx-picker-search input {
    width: 100%; height: 32px;
    padding: 0 10px 0 30px;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: 8px;
    color: var(--sx-text);
    font-size: .8rem;
}
.sx-picker-search input:focus { outline: none; border-color: var(--sx-accent); }
.sx-picker-list { max-height: 264px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.sx-picker-empty { margin: 8px; text-align: center; color: var(--sx-text-3); font-size: .8rem; }
.sx-lang-code {
    width: 30px; flex: 0 0 30px;
    font-size: .68rem; font-weight: 700; letter-spacing: .04em;
    color: var(--sx-text-3);
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: 6px;
    text-align: center;
    padding: 2px 0;
}

/* ------------------------------- 6. Düğmeler ----------------------------- */
.sx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 16px;
    background: var(--sx-card-2);
    border: 1px solid var(--sx-border-2);
    border-radius: var(--sx-r-sm);
    color: var(--sx-text);
    font-size: .85rem; font-weight: 550;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
    text-decoration: none;
}
.sx-btn:hover, .sx-btn:focus { background: var(--sx-field-2); border-color: var(--sx-border-2); color: var(--sx-text); text-decoration: none; }
.sx-btn i { font-size: .85em; }

/* Ana eylem düğmesi — mat siyah (tasarım kararı: mavi düğme yok) */
.sx-btn--accent {
    background: #17171d;
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
    box-shadow: none;
}
.sx-btn--accent:hover, .sx-btn--accent:focus { background: #23232b; border-color: rgba(255, 255, 255, .24); color: #fff; }

.sx-btn--white { background: #fff; border-color: #fff; color: #0b0b0e; }
.sx-btn--white:hover, .sx-btn--white:focus { background: #e8eaf0; border-color: #e8eaf0; color: #0b0b0e; }
.sx-light .sx-btn--white { background: #0f172a; border-color: #0f172a; color: #fff; }
.sx-light .sx-btn--white:hover { background: #1e293b; border-color: #1e293b; color: #fff; }

.sx-btn--ghost { background: transparent; border-color: var(--sx-border); color: var(--sx-text-2); }
.sx-btn--ghost:hover { color: var(--sx-text); border-color: var(--sx-border-2); background: var(--sx-card-2); }

.sx-btn--danger { background: var(--sx-red-soft); border-color: transparent; color: var(--sx-red-tx); }
.sx-btn--danger:hover { background: rgba(239, 68, 68, .2); color: var(--sx-red-tx); }

.sx-btn--block { width: 100%; }
.sx-btn--sm { height: 32px; padding: 0 12px; font-size: .8rem; border-radius: 8px; }
.sx-btn--lg { height: 46px; padding: 0 22px; font-size: .92rem; }

.sx-btn[disabled], .sx-btn.disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* ------------------------------- 7. Kartlar ------------------------------ */
.sx-card {
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-lg);
    overflow: hidden;
}
.sx-card.is-overflow { overflow: visible; }

.sx-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--sx-border);
    flex-wrap: wrap;
}
.sx-card-title { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: .93rem; color: var(--sx-text); font-family: var(--sx-display); }
.sx-card-pad { padding: 18px; }

.sx-hicon {
    width: 32px; height: 32px; flex: 0 0 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-sm);
    color: var(--sx-text-2);
    font-size: .85rem;
}

/* ------------------------------ 8. Rozetler ------------------------------ */
.sx-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .74rem; font-weight: 600;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    color: var(--sx-text-2);
    white-space: nowrap;
}
.sx-badge i { font-size: .8em; }
.sx-badge--completed, .sx-badge--active, .sx-badge--ok { background: var(--sx-green-soft); border-color: transparent; color: var(--sx-green-tx); }
.sx-badge--canceled, .sx-badge--rejected, .sx-badge--error, .sx-badge--expired, .sx-badge--bad { background: var(--sx-red-soft); border-color: transparent; color: var(--sx-red-tx); }
.sx-badge--processing, .sx-badge--inprogress, .sx-badge--info { background: var(--sx-accent-soft); border-color: transparent; color: var(--sx-accent-tx); }
.sx-badge--pending, .sx-badge--paused { background: var(--sx-field); border-color: var(--sx-border-2); color: var(--sx-text-2); }
.sx-badge--partial, .sx-badge--warn { background: var(--sx-amber-soft); border-color: transparent; color: var(--sx-amber-tx); }
.sx-badge--pink { background: var(--sx-pink-soft); border-color: transparent; color: var(--sx-pink); }
.sx-badge--bronze { background: var(--sx-orange-soft); border-color: transparent; color: var(--sx-orange-tx); }

@keyframes sxSpin { to { transform: rotate(360deg); } }
.sx-spin { display: inline-block; animation: sxSpin 1.1s linear infinite; }

/* Bilgi çipleri (sipariş satırlarındaki) */
.sx-chip {
    display: inline-flex; align-items: center; gap: 8px;
    height: 32px; padding: 0 11px;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-sm);
    color: var(--sx-text-2);
    font-size: .78rem; font-weight: 500;
    max-width: 100%;
    min-width: 0;
}
.sx-chip i { color: var(--sx-text-3); font-size: .8rem; flex: 0 0 auto; }
.sx-chip b { color: var(--sx-text); font-weight: 600; }
.sx-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.sx-chip:hover { border-color: var(--sx-border-2); color: var(--sx-text); }

/* Sosyal ağ simge kutusu */
.sx-net {
    width: 34px; height: 34px; flex: 0 0 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--sx-r-sm);
    font-size: 1rem;
    color: #fff;
    background: var(--sx-field-2);
    border: 1px solid var(--sx-border);
}
.sx-net--instagram { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); border: 0; }
.sx-net--tiktok { background: #0f0f13; border-color: rgba(255,255,255,.2); }
.sx-net--youtube { background: #ff0000; border: 0; }
.sx-net--facebook { background: #1877f2; border: 0; }
.sx-net--x, .sx-net--twitter { background: #0c0c10; border-color: rgba(255,255,255,.2); }
.sx-net--telegram { background: #229ed9; border: 0; }
.sx-net--linkedin { background: #0a66c2; border: 0; }
.sx-net--spotify { background: #1db954; border: 0; }
.sx-net--twitch { background: #9146ff; border: 0; }
.sx-net--kick { background: #53fc18; color: #06120a; border: 0; }
.sx-net--discord { background: #5865f2; border: 0; }
.sx-net--reddit { background: #ff4500; border: 0; }
.sx-net--pinterest { background: #e60023; border: 0; }
.sx-net--threads { background: #101014; border-color: rgba(255,255,255,.2); }
.sx-net--vk { background: #0077ff; border: 0; }
.sx-net--soundcloud { background: #ff5500; border: 0; }
.sx-net--snapchat { background: #fffc00; color: #111; border: 0; }
.sx-net--whatsapp { background: #25d366; border: 0; }
.sx-net--google { background: #fff; color: #333; border: 0; }
.sx-net--website, .sx-net--other { background: var(--sx-field-2); color: var(--sx-text-2); }

/* --------------------------- 9. İstatistik kartları ---------------------- */
.sx-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
@media (max-width: 1100px) { .sx-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sx-stats { grid-template-columns: 1fr; } }

.sx-stat {
    position: relative;
    padding: 16px 17px;
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-lg);
    overflow: hidden;
}
.sx-stat-ic {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-sm);
    color: var(--sx-text-2);
    font-size: .95rem;
    margin-bottom: 13px;
}
.sx-stat-lb { margin: 0 0 3px; color: var(--sx-text-3); font-size: .78rem; font-weight: 500; }
.sx-stat-vl { margin: 0; font-family: var(--sx-display); font-size: 1.42rem; font-weight: 600; letter-spacing: -.01em; color: var(--sx-text); }

/* Hesap durumu (parlayan) kartı */
.sx-stat.is-glow {
    background:
        radial-gradient(120% 160% at 100% 0%, rgba(34, 211, 238, .17), transparent 55%),
        radial-gradient(90% 140% at 82% 110%, rgba(47, 107, 255, .14), transparent 60%),
        var(--sx-card);
    border-color: rgba(34, 211, 238, .25);
}
.sx-stat.is-glow::after {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 18px; bottom: 14px;
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 1.35rem;
    color: var(--sx-cyan);
    background: radial-gradient(circle at 50% 30%, rgba(34, 211, 238, .28), rgba(34, 211, 238, .06));
    box-shadow: 0 0 34px rgba(34, 211, 238, .35);
}
.sx-stat.is-glow .sx-stat-ic { color: var(--sx-cyan); border-color: rgba(34, 211, 238, .3); }

/* Rütbe renk çeşitleri */
.sx-rank--gold.is-glow { border-color: rgba(245, 158, 11, .3); background: radial-gradient(120% 160% at 100% 0%, rgba(245, 158, 11, .16), transparent 55%), var(--sx-card); }
.sx-rank--gold.is-glow::after { color: var(--sx-amber-tx); background: radial-gradient(circle at 50% 30%, rgba(245, 158, 11, .26), rgba(245, 158, 11, .05)); box-shadow: 0 0 34px rgba(245, 158, 11, .3); }
.sx-rank--gold.is-glow .sx-stat-ic { color: var(--sx-amber-tx); border-color: rgba(245, 158, 11, .3); }
.sx-rank--silver.is-glow { border-color: rgba(148, 163, 184, .35); background: radial-gradient(120% 160% at 100% 0%, rgba(148, 163, 184, .16), transparent 55%), var(--sx-card); }
.sx-rank--silver.is-glow::after { color: #cbd5e1; background: radial-gradient(circle at 50% 30%, rgba(148, 163, 184, .25), rgba(148, 163, 184, .05)); box-shadow: 0 0 34px rgba(148, 163, 184, .3); }
.sx-rank--bronze.is-glow { border-color: rgba(251, 146, 60, .3); background: radial-gradient(120% 160% at 100% 0%, rgba(251, 146, 60, .15), transparent 55%), var(--sx-card); }
.sx-rank--bronze.is-glow::after { color: var(--sx-orange-tx); background: radial-gradient(circle at 50% 30%, rgba(251, 146, 60, .25), rgba(251, 146, 60, .05)); box-shadow: 0 0 34px rgba(251, 146, 60, .28); }

/* ------------------------------ 10. Form alanları ------------------------ */
.sx-field-row { margin-bottom: 15px; }
.sx-label {
    display: block;
    margin: 0 0 7px;
    font-size: .8rem; font-weight: 550;
    color: var(--sx-text);
}
.sx-label small { color: var(--sx-text-3); font-weight: 450; }

.sx-input, .sx-select, .sx-textarea,
.sx-app .form-control,
.sx-auth .form-control,
.sx-guest .form-control {
    display: block;
    width: 100%;
    height: 42px;
    padding: 0 13px;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-sm);
    color: var(--sx-text);
    font-size: .86rem;
    font-family: var(--sx-font);
    box-shadow: none;
    transition: border-color .18s, background .18s, box-shadow .18s;
}
.sx-textarea,
.sx-app textarea.form-control,
.sx-guest textarea.form-control { height: auto; min-height: 108px; padding: 11px 13px; resize: vertical; line-height: 1.5; }

.sx-input::placeholder, .sx-textarea::placeholder,
.sx-app .form-control::placeholder, .sx-guest .form-control::placeholder { color: var(--sx-text-3); opacity: 1; }

.sx-input:focus, .sx-select:focus, .sx-textarea:focus,
.sx-app .form-control:focus, .sx-auth .form-control:focus, .sx-guest .form-control:focus {
    outline: none;
    border-color: var(--sx-accent);
    background: var(--sx-field);
    box-shadow: 0 0 0 3px var(--sx-accent-soft);
}

.sx-input[readonly], .sx-app .form-control[readonly] { color: var(--sx-text-2); cursor: default; }
.sx-input[disabled], .sx-app .form-control[disabled] { opacity: .6; }

select.sx-select, .sx-app select.form-control, .sx-guest select.form-control {
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%239a9aa6' stroke-width='1.6' stroke-linecap='round' d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 34px;
    cursor: pointer;
}
select.sx-select option, .sx-app select.form-control option { background: var(--sx-card-2); color: var(--sx-text); }

/* Girdi sarmalayıcı (ikonlu / düğmeli) */
.sx-input-wrap { position: relative; display: flex; align-items: center; }
.sx-input-wrap > i { position: absolute; left: 13px; color: var(--sx-text-3); font-size: .82rem; pointer-events: none; }
.sx-input-wrap > i + .sx-input, .sx-input-wrap > i + input { padding-left: 36px; }
.sx-input-act {
    position: absolute; right: 6px;
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 11px;
    background: var(--sx-card-2);
    border: 1px solid var(--sx-border-2);
    border-radius: 7px;
    color: var(--sx-text);
    font-size: .74rem; font-weight: 550;
    cursor: pointer;
    transition: background .16s;
}
.sx-input-act:hover { background: var(--sx-field-2); }

.sx-has-eye input { padding-right: 40px; }
.sx-eye {
    position: absolute; right: 4px;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0;
    color: var(--sx-text-3);
    border-radius: 7px;
    font-size: .85rem;
    transition: color .16s;
}
.sx-eye:hover { color: var(--sx-text); }

/* Onay kutusu */
.sx-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .83rem; color: var(--sx-text-2); }
.sx-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.sx-check-box {
    width: 18px; height: 18px; flex: 0 0 18px;
    margin-top: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sx-field);
    border: 1px solid var(--sx-border-2);
    border-radius: 5px;
    color: transparent;
    font-size: .6rem;
    transition: background .15s, border-color .15s, color .15s;
}
.sx-check input:checked + .sx-check-box { background: var(--sx-accent); border-color: var(--sx-accent); color: #fff; }
.sx-check input:focus-visible + .sx-check-box { outline: 2px solid var(--sx-accent); outline-offset: 2px; }
.sx-check a { color: var(--sx-text); font-weight: 550; text-decoration: underline; text-underline-offset: 3px; }
.sx-check a:hover { color: var(--sx-accent-tx); }

/* Onay kutusu — kare (listelerde) */
.sx-tick { position: relative; display: inline-flex; cursor: pointer; }
.sx-tick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sx-tick-box {
    width: 19px; height: 19px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sx-field);
    border: 1px solid var(--sx-border-2);
    border-radius: 6px;
    color: transparent; font-size: .62rem;
    transition: background .15s, border-color .15s, color .15s;
}
.sx-tick input:checked ~ .sx-tick-box { background: var(--sx-accent); border-color: var(--sx-accent); color: #fff; }

/* Tutar özet kutusu */
.sx-summary {
    display: flex;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r);
    overflow: hidden;
}
.sx-summary-cell { padding: 12px 16px; min-width: 0; flex: 1 1 0; }
.sx-summary-cell + .sx-summary-cell { border-left: 1px solid var(--sx-border); }
.sx-summary-lb { margin: 0 0 2px; font-size: .72rem; color: var(--sx-text-3); font-weight: 500; }
.sx-summary-vl { margin: 0; font-family: var(--sx-display); font-size: 1.12rem; font-weight: 600; color: var(--sx-text); }
.sx-summary-vl small { font-size: .68rem; color: var(--sx-text-3); font-family: var(--sx-font); font-weight: 500; }
.sx-charge-input {
    width: 100%;
    background: transparent; border: 0; padding: 0;
    color: var(--sx-text);
    font-family: var(--sx-display);
    font-size: 1.12rem; font-weight: 600;
}
.sx-charge-input:focus { outline: none; }

/* ------------------------- 11. Uyarılar / bildirim ----------------------- */
.sx-alert, .sx-app .alert, .sx-auth .alert, .sx-guest .alert {
    position: relative;
    display: block;
    padding: 12px 16px;
    margin: 0 0 15px;
    background: var(--sx-card-2);
    border: 1px solid var(--sx-border-2);
    border-radius: var(--sx-r);
    color: var(--sx-text-2);
    font-size: .84rem;
}
.sx-alert { display: flex; align-items: flex-start; gap: 10px; }
.sx-alert > i { margin-top: 2px; }
.sx-alert--ok, .sx-app .alert-success, .sx-auth .alert-success, .sx-guest .alert-success {
    background: var(--sx-green-soft); border-color: rgba(34, 197, 94, .25); color: var(--sx-green-tx);
}
.sx-alert--err, .sx-app .alert-danger, .sx-auth .alert-danger, .sx-guest .alert-danger {
    background: var(--sx-red-soft); border-color: rgba(239, 68, 68, .25); color: var(--sx-red-tx);
}
.sx-alert--info, .sx-app .alert-info, .sx-auth .alert-info, .sx-guest .alert-info {
    background: var(--sx-accent-soft); border-color: rgba(47, 107, 255, .25); color: var(--sx-accent-tx);
}
.sx-app .alert h4, .sx-guest .alert h4 { margin: 0 0 6px; font-size: .95rem; color: inherit; font-family: var(--sx-font); font-weight: 650; }
.sx-app .alert .close, .sx-auth .alert .close, .sx-guest .alert .close {
    float: right;
    background: transparent; border: 0;
    color: inherit; opacity: .6;
    font-size: 1.1rem; line-height: 1;
    text-shadow: none;
    margin-left: 10px;
    cursor: pointer;
}
.sx-app .alert .close:hover, .sx-guest .alert .close:hover { opacity: 1; }

/* Panelin bildirimi (#notify-wrapper) */
#notify-wrapper {
    position: fixed;
    left: 50%; bottom: 28px;
    transform: translateX(-50%);
    z-index: 9999;
    max-width: min(92vw, 460px);
    padding: 12px 18px;
    background: var(--sx-card-2);
    border: 1px solid var(--sx-border-2);
    border-radius: var(--sx-r);
    box-shadow: var(--sx-shadow);
    color: var(--sx-text);
    font-size: .85rem;
    text-align: center;
}
#notify-wrapper.alert-success { border-color: rgba(34, 197, 94, .4); color: var(--sx-green-tx); }
#notify-wrapper.alert-danger { border-color: rgba(239, 68, 68, .4); color: var(--sx-red-tx); }

/* ---------------- 12. Bootstrap parçalarının tasarıma bağlanması --------- */
/* Panelin kendi JS'i bootstrap sınıflarıyla içerik basar; hepsi ezilir. */

.sx-app .btn, .sx-guest .btn, .sx-auth .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 38px; padding: 0 15px;
    background: var(--sx-card-2);
    border: 1px solid var(--sx-border-2);
    border-radius: var(--sx-r-sm);
    color: var(--sx-text);
    font-size: .84rem; font-weight: 550;
    text-shadow: none; box-shadow: none;
    transition: background .18s, border-color .18s, color .18s;
}
.sx-app .btn:hover, .sx-guest .btn:hover, .sx-auth .btn:hover { background: var(--sx-field-2); color: var(--sx-text); }
.sx-app .btn-primary, .sx-guest .btn-primary, .sx-auth .btn-primary { background: #17171d; border-color: rgba(255, 255, 255, .16); color: #fff; }
.sx-app .btn-primary:hover, .sx-guest .btn-primary:hover, .sx-auth .btn-primary:hover { background: #23232b; border-color: rgba(255, 255, 255, .24); color: #fff; }
.sx-app .btn-xs, .sx-guest .btn-xs { height: 28px; padding: 0 10px; font-size: .75rem; border-radius: 7px; }
.sx-app .btn.disabled, .sx-app .btn[disabled] { opacity: .55; cursor: not-allowed; }

.sx-app .well, .sx-guest .well {
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-lg);
    box-shadow: none;
    padding: 18px;
    margin-bottom: 18px;
}

.sx-app .table, .sx-guest .table { color: var(--sx-text); margin-bottom: 0; }
.sx-app .table > thead > tr > th, .sx-guest .table > thead > tr > th {
    border-bottom: 1px solid var(--sx-border);
    color: var(--sx-text-3);
    font-size: .74rem; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase;
    padding: 10px 12px;
}
.sx-app .table > tbody > tr > td, .sx-guest .table > tbody > tr > td {
    border-top: 1px solid var(--sx-border);
    padding: 12px;
    vertical-align: middle;
    font-size: .85rem;
}
.sx-app .table-bordered, .sx-guest .table-bordered,
.sx-app .table-bordered td, .sx-app .table-bordered th,
.sx-guest .table-bordered td, .sx-guest .table-bordered th { border-color: var(--sx-border) !important; }

.sx-app .nav-pills, .sx-guest .nav-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.sx-app .nav-pills > li { float: none; }
.sx-app .nav-pills > li > a, .sx-guest .nav-pills > li > a {
    display: inline-flex; align-items: center; gap: 7px;
    height: 34px; padding: 0 14px;
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: 999px;
    color: var(--sx-text-2);
    font-size: .8rem; font-weight: 550;
    transition: background .16s, color .16s, border-color .16s;
}
.sx-app .nav-pills > li > a:hover, .sx-guest .nav-pills > li > a:hover { background: var(--sx-card-2); color: var(--sx-text); }
.sx-app .nav-pills > li.active > a, .sx-guest .nav-pills > li.active > a { background: var(--sx-text); border-color: var(--sx-text); color: var(--sx-inv); }

/* Sayfalama */
.sx-app .pagination, .sx-guest .pagination, .sx-pagination { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; }
.sx-app .pagination > li > a, .sx-guest .pagination > li > a, .sx-pagination > li > a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 10px;
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-sm);
    color: var(--sx-text-2);
    font-size: .82rem; font-weight: 550;
    transition: background .16s, color .16s, border-color .16s;
}
.sx-app .pagination > li > a:hover, .sx-guest .pagination > li > a:hover { background: var(--sx-card-2); color: var(--sx-text); border-color: var(--sx-border-2); }
.sx-app .pagination > li.active > a, .sx-guest .pagination > li.active > a { background: var(--sx-accent); border-color: var(--sx-accent); color: #fff; }

/* Bootstrap açılırları (para birimi listesi vb. panel JS ile de açılabilir) */
.sx-app .dropdown-menu, .sx-guest .dropdown-menu {
    background: var(--sx-card);
    border: 1px solid var(--sx-border-2);
    border-radius: var(--sx-r);
    box-shadow: var(--sx-shadow);
    padding: 6px;
    min-width: 190px;
}
.sx-app .dropdown-menu > li > a, .sx-guest .dropdown-menu > li > a,
.sx-app .dropdown-menu .dropdown-item, .sx-guest .dropdown-menu .dropdown-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--sx-text-2);
    font-size: .84rem;
    transition: background .15s, color .15s;
}
.sx-app .dropdown-menu > li > a:hover, .sx-guest .dropdown-menu > li > a:hover,
.sx-app .dropdown-menu .dropdown-item:hover, .sx-guest .dropdown-menu .dropdown-item:hover { background: var(--sx-card-2); color: var(--sx-text); }
.sx-app .dropdown-menu > li.active > a, .sx-guest .dropdown-menu > li.active > a { background: var(--sx-field-2); color: var(--sx-text); }
.sx-app .dropdown-menu .divider, .sx-guest .dropdown-menu .divider { height: 1px; margin: 5px; background: var(--sx-border); border: 0; }

/* Modallar — üst çubuk/animasyon katmanlarının üstünde kalmaları garanti.
   Açılırken <body>'ye taşındıkları için stiller KAPSAMSIZ yazılır:
   nerede olurlarsa olsunlar koyu tema uygulanır. */
.modal { z-index: 4050 !important; }
.modal-backdrop { background: #000; z-index: 4040 !important; }
.modal-backdrop.in { opacity: .68; }
.modal-content {
    background: var(--sx-card) !important;
    background-color: var(--sx-card) !important;
    border: 1px solid var(--sx-border-2) !important;
    border-radius: var(--sx-r-lg);
    box-shadow: var(--sx-shadow) !important;
    color: var(--sx-text);
}
.modal-header {
    padding: 15px 18px;
    border: 0;
    border-bottom: 1px solid var(--sx-border);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.modal-title {
    font-family: var(--sx-display);
    font-size: .95rem;
    font-weight: 600;
    color: var(--sx-text) !important;
    display: inline-flex; align-items: center; gap: 10px;
}
.modal-body { padding: 18px; color: var(--sx-text-2); }
.modal-footer { padding: 14px 18px; border: 0; border-top: 1px solid var(--sx-border); display: flex; justify-content: flex-end; gap: 10px; }
.modal-header .close {
    order: 2;
    width: 32px; height: 32px; margin: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-sm);
    color: var(--sx-text-2) !important;
    font-size: 1.05rem;
    opacity: 1 !important; text-shadow: none;
    transition: color .16s, background .16s;
    float: none;
}
.modal-header .close:hover { color: var(--sx-text) !important; background: var(--sx-field-2); }

/* Gövdeye taşınan modalın içindeki tema bileşenleri kapsam istemesin */
.modal .sx-label { color: var(--sx-text); }
.modal .sx-input, .modal .sx-select, .modal .sx-textarea, .modal .form-control {
    display: block; width: 100%; height: 42px;
    padding: 0 13px;
    background: var(--sx-field) !important;
    border: 1px solid var(--sx-border) !important;
    border-radius: var(--sx-r-sm);
    color: var(--sx-text) !important;
    font-size: .86rem;
    box-shadow: none;
}
.modal textarea.sx-textarea, .modal textarea.form-control { height: auto; min-height: 108px; padding: 11px 13px; }
.modal .sx-btn { color: var(--sx-text); }
.modal .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 38px; padding: 0 15px;
    background: var(--sx-card-2);
    border: 1px solid var(--sx-border-2);
    border-radius: var(--sx-r-sm);
    color: var(--sx-text);
    font-size: .84rem;
    text-shadow: none;
}

/* Tooltip */
.tooltip .tooltip-inner {
    background: var(--sx-field-2);
    color: var(--sx-text);
    border: 1px solid var(--sx-border-2);
    border-radius: 8px;
    padding: 7px 11px;
    font-size: .76rem;
    max-width: 260px;
}
.tooltip.top .tooltip-arrow { border-top-color: var(--sx-border-2); }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--sx-border-2); }
.tooltip.left .tooltip-arrow { border-left-color: var(--sx-border-2); }
.tooltip.right .tooltip-arrow { border-right-color: var(--sx-border-2); }
.tooltip.in { opacity: 1; }

/* Yardım bloğu */
.sx-app .help-block { color: var(--sx-text-3); font-size: .76rem; margin: 6px 0 0; }

/* ---------------------- 13. Panelin ürettiği yapılar --------------------- */
/* Sipariş formu alanları (#fields > #required_fields) */
#required_fields .form-group, #fields .form-group { margin-bottom: 15px; }
#required_fields label, #fields label {
    display: block;
    margin: 0 0 7px;
    font-size: .8rem; font-weight: 550;
    color: var(--sx-text);
}
#required_fields .checkbox label, #fields .checkbox label { display: flex; align-items: center; gap: 9px; font-weight: 450; color: var(--sx-text-2); }
#required_fields input[type="checkbox"], #fields input[type="checkbox"] { accent-color: var(--sx-accent); width: 16px; height: 16px; }
#required_fields input[type="radio"], #fields input[type="radio"] { accent-color: var(--sx-accent); }

/* Servis arama kutusu (panel JS: .services-search-container)
   Sonuç listesi, select2 kutularının kendi z-index'lerinin ÜSTÜNDE kalmalı */
.search-dropdown { position: relative !important; z-index: 300; }
#new-order-search { position: relative !important; z-index: 300; }
#order-form .select2-container { z-index: auto !important; }
#order-form .select2-container--open { z-index: 320 !important; }
.services-search-container {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    z-index: 310 !important;
    max-height: 340px;
    overflow-y: auto;
    background: var(--sx-card);
    border: 1px solid var(--sx-border-2);
    border-radius: var(--sx-r);
    box-shadow: var(--sx-shadow);
    padding: 6px;
}
.services-search-container .container-inner { display: flex; flex-direction: column; gap: 2px; }
.services-search-container .container-inner button {
    display: block;
    width: 100%;
    padding: 9px 11px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--sx-text-2);
    font-size: .82rem;
    text-align: left;
    line-height: 1.45;
    cursor: pointer;
    transition: background .14s, color .14s;
}
.services-search-container .container-inner button:hover,
.services-search-container .container-inner button.id-exact-match { background: var(--sx-card-2); color: var(--sx-text); }
.services-search-container .container-inner .badge {
    background: var(--sx-accent-soft);
    color: var(--sx-accent-tx);
    border-radius: 6px;
    font-size: .68rem; font-weight: 600;
    padding: 3px 7px;
    margin-right: 6px;
}
.services-search-container .text-muted { color: var(--sx-text-3); }
.services-search-container .text-center { text-align: center; padding: 10px; color: var(--sx-text-3); font-size: .8rem; }

/* select2 — panelin servis/kategori kutuları */
.select2-container { width: 100% !important; font-family: var(--sx-font); }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    height: 42px;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-sm);
    transition: border-color .18s, box-shadow .18s;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--sx-accent);
    box-shadow: 0 0 0 3px var(--sx-accent-soft);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 40px;
    line-height: 40px;
    padding: 0 34px 0 13px;
    color: var(--sx-text);
    font-size: .86rem;
    display: flex; align-items: center; gap: 8px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered img { max-width: 18px; max-height: 18px; border-radius: 4px; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--sx-text-3); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; right: 8px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--sx-text-3) transparent transparent; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--sx-text-3); }

.select2-dropdown {
    background: var(--sx-card);
    border: 1px solid var(--sx-border-2);
    border-radius: var(--sx-r);
    box-shadow: var(--sx-shadow);
    overflow: hidden;
    z-index: 1080;
}
.select2-container--default .select2-search--dropdown { padding: 8px; }
.select2-container--default .select2-search--dropdown .select2-search__field {
    height: 34px;
    padding: 0 11px;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: 8px;
    color: var(--sx-text);
    font-size: .82rem;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus { outline: none; border-color: var(--sx-accent); }
.select2-container .select2-results__options { max-height: 300px; }
.select2-container .select2-results__option {
    padding: 9px 12px;
    color: var(--sx-text-2);
    font-size: .83rem;
    transition: background .12s, color .12s;
}
.select2-container .select2-results__option img { max-width: 17px; max-height: 17px; margin-right: 7px; border-radius: 4px; vertical-align: -3px; }
.select2-container .select2-results__option--highlighted,
.select2-container .select2-results__option:hover,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--sx-card-2) !important;
    color: var(--sx-text) !important;
}
.select2-container .select2-results__option--selected,
.select2-container--default .select2-results__option--selected,
.select2-container .select2-results__option[aria-selected="true"] {
    background: var(--sx-accent-soft) !important;
    color: var(--sx-accent-tx) !important;
}
.select2-container--default .select2-results__option--disabled { color: var(--sx-text-3); }

/* Bilet dosya yükleyici (panel JS: .tickets-uploader) */
.tickets-uploader button, .tickets-uploader label, .tickets-uploader .btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 14px;
    background: var(--sx-field) !important;
    border: 1px dashed var(--sx-border-2) !important;
    border-radius: var(--sx-r-sm) !important;
    color: var(--sx-text-2) !important;
    font-size: .8rem; font-weight: 550;
    cursor: pointer;
    transition: color .16s, border-color .16s;
}
.tickets-uploader button:hover, .tickets-uploader .btn:hover { color: var(--sx-text) !important; border-color: var(--sx-accent) !important; }
.tickets-uploader { font-size: .78rem; color: var(--sx-text-3); }
.tickets-uploader input[type="file"] { color: var(--sx-text-3); }

/* Captcha kutuları ortalanır ve taşma engellenir */
.g-recaptcha, .h-captcha { margin: 0 0 15px; }
.g-recaptcha > div, .h-captcha > div { max-width: 100%; }

/* Google ile giriş düğmesi hizası */
#g_id_onload + .g_id_signin, .g_id_signin { color-scheme: light; }

/* --------------------------- 14. Araç çubuğu ----------------------------- */
.sx-toolbar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.sx-toolbar .sx-sep { flex: 1 1 auto; min-width: 10px; border-top: 1px solid var(--sx-border); align-self: center; }

.sx-tool {
    position: relative;
    display: inline-flex; align-items: center; gap: 9px;
    height: 40px; padding: 0 14px;
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: 999px;
    color: var(--sx-text);
    font-size: .82rem; font-weight: 550;
    cursor: pointer;
    transition: background .16s, border-color .16s;
    white-space: nowrap;
}
.sx-tool:hover { background: var(--sx-card-2); border-color: var(--sx-border-2); }
.sx-tool.is-on { border-color: var(--sx-accent); background: var(--sx-accent-soft); }
.sx-tool i { color: var(--sx-text-2); font-size: .85rem; }
.sx-tool .fa-chevron-down { font-size: .6rem; color: var(--sx-text-3); }

.sx-search { position: relative; margin-left: auto; flex: 0 1 330px; min-width: 210px; }
.sx-search input {
    width: 100%; height: 40px;
    padding: 0 44px 0 15px;
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: 999px;
    color: var(--sx-text);
    font-size: .83rem;
    transition: border-color .18s, box-shadow .18s;
}
.sx-search input::placeholder { color: var(--sx-text-3); }
.sx-search input:focus { outline: none; border-color: var(--sx-accent); box-shadow: 0 0 0 3px var(--sx-accent-soft); }
.sx-search button {
    position: absolute; right: 4px; top: 4px;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0;
    border-radius: 999px;
    color: var(--sx-text-2);
    font-size: .85rem;
    transition: color .16s, background .16s;
}
.sx-search button:hover { color: var(--sx-text); background: var(--sx-card-2); }

@media (max-width: 640px) { .sx-search { flex: 1 1 100%; margin-left: 0; } }

/* Bölümlü düğme grubu (New Order / Mass Order) */
.sx-seg {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: 999px;
    padding: 3px;
    flex-wrap: wrap;
}
.sx-seg-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 30px; padding: 0 13px;
    border: 0; background: transparent;
    border-radius: 999px;
    color: var(--sx-text-2);
    font-size: .78rem; font-weight: 550;
    cursor: pointer;
    transition: background .16s, color .16s;
    white-space: nowrap;
    text-decoration: none;
}
.sx-seg-btn:hover { color: var(--sx-text); }
.sx-seg-btn.is-active { background: var(--sx-card-2); color: var(--sx-text); border: 1px solid var(--sx-border-2); height: 32px; margin: -1px 0; }

/* ------------------------ 15. Sosyal ağ sekmeleri ------------------------ */
.sx-nets {
    display: flex; align-items: center; gap: 6px;
    padding: 10px;
    border-bottom: 1px solid var(--sx-border);
    flex-wrap: wrap;          /* kaydırma yerine sarma: açılır menü kırpılmaz */
    overflow: visible;
}
.sx-nets-tab {
    display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--sx-text-2);
    font-size: .82rem; font-weight: 550;
    cursor: pointer;
    white-space: nowrap;
    transition: background .16s, color .16s, border-color .16s;
}
.sx-nets-tab i { font-size: .9rem; }
.sx-nets-tab:hover { color: var(--sx-text); background: var(--sx-card-2); }
.sx-nets-tab.is-active { background: var(--sx-card-2); border-color: var(--sx-border-2); color: var(--sx-text); }

/* ------------------------- 16. Liste kartları (satırlar) ------------------ */
.sx-list { display: flex; flex-direction: column; gap: 14px; }

.sx-row {
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-lg);
    overflow: hidden;
    transition: border-color .16s;
}
.sx-row:hover { border-color: var(--sx-border-2); }

.sx-row-top {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    flex-wrap: wrap;
}
.sx-row-id { font-weight: 650; font-size: .86rem; color: var(--sx-text); white-space: nowrap; }
.sx-row-name { font-weight: 550; font-size: .86rem; color: var(--sx-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 240px; }
.sx-row-date { display: inline-flex; align-items: center; gap: 8px; color: var(--sx-text-2); font-size: .8rem; white-space: nowrap; }
.sx-row-date i { color: var(--sx-text-3); }
.sx-row-side { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }

.sx-row-bottom {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--sx-border);
    flex-wrap: wrap;
}
.sx-row-bottom .sx-row-side { align-self: center; }

.sx-warnbtn {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-sm);
    color: var(--sx-text-2);
    font-size: .85rem;
    cursor: pointer;
    transition: color .16s, border-color .16s;
}
.sx-warnbtn:hover { color: var(--sx-amber-tx); border-color: var(--sx-border-2); }

/* Toplu seçim çubuğu */
.sx-bulk {
    position: fixed;
    left: 50%; bottom: 26px;
    transform: translateX(-50%) translateY(80px);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: transform .22s ease, opacity .22s ease;
}
.sx-bulk.is-on { transform: translateX(-50%); opacity: 1; pointer-events: auto; }
.sx-bulk-btn {
    display: inline-flex; align-items: center; gap: 10px;
    height: 44px; padding: 0 18px;
    background: var(--sx-card-2);
    border: 1px solid var(--sx-border-2);
    border-radius: 999px;
    box-shadow: var(--sx-shadow);
    color: var(--sx-text);
    font-size: .84rem; font-weight: 600;
    cursor: pointer;
}
.sx-bulk-menu {
    position: absolute;
    bottom: calc(100% + 10px); left: 50%;
    transform: translateX(-50%);
    min-width: 190px;
    background: var(--sx-card);
    border: 1px solid var(--sx-border-2);
    border-radius: var(--sx-r);
    box-shadow: var(--sx-shadow);
    padding: 6px;
    display: none;
}
.sx-bulk.is-open .sx-bulk-menu { display: block; animation: sxFade .16s ease both; }

/* --------------------------- 17. Servisler sayfası ----------------------- */
.sx-group { margin-bottom: 16px; }
.sx-group-head {
    display: flex; align-items: center; gap: 11px;
    padding: 13px 16px;
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-lg);
    margin-bottom: 12px;
    font-weight: 600; font-size: .9rem;
    color: var(--sx-text);
    flex-wrap: wrap;
}
.sx-group-head img { max-width: 20px; max-height: 20px; border-radius: 5px; }

.sx-svc { margin-bottom: 12px; }
.sx-svc .sx-row-top { padding: 11px 14px; }
.sx-svc-price {
    display: inline-flex; align-items: center;
    height: 32px; padding: 0 13px;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-sm);
    color: var(--sx-text);
    font-weight: 650; font-size: .84rem;
    font-family: var(--sx-display);
    white-space: nowrap;
}
.sx-fav {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-sm);
    color: var(--sx-text-2);
    font-size: .88rem;
    cursor: pointer;
    transition: color .16s, border-color .16s;
}
.sx-fav:hover { color: var(--sx-pink); border-color: var(--sx-border-2); }
.sx-fav.favorite-active, .sx-fav .fas.fa-star { color: var(--sx-pink); }

/* Süzgeç penceresi çipleri */
.sx-fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-fchip {
    display: inline-flex; align-items: center; gap: 7px;
    height: 32px; padding: 0 13px;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: 999px;
    color: var(--sx-text-2);
    font-size: .79rem; font-weight: 550;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.sx-fchip:hover { color: var(--sx-text); border-color: var(--sx-border-2); }
.sx-fchip.is-on { background: var(--sx-accent); border-color: var(--sx-accent); color: #fff; }
.sx-fblock { padding: 14px 0; border-top: 1px solid var(--sx-border); }
.sx-fblock:first-child { border-top: 0; padding-top: 0; }
.sx-fblock > .sx-label { margin-bottom: 10px; }

/* Aralık kaydırıcısı */
.sx-range { width: 100%; accent-color: var(--sx-accent); height: 4px; cursor: pointer; }

/* ------------------------- 18. Yeni sipariş sayfası ---------------------- */
.sx-order-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
@media (max-width: 1023px) { .sx-order-grid { grid-template-columns: 1fr; } }

.sx-meta { display: grid; grid-template-columns: repeat(3, 1fr); }
.sx-meta.is-2 { grid-template-columns: repeat(2, 1fr); }
.sx-meta-cell {
    padding: 17px 14px;
    text-align: center;
    border-left: 1px solid var(--sx-border);
}
.sx-meta-cell:first-child { border-left: 0; }
.sx-meta-cell > i { font-size: 1.05rem; color: var(--sx-text-2); margin-bottom: 9px; display: inline-block; }
.sx-meta-lb { margin: 0 0 3px; font-size: .78rem; color: var(--sx-text); font-weight: 600; }
.sx-meta-vl { margin: 0; font-size: .76rem; color: var(--sx-text-3); font-weight: 500; }

.sx-svc-hero {
    padding: 20px 18px;
    text-align: center;
    border-bottom: 1px solid var(--sx-border);
}
.sx-svc-hero .sx-net { width: 44px; height: 44px; font-size: 1.35rem; margin: 0 auto 12px; }
.sx-svc-hero h3 { font-size: .95rem; margin: 0 0 6px; font-weight: 600; }
.sx-svc-hero p { margin: 0; font-size: .78rem; color: var(--sx-text-3); }
.sx-svc-hero p b { color: var(--sx-green-tx); font-weight: 600; }

#service_description { margin: 0; }
.sx-desc {
    padding: 14px 18px;
    color: var(--sx-text-2);
    font-size: .83rem;
    line-height: 1.65;
    max-height: 340px;
    overflow-y: auto;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.sx-help {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px;
    border-top: 1px solid var(--sx-border);
    flex-wrap: wrap;
}

/* Sipariş başarı penceresi */
.sx-done .modal-dialog { max-width: 560px; width: auto; margin: 30px auto; padding: 0 12px; }
.sx-done-top { padding: 6px 22px 18px; text-align: center; }
.sx-done-ic {
    width: 52px; height: 52px;
    margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sx-field);
    border: 1px solid var(--sx-border-2);
    border-radius: var(--sx-r);
    color: var(--sx-text);
    font-size: 1.3rem;
}
.sx-done-top h2 { font-size: 1.25rem; margin: 0 0 6px; }
.sx-done-top p { margin: 0; color: var(--sx-text-3); font-size: .82rem; }
.sx-done-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    padding: 0 22px 14px;
}
@media (max-width: 520px) { .sx-done-grid { grid-template-columns: 1fr; } }
.sx-done-cell, .sx-done-row {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r);
    min-width: 0;
}
.sx-done-cell b, .sx-done-row b { display: block; font-size: .7rem; color: var(--sx-text-3); font-weight: 550; }
.sx-done-cell span span, .sx-done-row span span { font-size: .84rem; font-weight: 600; color: var(--sx-text); }
.sx-done-row { margin: 0 22px 10px; }
.sx-done .sx-hicon { background: var(--sx-card-2); }
.sx-done-foot { display: flex; gap: 10px; padding: 10px 22px 22px; flex-wrap: wrap; }

/* --------------------------- 19. Bakiye / ödeme -------------------------- */
.sx-pay {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 14px;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r);
    cursor: pointer;
    transition: border-color .16s, background .16s;
}
.sx-pay:hover { border-color: var(--sx-border-2); }
.sx-pay.is-on { border-color: var(--sx-accent); background: var(--sx-accent-soft); }
.sx-pay input { position: absolute; opacity: 0; }
.sx-pay-name { font-size: .84rem; font-weight: 600; color: var(--sx-text); margin-bottom: 7px; }
.sx-pay-brands { display: flex; flex-wrap: wrap; gap: 5px; }
.sx-brand {
    display: inline-flex; align-items: center; justify-content: center;
    height: 20px; padding: 0 7px;
    background: var(--sx-card-2);
    border: 1px solid var(--sx-border);
    border-radius: 5px;
    font-size: .62rem; font-weight: 700; letter-spacing: .03em;
    color: var(--sx-text-2);
    text-transform: uppercase;
}

/* Ödeme geçmişi çekmecesi */
.sx-drawer-back {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 98;
    opacity: 0; pointer-events: none;
    transition: opacity .22s;
}
.sx-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(400px, 94vw);
    background: var(--sx-shell);
    border-left: 1px solid var(--sx-border-2);
    z-index: 4030;
    transform: translateX(105%);
    visibility: hidden;               /* kapalıyken her koşulda görünmez */
    transition: transform .26s ease, visibility 0s linear .26s;
    display: flex; flex-direction: column;
}
.sx-drawer-open .sx-drawer {
    transform: none;
    visibility: visible;
    transition: transform .26s ease, visibility 0s;
}
.sx-drawer-open .sx-drawer-back { opacity: 1; pointer-events: auto; }
.sx-drawer-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--sx-border);
}
.sx-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 16px; }
.sx-drawer-empty { text-align: center; padding: 46px 18px; }
.sx-drawer-empty .sx-hicon { margin: 0 auto 14px; }
.sx-drawer-empty h4 { font-size: 1rem; margin-bottom: 6px; }
.sx-drawer-empty p { color: var(--sx-text-3); font-size: .8rem; margin: 0 0 16px; }

.sx-payrow {
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r);
    padding: 13px 14px;
    margin-bottom: 12px;
}
.sx-payrow-name { font-size: .86rem; font-weight: 600; color: var(--sx-text); margin-bottom: 8px; }
.sx-amount {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 11px;
    border-radius: 8px;
    background: var(--sx-green-soft);
    color: var(--sx-green-tx);
    font-size: .8rem; font-weight: 650;
    white-space: nowrap;
}

/* ----------------------------- 20. Destek / bilet ------------------------ */
.sx-ticket-card { max-width: 620px; margin: 0 auto; }

.sx-trow { padding: 14px 16px; }
.sx-trow-name { display: block; font-size: .88rem; font-weight: 600; color: var(--sx-text); margin-bottom: 9px; }
.sx-trow a.sx-trow-name:hover { color: var(--sx-accent-tx); }

/* Sohbet */
.sx-chat-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--sx-border);
    flex-wrap: wrap;
}
.sx-chat-head small { display: block; color: var(--sx-text-3); font-size: .76rem; margin-bottom: 5px; }
.sx-chat-head h1 { font-size: 1.3rem; margin: 0; }
.sx-chat-side { display: flex; gap: 26px; }
.sx-chat-side b { display: block; font-family: var(--sx-display); font-size: 1rem; color: var(--sx-text); font-weight: 600; }

.sx-chat { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.sx-msg { display: flex; gap: 11px; max-width: min(560px, 92%); }
.sx-msg--me { align-self: flex-end; flex-direction: row-reverse; }
.sx-msg-av {
    width: 32px; height: 32px; flex: 0 0 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--sx-field);
    border: 1px solid var(--sx-border-2);
    color: var(--sx-text-2);
    font-size: .8rem; font-weight: 650; text-transform: uppercase;
}
.sx-msg--sup .sx-msg-av { background: radial-gradient(circle at 30% 25%, var(--sx-accent-2), var(--sx-accent) 65%, #1741b5); color: #fff; border: 0; }
.sx-msg-body { min-width: 0; }
.sx-msg-bubble {
    padding: 12px 15px;
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r);
    color: var(--sx-text-2);
    font-size: .84rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
    white-space: pre-line;
}
.sx-msg--me .sx-msg-bubble { background: var(--sx-card-2); }
.sx-msg-time { margin-top: 6px; font-size: .72rem; color: var(--sx-text-3); }
.sx-msg--me .sx-msg-time { text-align: right; }
.sx-msg--sup .sx-msg-time { color: var(--sx-accent-tx); }

.sx-file {
    display: flex; align-items: center; gap: 10px;
    margin-top: 9px;
    padding: 9px 11px;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-sm);
}
.sx-file i.fa-file-image, .sx-file i.fa-file { color: var(--sx-text-2); }
.sx-file span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; color: var(--sx-text); }
.sx-file a {
    width: 30px; height: 30px; flex: 0 0 30px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sx-card-2);
    border: 1px solid var(--sx-border);
    border-radius: 7px;
    color: var(--sx-text-2);
    font-size: .78rem;
}
.sx-file a:hover { color: var(--sx-text); border-color: var(--sx-border-2); }

.sx-faqbar {
    display: flex; align-items: center; gap: 12px;
    margin: 0 20px;
    padding: 13px 16px;
    background: var(--sx-card-2);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r);
    flex-wrap: wrap;
}
.sx-faqbar p { margin: 2px 0 0; font-size: .75rem; color: var(--sx-text-3); }
.sx-faqbar b { font-size: .83rem; }

.sx-composer {
    display: flex; align-items: flex-end; gap: 9px;
    padding: 16px 20px 20px;
}
.sx-composer textarea {
    flex: 1 1 auto;
    min-height: 46px; max-height: 190px;
    padding: 12px 15px;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r);
    color: var(--sx-text);
    font-size: .85rem;
    resize: vertical;
    font-family: var(--sx-font);
}
.sx-composer textarea:focus { outline: none; border-color: var(--sx-accent); box-shadow: 0 0 0 3px var(--sx-accent-soft); }
.sx-send {
    width: 46px; height: 46px; flex: 0 0 46px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff;
    border: 0;
    border-radius: var(--sx-r);
    color: #0b0b0e;
    font-size: 1rem;
    transition: background .16s;
}
.sx-send:hover { background: #e8eaf0; }
.sx-light .sx-send { background: #0f172a; color: #fff; }
.sx-light .sx-send:hover { background: #1e293b; }

/* ----------------------------- 21. Ayarlar kabuğu ------------------------ */
.sx-set { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .sx-set { grid-template-columns: 1fr; } }

.sx-set-side { position: sticky; top: calc(var(--sx-top-h) + 18px); }
.sx-set-me { padding: 4px 6px 18px; }
.sx-set-me .sx-av { width: 52px; height: 52px; font-size: 1.35rem; border-radius: 14px; margin-bottom: 13px; }
.sx-set-me h3 { display: flex; align-items: center; gap: 7px; font-size: 1.05rem; margin: 0 0 3px; }
.sx-set-me h3 i { color: var(--sx-accent); font-size: .9rem; }
.sx-set-me p { margin: 0 0 12px; color: var(--sx-text-3); font-size: .8rem; overflow-wrap: anywhere; }

.sx-set-nav { display: flex; flex-direction: column; gap: 3px; }
.sx-set-nav .sx-nav-item.is-active { background: var(--sx-text); border-color: var(--sx-text); color: var(--sx-inv); }
.sx-set-nav .sx-nav-item.is-active i { color: var(--sx-inv); }
.sx-set-nav .sx-nav-item.is-active::after {
    content: "\f054";
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    margin-left: auto; font-size: .68rem;
}
@media (max-width: 900px) {
    .sx-set-side { position: static; }
    .sx-set-nav { flex-direction: row; flex-wrap: wrap; }
    .sx-set-nav .sx-nav-item { width: auto; }
    .sx-set-nav .sx-nav-item.is-active::after { display: none; }
}

.sx-set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .sx-set-grid { grid-template-columns: 1fr; } }

/* Tema kartları */
.sx-themes { display: flex; flex-wrap: wrap; gap: 12px; }
.sx-theme-card {
    width: 138px;
    background: var(--sx-field);
    border: 1px solid var(--sx-border-2);
    border-radius: var(--sx-r);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .16s, box-shadow .16s;
    padding: 0;
}
.sx-theme-card.is-active { border-color: var(--sx-accent); box-shadow: 0 0 0 3px var(--sx-accent-soft); }
.sx-theme-prev { height: 84px; position: relative; }
.sx-theme-prev::before { content: "• • •"; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); font-size: .55rem; letter-spacing: 2px; }
.sx-theme-prev::after {
    content: "";
    position: absolute; left: 12px; top: 22px; right: 46px; bottom: 12px;
    border-radius: 5px;
}
.sx-theme-prev--dark { background: #0c0c10; }
.sx-theme-prev--dark::before { color: #f87171; }
.sx-theme-prev--dark::after { background: repeating-linear-gradient(to bottom, #1c1c22 0 7px, transparent 7px 13px); }
.sx-theme-prev--light { background: #eef0f4; }
.sx-theme-prev--light::before { color: #ef4444; }
.sx-theme-prev--light::after { background: repeating-linear-gradient(to bottom, #cdd2dc 0 7px, transparent 7px 13px); }
.sx-theme-prev--system { background: linear-gradient(105deg, #0c0c10 50%, #eef0f4 50%); }
.sx-theme-prev--system::before { color: #f87171; }
.sx-theme-prev--system::after { background: repeating-linear-gradient(to bottom, rgba(128, 132, 143, .45) 0 7px, transparent 7px 13px); }
.sx-theme-name { display: block; padding: 9px 12px; font-size: .78rem; font-weight: 600; color: var(--sx-text); text-align: left; }

/* Bildirim tablosu */
.sx-ntable { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.sx-ntable th {
    padding: 10px 14px;
    background: var(--sx-field);
    font-size: .76rem; font-weight: 600; color: var(--sx-text);
    text-align: left;
}
.sx-ntable th:first-child { border-radius: var(--sx-r-sm) 0 0 var(--sx-r-sm); }
.sx-ntable th:last-child { border-radius: 0 var(--sx-r-sm) var(--sx-r-sm) 0; }
.sx-ntable th + th, .sx-ntable td + td { text-align: center; width: 92px; }
.sx-ntable td {
    padding: 11px 14px;
    background: var(--sx-field);
    font-size: .82rem; color: var(--sx-text-2);
}
.sx-ntable td:first-child { border-radius: var(--sx-r-sm) 0 0 var(--sx-r-sm); }
.sx-ntable td:last-child { border-radius: 0 var(--sx-r-sm) var(--sx-r-sm) 0; }
.sx-ntable input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--sx-accent); cursor: pointer; }

/* --------------------------- 22. Ortaklık / child ------------------------ */
.sx-statgrid { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .sx-statgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sx-statgrid { grid-template-columns: 1fr; } }
.sx-statcell { padding: 17px 18px; border-left: 1px solid var(--sx-border); border-top: 1px solid var(--sx-border); }
.sx-statgrid .sx-statcell:first-child { border-left: 0; }
.sx-statcell p { margin: 0 0 4px; font-size: .77rem; color: var(--sx-text-3); font-weight: 500; }
.sx-statcell b { font-family: var(--sx-display); font-size: 1.3rem; font-weight: 600; color: var(--sx-text); }
@media (max-width: 900px) { .sx-statgrid .sx-statcell:nth-child(odd) { border-left: 0; } }
.sx-statgrid > .sx-statcell:nth-child(-n+4) { border-top: 0; }
@media (max-width: 900px) { .sx-statgrid > .sx-statcell:nth-child(-n+2) { border-top: 0; } .sx-statgrid > .sx-statcell:nth-child(3), .sx-statgrid > .sx-statcell:nth-child(4) { border-top: 1px solid var(--sx-border); } }

.sx-refbar {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 16px;
    border-top: 1px solid var(--sx-border);
    flex-wrap: wrap;
}
.sx-refurl {
    display: inline-flex; align-items: center; gap: 10px;
    min-width: 0;
    color: var(--sx-text-2);
    font-size: .83rem;
}
.sx-refurl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Alan adı çubuğu (child panel) */
.sx-nsbar {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-lg);
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.sx-nsbar code {
    background: transparent;
    color: var(--sx-text-2);
    font-size: .8rem;
    font-family: 'SFMono-Regular', Consolas, monospace;
    padding: 0;
}

/* ------------------------------ 23. API sayfası -------------------------- */
.sx-api .sx-card { margin-bottom: 16px; }
.sx-kv { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--sx-border); flex-wrap: wrap; }
.sx-kv:first-child { border-top: 0; }
.sx-kv > span:first-child { flex: 0 0 150px; color: var(--sx-text-3); font-size: .8rem; font-weight: 550; }
.sx-kv code, .sx-code {
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: 7px;
    padding: 4px 9px;
    color: var(--sx-accent-tx);
    font-size: .8rem;
    font-family: 'SFMono-Regular', Consolas, monospace;
    overflow-wrap: anywhere;
}
.sx-app pre, .sx-guest pre {
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r);
    padding: 14px 16px;
    color: var(--sx-text-2);
    font-size: .78rem;
    line-height: 1.6;
    overflow-x: auto;
    margin: 0;
}

/* ------------------------------- 24. Blog -------------------------------- */
.sx-posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .sx-posts { grid-template-columns: 1fr; } }
.sx-post { display: flex; flex-direction: column; transition: border-color .16s, transform .18s; }
.sx-post:hover { border-color: var(--sx-border-2); }
.sx-post-img { aspect-ratio: 16 / 8.2; overflow: hidden; background: var(--sx-field); }
.sx-post-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-post-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.sx-post-body h3 { font-size: 1.02rem; margin: 0; }
.sx-post-body h3 a { color: var(--sx-text); }
.sx-post-body h3 a:hover { color: var(--sx-accent-tx); }
.sx-post-ex { color: var(--sx-text-2); font-size: .83rem; margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.sx-post-foot { margin-top: auto; padding-top: 6px; }

/* İçerik tipografisi (FAQ / şartlar / blog yazısı / admin metinleri) */
.sx-doc { color: var(--sx-text-2); font-size: .88rem; line-height: 1.7; overflow-wrap: anywhere; }
.sx-doc h1, .sx-doc h2 { font-size: 1.25rem; margin: 22px 0 10px; }
.sx-doc h3, .sx-doc h4 { font-size: 1.02rem; margin: 18px 0 8px; }
.sx-doc h1:first-child, .sx-doc h2:first-child, .sx-doc h3:first-child, .sx-doc p:first-child { margin-top: 0; }
.sx-doc p { margin: 0 0 12px; }
.sx-doc ul, .sx-doc ol { margin: 0 0 14px; padding-left: 22px; }
.sx-doc li { margin-bottom: 6px; }
.sx-doc img { border-radius: var(--sx-r); }
.sx-doc table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.sx-doc table td, .sx-doc table th { border: 1px solid var(--sx-border); padding: 9px 12px; font-size: .83rem; }
.sx-doc blockquote { margin: 0 0 14px; padding: 10px 16px; border-left: 3px solid var(--sx-accent); background: var(--sx-field); border-radius: 0 var(--sx-r-sm) var(--sx-r-sm) 0; }
.sx-doc a { text-decoration: underline; text-underline-offset: 3px; }
.sx-doc hr { border: 0; border-top: 1px solid var(--sx-border); margin: 18px 0; }

/* --------------------------- 25. Giriş / kayıt --------------------------- */
.sx-auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 46%) minmax(0, 54%);
    background: var(--sx-bg);
}
@media (max-width: 980px) { .sx-auth { grid-template-columns: 1fr; } }

.sx-auth-form {
    display: flex;
    flex-direction: column;
    padding: 26px clamp(22px, 6vw, 84px);
    background: var(--sx-shell);
}
.sx-auth-back {
    display: inline-flex; align-items: center; gap: 9px;
    align-self: flex-start;
    color: var(--sx-text-2);
    font-size: .82rem; font-weight: 550;
}
.sx-auth-back:hover { color: var(--sx-text); }

.sx-auth-in { margin: auto 0; padding: 46px 0; width: 100%; max-width: 420px; align-self: center; }
.sx-auth-in .sx-logo-mark { width: 40px; height: 40px; font-size: 1.2rem; margin-bottom: 18px; }
.sx-auth-in h1 { font-size: 1.5rem; margin: 0 0 8px; }
.sx-auth-sub { color: var(--sx-text-3); font-size: .84rem; margin: 0 0 26px; }
.sx-auth-sub a { display: inline-flex; align-items: center; gap: 6px; color: var(--sx-text); font-weight: 600; }
.sx-auth-sub a:hover { color: var(--sx-accent-tx); }
.sx-auth-sub a i { font-size: .72rem; }

.sx-gbtn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 42px;
    background: var(--sx-card-2);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-sm);
    color: var(--sx-text);
    font-size: .84rem; font-weight: 550;
}
.sx-gicon { display: inline-flex; width: 17px; height: 17px; }

/* Sağ görsel panel */
.sx-auth-visual {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(90% 70% at 70% 20%, rgba(47, 107, 255, .1), transparent 60%),
        #070709;
    border-left: 1px solid var(--sx-border);
    display: flex; align-items: center; justify-content: center;
    padding: 56px 0 56px 56px;
}
.sx-light .sx-auth-visual { background: radial-gradient(90% 70% at 70% 20%, rgba(47, 107, 255, .08), transparent 60%), #e9ecf2; }
@media (max-width: 980px) { .sx-auth-visual { display: none; } }
.sx-auth-visual::before {
    content: "";
    position: absolute; right: -30px; bottom: -30px;
    width: 300px; height: 300px;
    background-image: radial-gradient(var(--sx-dots) 1.4px, transparent 1.4px);
    background-size: 14px 14px;
    -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 20%, transparent 72%);
    mask-image: radial-gradient(circle at 100% 100%, #000 20%, transparent 72%);
}

/* CSS ile kurulan panel önizlemesi */
.sx-mock {
    position: relative;
    width: 100%; max-width: 660px;
    background: var(--sx-bg);
    border: 1px solid var(--sx-border-2);
    border-right: 0;
    border-radius: var(--sx-r-lg) 0 0 var(--sx-r-lg);
    box-shadow: var(--sx-shadow);
    display: flex;
    min-height: 460px;
    overflow: hidden;
}
.sx-mock-side { width: 168px; flex: 0 0 168px; background: var(--sx-shell); border-right: 1px solid var(--sx-border); padding: 14px 10px; }
.sx-mock-side .sx-logo-txt { font-size: .85rem; }
.sx-mock-user { display: flex; align-items: center; gap: 8px; margin: 12px 0; padding: 7px 8px; background: var(--sx-card); border: 1px solid var(--sx-border); border-radius: 9px; }
.sx-mock-user .sx-av { width: 24px; height: 24px; flex: 0 0 24px; font-size: .65rem; }
.sx-mock-user b { display: block; font-size: .62rem; }
.sx-mock-user small { display: block; font-size: .54rem; color: var(--sx-text-3); }
.sx-mock-nav span {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 9px; margin-bottom: 1px;
    border-radius: 7px;
    color: var(--sx-text-2);
    font-size: .66rem; font-weight: 500;
}
.sx-mock-nav span i { width: 13px; font-size: .62rem; color: var(--sx-text-3); text-align: center; }
.sx-mock-nav span.is-on { background: var(--sx-card-2); border: 1px solid var(--sx-border); color: var(--sx-text); }
.sx-mock-main { flex: 1; min-width: 0; padding: 16px; }
.sx-mock-main h4 { font-size: .95rem; margin: 0 0 3px; }
.sx-mock-main > p { font-size: .62rem; color: var(--sx-text-3); margin: 0 0 12px; }
.sx-mock-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.sx-mock-stat { background: var(--sx-card); border: 1px solid var(--sx-border); border-radius: 10px; padding: 10px 11px; }
.sx-mock-stat i { font-size: .68rem; color: var(--sx-text-2); display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; background: var(--sx-field); border: 1px solid var(--sx-border); border-radius: 6px; margin-bottom: 7px; }
.sx-mock-stat p { margin: 0; font-size: .56rem; color: var(--sx-text-3); }
.sx-mock-stat b { font-family: var(--sx-display); font-size: .85rem; }
.sx-mock-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.sx-mock-tabs span { padding: 4px 9px; border-radius: 999px; font-size: .58rem; color: var(--sx-text-2); border: 1px solid transparent; display: inline-flex; align-items: center; gap: 5px; }
.sx-mock-tabs span.is-on { background: var(--sx-card-2); border-color: var(--sx-border-2); color: var(--sx-text); }
.sx-mock-form { background: var(--sx-card); border: 1px solid var(--sx-border); border-radius: 10px; padding: 11px; }
.sx-mock-form p { margin: 0 0 4px; font-size: .56rem; font-weight: 600; color: var(--sx-text); }
.sx-mock-line { height: 24px; background: var(--sx-field); border: 1px solid var(--sx-border); border-radius: 6px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: .55rem; color: var(--sx-text-3); }

/* Yüzen kartlar */
.sx-float {
    position: absolute;
    background: var(--sx-card);
    border: 1px solid var(--sx-border-2);
    border-radius: var(--sx-r);
    box-shadow: var(--sx-shadow);
    padding: 10px 13px;
    display: flex; align-items: center; gap: 10px;
    font-size: .72rem;
    z-index: 3;
    animation: sxFloat 5.5s ease-in-out infinite;
}
.sx-float small { display: block; color: var(--sx-text-3); }
.sx-float .sx-av { width: 28px; height: 28px; flex: 0 0 28px; font-size: .7rem; }
@keyframes sxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ----------------------- 26. Misafir kabuk + açılış ---------------------- */
.sx-guest { min-height: 100vh; background: var(--sx-bg); display: flex; flex-direction: column; }

/* Bölünmüş giriş/kayıt ekranlarında üst gezinme gizlenir (tasarım gereği) */
.sx-guest:has(.sx-auth) .sx-gnav { display: none; }

.sx-gnav {
    position: sticky; top: 0; z-index: 80;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 13px clamp(16px, 4vw, 40px);
    background: color-mix(in srgb, var(--sx-bg) 86%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--sx-border);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) { .sx-gnav { background: var(--sx-bg); } }

.sx-gnav-links { display: flex; align-items: center; gap: 4px; }
.sx-gnav-link {
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--sx-text-2);
    font-size: .84rem; font-weight: 550;
    transition: background .16s, color .16s;
}
.sx-gnav-link:hover { color: var(--sx-text); background: var(--sx-card-2); }
.sx-gnav-link.is-active { color: var(--sx-text); background: var(--sx-card-2); }
.sx-gnav-side { display: flex; align-items: center; gap: 8px; }

@media (max-width: 900px) {
    .sx-gnav-links {
        position: fixed;
        top: 62px; left: 12px; right: 12px;
        flex-direction: column;
        align-items: stretch;
        background: var(--sx-card);
        border: 1px solid var(--sx-border-2);
        border-radius: var(--sx-r-lg);
        box-shadow: var(--sx-shadow);
        padding: 8px;
        display: none;
        z-index: 85;
    }
    .sx-gnav-links.showing { display: flex; animation: sxFade .18s ease both; }
    .sx-gnav-link { border-radius: var(--sx-r-sm); }
}

/* Açılış bölümleri */
.sx-land { overflow-x: clip; }
.sx-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }

.sx-hero {
    position: relative;
    text-align: center;
    padding: clamp(56px, 9vw, 108px) 0 30px;
}
.sx-hero::before {
    content: "";
    position: absolute; inset: -80px 0 auto;
    height: 480px;
    background: radial-gradient(46% 60% at 50% 0%, rgba(47, 107, 255, .16), transparent 70%);
    pointer-events: none;
}
.sx-hero-badge {
    position: relative;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 5px 7px 5px 5px;
    background: var(--sx-card);
    border: 1px solid var(--sx-border-2);
    border-radius: 999px;
    color: var(--sx-text-2);
    font-size: .78rem; font-weight: 550;
    margin-bottom: 26px;
}
.sx-hero-badge .sx-badge { background: var(--sx-accent); border: 0; color: #fff; }
.sx-hero-badge i { font-size: .7rem; color: var(--sx-text-3); }
.sx-hero h1 {
    position: relative;
    font-size: clamp(2rem, 5vw, 3.3rem);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.12;
    max-width: 780px;
    margin: 0 auto 18px;
}
.sx-hero h1 .is-underline {
    position: relative;
    white-space: nowrap;
}
.sx-hero h1 .is-underline::after {
    content: "";
    position: absolute; left: 2%; right: 2%; bottom: -6px;
    height: 9px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C60 2 180 2 237 7' fill='none' stroke='%232f6bff' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.sx-hero-sub { position: relative; max-width: 560px; margin: 0 auto 26px; color: var(--sx-text-2); font-size: .95rem; }
.sx-hero-cta { position: relative; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }

.sx-hero-tabs {
    position: relative;
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: 999px;
    padding: 5px;
    margin-bottom: 36px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.sx-hero-tabs::-webkit-scrollbar { display: none; }
.sx-hero-tab {
    display: inline-flex; align-items: center; gap: 7px;
    height: 34px; padding: 0 16px;
    border-radius: 999px;
    color: var(--sx-text-2);
    font-size: .8rem; font-weight: 550;
    white-space: nowrap;
    transition: background .16s, color .16s;
}
.sx-hero-tab:hover { color: var(--sx-text); }
.sx-hero-tab.is-active { background: var(--sx-field-2); color: var(--sx-text); }

/* Kahraman görsel sahnesi */
.sx-stage { position: relative; padding-bottom: 30px; }
.sx-stage .sx-mock { max-width: 780px; margin: 0 auto; border-right: 1px solid var(--sx-border-2); border-radius: var(--sx-r-lg); }
.sx-stage-orbit { position: absolute; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; box-shadow: var(--sx-shadow); z-index: 2; animation: sxFloat 6s ease-in-out infinite; }
@media (max-width: 900px) { .sx-float, .sx-stage-orbit { display: none; } }

/* Sayaç şeridi */
.sx-counters {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--sx-border);
    border-top: 1px solid var(--sx-border);
    border-bottom: 1px solid var(--sx-border);
    margin: 40px 0 0;
}
@media (max-width: 800px) { .sx-counters { grid-template-columns: repeat(2, 1fr); } }
.sx-counter { background: var(--sx-bg); padding: 30px 16px; text-align: center; }
.sx-counter b { display: block; font-family: var(--sx-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; letter-spacing: -.01em; }
.sx-counter span { color: var(--sx-text-3); font-size: .8rem; }

/* Bölüm başlığı */
.sx-sect { padding: clamp(48px, 7vw, 84px) 0 0; }
.sx-sect-head { text-align: center; max-width: 560px; margin: 0 auto 38px; }
.sx-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--sx-red-tx);
    font-size: .78rem; font-weight: 600;
    margin-bottom: 12px;
}
.sx-eyebrow.is-blue { color: var(--sx-accent-tx); }
.sx-eyebrow.is-pink { color: var(--sx-pink); }
.sx-sect-head h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); letter-spacing: -.02em; margin: 0 0 10px; }
.sx-sect-head p { color: var(--sx-text-3); font-size: .88rem; margin: 0; }

/* Bento ızgara */
.sx-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.sx-bento-card {
    position: relative;
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-lg);
    padding: 26px 24px;
    overflow: hidden;
    grid-column: span 6;
    transition: border-color .18s;
}
.sx-bento-card:hover { border-color: var(--sx-border-2); }
.sx-bento-card.is-4 { grid-column: span 4; }
.sx-bento-card.is-8 { grid-column: span 8; }
@media (max-width: 900px) { .sx-bento-card, .sx-bento-card.is-4, .sx-bento-card.is-8 { grid-column: span 12; } }
.sx-bento-card h3 { font-size: 1.22rem; margin: 0 0 8px; letter-spacing: -.015em; }
.sx-bento-card > p { color: var(--sx-text-3); font-size: .84rem; margin: 0 0 18px; max-width: 400px; }
.sx-bento-card.is-center { text-align: center; }
.sx-bento-card.is-center > p { margin-left: auto; margin-right: auto; }

/* Servis çipleri yürüyen bant */
.sx-marquee { display: flex; flex-direction: column; gap: 10px; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.sx-marquee-row { display: flex; gap: 10px; width: max-content; animation: sxMarquee 36s linear infinite; }
.sx-marquee-row.is-rev { animation-direction: reverse; }
.sx-marquee:hover .sx-marquee-row { animation-play-state: paused; }
@keyframes sxMarquee { to { transform: translateX(-50%); } }
.sx-mchip {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 14px 9px 9px;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r);
    white-space: nowrap;
}
.sx-mchip .sx-net { width: 30px; height: 30px; flex: 0 0 30px; font-size: .9rem; }
.sx-mchip b { display: flex; align-items: center; gap: 5px; font-size: .77rem; }
.sx-mchip b i { color: var(--sx-accent); font-size: .7rem; }
.sx-mchip small { display: block; color: var(--sx-text-3); font-size: .68rem; }

/* Bildirim listesi (Instagram kartı) */
.sx-notifs { display: flex; flex-direction: column; gap: 9px; }
.sx-notif {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 13px;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r);
    font-size: .78rem;
    color: var(--sx-text-2);
}
.sx-notif b { color: var(--sx-text); }
.sx-notif b i { color: var(--sx-accent); font-size: .72rem; }
.sx-notif small { color: var(--sx-text-3); }

/* Youtube parlama kartı */
.sx-yt-scene {
    position: relative;
    height: 210px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.sx-yt-scene::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(52% 74% at 50% 42%, rgba(255, 0, 0, .28), transparent 70%);
}
.sx-yt-core {
    position: relative;
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    background: #ff0000;
    border-radius: 50%;
    color: #fff; font-size: 1.5rem;
    box-shadow: 0 0 60px rgba(255, 0, 0, .55);
}
.sx-yt-sat {
    position: absolute;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sx-card-2);
    border: 1px solid var(--sx-border-2);
    border-radius: 50%;
    color: var(--sx-text-2);
    font-size: .82rem;
}

/* Ödeme yöntem çipleri */
.sx-paychips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 560px) { .sx-paychips { grid-template-columns: 1fr; } }
.sx-paychip {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 13px;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r);
}
.sx-paychip .sx-net { border-radius: 9px; }
.sx-paychip b { display: flex; align-items: center; gap: 5px; font-size: .78rem; }
.sx-paychip b i { color: var(--sx-accent); font-size: .7rem; }
.sx-paychip small { display: block; color: var(--sx-text-3); font-size: .68rem; }

/* Özellik üçlüsü */
.sx-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .sx-feats { grid-template-columns: 1fr; } }
.sx-feat {
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-lg);
    padding: 24px;
    transition: border-color .18s;
}
.sx-feat:hover { border-color: var(--sx-border-2); }
.sx-feat .sx-eyebrow { margin-bottom: 8px; }
.sx-feat h3 { font-size: 1.15rem; margin: 0 0 8px; }
.sx-feat p { color: var(--sx-text-3); font-size: .83rem; margin: 0; }
.sx-feat-visual {
    height: 150px;
    margin-bottom: 18px;
    border-radius: var(--sx-r);
    border: 1px solid var(--sx-border);
    background: var(--sx-field);
    display: flex; align-items: center; justify-content: center; gap: 14px;
    font-size: 1.6rem; color: var(--sx-text-3);
    position: relative;
    overflow: hidden;
}
.sx-feat-visual::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(var(--sx-dots) 1.1px, transparent 1.1px);
    background-size: 12px 12px;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
    mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
}
.sx-feat-visual .sx-net { width: 44px; height: 44px; font-size: 1.3rem; border-radius: 12px; position: relative; }

/* Küçük özellik listesi */
.sx-minifeats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 20px; margin-top: 40px; }
@media (max-width: 900px) { .sx-minifeats { grid-template-columns: 1fr; } }
.sx-minifeat .sx-hicon { margin-bottom: 13px; }
.sx-minifeat h4 { font-size: .95rem; margin: 0 0 7px; font-family: var(--sx-font); font-weight: 650; }
.sx-minifeat p { color: var(--sx-text-3); font-size: .82rem; margin: 0; }

/* Yorumlar */
.sx-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .sx-quotes { grid-template-columns: 1fr; } }
.sx-quote { background: var(--sx-card); border: 1px solid var(--sx-border); border-radius: var(--sx-r-lg); padding: 20px; }
.sx-quote-top { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.sx-quote-top b { display: block; font-size: .86rem; }
.sx-stars { color: var(--sx-amber); font-size: .68rem; letter-spacing: 1px; }
.sx-quote-score {
    margin-left: auto;
    width: 40px; height: 40px; flex: 0 0 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--sx-accent);
    font-size: .74rem; font-weight: 700;
    color: var(--sx-text);
}
.sx-quote p { margin: 0; color: var(--sx-text-2); font-size: .82rem; line-height: 1.65; }
.sx-rating-pill {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 26px auto 0;
    padding: 9px 18px;
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: 999px;
    font-size: .8rem;
    color: var(--sx-text-3);
}
.sx-rating-pill b { color: var(--sx-text); }

/* SSS */
.sx-faq-tabs { display: flex; justify-content: center; gap: 6px; margin-bottom: 22px; flex-wrap: wrap; }
.sx-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 880px; margin: 0 auto; }
@media (max-width: 800px) { .sx-faq-grid { grid-template-columns: 1fr; } }
.sx-faq {
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r);
    overflow: hidden;
    align-self: start;
}
.sx-faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    font-size: .85rem; font-weight: 550;
    color: var(--sx-text);
    list-style: none;
    transition: background .15s;
}
.sx-faq summary::-webkit-details-marker { display: none; }
.sx-faq summary:hover { background: var(--sx-card-2); }
.sx-faq summary i { color: var(--sx-text-3); font-size: .72rem; transition: transform .18s; flex: 0 0 auto; }
.sx-faq[open] summary i { transform: rotate(180deg); }
.sx-faq-body { padding: 0 16px 15px; color: var(--sx-text-2); font-size: .82rem; line-height: 1.65; }

/* Alt CTA + belge kartı */
.sx-docs-cta {
    position: relative;
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-lg);
    padding: clamp(26px, 5vw, 44px);
    overflow: hidden;
}
.sx-docs-cta::after {
    content: "";
    position: absolute; right: -20px; bottom: -20px; top: 30%;
    width: 46%;
    background-image: radial-gradient(var(--sx-dots) 1.4px, transparent 1.4px);
    background-size: 14px 14px;
    -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 10%, transparent 75%);
    mask-image: radial-gradient(circle at 100% 100%, #000 10%, transparent 75%);
}
.sx-docs-cta h3 { font-size: 1.45rem; margin: 0 0 8px; }
.sx-docs-cta p { color: var(--sx-text-3); font-size: .85rem; margin: 0 0 20px; }

.sx-ctabar {
    display: flex; align-items: center; gap: 14px;
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-lg);
    padding: 15px 18px;
    margin: 44px 0 0;
    flex-wrap: wrap;
}
.sx-ctabar p { margin: 0; font-size: .86rem; color: var(--sx-text-3); }
.sx-ctabar p b { color: var(--sx-text); }
.sx-ctabar .sx-btn { margin-left: auto; }

/* Altbilgi */
.sx-foot { padding: 40px 0 26px; margin-top: 20px; }
.sx-foot-links {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 18px;
    padding-bottom: 34px;
}
@media (max-width: 800px) { .sx-foot-links { grid-template-columns: repeat(2, 1fr); } }
.sx-foot-col b { display: block; font-size: .84rem; margin-bottom: 12px; }
.sx-foot-col a { display: block; color: var(--sx-text-3); font-size: .8rem; padding: 4px 0; }
.sx-foot-col a:hover { color: var(--sx-text); }
.sx-foot-bar {
    display: flex; align-items: center; gap: 14px;
    border-top: 1px solid var(--sx-border);
    padding-top: 22px;
    flex-wrap: wrap;
    color: var(--sx-text-3);
    font-size: .8rem;
}
.sx-foot-bar .sx-logo-txt { font-size: .9rem; }
.sx-foot-nav { margin-left: auto; display: flex; gap: 18px; }
.sx-foot-nav a { color: var(--sx-text-3); font-size: .8rem; }
.sx-foot-nav a:hover { color: var(--sx-text); }

/* ------------------- 26b. Açılış v2: canlı rozet / giriş çubuğu ---------- */
.sx-live {
    position: relative;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 6px 14px 6px 6px;
    background: var(--sx-card);
    border: 1px solid var(--sx-border-2);
    border-radius: 999px;
    color: var(--sx-text-2);
    font-size: .8rem; font-weight: 550;
    margin-bottom: 22px;
}
.sx-live b { color: var(--sx-text); font-family: var(--sx-display); }
.sx-live i { color: var(--sx-text-3); font-size: .75rem; }
.sx-live-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: var(--sx-green-soft);
    border-radius: 999px;
    color: var(--sx-green-tx);
    font-size: .7rem; font-weight: 650;
}
.sx-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--sx-green);
    animation: sxPulse 1.6s ease-in-out infinite;
}
@keyframes sxPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.72); } }

.sx-join {
    position: relative;
    display: inline-flex; align-items: center; gap: 12px;
    padding: 7px 8px 7px 8px;
    background: var(--sx-card);
    border: 1px solid var(--sx-border-2);
    border-radius: 999px;
    color: var(--sx-text-2);
    font-size: .84rem;
    margin: 4px 0 18px;
}
.sx-join b { color: var(--sx-text); }
.sx-join .sx-hicon { width: 30px; height: 30px; flex: 0 0 30px; }

.sx-trusts {
    position: relative;
    display: flex; justify-content: center; gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}
.sx-trust {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 15px;
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: 999px;
    color: var(--sx-text);
    font-size: .8rem; font-weight: 550;
}

/* Kahraman giriş çubuğu */
.sx-hero-login {
    position: relative;
    max-width: 860px;
    margin: 0 auto 34px;
    padding: 12px;
    background: var(--sx-card);
    border: 1px solid var(--sx-border-2);
    border-radius: var(--sx-r-lg);
    box-shadow: var(--sx-shadow);
}
.sx-hl-row { display: flex; gap: 10px; align-items: stretch; }
.sx-hl-row > .sx-input { flex: 1 1 0; min-width: 0; }
.sx-hl-pass { flex: 1.2 1 0; min-width: 0; }
.sx-hl-pass input { padding-right: 118px; }
.sx-hl-forgot {
    position: absolute; right: 8px; top: 50%;
    transform: translateY(-50%);
    padding: 5px 10px;
    background: var(--sx-card-2);
    border: 1px solid var(--sx-border);
    border-radius: 7px;
    font-size: .68rem;
    color: var(--sx-text-2);
    white-space: nowrap;
}
.sx-hl-forgot:hover { color: var(--sx-text); border-color: var(--sx-border-2); }
.sx-hl-btn { flex: 0 0 auto; height: 42px; }

/* Satır sonu kare düğmeler: şifre kaydet + Google */
.sx-hl-icon {
    width: 48px; height: 42px; flex: 0 0 48px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-sm);
    color: var(--sx-text-2);
    font-size: .95rem;
    cursor: pointer;
    transition: color .16s, border-color .16s, background .16s;
    padding: 0;
    position: relative;
    overflow: hidden;
}
.sx-hl-icon:hover { color: var(--sx-text); border-color: var(--sx-border-2); }
.sx-hl-icon.is-on {
    background: var(--sx-accent-soft);
    border-color: var(--sx-accent);
    color: var(--sx-accent-tx);
}
.sx-hl-icon.is-on .fa-bookmark { font-weight: 900; }
/* Google karesi: görünen kısım bizim çizdiğimiz G; Google'ın gerçek
   düğmesi görünmez katman olarak üstte durur ve tıklamayı alır. */
.sx-hl-gwrap { background: #fff; border-color: rgba(15, 23, 42, .12); cursor: pointer; }
.sx-hl-gwrap .sx-gmark { display: block; }
.sx-hl-greal {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .0001;
    overflow: hidden;
}
.sx-hl-greal .g_id_signin { transform: scale(1.9); transform-origin: center; line-height: 0; }
.sx-hl-greal iframe { display: block; }

@media (max-width: 760px) {
    .sx-hl-row { flex-wrap: wrap; }
    .sx-hl-row > .sx-input, .sx-hl-pass { flex: 1 1 100%; }
    .sx-hl-btn { flex: 1 1 auto; }
}

/* Platform şeridi */
.sx-plats { position: relative; margin: 6px 0 10px; }
.sx-plat-pill {
    display: inline-flex; align-items: center; gap: 11px;
    padding: 9px 20px 9px 10px;
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: 999px;
    color: var(--sx-text);
    font-size: .88rem; font-weight: 600;
    white-space: nowrap;
}
.sx-plat-pill .sx-net { width: 30px; height: 30px; flex: 0 0 30px; font-size: .9rem; }

/* Neden organik ızgarası */
.sx-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1000px) { .sx-why { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sx-why { grid-template-columns: 1fr; } }
.sx-why .sx-feat p { font-size: .8rem; }

/* Kayan yorumlar */
.sx-tqwrap { padding: 8px 0 22px; }
.sx-tqwrap .sx-marquee-row { animation-duration: 52s; padding: 8px 0; }
.sx-tq {
    width: 350px; flex: 0 0 350px;
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-lg);
    padding: 16px 17px;
    white-space: normal;
}
.sx-tq .sx-quote-top { margin-bottom: 10px; }
.sx-tq p { margin: 0; color: var(--sx-text-2); font-size: .8rem; line-height: 1.6; }
@media (max-width: 520px) { .sx-tq { width: 290px; flex-basis: 290px; } }

/* Bölünmüş giriş görsel paneli cilası */
.sx-auth-visual { position: relative; }
.sx-auth-visual .sx-stage-orbit { position: absolute; }
@media (min-width: 981px) {
    .sx-auth-visual .sx-stage-orbit, .sx-auth-visual .sx-float { display: flex; }
}

/* ------------------- 26d. Şartlar sayfası tipografisi -------------------- */
.sx-terms h2 {
    display: flex; align-items: center; gap: 12px;
    font-size: 1.22rem;
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sx-border);
}
.sx-terms h3 {
    display: flex; align-items: center; gap: 10px;
    font-size: .98rem;
    margin: 26px 0 10px;
}
.sx-terms h3 > i.fa-diamond { font-size: .55rem; color: var(--sx-accent); }
.sx-terms-no {
    width: 24px; height: 24px; flex: 0 0 24px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sx-field);
    border: 1px solid var(--sx-border-2);
    border-radius: 8px;
    font-size: .72rem; font-weight: 700;
    color: var(--sx-text);
    font-family: var(--sx-font);
}
.sx-terms p { margin: 0 0 10px; color: var(--sx-text-2); font-size: .86rem; line-height: 1.7; }
.sx-terms-intro { font-size: .9rem !important; }
.sx-terms ul { margin: 0 0 12px; padding: 0; list-style: none; }
.sx-terms ul li {
    position: relative;
    padding: 3px 0 3px 24px;
    color: var(--sx-text-2);
    font-size: .85rem;
    line-height: 1.6;
}
.sx-terms ul li::before {
    content: "\f054";
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; left: 4px; top: 7px;
    font-size: .58rem;
    color: var(--sx-text-3);
}
.sx-terms ul.sx-terms-ok li::before { content: "\f00c"; color: var(--sx-green-tx); font-size: .68rem; top: 6px; }
.sx-terms ul.sx-terms-warn li::before { content: "\f071"; color: var(--sx-amber-tx); font-size: .64rem; top: 6px; }
.sx-terms a { color: var(--sx-accent-tx); text-decoration: underline; text-underline-offset: 3px; }
.sx-terms-help {
    display: flex; align-items: center; gap: 12px;
    margin-top: 26px;
    padding: 14px 16px;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r);
    flex-wrap: wrap;
}
.sx-terms-help b { font-size: .86rem; }

/* ---------------- 26c. Servisler: kaydırdıkça yükleme ------------------- */
/* Ekran dışındaki satır ve gruplar çizilmez; kaydırdıkça işlenir.
   Süzme/arama display üzerinden çalışmaya devam eder. */
.sx-svc { content-visibility: auto; contain-intrinsic-size: auto 118px; }
.sx-group { content-visibility: auto; contain-intrinsic-size: auto 620px; }

/* ----------------------------- 27. Duyarlılık ---------------------------- */
@media (max-width: 1023px) {
    .sx-side { transform: translateX(-104%); box-shadow: var(--sx-shadow); }
    .sx-side.showing { transform: none; }
    .sx-main { margin-left: 0; }
    .sx-rail .sx-main { margin-left: 0; }
    .sx-rail .sx-side { width: var(--sx-side-w); }
    .sx-rail .sx-side .sx-logo-txt, .sx-rail .sx-side .sx-user-in, .sx-rail .sx-side .sx-nav-item span, .sx-rail .sx-side .sx-nav-badge { display: block; }
    .sx-rail .sx-nav-item { justify-content: flex-start; padding: 9px 11px; }
    .sx-content { padding: 20px 14px 40px; }
    .sx-head h1 { font-size: 1.5rem; }
}
@media (max-width: 640px) {
    .sx-row-top { padding: 12px 13px; }
    .sx-row-bottom { padding: 10px 13px 13px; }
    .sx-chat { padding: 14px; }
    .sx-composer { padding: 12px 14px 16px; }
    .sx-faqbar { margin: 0 14px; }
    .sx-card-pad, .sx-card-head { padding-left: 14px; padding-right: 14px; }
    .sx-top { padding: 0 12px; }
    .sx-pick { padding: 0 9px; }
}

/* ------------- 27b. select2 koyu tema — yükleme sırasından bağımsız ------ */
/* Panel select2'yi FARKLI temalarla (default / classic) kurabiliyor ve
   kendi CSS'ini temadan sonra yükleyebiliyor. Bu blok tema adından bağımsız
   olarak HER select2 kabına uygulanır: mavi/beyaz durum kalmaz, mat koyu. */

/* Kapalı seçim kutusu */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple,
.select2-container--default .select2-selection--single,
.select2-container--classic .select2-selection--single {
    background: var(--sx-field) !important;
    background-color: var(--sx-field) !important;
    background-image: none !important;
    border: 1px solid var(--sx-border) !important;
    border-radius: var(--sx-r-sm) !important;
    box-shadow: none !important;
}
.select2-container.select2-container--focus .select2-selection--single,
.select2-container.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--classic.select2-container--open .select2-selection--single {
    border-color: var(--sx-border-2) !important;
    box-shadow: none !important;
}
.select2-container .select2-selection__rendered {
    color: var(--sx-text) !important;
}
.select2-container .select2-selection__placeholder { color: var(--sx-text-3) !important; }
.select2-container--classic .select2-selection--single .select2-selection__arrow {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
}

/* Açılır liste kabı */
.select2-dropdown,
.select2-dropdown--below,
.select2-dropdown--above,
.select2-container .select2-dropdown,
.select2-container--default .select2-dropdown,
.select2-container--classic .select2-dropdown,
.select2-container--open .select2-dropdown {
    background: var(--sx-card) !important;
    background-color: var(--sx-card) !important;
    background-image: none !important;
    border: 1px solid var(--sx-border-2) !important;
    border-radius: var(--sx-r) !important;
    box-shadow: var(--sx-shadow) !important;
    color: var(--sx-text) !important;
    overflow: hidden;
}
.select2-container .select2-results,
.select2-container .select2-results__options {
    background: transparent !important;
    background-color: transparent !important;
}

/* Satırlar — okunur açık gri, tam opak */
.select2-container .select2-results__option,
.select2-container li.select2-results__option,
.select2-container--default .select2-results__option,
.select2-container--classic .select2-results__option {
    background: transparent !important;
    background-color: transparent !important;
    color: #c9c9d4 !important;
    opacity: 1 !important;
    padding: 9px 12px;
    font-size: .83rem;
}
.sx-light .select2-container .select2-results__option { color: #33415c !important; }
.select2-container .select2-results__option * { color: inherit !important; opacity: 1 !important; }

/* Üzerine gelinen satır — beyaz DEĞİL, hafif açık koyu */
.select2-container .select2-results__option--highlighted,
.select2-container .select2-results__option:hover,
.select2-container li.select2-results__option:hover,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--classic .select2-results__option--highlighted[aria-selected] {
    background: var(--sx-field-2) !important;
    background-color: var(--sx-field-2) !important;
    background-image: none !important;
    color: #ffffff !important;
}
.sx-light .select2-container .select2-results__option--highlighted,
.sx-light .select2-container .select2-results__option:hover { color: #0f172a !important; }

/* Seçili satır — mavi DEĞİL, nötr koyu vurgu */
.select2-container .select2-results__option--selected,
.select2-container--default .select2-results__option--selected,
.select2-container--classic .select2-results__option--selected,
.select2-container .select2-results__option[aria-selected="true"] {
    background: var(--sx-field) !important;
    background-color: var(--sx-field) !important;
    background-image: none !important;
    color: var(--sx-text) !important;
}

/* Liste içi arama kutusu */
.select2-container .select2-search--dropdown,
.select2-container--default .select2-search--dropdown,
.select2-container--classic .select2-search--dropdown {
    background: var(--sx-card) !important;
    padding: 8px;
}
.select2-container .select2-search--dropdown .select2-search__field {
    background: var(--sx-field) !important;
    border: 1px solid var(--sx-border) !important;
    border-radius: 8px !important;
    color: var(--sx-text) !important;
    height: 34px;
    padding: 0 11px;
    outline: none !important;
    box-shadow: none !important;
}
.select2-container .select2-results__option--disabled,
.select2-container .select2-results__option[aria-disabled="true"] { color: var(--sx-text-3) !important; }

/* ---------- 27d. Açılır liste satırları — MUTLAK öncelik ----------------- */
/* Panelin kuralları da !important taşıyıp temadan sonra yüklenebiliyor.
   :not(#sx):not(#sx) hilesi ID düzeyinde özgüllük katar (2,1,0):
   class tabanlı hiçbir kural (!important olsa bile) bunları ezemez.
   Sıralama önemli: taban → seçili → üzerine gelinen (sona yazılan kazanır). */

/* 1) Taban satır: şeffaf zemin, okunur açık gri */
.select2-results__option:not(#sx):not(#sx),
.select2-dropdown li:not(#sx):not(#sx),
.ss-option:not(#sx):not(#sx),
.choices__item:not(#sx):not(#sx),
.selectize-dropdown .option:not(#sx):not(#sx),
.nice-select .option:not(#sx):not(#sx) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #c9c9d4 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}
.sx-light .select2-results__option:not(#sx):not(#sx),
.sx-light .select2-dropdown li:not(#sx):not(#sx) { color: #33415c !important; }

/* 2) Seçili satır: nötr koyu, MAVİ YOK */
.select2-results__option[aria-selected="true"]:not(#sx):not(#sx),
.select2-results__option--selected:not(#sx):not(#sx),
.ss-option.ss-option-selected:not(#sx):not(#sx),
.choices__item.is-selected:not(#sx):not(#sx),
.selectize-dropdown .option.selected:not(#sx):not(#sx),
.nice-select .option.selected:not(#sx):not(#sx) {
    background: var(--sx-field) !important;
    background-color: var(--sx-field) !important;
    background-image: none !important;
    color: var(--sx-text) !important;
}

/* 3) Üzerine gelinen satır: hafif açık koyu, BEYAZ YOK */
.select2-results__option--highlighted:not(#sx):not(#sx),
.select2-results__option:hover:not(#sx):not(#sx),
.select2-dropdown li:hover:not(#sx):not(#sx),
.ss-option:hover:not(#sx):not(#sx),
.ss-option.ss-option-highlighted:not(#sx):not(#sx),
.choices__item.is-highlighted:not(#sx):not(#sx),
.selectize-dropdown .option.active:not(#sx):not(#sx),
.nice-select .option:hover:not(#sx):not(#sx),
.nice-select .option.focus:not(#sx):not(#sx) {
    background: var(--sx-field-2) !important;
    background-color: var(--sx-field-2) !important;
    background-image: none !important;
    color: #ffffff !important;
}
.sx-light .select2-results__option--highlighted:not(#sx):not(#sx),
.sx-light .select2-results__option:hover:not(#sx):not(#sx) { color: #0f172a !important; }

/* 4) Satır içi öğeler rengi miras alır (soluk kalmasın) */
.select2-results__option:not(#sx):not(#sx) *,
.ss-option:not(#sx):not(#sx) *,
.choices__item:not(#sx):not(#sx) * {
    color: inherit !important;
    opacity: 1 !important;
}

/* 5) Liste kapları — hangi widget olursa olsun mat koyu */
.select2-dropdown:not(#sx):not(#sx),
.ss-content:not(#sx):not(#sx),
.choices__list--dropdown:not(#sx):not(#sx),
.selectize-dropdown:not(#sx):not(#sx),
.nice-select .list:not(#sx):not(#sx) {
    background: var(--sx-card) !important;
    background-color: var(--sx-card) !important;
    border: 1px solid var(--sx-border-2) !important;
    box-shadow: var(--sx-shadow) !important;
    color: var(--sx-text) !important;
}

/* ---------- 27e. Tema özel açılır seçim (native select yerine) ----------- */
/* Chrome'un native <select> penceresindeki mavi seçim / beyaz hover
   tarayıcıya aittir ve CSS ile boyanamaz. Bu bileşen native select'i
   görünmez tutar (panel JS'i değer okumaya/yazmaya devam eder) ve
   listeyi tasarıma uygun çizer. script.js kurar ve eşitler. */
.sx-cselect { position: relative; }
.sx-cselect > select {
    position: absolute !important;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
    margin: 0; padding: 0; border: 0;
}
.sx-cs-btn {
    display: flex; align-items: center; gap: 9px;
    width: 100%; min-height: 42px;
    padding: 8px 36px 8px 13px;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-r-sm);
    color: var(--sx-text);
    font-size: .86rem;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s;
    position: relative;
}
.sx-cs-btn::after {
    content: "";
    position: absolute; right: 13px; top: 50%;
    width: 10px; height: 6px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%239a9aa6' stroke-width='1.6' stroke-linecap='round' d='m1 1 4 4 4-4'/%3E%3C/svg%3E") no-repeat center;
    transition: transform .18s;
}
.sx-cselect.is-open .sx-cs-btn::after { transform: translateY(-50%) rotate(180deg); }
.sx-cselect.is-open .sx-cs-btn,
.sx-cs-btn:focus-visible {
    border-color: var(--sx-accent);
    box-shadow: 0 0 0 3px var(--sx-accent-soft);
    outline: none;
}
.sx-cs-btn .sx-cs-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-cs-btn.is-placeholder .sx-cs-label { color: var(--sx-text-3); }

.sx-cs-panel {
    position: absolute;
    top: calc(100% + 7px); left: 0; right: 0;
    z-index: 95;
    background: var(--sx-card);
    border: 1px solid var(--sx-border-2);
    border-radius: var(--sx-r);
    box-shadow: var(--sx-shadow);
    display: none;
    overflow: hidden;
}
.sx-cselect.is-open .sx-cs-panel { display: block; animation: sxFade .15s ease both; }
.sx-cs-search { position: relative; padding: 8px; border-bottom: 1px solid var(--sx-border); }
.sx-cs-search i { position: absolute; left: 19px; top: 50%; transform: translateY(-50%); font-size: .75rem; color: var(--sx-text-3); }
.sx-cs-search input {
    width: 100%; height: 34px;
    padding: 0 10px 0 32px;
    background: var(--sx-field);
    border: 1px solid var(--sx-border);
    border-radius: 8px;
    color: var(--sx-text);
    font-size: .82rem;
}
.sx-cs-search input:focus { outline: none; border-color: var(--sx-accent); }
.sx-cs-list { max-height: 320px; overflow-y: auto; padding: 6px; }
.sx-cs-row {
    display: flex; align-items: center; gap: 9px;
    width: 100%;
    padding: 9px 10px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #c9c9d4;
    font-size: .83rem;
    text-align: left;
    cursor: pointer;
    transition: background .13s, color .13s;
}
.sx-light .sx-cs-row { color: #33415c; }
.sx-cs-row:hover, .sx-cs-row.is-hover { background: var(--sx-field-2); color: #fff; }
.sx-light .sx-cs-row:hover, .sx-light .sx-cs-row.is-hover { color: #0f172a; }
.sx-cs-row.is-selected { background: var(--sx-field); color: var(--sx-text); }
.sx-cs-row.is-selected::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    margin-left: auto;
    font-size: .7rem;
    color: var(--sx-accent-tx);
}
.sx-cs-badge {
    flex: 0 0 auto;
    min-width: 26px; height: 22px; padding: 0 7px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sx-card-2);
    border: 1px solid var(--sx-border-2);
    border-radius: 999px;
    font-size: .7rem; font-weight: 650;
    color: var(--sx-text);
}
.sx-cs-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-cs-price { flex: 0 0 auto; font-weight: 650; color: var(--sx-accent-tx); font-size: .78rem; }
.sx-cs-empty { padding: 14px; text-align: center; color: var(--sx-text-3); font-size: .8rem; }

/* ------ 27g. Açılır liste satır hizası + panel ikonları ------------------ */
/* Satır içeriği tek eksende hizalanır; panelin bastığı kategori ikonları
   (img / font ikonu) sabit boyuta oturtulur. */
.select2-results__option > a:not(#sx):not(#sx),
.select2-dropdown li > a:not(#sx):not(#sx) {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 24px;
}
.select2-results__option img:not(#sx),
.select2-selection__rendered img:not(#sx) {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    flex: 0 0 24px;
    border-radius: 7px;
    object-fit: cover;
    margin: 0 !important;
    vertical-align: middle;
}
.select2-results__option i[class*="fa-"]:not(#sx),
.select2-results__option span[class*="fa-"]:not(#sx) {
    width: 24px;
    flex: 0 0 24px;
    text-align: center;
    font-size: .95rem;
}
.select2-selection__rendered:not(#sx) { display: flex !important; align-items: center; gap: 8px; }
.select2-selection__rendered .sx-s2ic { margin-right: 0 !important; }
.sx-s2ic { margin-right: 0 !important; vertical-align: middle !important; }

/* Servis satırlarındaki ID rozeti (panelin bastığı .badge) — gri yuvarlak
   yerine tema çipi görünümü */
.select2-results__option .badge:not(#sx):not(#sx),
.select2-selection__rendered .badge:not(#sx):not(#sx),
.services-search-container .badge:not(#sx):not(#sx) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 22px;
    padding: 0 9px;
    background: var(--sx-field-2) !important;
    background-image: none !important;
    border: 1px solid var(--sx-border-2) !important;
    border-radius: 999px !important;
    color: var(--sx-text) !important;
    font-size: .7rem !important;
    font-weight: 650 !important;
    font-family: var(--sx-display);
    line-height: 1 !important;
    text-shadow: none !important;
    vertical-align: middle;
    flex: 0 0 auto;
}

/* ------ 27h. Bakiye ekle: sunucudan gelen talimat kutusu ----------------- */
/* Yönetici içeriği beyaz zeminle gelse bile koyu temaya oturtulur. */
#amount-fields [style*="background"],
form [class*="instruction"],
form [class*="description"] div[style*="background"],
.sx-app form div[style*="background-color: rgb(255"],
.sx-app form div[style*="background:#fff"],
.sx-app form div[style*="background: #fff"],
.sx-app form div[style*="background:#ffffff"],
.sx-app form div[style*="background: #ffffff"] {
    background: var(--sx-field) !important;
    background-color: var(--sx-field) !important;
    border: 1px solid var(--sx-border) !important;
    border-radius: var(--sx-r-sm);
    color: var(--sx-text-2);
    padding: 12px 14px;
}

/* ------ 27f. Satır İÇİNDEKİ <a> — asıl mavi/beyazın kaynağı ------------- */
/* Panelin select2 çatalı her seçeneği <li><a href="#">...</a></li> olarak
   basar; bootstrap.css'in .dropdown-menu kuralları o <a>'yı boyar
   (mavi .active>a, beyaz a:hover). li değil, a hedeflenmelidir. */
.select2-results__option > a:not(#sx):not(#sx),
.select2-results__option > a:hover:not(#sx):not(#sx),
.select2-results__option > a:focus:not(#sx):not(#sx),
.select2-dropdown li > a:not(#sx):not(#sx),
.select2-dropdown li > a:hover:not(#sx):not(#sx),
.select2-dropdown li > a:focus:not(#sx):not(#sx),
.select2-dropdown li.active > a:not(#sx):not(#sx),
.select2-dropdown li.active > a:hover:not(#sx):not(#sx),
.select2-dropdown .dropdown-menu > li > a:not(#sx):not(#sx),
.select2-dropdown .dropdown-menu > .active > a:not(#sx):not(#sx) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: inherit !important;
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    text-decoration: none !important;
    text-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    white-space: normal;
}
/* Gövdeye eklenen liste kabı .dropdown-menu sınıfını da taşıyabilir */
.select2-dropdown.dropdown-menu:not(#sx):not(#sx),
.select2-container .dropdown-menu:not(#sx):not(#sx),
.select2-dropdown .dropdown-menu:not(#sx):not(#sx) {
    background: var(--sx-card) !important;
    background-color: var(--sx-card) !important;
    border-color: var(--sx-border-2) !important;
    box-shadow: var(--sx-shadow) !important;
    position: static;
    float: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: 6px;
}

/* ------ 27c. Yeni sipariş arama kutusu (panel içeriği yeniden basar) ------ */
/* Panel #new-order-search içini kendi arama girdisiyle değiştirebiliyor;
   kapsayıcıya ve içindeki her girdiye boşluk/tema garanti edilir. */
#new-order-search { margin-bottom: 24px !important; }
#new-order-search .input-wrapper { position: relative; display: block; }
#new-order-search input,
#new-order-search input.form-control {
    display: block;
    width: 100%;
    height: 42px;
    padding: 0 13px 0 38px;
    background: var(--sx-field) !important;
    border: 1px solid var(--sx-border) !important;
    border-radius: var(--sx-r-sm) !important;
    color: var(--sx-text) !important;
    font-size: .86rem;
}
#new-order-search input:focus {
    outline: none;
    border-color: var(--sx-accent) !important;
    box-shadow: 0 0 0 3px var(--sx-accent-soft) !important;
}
#new-order-search input::placeholder { color: var(--sx-text-3); }
#new-order-search .input-wrapper > button,
#new-order-search .input-wrapper > i,
#new-order-search button {
    position: absolute;
    left: 6px; top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent !important;
    border: 0 !important;
    color: var(--sx-text-3);
    font-size: .82rem;
    pointer-events: none;
}
/* Kategori ve servis alanlarının nefes payı — panel kapsayıcıyı değiştirse de korunur */
#order-form label[for="orderform-category"],
#order-form label[for="orderform-service"] { display: block; margin: 0 0 8px; }
#order-form .select2-container { margin-bottom: 4px; }

/* --------------------------------- 28. RTL ------------------------------- */
[dir="rtl"] .sx-side { right: 0; left: auto; border-right: 0; border-left: 1px solid var(--sx-border); transform: none; }
@media (max-width: 1023px) { [dir="rtl"] .sx-side { transform: translateX(104%); } [dir="rtl"] .sx-side.showing { transform: none; } }
[dir="rtl"] .sx-main { margin-left: 0; margin-right: var(--sx-side-w); }
@media (max-width: 1023px) { [dir="rtl"] .sx-main { margin-right: 0; } }
[dir="rtl"] .sx-search { margin-left: 0; margin-right: auto; }
[dir="rtl"] .sx-row-side { margin-left: 0; margin-right: auto; }
[dir="rtl"] .sx-menu { left: auto; right: 0; }
[dir="rtl"] .sx-menu.is-right { right: auto; left: 0; }
[dir="rtl"] .sx-drawer { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--sx-border-2); transform: translateX(-105%); }
[dir="rtl"] .sx-drawer-open .sx-drawer { transform: none; }

/* ------------------------------ 29. Logo boyutu -------------------------- */
.sx-side-head { position: relative; justify-content: center; padding-top: 34px; min-height: 92px; }
.sx-side-head .toggle-menu { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; font-size: .8rem; opacity: .75; }
.sx-side-head .toggle-menu:hover { opacity: 1; }
.sx-side .sx-logo { margin: 0 auto; max-width: 100%; }
.sx-side .sx-logo img { max-height: 52px; max-width: 100%; width: auto; object-fit: contain; display: block; }
.sx-gnav .sx-logo img { max-height: 40px; }
.sx-rail .sx-side-head { padding-top: 12px; min-height: 0; }
.sx-rail .sx-side-head .toggle-menu { position: static; opacity: 1; }
.sx-rail .sx-side .sx-logo img { max-width: 40px; max-height: 30px; }

/* --------------------------- 30. Mobil dil seçici ------------------------- */
/* Üst çubuktaki dil menüsü 767px altında gizli; bu blok o boşluğu doldurur. */
.sx-side-lang { display: none; margin: 0 0 10px; padding: 10px 12px 12px; background: var(--sx-card-2); border: 1px solid var(--sx-border); border-radius: var(--sx-r); }
.sx-side-lang-tt { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--sx-text-3); }
.sx-side-lang-tt i { font-size: .78rem; color: var(--sx-text-2); }
.sx-side-lang-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-side-lang-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 8px 11px; background: var(--sx-field); border: 1px solid var(--sx-border); border-radius: var(--sx-r-sm); color: var(--sx-text-2); font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; transition: color .15s, border-color .15s, background .15s; }
.sx-side-lang-chip:hover, .sx-side-lang-chip:focus { color: var(--sx-text); border-color: var(--sx-border-2); text-decoration: none; }
.sx-side-lang-chip.is-on { background: var(--sx-accent-soft); border-color: rgba(47, 107, 255, .45); color: var(--sx-accent-tx); }
@media (max-width: 767px) { .sx-side-lang { display: block; } }
.sx-rail .sx-side-lang { display: none !important; }