/* ============================================================================
   SOSYALX — Perfect Panel Teması (sosyalx.net)
   ----------------------------------------------------------------------------
   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; }

/* ---------------- 31. Seviye penceresi + bonus duyurusu ------------------- */
/* Hesap Durumu kartındaki mavi ünlem rozeti */
.sx-lvl-info { position: absolute; top: 10px; right: 10px; z-index: 3; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--sx-accent); border: 0; border-radius: 50%; color: #fff; font-size: .82rem; line-height: 1; cursor: pointer; animation: sxLvlPulse 2.6s ease-out infinite; transition: transform .15s; }
.sx-lvl-info:hover, .sx-lvl-info:focus { transform: scale(1.14); }
@keyframes sxLvlPulse { 0% { box-shadow: 0 0 0 0 rgba(47, 107, 255, .5); } 70% { box-shadow: 0 0 0 10px rgba(47, 107, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 107, 255, 0); } }

/* Sadakat penceresi içeriği (modal body'ye taşındığı için kapsamsız) */
#sx-lvl-modal .modal-dialog { max-width: 460px; width: calc(100% - 28px); margin: 9vh auto; }
.sx-lvlm-head { display: flex !important; align-items: center !important; gap: 12px; padding: 16px 18px !important; border-bottom: 1px solid var(--sx-border) !important; }
.sx-lvlm-ic { width: 40px; height: 40px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--sx-accent-soft) !important; border: 1px solid rgba(47, 107, 255, .35); border-radius: 12px; color: var(--sx-accent-tx) !important; font-size: 1.02rem; }
.sx-lvlm-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sx-lvlm-tt b { font-size: .98rem; color: var(--sx-text) !important; font-weight: 700; }
.sx-lvlm-tt > span { font-size: .77rem; color: var(--sx-text-2) !important; }
.sx-lvlm-tt em { font-style: normal; color: var(--sx-accent-tx) !important; font-weight: 700; }
.sx-lvlm-body { padding: 15px 18px 18px !important; display: flex; flex-direction: column; gap: 8px; }
.sx-lvlm-cols, .sx-lvlm-row { display: grid; grid-template-columns: 1fr 100px 74px; align-items: center; gap: 8px; }
.sx-lvlm-cols { padding: 0 13px; font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--sx-text-3) !important; }
.sx-lvlm-cols span:nth-child(2) { text-align: right; }
.sx-lvlm-cols span:last-child { text-align: right; }
.sx-lvlm-row { padding: 11px 13px; background: var(--sx-field) !important; border: 1px solid var(--sx-border) !important; border-radius: 11px; font-size: .84rem; color: var(--sx-text-2) !important; }
.sx-lvlm-row > span:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; }
.sx-lvlm-row > b { text-align: right; color: var(--sx-accent-tx) !important; font-weight: 800; font-variant-numeric: tabular-nums; }
.sx-lvlm-name { display: flex; align-items: center; gap: 10px; color: var(--sx-text) !important; font-weight: 650; min-width: 0; }
.sx-lvlm-name i { width: 27px; height: 27px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--sx-card-2); border: 1px solid var(--sx-border); border-radius: 8px; color: var(--sx-text-2); font-size: .74rem; }
.sx-lvlm-row.is-on { background: var(--sx-accent-soft) !important; border-color: rgba(47, 107, 255, .5) !important; }
.sx-lvlm-row.is-on .sx-lvlm-name i { background: var(--sx-accent); border-color: var(--sx-accent); color: #fff; }
.sx-lvlm-note { display: flex; align-items: flex-start; gap: 9px; margin: 5px 2px 7px !important; font-size: .77rem; line-height: 1.55; color: var(--sx-text-2) !important; }
.sx-lvlm-note i { color: var(--sx-accent-tx); margin-top: 3px; }

/* Bakiye ekle — kayan bonus duyurusu */
.sx-promo { position: relative; display: flex; align-items: center; overflow: hidden; border: 1px solid rgba(47, 107, 255, .35); border-radius: var(--sx-r); background: linear-gradient(90deg, rgba(47, 107, 255, .15), rgba(47, 107, 255, .03) 42%, rgba(34, 211, 238, .07)), var(--sx-card); }
.sx-promo-badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; margin: 9px 0 9px 9px; padding: 8px 13px; background: linear-gradient(135deg, var(--sx-accent), #1d4ed8); border-radius: 9px; color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .04em; white-space: nowrap; z-index: 2; box-shadow: 0 8px 18px -8px rgba(47, 107, 255, .8); }
.sx-promo-track { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.sx-promo-run { display: inline-flex; align-items: center; padding: 13px 0; white-space: nowrap; animation: sxPromoRun 30s linear infinite; will-change: transform; }
.sx-promo:hover .sx-promo-run { animation-play-state: paused; }
@keyframes sxPromoRun { to { transform: translateX(-50%); } }
.sx-promo-item { display: inline-flex; align-items: center; gap: 9px; margin-right: 46px; font-size: .85rem; font-weight: 650; color: var(--sx-text); }
.sx-promo-item i { color: var(--sx-accent-tx); font-size: .8rem; }
.sx-promo-item.is-dim { color: var(--sx-text-2); font-weight: 500; }
@media (max-width: 640px) { .sx-promo-badge { font-size: .7rem; padding: 7px 10px; } .sx-promo-item { font-size: .8rem; } }
@media (prefers-reduced-motion: reduce) { .sx-promo-run, .sx-lvl-info { animation: none; } }

/* -------- 32. Ortalama süre: panelin form alanı gizli, değer sağ kutuda --- */
/* script.js değeri #human_speed kutusuna aynalar; jQuery .show() satır içi
   display yazsa da !important kazanır. */
#order_average_time { display: none !important; }

/* ------------- 33. Alan adı bağlama sihirbazı (child panel) --------------- */
#sx-ns-modal .modal-dialog { max-width: 520px; width: calc(100% - 28px); margin: 6vh auto; }
.sx-nsm-step { display: flex; gap: 12px; padding: 12px 13px; background: var(--sx-field) !important; border: 1px solid var(--sx-border) !important; border-radius: 11px; }
.sx-nsm-n { flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: var(--sx-accent-soft) !important; border: 1px solid rgba(47, 107, 255, .4); border-radius: 50%; color: var(--sx-accent-tx) !important; font-size: .78rem; font-weight: 800; }
.sx-nsm-tx { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sx-nsm-tx > b { font-size: .86rem; color: var(--sx-text) !important; font-weight: 700; }
.sx-nsm-tx > span { font-size: .78rem; line-height: 1.55; color: var(--sx-text-2) !important; }
.sx-nsm-tx a { color: var(--sx-accent-tx) !important; font-weight: 600; text-decoration: none; }
.sx-nsm-tx a:hover { text-decoration: underline; }
.sx-nsm-ns { display: flex; align-items: center; gap: 9px; margin-top: 7px; padding: 7px 7px 7px 12px; background: var(--sx-card) !important; border: 1px dashed rgba(47, 107, 255, .45) !important; border-radius: 9px; }
.sx-nsm-ns code { flex: 1; min-width: 0; overflow-wrap: anywhere; background: none !important; padding: 0 !important; color: var(--sx-accent-tx) !important; font-weight: 700; font-size: .83rem; letter-spacing: .02em; }
.sx-nsm-ns .sx-btn { flex: 0 0 auto; }

/* --------------- 34. Şifre sıfırlama — sağ güvenlik kartı ----------------- */
.sx-seccard { position: relative; z-index: 2; width: min(360px, 80%); padding: 26px 24px 14px; background: var(--sx-card); border: 1px solid var(--sx-border); border-radius: var(--sx-r-lg); box-shadow: var(--sx-shadow); }
.sx-seccard-ic { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; background: var(--sx-accent-soft); border: 1px solid rgba(47, 107, 255, .4); border-radius: 14px; color: var(--sx-accent-tx); font-size: 1.15rem; margin-bottom: 14px; }
.sx-seccard h3 { margin: 0 0 6px; font-size: 1.08rem; letter-spacing: -.01em; }
.sx-seccard > p { margin: 0 0 14px; color: var(--sx-text-2); font-size: .8rem; line-height: 1.55; }
.sx-seccard-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-top: 1px solid var(--sx-border); font-size: .78rem; line-height: 1.5; color: var(--sx-text-2); }
.sx-seccard-row i { color: var(--sx-green-tx); margin-top: 2px; font-size: .85rem; }
.sx-seccard-row b { display: block; color: var(--sx-text); font-weight: 650; font-size: .82rem; margin-bottom: 1px; }

/* ---------------- 35. Tasarım cilaları (alt bar, ilerleme, vb.) ----------- */
/* Mobil alt gezinme çubuğu — yalnız 767px altı */
.sx-mnav { display: none; }
@media (max-width: 767px) {
    .sx-mnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 36; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); background: rgba(10, 10, 13, .93); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--sx-border-2); }
    .sx-light .sx-mnav { background: rgba(255, 255, 255, .95); }
    .sx-mnav-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 7px 2px 6px; background: none; border: 0; border-radius: 10px; color: var(--sx-text-3); font-size: .6rem; font-weight: 650; letter-spacing: .01em; text-decoration: none; }
    .sx-mnav-item i { font-size: .95rem; }
    .sx-mnav-item.is-on { color: var(--sx-accent-tx); background: var(--sx-accent-soft); }
    .sx-mnav-item:hover, .sx-mnav-item:focus { text-decoration: none; color: var(--sx-text); }
    .sx-mnav-dot { position: absolute; top: 5px; right: calc(50% - 15px); width: 7px; height: 7px; border-radius: 50%; background: var(--sx-red); }
    .sx-main { padding-bottom: 86px; }
}

/* Sipariş ilerleme çubuğu */
.sx-oprog { display: flex; align-items: center; gap: 10px; margin: 9px 2px 1px; }
.sx-oprog-track { flex: 1; height: 5px; background: var(--sx-field-2); border-radius: 99px; overflow: hidden; }
.sx-oprog-fill { display: block; height: 100%; max-width: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--sx-accent), var(--sx-accent-2)); }
.sx-oprog-lb { flex: 0 0 auto; font-size: .68rem; font-weight: 700; color: var(--sx-text-2); font-variant-numeric: tabular-nums; }
.sx-oprog.is-done .sx-oprog-fill { background: var(--sx-green); }
.sx-oprog.is-done .sx-oprog-lb { color: var(--sx-green-tx); }

/* Boş durumlar */
.sx-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 46px 22px 42px; }
.sx-empty-art { position: relative; width: 86px; height: 86px; margin-bottom: 20px; display: inline-block; }
.sx-empty-big { width: 86px; height: 86px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 28%, var(--sx-accent-soft), transparent 75%), var(--sx-field); border: 1px solid var(--sx-border-2); border-radius: 26px; color: var(--sx-accent-tx); font-size: 1.65rem; }
.sx-empty-mini { position: absolute; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--sx-card-2); border: 1px solid var(--sx-border-2); border-radius: 10px; color: var(--sx-text-2); font-size: .8rem; box-shadow: var(--sx-shadow); animation: sxFloatY 4.5s ease-in-out infinite; }
.sx-empty-mini.is-a { right: -13px; top: -7px; }
.sx-empty-mini.is-b { left: -15px; bottom: 3px; animation-delay: -2.2s; }
.sx-empty h4 { margin: 0 0 6px; font-size: 1.05rem; }
.sx-empty p { margin: 0 0 18px; color: var(--sx-text-2); font-size: .82rem; max-width: 340px; line-height: 1.55; }
.sx-empty .sx-btn { margin-top: 2px; }
@keyframes sxFloatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* Düğme yüklenme durumu */
.sx-btn.is-loading { pointer-events: none; opacity: .85; }
.sx-btn.is-loading > i { display: none; }
.sx-btn.is-loading::before { content: ""; flex: 0 0 auto; width: 14px; height: 14px; border: 2px solid rgba(128, 128, 128, .35); border-top-color: currentColor; border-radius: 50%; animation: sxSpinB .65s linear infinite; }
@keyframes sxSpinB { to { transform: rotate(360deg); } }

/* Konfeti */
.sx-confetti { position: fixed; inset: 0; z-index: 4060; pointer-events: none; overflow: hidden; }
.sx-confetti i { position: absolute; top: -16px; display: block; border-radius: 2px; opacity: 0; animation: sxConfFall linear forwards; }
@keyframes sxConfFall {
    0% { opacity: 1; transform: translateY(0) rotate(0deg); }
    100% { opacity: .85; transform: translateY(105vh) rotate(560deg); }
}

/* Bakiye güven şeridi — geometri kilitli: panel CSS'i şekli bozamaz */
.sx-trust { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 15px; }
.sx-trust-cell { display: flex !important; align-items: center !important; gap: 9px; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 10px 12px !important; background: var(--sx-field) !important; border: 1px solid var(--sx-border) !important; border-radius: 10px !important; box-shadow: none !important; font-size: .73rem !important; font-weight: 600; color: var(--sx-text-2) !important; line-height: 1.4 !important; white-space: normal !important; text-align: left !important; }
.sx-trust-cell > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; background: none !important; padding: 0 !important; border: 0 !important; }
.sx-trust-cell i { flex: 0 0 auto; width: auto !important; height: auto !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; color: var(--sx-green-tx) !important; font-size: .88rem !important; line-height: 1 !important; }
@media (max-width: 640px) { .sx-trust { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sx-empty-mini { animation: none; } }

/* ------------------- 36. Modallar dikey ortalanır ------------------------- */
/* Flex + margin:auto — küçükken tam ortalar, içerik uzunsa kaydırmaya izin
   verir. !important, hem bootstrap'ın satır içi display:block'unu hem de
   tekil modal margin tanımlarını geçersiz kılmak için gerekli. */
.modal.in { display: flex !important; }
.modal.in .modal-dialog { margin: auto !important; padding: 26px 0; }

/* --------------------- 37. Hız + cila paketi ------------------------------ */
/* Özel kaydırma çubuğu — koyu temayla uyumlu ince çubuk */
html { scrollbar-width: thin; scrollbar-color: var(--sx-field-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sx-field-2); border: 2px solid var(--sx-bg); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--sx-border-2); }

/* Sayfa geçiş yumuşatması — destekleyen tarayıcıda kısa fade, diğerinde yok */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }

/* Seçim ve dokunma vurgusu tema renginde */
::selection { background: rgba(47, 107, 255, .45); color: #fff; }
.sx-light ::selection { background: rgba(47, 107, 255, .22); color: #0f172a; }
html { -webkit-tap-highlight-color: rgba(47, 107, 255, .15); }

/* Açılış: ekran altındaki bölümler görünene dek boyanmaz */
.sx-why, .sx-feats, .sx-minifeats, .sx-counters, .sx-faq-grid, .sx-foot { content-visibility: auto; contain-intrinsic-size: auto 520px; }

/* Sipariş ID — tıkla kopyala */
.sx-row-id[data-sx-copy] { cursor: pointer; transition: color .15s; }
.sx-row-id[data-sx-copy]:hover { color: var(--sx-accent-tx); }

/* Bakiye gizleme gözü — Hesap Bakiyesi kartının sağ üstünde */
.sx-baleye { position: absolute; top: 10px; right: 10px; z-index: 3; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--sx-field); border: 1px solid var(--sx-border); border-radius: 50%; color: var(--sx-text-2); font-size: .72rem; line-height: 1; cursor: pointer; transition: color .15s, border-color .15s, transform .15s; }
.sx-baleye:hover { color: var(--sx-text); border-color: var(--sx-border-2); transform: scale(1.1); }
/* Yenileme parlaması yok: erken sınıf değeri ilk kareden gizler; script
   noktaları yazıp sx-balready ekleyince görünürlük geri gelir. */
html.sx-balhide:not(.sx-balready) [data-sx-balmask] { visibility: hidden; }

/* Yukarı dön düğmesi */
.sx-gotop { position: fixed; right: 18px; bottom: 22px; z-index: 34; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--sx-card-2); border: 1px solid var(--sx-border-2); border-radius: 12px; color: var(--sx-text-2); font-size: .88rem; cursor: pointer; box-shadow: var(--sx-shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; }
.sx-gotop.is-show { opacity: 1; visibility: visible; transform: none; }
.sx-gotop:hover { color: var(--sx-text); border-color: var(--sx-accent); }
@media (max-width: 767px) { .sx-gotop { right: 12px; bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* -------------- 38. Hızlı çipler + şifre güç çubuğu ----------------------- */
/* Tutar / şablon çipleri */
.sx-amt-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.sx-amt-chip { padding: 7px 14px; background: var(--sx-field); border: 1px solid var(--sx-border); border-radius: 99px; color: var(--sx-text-2); font-size: .78rem; font-weight: 700; line-height: 1; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.sx-amt-chip:hover { color: var(--sx-text); border-color: var(--sx-border-2); }
.sx-amt-chip.is-on { background: var(--sx-accent-soft); border-color: rgba(47, 107, 255, .5); color: var(--sx-accent-tx); }
.sx-tpl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 2px 0 14px; }
.sx-tpl-chips .sx-amt-chip { font-weight: 600; }
.sx-tpl-lb { flex: 0 0 100%; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sx-text-3); }

/* Şifre güç çubuğu */
.sx-pwm { display: flex; align-items: center; gap: 9px; margin-top: 7px; }
.sx-pwm-bar { flex: 1; height: 4px; background: var(--sx-field-2); border-radius: 99px; overflow: hidden; }
.sx-pwm-fill { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--sx-red); transition: width .25s, background .25s; }
.sx-pwm-lb { flex: 0 0 auto; font-size: .68rem; font-weight: 700; }
.sx-pwm.is-weak .sx-pwm-fill { background: var(--sx-red); }
.sx-pwm.is-weak .sx-pwm-lb { color: var(--sx-red-tx); }
.sx-pwm.is-mid .sx-pwm-fill { background: var(--sx-amber); }
.sx-pwm.is-mid .sx-pwm-lb { color: var(--sx-amber-tx); }
.sx-pwm.is-strong .sx-pwm-fill { background: var(--sx-green); }
.sx-pwm.is-strong .sx-pwm-lb { color: var(--sx-green-tx); }

/* ---------- 39. Bakiye: tek seçici kartlar + talimat kutusu --------------- */
/* Yöntem menüsünün yalnız KONTROLLERİ gizlenir (satır DOM akışında kalır):
   panel manuel talimatı bu satırın içine basabiliyor; satır komple
   gizlenirse talimat da kaybolur. İçine düşen talimatı JS yuvaya taşır. */
.sx-method-row { margin: 0 !important; }
/* Satırdaki HER ŞEY gizli: kontroller kalıcı olarak; panelin enjekte ettiği
   talimat da doğduğu anda görünmez olur (parlama yok) — JS yuvaya taşıyınca
   bu kural eşleşmez ve talimat orada normal görünür. */
.sx-method-row > * { display: none !important; }

/* Manuel talimat yuvası — SSL şeridinin üstü */
#sx-manual-slot { margin-top: 15px; }
#sx-manual-slot:empty { display: none; margin: 0; }

/* Kart/kripto ek alan yuvası — Tutar'ın hemen altı */
#sx-gateway-slot { margin-bottom: 14px; }
#sx-gateway-slot:empty { display: none; margin: 0; }
#sx-gateway-slot .form-group { margin-bottom: 12px; }

/* Ödeme geçmişi: eksi tutarlar (komisyon vb.) kırmızı */
.sx-amount.is-neg { background: var(--sx-red-soft); color: var(--sx-red-tx); }

/* Ödeme geçmişi kategorileri: sekmeler, toplamlar, ilişki satırı */
.sx-ptabs { display: flex; gap: 6px; margin-bottom: 10px; }
.sx-ptab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 4px; background: var(--sx-field); border: 1px solid var(--sx-border); border-radius: 9px; color: var(--sx-text-2); font-size: .73rem; font-weight: 650; white-space: nowrap; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.sx-ptab b { font-size: .64rem; padding: 1px 7px; background: var(--sx-card-2); border: 1px solid var(--sx-border); border-radius: 99px; color: var(--sx-text-3); }
.sx-ptab:hover { color: var(--sx-text); border-color: var(--sx-border-2); }
.sx-ptab.is-on { background: var(--sx-accent-soft); border-color: rgba(47, 107, 255, .5); color: var(--sx-accent-tx); }
.sx-ptab.is-on b { background: rgba(47, 107, 255, .18); border-color: transparent; color: var(--sx-accent-tx); }
.sx-ptotals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.sx-ptotal { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--sx-card-2); border: 1px solid var(--sx-border); border-radius: 9px; min-width: 0; }
.sx-ptotal small { font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sx-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-ptotal b { font-size: .84rem; font-variant-numeric: tabular-nums; }
.sx-ptotal b.is-pos { color: var(--sx-green-tx); }
.sx-ptotal b.is-negt { color: var(--sx-red-tx); }
.sx-payrel { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--sx-border); font-size: .72rem; line-height: 1.4; color: var(--sx-text-3); }
.sx-payrel i { color: var(--sx-accent-tx); font-size: .66rem; flex: 0 0 auto; }
.sx-ptab-empty { margin: 22px 4px; text-align: center; color: var(--sx-text-3); font-size: .8rem; }

/* ------------------ 45. Profesyonel paket (5 özellik) --------------------- */
/* Açılış SSS: sol/sağ sütunlar birbirinin yüksekliğini esnetmesin */
.sx-faq-grid { align-items: start; }

/* Yetersiz bakiye uyarısı — kart görünümü */
.sx-balwarn { display: flex; align-items: center; gap: 13px; margin: 16px 0 18px; padding: 13px 15px; background: linear-gradient(90deg, rgba(245, 158, 11, .13), rgba(245, 158, 11, .03) 70%), var(--sx-card); border: 1px solid rgba(245, 158, 11, .38); border-radius: var(--sx-r); }
.sx-balwarn-ic { flex: 0 0 auto; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: rgba(245, 158, 11, .16); border: 1px solid rgba(245, 158, 11, .4); border-radius: 12px; color: var(--sx-amber-tx); font-size: .92rem; }
.sx-balwarn-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sx-balwarn-tx > b { color: var(--sx-text); font-size: .84rem; font-weight: 650; }
.sx-balwarn-tx > small { color: var(--sx-amber-tx); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sx-balwarn-btn { flex: 0 0 auto; background: var(--sx-amber); border-color: var(--sx-amber); color: #1a1206; font-weight: 700; }
.sx-balwarn-btn:hover, .sx-balwarn-btn:focus { background: #fbbf24; border-color: #fbbf24; color: #1a1206; }
.sx-balwarn-btn i { font-size: .7rem; }
@media (max-width: 560px) {
    .sx-balwarn { flex-wrap: wrap; }
    .sx-balwarn-btn { width: 100%; justify-content: center; }
}

/* Sipariş durum çipleri */
.sx-schips { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; }
.sx-schip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; background: var(--sx-field); border: 1px solid var(--sx-border); border-radius: 99px; color: var(--sx-text-2); font-size: .76rem; font-weight: 650; text-decoration: none; white-space: nowrap; transition: color .15s, border-color .15s, background .15s; }
.sx-schip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sx-text-3); }
.sx-schip > i { font-size: .7rem; }
.sx-schip:has(> i)::before { display: none; }
.sx-sc--pending::before { background: var(--sx-amber); }
.sx-sc--inprogress::before { background: var(--sx-accent); }
.sx-sc--processing::before { background: var(--sx-cyan); }
.sx-sc--completed::before { background: var(--sx-green); }
.sx-sc--partial::before { background: var(--sx-orange-tx); }
.sx-sc--canceled::before { background: var(--sx-red); }
.sx-schip:hover { color: var(--sx-text); border-color: var(--sx-border-2); text-decoration: none; }
.sx-schip.is-on { background: var(--sx-accent-soft); border-color: rgba(47, 107, 255, .5); color: var(--sx-accent-tx); }

/* Toplu sipariş sayacı */
.sx-mass-count { margin-top: 8px; font-size: .74rem; color: var(--sx-text-3); }
.sx-mass-count.is-ok { color: var(--sx-green-tx); }
.sx-mass-count.is-bad { color: var(--sx-amber-tx); }

/* Servis detayı hızlı hesap */
.sx-calc { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; background: var(--sx-field); border: 1px solid var(--sx-border); border-radius: var(--sx-r-sm); }
.sx-calc-lb { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 700; color: var(--sx-text-2); white-space: nowrap; }
.sx-calc-lb i { color: var(--sx-accent-tx); }
.sx-calc-in { flex: 1; min-width: 60px; height: 36px; }
.sx-calc-out { display: flex; flex-direction: column; gap: 1px; text-align: right; min-width: 96px; }
.sx-calc-out small { font-size: .6rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sx-text-3); }
.sx-calc-out b { font-size: .92rem; color: var(--sx-accent-tx); font-variant-numeric: tabular-nums; }

/* SSS / özel içerik sayfası */
.sx-qa-wrap { max-width: 880px; margin: 0 auto; }
.sx-qa-search { position: relative; margin: 0 0 16px; }
.sx-qa-search i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--sx-text-3); font-size: .85rem; }
.sx-qa-search input { width: 100%; height: 48px; padding: 0 16px 0 42px; background: var(--sx-card); border: 1px solid var(--sx-border-2); border-radius: var(--sx-r); color: var(--sx-text); font-size: .9rem; }
.sx-qa-search input:focus { outline: none; border-color: rgba(47, 107, 255, .55); box-shadow: 0 0 0 4px var(--sx-accent-soft); }
.sx-qa-doc { background: none; border: 0; padding: 0; }
.sx-qa-list { display: flex; flex-direction: column; gap: 10px; }
.sx-qa-item { background: var(--sx-card); border: 1px solid var(--sx-border); border-radius: var(--sx-r); }
/* SSS zengin görünüm: kahraman, kategori çipleri, ikonlu kartlar */
.sx-qa-hero { position: relative; text-align: center; padding: 34px 16px 26px; margin-bottom: 18px; }
.sx-qa-hero .sx-eyebrow { margin-bottom: 12px; }
.sx-qa-hero h1 { font-family: var(--sx-display); font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 8px; letter-spacing: -.02em; }
.sx-qa-hero > p { margin: 0 auto 20px; max-width: 520px; color: var(--sx-text-2); font-size: .88rem; }
.sx-qa-hero .sx-qa-search { max-width: 620px; margin: 0 auto 14px; }
.sx-qac { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.sx-qac .sx-fchip b { font-size: .64rem; margin-left: 4px; padding: 1px 7px; background: var(--sx-card-2); border: 1px solid var(--sx-border); border-radius: 99px; color: var(--sx-text-3); }
.sx-qac .sx-fchip.is-on b { background: rgba(47, 107, 255, .18); border-color: transparent; color: var(--sx-accent-tx); }
/* Yeni akordeon kartları — tam genişlik garantili */
.sx-qa-list { display: flex; flex-direction: column; gap: 10px; }
.sx-qa-list details { align-self: stretch !important; width: 100%; }
.sx-qaa { background: var(--sx-card); border: 1px solid var(--sx-border); border-radius: var(--sx-r); overflow: hidden; transition: border-color .18s; }
.sx-qaa summary { display: flex; align-items: center; gap: 13px; padding: 15px 17px; cursor: pointer; list-style: none; font-size: .89rem; font-weight: 600; color: var(--sx-text); transition: background .15s; }
.sx-qaa summary::-webkit-details-marker { display: none; }
.sx-qaa summary:hover { background: var(--sx-card-2); }
.sx-qaa-ic { flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--sx-field); border: 1px solid var(--sx-border); border-radius: 11px; color: var(--sx-accent-tx); font-size: .82rem; transition: background .18s, color .18s; }
.sx-qaa-q { flex: 1; min-width: 0; }
.sx-qaa-ar { flex: 0 0 auto; color: var(--sx-text-3); font-size: .72rem; transition: transform .18s; }
.sx-qaa[open] { border-color: rgba(47, 107, 255, .45); }
.sx-qaa[open] .sx-qaa-ar { transform: rotate(180deg); }
.sx-qaa[open] .sx-qaa-ic { background: var(--sx-accent); border-color: var(--sx-accent); color: #fff; }
.sx-qaa[open] summary { background: linear-gradient(90deg, var(--sx-accent-soft), transparent 70%); }
.sx-qaa-a { padding: 2px 17px 16px 66px; color: var(--sx-text-2); font-size: .84rem; line-height: 1.7; }
@media (max-width: 560px) { .sx-qaa-a { padding-left: 17px; } }

.sx-qa-cta { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 18px; background: var(--sx-card); border: 1px solid var(--sx-border); border-radius: var(--sx-r-lg); }
.sx-qa-cta b { display: block; font-size: .92rem; }
.sx-qa-cta small { display: block; margin-top: 2px; color: var(--sx-text-3); font-size: .76rem; }
.sx-qa-cta .sx-btn { flex: 0 0 auto; }
@media (max-width: 560px) {
    .sx-qa-cta { flex-wrap: wrap; }
    .sx-calc { flex-wrap: wrap; }
    .sx-calc-out { text-align: left; }
}

/* İşaretlenen tema dışı talimat kutuları CSS değişkenleriyle boyanır:
   gece/gündüz geçişinde renkler kendiliğinden modla döner */
[data-sx-darkened] { 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) !important; padding: 12px 14px; }
[data-sx-darkened] * { color: var(--sx-text-2) !important; background: transparent !important; background-color: transparent !important; border-color: transparent !important; }
[data-sx-darkened] b, [data-sx-darkened] strong { color: var(--sx-text) !important; }
[data-sx-darkened] a { color: var(--sx-accent-tx) !important; }

/* -------------------- 40. Açılış sayfası süslemeleri ---------------------- */
/* Aurora ışıkları — kahraman bölümünün arkasında süzülen degrade lekeler */
.sx-hero { position: relative; overflow: hidden; }
.sx-hero > .sx-wrap { position: relative; z-index: 1; }
.sx-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sx-aurora i { position: absolute; display: block; border-radius: 50%; filter: blur(70px); opacity: .5; animation: sxAurora 16s ease-in-out infinite; }
.sx-aurora i:nth-child(1) { width: 480px; height: 480px; left: -140px; top: -120px; background: radial-gradient(circle, rgba(47, 107, 255, .5), transparent 65%); }
.sx-aurora i:nth-child(2) { width: 420px; height: 420px; right: -120px; top: 8%; background: radial-gradient(circle, rgba(34, 211, 238, .38), transparent 65%); animation-delay: -5s; }
.sx-aurora i:nth-child(3) { width: 380px; height: 380px; left: 32%; bottom: -160px; background: radial-gradient(circle, rgba(91, 140, 255, .32), transparent 65%); animation-delay: -10s; }
@keyframes sxAurora {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(46px, -28px) scale(1.12); }
    66% { transform: translate(-34px, 26px) scale(.94); }
}
.sx-light .sx-aurora i { opacity: .3; }

/* Degrade başlık — vurgu kelimesi akan mavi-cyan */
.sx-hero h1 .is-underline { background: linear-gradient(100deg, var(--sx-accent-2), #22d3ee 50%, var(--sx-accent-2)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: sxGradShift 6s ease-in-out infinite; }
@keyframes sxGradShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* CTA parlaması — birkaç saniyede bir geçen ışık süpürmesi */
.sx-hl-btn, .sx-join .sx-btn--accent { position: relative; overflow: hidden; }
.sx-hl-btn::after, .sx-join .sx-btn--accent::after { content: ""; position: absolute; top: -4px; bottom: -4px; width: 42px; left: -70px; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent); transform: skewX(-20deg); animation: sxShimmer 4.6s ease-in-out infinite; }
@keyframes sxShimmer { 0%, 72% { left: -70px; } 100% { left: calc(100% + 50px); } }

/* Nasıl çalışır? — 3 adım */
.sx-how { display: flex; align-items: stretch; justify-content: center; gap: 14px; }
.sx-how-step { position: relative; flex: 1; max-width: 300px; padding: 26px 22px 22px; background: var(--sx-card); border: 1px solid var(--sx-border); border-radius: var(--sx-r-lg); text-align: center; }
.sx-how-n { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--sx-accent); border-radius: 50%; color: #fff; font-size: .76rem; font-weight: 800; box-shadow: 0 6px 14px -6px rgba(47, 107, 255, .8); }
.sx-how-ic { width: 46px; height: 46px; margin: 4px auto 14px; display: flex; align-items: center; justify-content: center; background: var(--sx-field); border: 1px solid rgba(47, 107, 255, .3); border-radius: 14px; color: var(--sx-accent-tx); font-size: 1.05rem; }
.sx-how-step h3 { margin: 0 0 7px; font-size: 1rem; }
.sx-how-step p { margin: 0; color: var(--sx-text-2); font-size: .82rem; line-height: 1.55; }
.sx-how-arrow { align-self: center; color: var(--sx-text-3); font-size: .95rem; flex: 0 0 auto; }
@media (max-width: 860px) {
    .sx-how { flex-direction: column; align-items: center; }
    .sx-how-step { width: 100%; max-width: 420px; }
    .sx-how-arrow { transform: rotate(90deg); margin: 2px 0; }
}

/* Ödeme yöntemleri güven şeridi */
.sx-payline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; max-width: 1140px; margin: 0 auto; padding: 20px 22px; border-top: 1px solid var(--sx-border); }
.sx-payline-lb { display: inline-flex; align-items: center; gap: 8px; font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sx-text-3); }
.sx-payline-lb i { color: var(--sx-green-tx); }
.sx-payline-brands { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sx-pbrand { padding: 6px 12px; background: var(--sx-field); border: 1px solid var(--sx-border); border-radius: 8px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; color: var(--sx-text-2); }

/* Kaydırdıkça belirme — sınıflar yalnızca JS ile eklenir */
.sx-reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; }
.sx-reveal.is-inview { opacity: 1; transform: none; }

/* Mock panel: canlı grafik */
.sx-mock-graph { position: relative; margin-top: 10px; padding: 12px 10px 6px; background: var(--sx-field); border: 1px solid var(--sx-border); border-radius: 10px; }
.sx-mock-graph svg { display: block; width: 100%; height: 44px; }
.sx-mock-graph polyline { stroke-dasharray: 360; stroke-dashoffset: 360; animation: sxDraw 2.4s ease forwards .5s; }
@keyframes sxDraw { to { stroke-dashoffset: 0; } }
.sx-mock-live { position: absolute; top: 8px; right: 9px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background: var(--sx-green-soft); border-radius: 99px; color: var(--sx-green-tx); font-size: .58rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .sx-aurora i, .sx-hero h1 .is-underline, .sx-hl-btn::after, .sx-join .sx-btn--accent::after, .sx-mock-graph polyline { animation: none; } }

/* ------------------- 41. Kayıt sayfası sağ vitrini ------------------------ */
.sx-joincard { width: min(400px, 84%); padding-top: 20px; }
.sx-jc-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; background: linear-gradient(135deg, var(--sx-accent), #1d4ed8); border-radius: 99px; color: #fff; font-size: .64rem; font-weight: 800; letter-spacing: .09em; box-shadow: 0 8px 18px -8px rgba(47, 107, 255, .8); }
.sx-jc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--sx-border); }
.sx-jc-stats > span { display: flex; flex-direction: column; gap: 2px; text-align: center; min-width: 0; }
.sx-jc-stats b { font-family: var(--sx-display); font-size: .92rem; color: var(--sx-accent-tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-jc-stats small { font-size: .62rem; color: var(--sx-text-3); }

/* --------- 42. Modal içindeki vurgulu düğme — açık temada okunur ---------- */
/* .modal .sx-btn genel kuralı yazıyı --sx-text yapar; açık temada bu koyu
   renk mat siyah düğmede kaybolur. Vurgulu düğme her modda beyaz kalır. */
.modal .sx-btn--accent, .modal .sx-btn--accent:hover, .modal .sx-btn--accent:focus { color: #fff !important; }
.modal .sx-btn--white { color: #0b0b0e !important; }
.sx-light .modal .sx-btn--white { color: #fff !important; }