/* ============================================================
   Bootstrap 5 → OxeS v2 dark override
   Plugin view'leri Bootstrap kullanıyor; bu dosya o sınıfları
   v2 paletine sokar.
   ============================================================ */

:root {
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--fg);
    --bs-body-font-family: var(--font-body);
    --bs-font-sans-serif: var(--font-body);
    --bs-font-monospace: var(--font-body);
    --bs-border-color: var(--line);
    --bs-border-radius: 10px;
    --bs-border-radius-lg: 14px;
    --bs-primary: var(--accent);
    --bs-primary-rgb: 46, 154, 142;
    --bs-link-color: var(--accent);
    --bs-link-color-rgb: 46, 154, 142;
    --bs-link-hover-color: var(--accent-soft);
    --bs-secondary-bg: var(--bg-elev);

    --plugin-btn-fg: #0c0f12;
    --plugin-danger: #b85a4d;
    --plugin-danger-soft: #d68f86;
    --plugin-warning: #c9a85a;
}

/* ---------- Typography ---------- */
body, .oxes-app {
    color: var(--fg);
}

/* ---------- Mağaza çerçevesi (mod seçme HARİÇ) ----------
   mağaza.webp bir UI şablonu: solda maskot, üstte başlık tabelası, sağda 2×3
   boş slot. İçeriği bu çerçeveye oturtuyoruz — başlık tabelaya, kart/kategoriler
   slotlara. Koordinatlar görselden piksel analiziyle çıkarıldı (2:1, %). */
.oxes-shopframe {
    position: relative;
    /* Tam ekran (full-bleed): .oxes-app padding'ini aşıp viewport genişliğine yayıl.
       Slot yüzdeleri aynı kutuya göre olduğundan 2:1 oranı korunmalı (görsel gerilir
       ama slotlar hizada kalır). */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 4px;
    aspect-ratio: 2 / 1;
    background: url("../images/shop-bg.webp") center / 100% 100% no-repeat;
}
/* Başlık tabelası: x 51.7–75.2%, y 7.6–24.3% */
.oxes-shopframe__banner {
    position: absolute;
    left: 51.7%; right: 24.8%;
    top: 7.6%; height: 16.7%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; gap: 2px;
    padding: 0 1%;
}
.oxes-shopframe__title {
    font-family: var(--font-display);
    color: #e8f6f6; font-weight: 800;
    font-size: clamp(13px, 1.8vw, 24px);
    line-height: 1; letter-spacing: .3px;
    text-transform: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
    text-shadow: 0 2px 6px rgba(0,0,0,.7);
}
.oxes-shopframe__sub {
    color: #7fd6cf; font-size: clamp(9px, .9vw, 12px); font-weight: 600;
}
/* Slot ızgarası: kutu sol 38.6% sağ 11.4% üst 34% alt 5.6%;
   3 sütun, 2 satır; boşluklar görseldeki çerçeve payına göre. */
.oxes-shopframe__grid {
    position: absolute;
    left: 38.6%; right: 11.4%;
    top: 34%; bottom: 5.6%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    column-gap: 10.3%;
    row-gap: 16.1%;
}
.oxes-shopslot {
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-end;
    text-align: center;
    text-decoration: none; color: #dfeeee;
    overflow: hidden;
    transition: transform .15s;
}
.oxes-shopslot:hover { transform: scale(1.04); }
/* Slot içindeki görsel (boyalı çerçeveyi kapatmasın diye içeriden) */
.oxes-shopslot__art {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    border-radius: 4px;
}
.oxes-shopslot__art::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.82) 100%);
}
.oxes-shopslot__icon {
    position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%);
    font-size: clamp(22px, 3vw, 40px); color: #8fe3db; opacity: .9;
}
.oxes-shopslot__body {
    position: relative; z-index: 2;
    width: 100%; padding: 0 6% 8%;
    display: flex; flex-direction: column; gap: 2px;
}
.oxes-shopslot__name {
    font-weight: 800; color: #fff; line-height: 1.05;
    font-size: clamp(11px, 1.1vw, 16px);
    text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.oxes-shopslot__meta {
    font-size: clamp(9px, .85vw, 12px); font-weight: 700;
}
.oxes-shopslot__price { color: #8fd39a; }
.oxes-shopslot__count { color: rgba(255,255,255,.7); }
.oxes-shopslot__price del { color: rgba(255,255,255,.45); margin-right: 5px; font-weight: 500; }

/* Çerçeveye sığmayan (6+) öğeler altta normal ızgarada akar */
.oxes-shopframe-rest { margin-top: 22px; }

/* ---- Navbar şeffaf bindirme: çerçeve ekranın en üstünden başlar ----
   Frame sayfalarında topbar akıştan çıkıp çerçevenin üzerine biner (şeffaf),
   içerik (=çerçeve) viewport'un en üstüne çekilir. Specificity, app.blade'deki
   satır içi .oxes-topbar/.oxes-app kurallarını geçer. */
body.oxes-shopframe-page .oxes-topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 30;
    padding: 16px clamp(14px, 3vw, 34px) 0;
    background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 100%);
}
body.oxes-shopframe-page .oxes-app { padding-top: 0; }
/* Full-bleed sahnelerdeki 100vw, dikey kaydırma çubuğu genişliği kadar yatay
   taşma yaratır. Kırpmayı BODY'ye uygula — .oxes-app'e koyarsak sahne app'in
   dışına taştığı için yanları kesilir. body'de clip yalnız çubuk taşmasını keser
   (sahne viewport içinde olduğundan ona dokunmaz, dikey kaydırma/navbar korunur). */
body.oxes-shopframe-page { overflow-x: clip; }
body.oxes-shopframe-page .oxes-shopframe { margin-top: 0; }
body.oxes-shopframe-page .oxes-vine { display: none; }

/* ---- Telefon: çerçeve yatay kompozisyon, dikeyde işlemez → düz diziye düş ---- */
@media (max-width: 859px) {
    .oxes-shopframe {
        aspect-ratio: auto; background: none; max-width: none; margin: 0;
    }
    .oxes-shopframe__banner {
        position: static; align-items: flex-start; text-align: left;
        height: auto; padding: 0; margin-bottom: 16px;
    }
    .oxes-shopframe__title { font-size: 28px; white-space: normal; }
    .oxes-shopframe__sub { font-size: 14px; }
    .oxes-shopframe__grid {
        position: static;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: none;
        column-gap: 12px; row-gap: 12px;
    }
    .oxes-shopslot {
        aspect-ratio: 4 / 3;
        background: #141414; border: 1px solid #2a2a30; border-radius: 12px;
        justify-content: flex-end;
    }
    .oxes-shopslot__name { font-size: 16px; }
    .oxes-shopslot__meta { font-size: 13px; }
}

.oxes-app h1, .oxes-app h2, .oxes-app h3, .oxes-app h4, .oxes-app h5, .oxes-app h6 {
    font-family: var(--font-display);
    color: var(--fg);
    letter-spacing: 0.5px;
    text-transform: none;
}

.oxes-app h1 { font-size: clamp(28px, 4vw, 48px); margin: 0 0 24px; line-height: 1.1; }
.oxes-app h2 { font-size: clamp(22px, 2.6vw, 32px); margin: 0 0 18px; line-height: 1.2; }
.oxes-app h3 { font-size: clamp(18px, 2vw, 22px); margin: 0 0 14px; }
.oxes-app p { color: var(--fg-mute); line-height: 1.65; }
.oxes-app a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.oxes-sup-btn):not(.oxes-sup-iconbtn):not(.oxes-sup-table__subject) {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .15s, border-color .15s;
}
.oxes-app a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.oxes-sup-btn):not(.oxes-sup-iconbtn):not(.oxes-sup-table__subject):hover {
    color: var(--accent-soft);
    border-bottom-color: var(--accent-soft);
}

/* ---------- Cards ---------- */
.card {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--fg);
    overflow: hidden;
}
.card-header, .card-footer {
    background: var(--bg-elev);
    border-color: var(--line);
    color: var(--fg);
}
.card-body { color: var(--fg); }
.card-title { color: var(--fg); font-family: var(--font-display); text-transform: none; letter-spacing: 0.4px; }
.card-text { color: var(--fg-mute); }
.card .card-img-top { border-bottom: 1px solid var(--line); }

/* ---------- Buttons ---------- */
.btn {
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: 8px;
    padding: 10px 18px;
    transition: background-color .18s, border-color .18s, color .18s, transform .15s;
    letter-spacing: 0.2px;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--plugin-btn-fg);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--accent-soft);
    border-color: var(--accent-soft);
    color: var(--plugin-btn-fg);
}

.btn-secondary {
    background: var(--bg-elev);
    border-color: var(--line-strong);
    color: var(--fg);
}
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--line-strong); color: var(--fg); }

.btn-outline-primary {
    border-color: var(--accent);
    color: var(--accent);
    background: transparent;
}
.btn-outline-primary:hover { background: var(--accent); color: var(--plugin-btn-fg); }

.btn-success { background: var(--online); border-color: var(--online); color: var(--plugin-btn-fg); }
.btn-danger  { background: var(--plugin-danger); border-color: var(--plugin-danger); color: #fff; }
.btn-warning { background: var(--plugin-warning); border-color: var(--plugin-warning); color: var(--plugin-btn-fg); }
.btn-info    { background: var(--diamond); border-color: var(--diamond); color: var(--plugin-btn-fg); }

.btn-link { color: var(--accent); }
.btn-link:hover { color: var(--accent-soft); }

/* ---------- Tables ---------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--fg);
    --bs-table-border-color: var(--line);
    --bs-table-hover-bg: var(--bg-hover);
    --bs-table-hover-color: var(--fg);
    --bs-table-striped-bg: var(--bg-elev);
    --bs-table-striped-color: var(--fg);
    color: var(--fg);
    border-color: var(--line);
}
.table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--fg);
    border-bottom-color: var(--line);
    padding: 12px 14px;
}
.table thead th, .table-dark th, .table > thead {
    background: var(--bg-elev);
    color: var(--fg);
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    border-bottom: 1px solid var(--line-strong);
}
.table-dark { --bs-table-bg: var(--bg-elev); }

/* ---------- Forms ---------- */
.form-control, .form-select {
    background: var(--bg-deep);
    border: 1px solid var(--line);
    color: var(--fg);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: var(--font-body);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.form-control:focus, .form-select:focus {
    background: var(--bg-deep);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(46, 154, 142, 0.18);
    color: var(--fg);
}
.form-control::placeholder { color: var(--fg-sub); }
.form-control:disabled, .form-control[readonly] { background: var(--bg-elev); opacity: 0.7; }

.form-label {
    color: var(--fg);
    font-weight: 500;
    margin-bottom: 6px;
    font-size: 17.5px;
}
.form-text, .form-check-label { color: var(--fg-mute); }
.form-check-input {
    background-color: var(--bg-deep);
    border-color: var(--line-strong);
}
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(46, 154, 142, 0.2); border-color: var(--accent); }

.input-group-text {
    background: var(--bg-elev);
    border-color: var(--line);
    color: var(--fg-mute);
}

/* ---------- Alerts ---------- */
.alert {
    border-radius: 10px;
    border: 1px solid;
    padding: 14px 18px;
    background: var(--bg-elev);
}
.alert-info    { border-color: var(--diamond); color: var(--diamond); background: rgba(95,160,160,0.08); }
.alert-success { border-color: var(--online); color: var(--online); background: rgba(143,168,103,0.08); }
.alert-warning { border-color: var(--plugin-warning); color: var(--plugin-warning); background: rgba(201,168,90,0.08); }
.alert-danger  { border-color: var(--plugin-danger); color: var(--plugin-danger-soft); background: rgba(184,90,77,0.08); }

/* ---------- Badges ---------- */
.badge {
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: 6px;
    padding: 4px 9px;
    letter-spacing: 0.3px;
}
.bg-primary, .badge.bg-primary   { background: var(--accent) !important; color: var(--plugin-btn-fg); }
.bg-secondary, .badge.bg-secondary { background: var(--bg-hover) !important; color: var(--fg); }
.bg-success                       { background: var(--online) !important; color: var(--plugin-btn-fg); }
.bg-danger                        { background: var(--plugin-danger) !important; color: #fff; }
.bg-info                          { background: var(--diamond) !important; color: var(--plugin-btn-fg); }
.bg-warning                       { background: var(--plugin-warning) !important; color: var(--plugin-btn-fg); }
.bg-light                         { background: var(--bg-elev) !important; color: var(--fg); }
.bg-dark                          { background: var(--bg-deep) !important; color: var(--fg); }

/* ---------- Progress ---------- */
.progress {
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: 6px;
    height: 14px;
}
.progress-bar {
    background: var(--accent);
    color: var(--plugin-btn-fg);
}

/* ---------- Pagination ---------- */
.page-link {
    background: var(--bg-elev);
    border-color: var(--line);
    color: var(--fg);
}
.page-link:hover { background: var(--bg-hover); border-color: var(--line-strong); color: var(--accent); }
.page-item.active .page-link {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--plugin-btn-fg);
}
.page-item.disabled .page-link { background: var(--bg-elev); color: var(--fg-sub); border-color: var(--line); }

/* ---------- Dropdown ---------- */
.dropdown-menu {
    background: var(--bg-card);
    border: 1px solid var(--line);
    color: var(--fg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.dropdown-item { color: var(--fg); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--bg-hover); color: var(--accent); }
.dropdown-divider { border-color: var(--line); }

/* ---------- Modals ---------- */
.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--line);
    color: var(--fg);
    border-radius: 14px;
}
.modal-header, .modal-footer { border-color: var(--line); }
.btn-close {
    filter: invert(1) grayscale(100%) brightness(1.1);
}

/* ---------- List Group ---------- */
.list-group-item {
    background: var(--bg-card);
    border-color: var(--line);
    color: var(--fg);
}
.list-group-item-action:hover { background: var(--bg-hover); color: var(--accent); }
.list-group-item.active { background: var(--accent); border-color: var(--accent); color: var(--plugin-btn-fg); }

/* ---------- Nav (tabs/pills inside content) ---------- */
.nav-tabs {
    border-bottom-color: var(--line);
}
.nav-tabs .nav-link {
    color: var(--fg-mute);
    border: 1px solid transparent;
    background: transparent;
    border-radius: 8px 8px 0 0;
    padding: 10px 16px;
    font-family: var(--font-body);
}
.nav-tabs .nav-link:hover { color: var(--fg); border-color: transparent; }
.nav-tabs .nav-link.active {
    color: var(--accent);
    background: var(--bg-card);
    border-color: var(--line) var(--line) var(--bg-card);
}
.nav-pills .nav-link { color: var(--fg-mute); }
.nav-pills .nav-link.active { background: var(--accent); color: var(--plugin-btn-fg); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: 17.5px; }
.breadcrumb-item, .breadcrumb-item a { color: var(--fg-mute); }
.breadcrumb-item.active { color: var(--fg); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--fg-sub); }

/* ---------- Misc text utility ---------- */
.text-muted, .text-secondary { color: var(--fg-mute) !important; }
.text-primary { color: var(--accent) !important; }
.text-white { color: var(--fg) !important; }
.text-dark { color: var(--fg) !important; }
.text-success { color: var(--online) !important; }
.text-danger  { color: #d68f86 !important; }
.text-info    { color: var(--diamond) !important; }
.text-warning { color: var(--plugin-warning) !important; }
hr { border-color: var(--line); }
small, .small { color: var(--fg-mute); }

/* ---------- Bootstrap Icons via SVG sprite (font CDN replacement) ---------- */
svg.bi, .bi {
    display: inline-block;
    width: 1em; height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
    flex-shrink: 0;
}

/* ---------- Spinner ---------- */
.spinner-border, .spinner-grow { color: var(--accent); }

/* ---------- Code/Pre ---------- */
code, kbd, pre, samp {
    font-family: var(--font-mono);
    color: var(--fg);
}
pre {
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 16px;
}
:not(pre) > code {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.9em;
    color: var(--accent-soft);
}

/* ---------- Blockquote ---------- */
blockquote, .blockquote {
    border-left: 3px solid var(--accent);
    background: var(--bg-elev);
    padding: 12px 16px;
    color: var(--fg-mute);
    border-radius: 0 6px 6px 0;
}

/* ---------- Accordion (FAQ) ---------- */
.accordion {
    --bs-accordion-bg: var(--bg-card);
    --bs-accordion-color: var(--fg);
    --bs-accordion-border-color: var(--line);
    --bs-accordion-btn-color: var(--fg);
    --bs-accordion-btn-bg: var(--bg-card);
    --bs-accordion-btn-focus-border-color: var(--accent);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(46,154,142,0.18);
    --bs-accordion-active-color: var(--accent);
    --bs-accordion-active-bg: var(--bg-elev);
    --bs-accordion-border-radius: 12px;
    border-radius: 12px;
    overflow: hidden;
}
.accordion-item {
    background: var(--bg-card);
    border: 1px solid var(--line);
    margin-bottom: 8px;
    border-radius: 10px !important;
    overflow: hidden;
}
.accordion-button {
    background: var(--bg-card);
    color: var(--fg);
    font-family: var(--font-body);
    font-weight: 600;
    padding: 16px 18px;
    border: none;
    box-shadow: none;
}
.accordion-button:not(.collapsed) {
    color: var(--accent);
    background: var(--bg-elev);
    box-shadow: inset 0 -1px 0 var(--line);
}
.accordion-button::after {
    filter: invert(0.6);
}
.accordion-button:not(.collapsed)::after {
    filter: invert(0.5) sepia(1) saturate(5) hue-rotate(140deg);
}
.accordion-body {
    color: var(--fg-mute);
    line-height: 1.65;
    padding: 16px 18px 18px;
    background: var(--bg-card);
}
.accordion-body p { color: var(--fg-mute); }
.accordion-body strong { color: var(--fg); }

/* ---------- Gallery images ---------- */
.gallery-image img, .card .card-body img.img-fluid {
    border-radius: 8px;
    border: 1px solid var(--line);
    transition: transform .2s, border-color .2s;
    cursor: zoom-in;
}
.gallery-image img:hover {
    border-color: var(--accent);
    transform: scale(1.02);
}

/* ---------- Profile skin viewer ---------- */
.oxes-profile-skin iframe { display: block; margin: 0 auto; }
.oxes-profile-card h2 { font-family: var(--font-display); text-transform: none; font-size: 28px; margin-bottom: 14px; }
.oxes-profile-card ul { list-style: none; padding: 0; margin: 0 0 18px; }
.oxes-profile-card ul li {
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    color: var(--fg-mute);
    font-size: 17.5px;
}
.oxes-profile-card ul li:last-child { border-bottom: none; }

/* ---------- Markdown content from CMS ---------- */
.oxes-app .markdown-body img,
.oxes-app img.img-fluid {
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid var(--line);
}
.oxes-app ul, .oxes-app ol { color: var(--fg-mute); line-height: 1.65; }
.oxes-app strong { color: var(--fg); }


/* ============================================================
   Plugin override page styles — Staff, Shop, Gallery
   (Daha önce her view'in @push('head') inline <style> bloğuna
    sığıştırılmıştı; tek yere toplandı.)
   ============================================================ */

/* ---------- Staff page (plugins/staff/index) ---------- */
.oxes-staff-head { margin-bottom: 28px; }
.oxes-staff-head__sub { color: var(--fg-mute); margin: -10px 0 0; font-size: 18.8px; max-width: 640px; }

.oxes-staff-filter {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0 0 28px;
}
.oxes-staff-tag {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    color: var(--fg-mute);
    border-radius: 999px;
    padding: 7px 16px;
    font-family: var(--font-body);
    font-size: 16.2px;
    font-weight: 500;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.oxes-staff-tag:hover { color: var(--fg); border-color: var(--line-strong); }
.oxes-staff-tag.is-active {
    color: var(--tag-color, var(--accent));
    border-color: var(--tag-color, var(--accent));
    background: var(--bg-deep);
}

.oxes-staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}
.oxes-staff-card {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .2s, transform .2s;
}
.oxes-staff-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.oxes-staff-card__top {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--bg-deep);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.oxes-staff-card__img {
    width: 100%; height: 100%; object-fit: cover;
    image-rendering: pixelated;
}
.oxes-staff-card__img--mc img {
    width: 75%; height: 75%; image-rendering: pixelated;
}
.oxes-staff-card__role {
    position: absolute; top: 12px; left: 12px;
    padding: 4px 10px;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(8px);
    border-left: 3px solid var(--tag-color, var(--accent));
    color: #fff;
    font-family: var(--font-body); font-size: 15px; font-weight: 600;
    letter-spacing: 0.4px; text-transform: uppercase;
}
.oxes-staff-card__body {
    padding: 16px 18px 20px;
    display: flex; flex-direction: column; gap: 10px;
}
.oxes-staff-card__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
    text-transform: none;
    color: var(--fg);
}
.oxes-staff-card__desc {
    margin: 0;
    color: var(--fg-mute);
    font-size: 16.2px;
    line-height: 1.5;
}
.oxes-staff-card__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.oxes-staff-card__tag {
    font-size: 13.8px;
    padding: 2px 8px;
    color: var(--tag-color);
    border: 1px solid var(--tag-color);
    border-radius: 4px;
    letter-spacing: 0.3px;
}
.oxes-staff-card__links {
    display: flex; gap: 10px;
    margin-top: 4px;
}
.oxes-staff-card__links a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--fg-mute);
    text-decoration: none !important;
    border-bottom: 1px solid var(--line) !important;
    transition: color .15s, border-color .15s;
    font-size: 18.8px;
}
.oxes-staff-card__links a:hover {
    color: var(--accent);
    border-color: var(--accent) !important;
}
.oxes-staff-empty {
    text-align: center; padding: 80px 20px;
    color: var(--fg-mute);
}
.oxes-staff-empty i { font-size: 70px; color: var(--fg-sub); display: block; margin-bottom: 18px; }

/* ---------- Shop categories index (plugins/shop/categories/index) ---------- */
.oxes-shop-head { margin-bottom: 24px; }
.oxes-shop-head__sub { color: var(--fg-mute); margin: -10px 0 0; font-size: 18.8px; }
.oxes-cat-card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 24px 22px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--fg);
    text-decoration: none !important;
    border-bottom: 1px solid var(--line) !important;
    transition: border-color .15s, transform .15s, background .15s;
}
.oxes-cat-card:hover {
    border-color: var(--accent) !important;
    background: var(--bg-hover);
    transform: translateY(-2px);
}
.oxes-cat-card__icon { font-size: 40px; color: var(--accent); }
.oxes-cat-card__name { font-family: var(--font-display); font-size: 18px; text-transform: none; }
.oxes-cat-card__count { font-size: 16.2px; color: var(--fg-mute); }
.oxes-prose img { max-width: 100%; }

/* ---------- Gallery index (plugins/gallery/index) ---------- */
.oxes-gallery-head { margin-bottom: 28px; }
.oxes-gallery-head__sub { color: var(--fg-mute); margin: -10px 0 0; font-size: 18.8px; }

.oxes-gallery-section { margin-bottom: 40px; }
.oxes-gallery-section__title {
    font-family: var(--font-display);
    font-size: 22px;
    text-transform: none;
    color: var(--fg);
    margin: 0 0 16px;
    letter-spacing: 0.4px;
    display: flex; align-items: center; gap: 14px;
}
.oxes-gallery-section__title::after {
    content: '';
    flex: 1; height: 1px; background: var(--line);
}
.oxes-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.oxes-gallery-item {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-bottom: 1px solid var(--line) !important;
    text-decoration: none !important;
    transition: border-color .2s, transform .2s;
}
.oxes-gallery-item:hover { border-color: var(--accent) !important; transform: translateY(-2px); }
.oxes-gallery-item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .3s;
}
.oxes-gallery-item:hover img { transform: scale(1.05); }
.oxes-gallery-empty {
    text-align: center; padding: 100px 20px;
    color: var(--fg-mute);
}
.oxes-gallery-empty i { font-size: 80px; color: var(--fg-sub); display: block; margin-bottom: 16px; }

/* Lightbox — galeri tıklama önizleme */
.oxes-lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 40px;
    cursor: zoom-out;
}
.oxes-lightbox[hidden] { display: none; }
.oxes-lightbox__img {
    max-width: 100%; max-height: 100%;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.oxes-lightbox__close {
    position: absolute; top: 24px; right: 32px;
    background: none; border: none; color: #fff;
    font-size: 50px; line-height: 1; cursor: pointer;
    opacity: 0.7; transition: opacity .15s;
}
.oxes-lightbox__close:hover { opacity: 1; }
.oxes-lightbox__nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    width: 52px; height: 52px;
    border-radius: 50%;
    font-size: 40px; line-height: 1;
    cursor: pointer;
    transition: background .15s, transform .15s;
    display: inline-flex; align-items: center; justify-content: center;
    padding-bottom: 4px;
}
.oxes-lightbox__nav:hover { background: rgba(255,255,255,0.15); transform: translateY(-50%) scale(1.08); }
.oxes-lightbox__nav--prev { left: 24px; }
.oxes-lightbox__nav--next { right: 24px; }
.oxes-lightbox__counter {
    position: absolute;
    bottom: 24px; left: 50%; transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 15px;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.1em;
    background: rgba(0,0,0,0.45);
    padding: 6px 12px;
    border-radius: 999px;
}
@media (max-width: 560px) {
    .oxes-lightbox__nav { width: 40px; height: 40px; font-size: 32.5px; }
    .oxes-lightbox__nav--prev { left: 10px; }
    .oxes-lightbox__nav--next { right: 10px; }
}


/* ============================================================
   Profile page (views/profile/index) — sıfırdan yazıldı.
   Hero + sticky nav + section'lar.
   ============================================================ */

.oxes-profile {
    display: flex; flex-direction: column;
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 0 60px;
}

/* ── HERO ─────────────────────────────────────────────────── */
.oxes-profile__hero {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 36px;
    align-items: stretch;
    padding: 32px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 16px;
}
.oxes-profile__skin {
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.oxes-profile__skin iframe {
    border: 0; background: transparent;
    width: 280px; height: 420px;
    max-width: 100%;
    display: block;
}
.oxes-profile__avatar {
    width: 220px; height: 220px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--bg-deep);
    image-rendering: pixelated;
}

.oxes-profile__hero-info {
    display: flex; flex-direction: column;
    gap: 18px;
    min-width: 0;
}
.oxes-profile__role {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 13.8px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}
.oxes-profile__name {
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 52px);
    margin: 0;
    color: var(--fg);
    text-transform: none;
    line-height: 1;
    letter-spacing: -0.015em;
    word-break: break-word;
}

.oxes-profile__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 4px;
}
.oxes-profile__stat {
    display: flex; flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.oxes-profile__stat-label {
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-mute);
}
.oxes-profile__stat-value {
    font-family: var(--font-body);
    font-size: 17.5px;
    font-weight: 600;
    color: var(--fg);
    word-break: break-word;
}

.oxes-profile__hero-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-top: auto;
    padding-top: 8px;
}

/* ── ALERT ────────────────────────────────────────────────── */
.oxes-profile__alert {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-radius: 10px;
    border: 1px solid;
    font-size: 16.9px;
}
.oxes-profile__alert-text { display: flex; flex-direction: column; gap: 2px; }
.oxes-profile__alert-text strong { color: var(--fg); font-weight: 600; }
.oxes-profile__alert-text span { color: var(--fg-mute); font-size: 15.6px; }
.oxes-profile__alert--ok {
    border-color: var(--online);
    background: rgba(143,168,103,0.08);
    color: var(--online);
}
.oxes-profile__alert--warn {
    border-color: var(--plugin-warning);
    background: rgba(201,168,90,0.08);
    color: var(--plugin-warning);
}

/* ── LAYOUT (nav + sections) ──────────────────────────────── */
.oxes-profile__layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
    align-items: start;
}
.oxes-profile__nav {
    position: sticky;
    top: 96px;
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.oxes-profile__nav-link {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--fg-mute);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 16.9px;
    font-weight: 600;
    transition: background .15s, color .15s;
}
.oxes-profile__nav-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.oxes-profile__nav-link:hover {
    background: var(--bg-hover);
    color: var(--fg);
}

.oxes-profile__sections {
    display: flex; flex-direction: column;
    gap: 32px;
    min-width: 0;
}
.oxes-profile__section { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 96px; }
.oxes-profile__section-head { display: flex; flex-direction: column; gap: 4px; }
.oxes-profile__section-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 24px;
    text-transform: none;
    letter-spacing: -0.01em;
    color: var(--fg);
}
.oxes-profile__section-head p {
    margin: 0;
    color: var(--fg-mute);
    font-size: 16.2px;
}

.oxes-profile__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

/* ── CARD ─────────────────────────────────────────────────── */
.oxes-profile__card {
    display: flex; flex-direction: column; gap: 14px;
    padding: 22px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.oxes-profile__card--danger {
    border-color: rgba(255, 90, 90, 0.25);
}
.oxes-profile__card-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    text-transform: none;
    letter-spacing: 0.4px;
    color: var(--fg);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.oxes-profile__card-text {
    margin: 0;
    color: var(--fg-mute);
    font-size: 16.9px;
    line-height: 1.5;
}
.oxes-profile__card-text strong { color: var(--fg); font-weight: 600; }

/* ── FORM ─────────────────────────────────────────────────── */
.oxes-profile__form { display: flex; flex-direction: column; gap: 12px; }
.oxes-profile__sub-form { margin-top: 4px; }
.oxes-profile__field { display: flex; flex-direction: column; gap: 6px; }
.oxes-profile__field label {
    font-family: var(--font-body);
    font-size: 15px; font-weight: 600;
    color: var(--fg-soft);
    text-transform: none;
    letter-spacing: 0.02em;
}
.oxes-profile__input {
    padding: 10px 12px;
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--fg);
    font-family: var(--font-body);
    font-size: 17.5px;
    transition: border-color .15s, background .15s;
}
.oxes-profile__input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-hover);
}
.oxes-profile__input.is-invalid { border-color: var(--plugin-danger); }
.oxes-profile__field-err {
    color: var(--plugin-danger-soft);
    font-size: 15px;
    margin-top: 2px;
}
.oxes-profile__hint {
    color: var(--fg-dim);
    font-size: 15px;
    margin-top: -2px;
}
.oxes-profile__btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.oxes-profile__btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16.2px;
    border: 1px solid var(--line-strong);
    background: var(--bg-elev);
    color: var(--fg);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.oxes-profile__btn:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent); }
.oxes-profile__btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--plugin-btn-fg);
}
.oxes-profile__btn--primary:hover {
    background: var(--accent-soft);
    border-color: var(--accent-soft);
    color: var(--plugin-btn-fg);
}
.oxes-profile__btn--ghost {
    background: transparent;
    border-color: var(--line);
    color: var(--fg-mute);
}
.oxes-profile__btn--ghost:hover {
    background: var(--bg-hover);
    border-color: var(--line-strong);
    color: var(--fg);
}
.oxes-profile__btn--danger {
    background: var(--plugin-danger);
    border-color: var(--plugin-danger);
    color: #fff;
}
.oxes-profile__btn--danger:hover { filter: brightness(1.1); color: #fff; border-color: var(--plugin-danger); }
.oxes-profile__btn--discord {
    background: #5865F2;
    border-color: #5865F2;
    color: #fff;
}
.oxes-profile__btn--discord:hover { background: #4752c4; border-color: #4752c4; color: #fff; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 960px) {
    .oxes-profile__layout { grid-template-columns: 1fr; }
    .oxes-profile__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        padding: 8px;
        gap: 4px;
    }
    .oxes-profile__nav-link { flex-shrink: 0; padding: 8px 12px; }
}
@media (max-width: 720px) {
    .oxes-profile__hero {
        grid-template-columns: 1fr;
        padding: 20px;
        gap: 22px;
    }
    .oxes-profile__skin iframe { width: 240px; height: 360px; }
    .oxes-profile__name { font-size: clamp(28px, 8vw, 40px); }
    .oxes-profile__alert { flex-direction: column; align-items: stretch; }
}

/* Flash mesajları (app.blade.php — shop başarı/hata bildirimleri) */
.oxes-flash {
  max-width: 1100px;
  margin: 0 auto 20px;
}

/* Siparişlerim — kredi yükleme satırı vurgusu */
.oxes-order--credit td, .oxes-order--credit th {
  background: rgba(245, 200, 66, 0.06);
}
.oxes-order--credit th[scope="row"] {
  box-shadow: inset 3px 0 0 #f5c842;
}

/* Mağaza mod-seçim kapısı (categories/index gate) */
/* ===== Mod seçim kapısı — açılan paneller (image accordion) ===== */
.oxes-modepanels {
  display: flex;
  gap: 10px;
  height: 460px;
  margin-top: 8px;
}
.oxes-modepanel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--line, #2a2a2a);
  background-size: cover;
  background-position: center;
  background-color: #1a1a1a;
  transition: flex-grow 0.45s cubic-bezier(.4,0,.2,1), border-color 0.25s;
}
/* Masaüstü: bir panel açılınca diğerleri daralır */
@media (min-width: 768px) {
  .oxes-modepanels:hover .oxes-modepanel { flex-grow: 0.55; }
  .oxes-modepanel:hover {
    flex-grow: 4.5;
    border-color: var(--accent, #5fa0a0);
  }
}
.oxes-modepanel__wash {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.50) 55%, rgba(0,0,0,0.90) 100%);
}
/* Kapalı durum: dikey etiket */
.oxes-modepanel__vert {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  transition: opacity 0.25s;
}
.oxes-modepanel__vert i { font-size: 30px; color: #fff; opacity: 0.92; }
.oxes-modepanel__vert .nm {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 23.8px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: #fff; white-space: nowrap;
}
/* Açık durum: detay */
.oxes-modepanel__detail {
  position: relative; z-index: 3;
  width: 100%; padding: 22px;
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.3s 0.08s, transform 0.3s 0.08s;
  pointer-events: none;
}
.oxes-modepanel:hover .oxes-modepanel__detail { opacity: 1; transform: none; }
.oxes-modepanel:hover .oxes-modepanel__vert { opacity: 0; }
.oxes-modepanel__name {
  font-size: 32.5px; font-weight: 800; color: #fff; line-height: 1.05;
  white-space: nowrap;
}
.oxes-modepanel__meta {
  display: flex; align-items: center; gap: 14px;
  font-size: 16.2px; color: rgba(255,255,255,0.75);
  white-space: nowrap;
}
.oxes-modepanel__cta {
  margin-top: 12px; font-size: 17.5px; font-weight: 700; color: #fff;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  transition: gap 0.18s;
}
.oxes-modepanel:hover .oxes-modepanel__cta { gap: 11px; }
/* Canlı oyuncu rozeti (nabız atan nokta) */
.oxes-live { display: inline-flex; align-items: center; gap: 7px; }
.oxes-live__dot {
  width: 8px; height: 8px; border-radius: 50%; background: #3fbf6f;
  box-shadow: 0 0 0 0 rgba(63,191,111,0.5);
  animation: oxesLivePulse 1.8s infinite;
}
@keyframes oxesLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(63,191,111,0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(63,191,111,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,191,111,0); }
}
/* Mobil: dikey akış, her panel bir banner, detay hep açık */
@media (max-width: 767px) {
  .oxes-modepanels { flex-direction: column; height: auto; gap: 12px; }
  .oxes-modepanel { height: auto; min-height: 150px; flex: 0 0 auto; }
  .oxes-modepanel__vert { display: none; }
  .oxes-modepanel__detail {
    opacity: 1; transform: none; pointer-events: none;
    padding: 16px 18px;
  }
  .oxes-modepanel__name { font-size: 26px; white-space: normal; }
  .oxes-modepanel__meta { font-size: 14px; flex-wrap: wrap; gap: 8px 14px; }
  .oxes-modepanel__cta { margin-top: 8px; font-size: 15px; }
}

/* ============ Mağaza mod seçimi (index) — arka plan + tabelalar ============
   Full-bleed sahne; tabelalar magazatabelalari'nin kırpılmış parçaları, her biri
   2752×1536 tuvalindeki orijinal yerine % ile oturtuldu. Hover'da büyür. */
.oxes-modescene {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  background: #0a0c0e;
}
/* Stage = görselin 2752×1536 oranını koruyan kutu. Tam genişlik, BOZULMA/KIRPMA YOK;
   16:9 ekranda zaten ekranı doldurur. Tabelalar bu kutunun çocuğu → % hizalı kalır. */
.oxes-modescene__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 2752 / 1536;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Üstte okunabilirlik için yumuşak karartma (navbar + başlık altında) */
.oxes-modescene::before {
  content: ""; position: absolute; z-index: 1;
  left: 0; right: 0; top: 0; height: 26%;
  background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
/* Sahnenin içine binen başlık (navbar şeffaf olduğu için ortada durur) */
.oxes-modescene__head {
  position: absolute; z-index: 6;
  top: 8%; left: 0; right: 0;
  text-align: center; padding: 0 16px;
  pointer-events: none;
}
.oxes-modescene__head h1 {
  margin: 0; line-height: 1.05;
  font-size: clamp(26px, 4vw, 46px);
  color: #eef7f6;
  text-shadow: 0 3px 14px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.9);
}
.oxes-modescene__head p {
  margin: 6px 0 0; font-weight: 600;
  font-size: clamp(13px, 1.4vw, 18px);
  color: #d3e9e7;
  text-shadow: 0 2px 8px rgba(0,0,0,.85);
}
.oxes-modesign {
  position: absolute;
  display: block;
  text-decoration: none;
  border: 0 !important;
  transform-origin: center bottom;
  transition: transform .18s cubic-bezier(.2,.7,.3,1);
}
.oxes-modesign img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.55));
  -webkit-user-drag: none; user-select: none;
}
.oxes-modesign:hover, .oxes-modesign:focus-visible {
  transform: scale(1.09);
  z-index: 5;
}
.oxes-modesign:hover img, .oxes-modesign:focus-visible img {
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.7)) drop-shadow(0 0 16px rgba(120,230,219,.4));
}
/* Hover ipucu: ürün/oyuncu sayısı tabelanın altında belirir */
.oxes-modesign__tip {
  position: absolute; left: 50%; bottom: -4%;
  transform: translate(-50%, 8px);
  display: flex; align-items: center; gap: 10px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(8,10,12,.86); border: 1px solid rgba(255,255,255,.12);
  font-size: clamp(10px, 1vw, 13px); font-weight: 700; color: #e9f5f4;
  white-space: nowrap; text-transform: none;
  opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.oxes-modesign:hover .oxes-modesign__tip,
.oxes-modesign:focus-visible .oxes-modesign__tip {
  opacity: 1; transform: translate(-50%, 0);
}
.oxes-modesign__live { display: inline-flex; align-items: center; gap: 6px; color: #7fe0b0; }
.oxes-modesign__live::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #3fbf6f; box-shadow: 0 0 8px rgba(63,191,111,.7);
}
.oxes-modesign__count { color: rgba(255,255,255,.82); }

/* Telefon: sahne çok geniş/alçak → tabelalar düz 2'li ızgaraya düşer.
   Immersive olmadığından içerik navbar altından başlamalı. */
@media (max-width: 859px) {
  .oxes-modescene {
    height: auto; width: auto; margin: var(--navbar-h, 100px) 0 0;
    background: none !important; overflow: visible;
  }
  .oxes-modescene::before { display: none; }
  .oxes-modescene__stage {
    position: static; transform: none;
    width: auto; height: auto; aspect-ratio: auto;
    background: none !important;
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  }
  .oxes-modescene__head {
    position: static;
    text-align: left; padding: 0; margin-bottom: 14px;
  }
  .oxes-modescene__head h1 { font-size: 30px; }
  .oxes-modescene__head p { font-size: 15px; color: var(--fg-mute); }
  .oxes-modesign {
    position: static !important;
    left: auto !important; top: auto !important;
    width: auto !important; height: auto !important;
    aspect-ratio: 4 / 3;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    background: #141414; border: 1px solid #2a2a30 !important; border-radius: 14px;
    padding: 14px;
  }
  .oxes-modesign:hover { transform: none; }
  .oxes-modesign img { height: auto; max-height: 70%; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
  .oxes-modesign__tip {
    position: static; opacity: 1; transform: none; pointer-events: auto;
  }
}

/* ============ Mod mağazası vitrini (picker) — vitrin + warden + anahtar ============
   warden ve vitrin aynı 2896×1440 tuvalin iki katmanı (full-bleed). Kategoriler
   vitrinin siyah gözlerine anahtar olarak yerleşir, hover'da büyür. */
.oxes-vitrin {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  aspect-ratio: 2896 / 1440;
  overflow: hidden;
}
.oxes-vitrin__warden, .oxes-vitrin__case {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.oxes-vitrin__warden {
  z-index: 1;
  animation: oxes-warden-bob 6s ease-in-out infinite;
}
@keyframes oxes-warden-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1%); }
}
.oxes-vitrin__case { z-index: 2; }
.oxes-vitrin__banner {
  position: absolute; z-index: 3;
  left: 51%; top: 6%; width: 26%; height: 16%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 2px; padding: 0 1%;
}
.oxes-vitrin__title {
  font-family: var(--font-display); color: #eaf7f6; font-weight: 800;
  font-size: clamp(13px, 1.9vw, 26px); line-height: 1; letter-spacing: .3px;
  text-transform: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  text-shadow: 0 2px 7px rgba(0,0,0,.8);
}
.oxes-vitrin__sub {
  color: #80d8d0; font-size: clamp(8px, .95vw, 12px); font-weight: 700; text-transform: none;
}
.oxes-vitrinslot {
  position: absolute; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4%; text-decoration: none; text-align: center;
  border: 0 !important;
  transition: transform .16s ease;
}
.oxes-vitrinslot:hover, .oxes-vitrinslot:focus-visible { transform: scale(1.06); z-index: 6; }
.oxes-vitrinslot__key {
  width: 46%; max-width: 80px; aspect-ratio: 1; object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.6));
  -webkit-user-drag: none;
  transition: transform .16s ease, filter .16s ease;
}
.oxes-vitrinslot:hover .oxes-vitrinslot__key,
.oxes-vitrinslot:focus-visible .oxes-vitrinslot__key {
  transform: translateY(-6%) rotate(-7deg);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(214,160,90,.55));
}
.oxes-vitrinslot__name {
  font-weight: 800; color: #fff; line-height: 1.05;
  font-size: clamp(10px, 1.05vw, 15px);
  text-shadow: 0 1px 5px rgba(0,0,0,.9);
}
.oxes-vitrinslot__count {
  font-size: clamp(8px, .8vw, 11px); font-weight: 700; color: rgba(255,255,255,.72);
}

/* Telefon: vitrin sahnesi dikeyde işlemez → warden/vitrin gizlenir, gözler düz liste */
@media (max-width: 859px) {
  body.oxes-shopframe-page .oxes-vitrin { margin-top: var(--navbar-h, 100px); }
  .oxes-vitrin {
    aspect-ratio: auto; width: auto; margin: 0; overflow: visible;
    display: flex; flex-direction: column; gap: 10px;
  }
  .oxes-vitrin__warden, .oxes-vitrin__case { display: none; }
  .oxes-vitrin__banner {
    position: static; width: auto; height: auto;
    align-items: flex-start; text-align: left; padding: 0; margin-bottom: 6px;
  }
  .oxes-vitrin__title { font-size: 28px; white-space: normal; }
  .oxes-vitrin__sub { font-size: 14px; }
  .oxes-vitrinslot {
    position: static !important;
    left: auto !important; top: auto !important;
    width: auto !important; height: auto !important;
    flex-direction: row; justify-content: flex-start; gap: 14px;
    background: #141414; border: 1px solid #2a2a30 !important; border-radius: 12px;
    padding: 12px 16px;
  }
  .oxes-vitrinslot:hover { transform: none; }
  .oxes-vitrinslot__key { width: 42px; max-width: 42px; }
  .oxes-vitrinslot__name { font-size: 17px; }
  .oxes-vitrinslot__count { font-size: 13px; margin-left: auto; }
}

/* ============ Mağaza — kategori/ürün sayfası ============ */
.oxes-shop-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 18px;
  background: #16161a; border: 1px solid #2a2a30; border-radius: 12px;
}
.oxes-shop-bar__back { color: #cfcfd4; text-decoration: none; font-weight: 600; font-size: 17.5px; }
.oxes-shop-bar__back:hover { color: #fff; }
.oxes-shop-bar__mode { font-weight: 800; color: #fff; font-size: 18.8px; }
.oxes-shop-bar__actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.oxes-shop-bar__link { color: #9a9aa2; text-decoration: none; font-size: 16.2px; }
.oxes-shop-bar__link:hover { color: #fff; }
.oxes-shop-bar__cart {
  color: #fff; text-decoration: none; font-weight: 600; font-size: 17.5px;
  background: #2a2a30; padding: 6px 14px; border-radius: 8px;
}
.oxes-shop-bar__cart:hover { background: #36363d; }

.oxes-shop-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.oxes-shop-tab {
  padding: 7px 16px; border-radius: 999px; text-decoration: none;
  font-size: 17.5px; font-weight: 600; color: #b8b8be;
  background: #16161a; border: 1px solid #2a2a30;
  transition: all 0.15s;
}
.oxes-shop-tab:hover { color: #fff; border-color: #3a3a42; }
.oxes-shop-tab.is-active { background: #fff; color: #111; border-color: #fff; }

.oxes-shop-title { font-size: 32.5px; font-weight: 800; margin-bottom: 16px; }

.oxes-pkg-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}
.oxes-pkg-card {
  background: #16161a; border: 1px solid #2a2a30; border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s;
}
.oxes-pkg-card:hover {
  transform: translateY(-3px); border-color: #3a3a42;
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
}
.oxes-pkg-card__media {
  position: relative; aspect-ratio: 16/10; background: #0e0e11;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.oxes-pkg-card__media img { width: 100%; height: 100%; object-fit: cover; }
.oxes-pkg-card__noimg { font-size: 47.5px; color: #3a3a42; }
.oxes-pkg-card__badge {
  position: absolute; top: 10px; left: 10px;
  background: #d97757; color: #fff; font-size: 13.8px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
}
.oxes-pkg-card__body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.oxes-pkg-card__name { font-size: 20px; font-weight: 700; color: #fff; margin: 0; }
.oxes-pkg-card__price { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.oxes-pkg-card__price del { color: #6a6a72; font-size: 16.2px; }
.oxes-pkg-card__price span { color: #8fd39a; font-weight: 800; font-size: 22.5px; }
.oxes-pkg-card__buy { width: 100%; justify-content: center; margin-top: 4px; }

/* Mağaza - kategori seç ekranı (picker) */
/* Kategori seçimi: dikey dikdörtgen kartlar, adet kadar eşit bölünen sıra */
.oxes-cat-rail {
  display: flex; flex-wrap: wrap; gap: 16px;
}
.oxes-catx {
  flex: 1 1 0; min-width: 200px;
  position: relative;
  aspect-ratio: 3 / 4;            /* boyuna (dikey) dikdörtgen */
  display: flex; align-items: flex-end;
  border-radius: 16px; overflow: hidden; text-decoration: none;
  border: 1px solid #2a2a30;
  background-color: #16161a;
  background-size: cover; background-position: center;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
/* resim yoksa nötr gradient zemin */
.oxes-catx:not(.has-img) {
  background-image: radial-gradient(circle at 50% 38%, #2a2a32 0%, #16161a 72%);
}
.oxes-catx:hover {
  transform: translateY(-4px); border-color: var(--accent, #2e9a8e);
  box-shadow: 0 16px 34px rgba(0,0,0,0.5);
}
.oxes-catx__wash {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.88) 100%);
}
/* resimsiz kartlarda ortadaki büyük ikon */
.oxes-catx__ghost {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  font-size: 80px; color: #fff; opacity: 0.85;
  transition: transform 0.2s;
}
.oxes-catx:hover .oxes-catx__ghost { transform: translate(-50%, -64%) scale(1.06); }
.oxes-catx__body {
  position: relative; z-index: 2; width: 100%;
  padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.oxes-catx__name {
  font-size: 26.2px; font-weight: 800; color: #fff; line-height: 1.1;
}
.oxes-catx__meta {
  display: flex; align-items: center; justify-content: space-between;
}
.oxes-catx__count { font-size: 16.2px; color: rgba(255,255,255,0.72); }
.oxes-catx__cta {
  font-size: 16.2px; font-weight: 700; color: #fff;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap 0.16s;
}
.oxes-catx:hover .oxes-catx__cta { gap: 11px; }
/* dar ekranda 2'li, en darda 1'li */
@media (max-width: 640px) {
  .oxes-catx { flex-basis: 40%; aspect-ratio: 4 / 5; }
}
@media (max-width: 380px) {
  .oxes-catx { flex-basis: 100%; aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   Support / Destek (override views/plugins/support/tickets/*)
   ========================================================================== */
.oxes-sup-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin-bottom: 28px;
}
.oxes-sup-head h1 { margin: 0; }
.oxes-sup-head__sub {
    color: var(--fg-mute); margin: 6px 0 0; font-size: 18.8px; max-width: 640px;
}
.oxes-sup-head__sub i { color: var(--accent); margin-right: 4px; }

/* buttons */
.oxes-sup-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--bg-elev); border: 1px solid var(--line);
    color: var(--fg); border-radius: 10px;
    padding: 9px 18px; font-family: var(--font-body); font-size: 17.5px; font-weight: 500;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: border-color .15s, background .15s, color .15s;
}
.oxes-sup-btn:hover { border-color: var(--line-strong); color: var(--fg); background: var(--bg-hover); }
.oxes-sup-btn--primary {
    background: var(--accent); border-color: var(--accent); color: var(--plugin-btn-fg, #07110f);
}
.oxes-sup-btn--primary:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--plugin-btn-fg, #07110f); }
.oxes-sup-btn--danger { background: transparent; border-color: #7a2b2b; color: #e06464; }
.oxes-sup-btn--danger:hover { background: rgba(180,60,60,0.12); border-color: #b04545; color: #ff8585; }

/* info / empty */
.oxes-sup-info {
    background: var(--bg-card); border: 1px solid var(--line);
    border-left: 3px solid var(--accent); border-radius: 10px;
    padding: 16px 18px; margin-bottom: 24px; color: var(--fg-soft);
}
.oxes-sup-info :last-child { margin-bottom: 0; }
.oxes-sup-empty {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 64px 20px; text-align: center;
    background: var(--bg-card); border: 1px dashed var(--line); border-radius: 14px;
}
.oxes-sup-empty i { font-size: 52.5px; color: var(--fg-sub); }
.oxes-sup-empty p { margin: 0; color: var(--fg-mute); }

/* markdown editor (EasyMDE) dark theme — toolbar buttons were invisible on dark bg */
.editor-toolbar {
    background: var(--bg-elev);
    border-color: var(--line) !important;
}
.editor-toolbar button {
    color: var(--fg-soft) !important;
    border: 1px solid transparent !important;
    border-radius: 6px;
}
.editor-toolbar button:hover,
.editor-toolbar button.active {
    background: var(--bg-hover) !important;
    border-color: var(--line-strong) !important;
    color: var(--fg) !important;
}
.editor-toolbar i.separator {
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--bg-elev);
}
.editor-toolbar::before, .editor-toolbar::after { display: none; }
.EasyMDEContainer .CodeMirror,
.EasyMDEContainer .CodeMirror pre,
.editor-preview, .editor-preview-side,
.editor-statusbar {
    font-family: var(--font-body) !important;
}
.EasyMDEContainer .CodeMirror {
    background: var(--bg-deep);
    color: var(--fg);
    border-color: var(--line);
}
.CodeMirror-cursor { border-left-color: var(--fg) !important; }
.editor-statusbar { color: var(--fg-dim); }
.editor-preview, .editor-preview-side {
    background: var(--bg-deep) !important;
    color: var(--fg-soft);
}

/* pre-ticket banner */
.oxes-sup-banner {
    display: flex; align-items: flex-start; gap: 20px;
    background: var(--bg-card); border: 1px solid var(--line);
    border-left: 3px solid var(--accent); border-radius: 14px;
    padding: 22px 24px; margin-bottom: 18px;
}
.oxes-sup-banner__icon {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-deep); border: 1px solid var(--accent-dim);
    color: var(--accent-soft); font-size: 30px;
}
.oxes-sup-banner__body { flex-grow: 1; min-width: 0; }
.oxes-sup-banner__body h2 {
    margin: 0 0 6px; font-family: var(--font-display);
    font-size: 20px; text-transform: none; color: var(--fg);
}
.oxes-sup-banner__body p { margin: 0; color: var(--fg-soft); font-family: var(--font-body); font-weight: 600; font-size: 19.4px; line-height: 1.6; }
.oxes-sup-banner__body p strong { color: var(--fg); font-weight: 700; }
.oxes-sup-tips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.oxes-sup-tips li { display: flex; align-items: flex-start; gap: 10px; color: var(--fg-soft); font-family: var(--font-body); font-weight: 700; font-size: 18.8px; line-height: 1.45; }
.oxes-sup-tips li i { font-size: 21.2px; }
.oxes-sup-tips li i { color: var(--accent); font-size: 18.8px; margin-top: 1px; flex-shrink: 0; }
.oxes-sup-banner__cta { flex-shrink: 0; align-self: center; }

/* stats strip */
.oxes-sup-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px;
}
.oxes-sup-stat {
    background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px;
    padding: 16px 20px; display: flex; flex-direction: column; gap: 2px;
    border-top: 2px solid var(--line-strong);
}
.oxes-sup-stat[data-tone="open"]   { border-top-color: #4cc38a; }
.oxes-sup-stat[data-tone="closed"] { border-top-color: #e06464; }
.oxes-sup-stat__num {
    font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--fg);
}
.oxes-sup-stat__label {
    color: var(--fg-mute); font-size: 15px; font-weight: 600;
    letter-spacing: 0.4px; text-transform: uppercase;
}

/* ticket table card */
.oxes-sup-tablecard {
    background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px;
    overflow: hidden;
}
.oxes-sup-tablecard__head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 22px; border-bottom: 1px solid var(--line);
    border-left: 3px solid var(--accent);
}
.oxes-sup-tablecard__head h1 { margin: 0; font-size: 30px; }
.oxes-sup-tablecard .oxes-sup-empty { border: 0; border-radius: 0; background: transparent; }

.oxes-sup-tablewrap { overflow-x: auto; }
.oxes-sup-table { width: 100%; border-collapse: collapse; }
.oxes-sup-table thead th {
    background: var(--bg-deep); color: var(--fg-dim);
    font-family: var(--font-body); font-size: 13.8px; font-weight: 700;
    letter-spacing: 0.6px; text-transform: uppercase;
    text-align: left; padding: 12px 18px; white-space: nowrap;
    border-bottom: 1px solid var(--line);
}
.oxes-sup-table tbody td {
    padding: 14px 18px; border-bottom: 1px solid var(--line);
    vertical-align: middle; color: var(--fg-soft); font-size: 17.5px;
}
.oxes-sup-table tbody tr:last-child td { border-bottom: 0; }
.oxes-sup-table tbody tr { transition: background .15s; }
.oxes-sup-table tbody tr:hover { background: var(--bg-elev); }
.oxes-sup-table__id { width: 1%; white-space: nowrap; }
.oxes-sup-id { color: var(--fg-dim); font-family: var(--font-mono, monospace); font-size: 16.2px; font-weight: 600; }
.oxes-sup-table__subject { color: var(--fg); font-weight: 600; text-decoration: none; }
.oxes-sup-table__subject:hover { color: var(--accent-soft); }
.oxes-sup-table__date { color: var(--fg-mute); white-space: nowrap; }
.oxes-sup-table__status, .oxes-sup-table__actions { width: 1%; white-space: nowrap; }
.oxes-sup-table__actions { text-align: right; }

.oxes-sup-catbadge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px;
    background: var(--accent-deep); border: 1px solid var(--accent-dim);
    color: var(--accent-soft); font-size: 15px; font-weight: 600; white-space: nowrap;
}

.oxes-sup-acts { display: inline-flex; align-items: center; gap: 8px; }
.oxes-sup-acts form { margin: 0; }
.oxes-sup-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
    background: var(--bg-elev); border: 1px solid var(--line);
    color: var(--accent-soft); font-size: 18.8px; text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
}
.oxes-sup-iconbtn:hover { border-color: var(--accent); background: var(--accent-deep); color: var(--accent-soft); }
.oxes-sup-iconbtn--danger { color: #e06464; }
.oxes-sup-iconbtn--danger:hover { border-color: #b04545; background: rgba(180,60,60,0.14); color: #ff8585; }

/* status pill */
.oxes-sup-pill {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px;
    font-family: var(--font-body); font-size: 15px; font-weight: 600;
    letter-spacing: 0.3px; text-transform: none;
    border: 1px solid var(--line); color: var(--fg-mute); background: var(--bg-deep);
}
.oxes-sup-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.oxes-sup-pill[data-status="open"]   { color: #4cc38a; border-color: #2c5e48; background: rgba(46,140,90,0.10); }
.oxes-sup-pill[data-status="replied"]{ color: var(--accent-soft); border-color: var(--accent-dim); background: rgba(46,154,142,0.10); }
.oxes-sup-pill[data-status="closed"] { color: #e06464; border-color: #6e2b2b; background: rgba(180,60,60,0.10); }

/* category grid */
.oxes-sup-catgrid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px;
}
.oxes-sup-cat {
    display: flex; align-items: center; gap: 16px;
    background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px;
    padding: 20px; text-decoration: none;
    transition: border-color .18s, transform .18s, background .18s;
}
.oxes-sup-cat:hover { border-color: var(--accent); transform: translateY(-3px); background: var(--bg-elev); }
.oxes-sup-cat__icon {
    flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-deep); border: 1px solid var(--accent-dim);
    color: var(--accent-soft); font-size: 27.5px;
}
.oxes-sup-cat__body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.oxes-sup-cat__name { color: var(--fg); font-family: var(--font-display); font-size: 17px; text-transform: none; }
.oxes-sup-cat__desc { color: var(--fg-mute); font-size: 16.2px; line-height: 1.5; }
.oxes-sup-cat__arrow { color: var(--fg-sub); font-size: 20px; flex-shrink: 0; transition: color .18s, transform .18s; }
.oxes-sup-cat:hover .oxes-sup-cat__arrow { color: var(--accent); transform: translateX(3px); }

/* panel (forms) */
.oxes-sup-panel {
    background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px;
    padding: 24px;
}
.oxes-sup-actions { margin-bottom: 6px; }
.oxes-sup-closeform { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }

/* status bar (show) */
.oxes-sup-statusbar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px;
    padding: 12px 18px; margin-bottom: 18px;
}
.oxes-sup-statusbar__cat { color: var(--fg-mute); font-size: 16.2px; }
.oxes-sup-statusbar__cat i { color: var(--accent); margin-right: 4px; }

/* thread */
.oxes-sup-thread { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.oxes-sup-msg {
    display: flex; gap: 14px;
    background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px;
    padding: 16px 18px;
}
.oxes-sup-msg--staff { border-left: 3px solid var(--accent); background: var(--bg-elev); }
.oxes-sup-msg__avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 8px; image-rendering: pixelated; }
.oxes-sup-msg__body { flex-grow: 1; min-width: 0; }
.oxes-sup-msg__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.oxes-sup-msg__author { color: var(--fg); font-weight: 600; font-size: 17.5px; }
.oxes-sup-msg__badge {
    padding: 2px 8px; border-radius: 6px; font-size: 13.8px; font-weight: 600;
    text-transform: none; letter-spacing: 0.3px;
    background: var(--accent-deep); border: 1px solid var(--accent-dim); color: var(--accent-soft);
}
.oxes-sup-msg__date { color: var(--fg-dim); font-size: 15px; margin-left: auto; }
.oxes-sup-msg__content { color: var(--fg-soft); line-height: 1.65; }
.oxes-sup-msg__content :last-child { margin-bottom: 0; }
.oxes-sup-msg__content img { max-width: 100%; border-radius: 8px; }

/* closed notice */
.oxes-sup-closed {
    display: flex; align-items: center; gap: 10px;
    background: rgba(180,60,60,0.08); border: 1px solid #6e2b2b; border-radius: 10px;
    padding: 14px 18px; margin-bottom: 16px; color: #e8a0a0;
}
.oxes-sup-closed i { color: #e06464; }

@media (max-width: 720px) {
    .oxes-sup-banner { flex-wrap: wrap; }
    .oxes-sup-banner__cta { align-self: stretch; justify-content: center; width: 100%; }
}
@media (max-width: 540px) {
    .oxes-sup-stats { grid-template-columns: 1fr; }
    .oxes-sup-msg__date { margin-left: 0; width: 100%; }
    .oxes-sup-msg__head { flex-wrap: wrap; gap: 6px; }
}

/* ==========================================================================
   Kredi Yükle (shop offers — override views/plugins/shop/offers/*)
   ========================================================================== */
.oxes-topup-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin-bottom: 28px;
}
.oxes-topup-head h1 { margin: 0; }
.oxes-topup-head__sub { color: var(--fg-mute); margin: 6px 0 0; font-size: 15px; max-width: 620px; }
.oxes-topup-balance {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    background: var(--bg-card); border: 1px solid var(--line);
    border-left: 3px solid var(--accent); border-radius: 12px; padding: 12px 18px;
}
.oxes-topup-balance__label { color: var(--fg-mute); font-size: 12px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; }
.oxes-topup-balance__value { font-family: var(--font-display); font-size: 24px; color: var(--accent-soft); }

.oxes-topup-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
}
.oxes-topup-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: var(--bg-card); border: 1px solid var(--line); border-radius: 16px;
    padding: 26px 20px 22px; text-decoration: none; text-align: center;
    transition: border-color .18s, transform .18s, background .18s;
}
.oxes-topup-card:hover { border-color: var(--accent); transform: translateY(-4px); background: var(--bg-elev); }
.oxes-topup-card__icon {
    width: 56px; height: 56px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-deep); border: 1px solid var(--accent-dim); color: var(--accent-soft);
    margin-bottom: 4px;
}
.oxes-topup-card__icon svg { width: 28px; height: 28px; }
.oxes-topup-card__img, .oxes-topup-card__gw-img { max-height: 56px; width: auto; margin-bottom: 4px; }
.oxes-topup-card__credit {
    font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--fg);
}
.oxes-topup-card__name { color: var(--fg-mute); font-size: 13px; }
.oxes-topup-card__price {
    color: var(--accent-soft); font-weight: 700; font-size: 16px;
}
.oxes-topup-card__cta {
    margin-top: 10px; width: 100%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: var(--plugin-btn-fg, #0c0f12);
    border-radius: 10px; padding: 9px 0; font-weight: 700; font-size: 14px;
    transition: background .15s;
}
.oxes-topup-card:hover .oxes-topup-card__cta { background: var(--accent-soft); }
.oxes-topup-card--gateway { justify-content: center; }

/* ─────────────────────────────────────────────────────────────────────────
   SİPARİŞLERİM - tema satır listesi (Bootstrap tablo yerine)
   ───────────────────────────────────────────────────────────────────────── */
.oxes-orders {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--tex-card);
    overflow: hidden;
}
.oxes-orders__row {
    display: grid;
    grid-template-columns: 48px minmax(0, 2.4fr) 1fr 0.9fr 1fr 0.9fr 56px;
    gap: 12px;
    align-items: center;
    padding: 14px 18px;
    border-top: 1px solid var(--line);
    font-size: 15px;
    color: var(--fg);
}
.oxes-orders__row--head {
    border-top: 0;
    background: rgba(255,255,255,0.03);
    font-size: 13px; font-weight: 600;
    color: var(--fg-mute);
}
.oxes-orders__id { color: var(--fg-sub); }
.oxes-orders__content { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oxes-orders__plus { color: var(--online); font-weight: 600; }
.oxes-orders__muted { color: var(--fg-mute); }
.oxes-orders__end { text-align: right; }
.oxes-orders__status {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12.5px; font-weight: 600;
    background: rgba(255,255,255,0.06);
    color: var(--fg-mute);
}
.oxes-orders__status--success { background: rgba(143,168,103,0.16); color: #a9c37f; }
.oxes-orders__status--warning { background: rgba(214,170,70,0.16); color: #e0bd6a; }
.oxes-orders__status--danger  { background: rgba(200,80,70,0.16);  color: #e08a80; }
.oxes-orders__status--info    { background: rgba(95,160,160,0.16); color: #86c1c1; }
.oxes-orders__detail {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 8px;
    background: transparent; color: var(--fg-mute);
    transition: color var(--dur-fast), border-color var(--dur-fast);
}
.oxes-orders__detail:hover { color: var(--fg); border-color: var(--fg-sub); }
.oxes-orders-empty {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 48px 20px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--tex-card);
    color: var(--fg-mute); text-align: center;
}
.oxes-orders-empty p { margin: 0; }
@media (max-width: 760px) {
    .oxes-orders__row--head { display: none; }
    .oxes-orders__row {
        grid-template-columns: 1fr auto;
        grid-template-areas: "content end" "meta meta";
        row-gap: 6px;
    }
    .oxes-orders__id { display: none; }
    .oxes-orders__content { grid-column: 1; }
    .oxes-orders__row > span:nth-child(3),
    .oxes-orders__row > span:nth-child(4),
    .oxes-orders__row > span:nth-child(5),
    .oxes-orders__row > span:nth-child(6) { font-size: 13px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   KREDİ YÜKLE akışı - e-posta kapısı, seçili paket, özet/onay
   ───────────────────────────────────────────────────────────────────────── */
button.oxes-topup-card { font: inherit; color: inherit; cursor: pointer; text-align: center; }
.oxes-topup-card.is-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent) inset;
    background: var(--bg-elev);
}
.oxes-topup-card.is-selected .oxes-topup-card__cta { background: var(--accent-soft); }
.oxes-topup-gate,
.oxes-topup-summary {
    max-width: 560px;
    margin: 24px auto 0;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--tex-card);
}
.oxes-topup-gate h2, .oxes-topup-summary h2 { margin: 0 0 8px; font-size: 20px; }
.oxes-topup-gate p { color: var(--fg-mute); margin: 0 0 16px; }
.oxes-topup-gate__form { display: flex; flex-direction: column; gap: 12px; }
.oxes-topup-gate__form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--fg-mute); }
.oxes-topup-gate__form input {
    padding: 11px 13px;
    background: var(--bg-deep); color: var(--fg);
    border: 1px solid var(--line); border-radius: 8px;
}
.oxes-topup-gate__form input:focus { outline: none; border-color: var(--accent); }
.oxes-topup-gate__err { color: #e08a80 !important; margin: 0 !important; font-size: 14px; }
.oxes-topup-gate__ok { color: #a9c37f !important; }
.oxes-topup-summary dl { margin: 12px 0 18px; display: flex; flex-direction: column; gap: 8px; }
.oxes-topup-summary dl > div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.oxes-topup-summary dt { color: var(--fg-mute); font-weight: 400; }
.oxes-topup-summary dd { margin: 0; font-weight: 600; }
.oxes-topup-summary__terms { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--fg-mute); margin-bottom: 18px; }
.oxes-topup-summary__terms input { margin-top: 4px; accent-color: var(--accent); }
.oxes-topup-summary__terms a { color: var(--accent-soft); }
.oxes-topup-summary .oxes-btn { width: 100%; justify-content: center; }

/* ─────────────────────────────────────────────────────────────────────────
   SUNUCU DURUMU
   ───────────────────────────────────────────────────────────────────────── */
.oxes-status__net {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 22px 24px; margin-bottom: 20px;
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--tex-card);
}
.oxes-status__net > div { flex: 1 1 260px; }
.oxes-status__net h2 { margin: 0 0 4px; font-size: 20px; }
.oxes-status__net p { margin: 0; color: var(--fg-mute); }
.oxes-status__dot { width: 12px; height: 12px; border-radius: 50%; background: #8a8a8a; flex: none; }
.is-up .oxes-status__dot { background: var(--online); box-shadow: 0 0 0 4px rgba(143,168,103,0.18); }
.is-down .oxes-status__dot { background: #c8665c; }
.oxes-status__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.oxes-status__card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 22px 16px; text-align: center;
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--tex-card);
}
.oxes-status__card.is-soon { opacity: 0.5; filter: grayscale(0.7); }
.oxes-status__name { max-height: 40px; width: auto; }
.oxes-status__state { font-weight: 600; font-size: 14px; color: var(--fg-mute); }
.oxes-status__card.is-up .oxes-status__state { color: #a9c37f; }
.oxes-status__count { font-size: 14px; color: var(--fg-mute); }
.oxes-status__count strong { color: var(--fg); font-size: 18px; }
.oxes-status__foot { margin-top: 20px; color: var(--fg-sub); font-size: 13px; }

/* ─────────────────────────────────────────────────────────────────────────
   MAĞAZA rework: yakında tabela, mod çubuğu, slot indirimi, ürün penceresi, sepet
   ───────────────────────────────────────────────────────────────────────── */
.oxes-modesign--soon { cursor: default; filter: grayscale(0.85) brightness(0.7); }
.oxes-modesign--soon:hover { transform: none; }
.oxes-modesign--soon .oxes-modesign__tip { opacity: 1; }

.oxes-shopnav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 8px auto 12px; }
.oxes-shopnav__mode { display: flex; align-items: baseline; gap: 12px; }
.oxes-shopnav__mode span { font-family: var(--font-display); font-size: 22px; }
.oxes-shopnav__mode a { font-size: 14px; color: var(--accent-soft); text-decoration: none; }
.oxes-shopnav__mode a:hover { color: var(--accent); }
.oxes-shopnav__cart { display: inline-flex; align-items: center; gap: 6px; }
.oxes-shopnav__cart b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #0c0f12; font-size: 11px; line-height: 18px; text-align: center; }
.oxes-shopnav .oxes-shop-tabs { margin: 0; }
.oxes-shopslot__sale {
    display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px;
    background: rgba(214,170,70,0.2); color: #e0bd6a; font-size: 11px; font-weight: 600;
}

.oxes-pkgmodal { background: #121212; border: 1px solid var(--line); border-radius: 14px; color: var(--fg); }
.oxes-pkgmodal .modal-header, .oxes-pkgmodal .modal-footer { border-color: var(--line); }
.oxes-pkgmodal__body { display: grid; grid-template-columns: 160px 1fr; gap: 20px; }
.oxes-pkgmodal__media {
    aspect-ratio: 1; border: 1px solid var(--line); border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.03); overflow: hidden;
}
.oxes-pkgmodal__media img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.oxes-pkgmodal__media i { font-size: 48px; color: var(--fg-sub); }
.oxes-pkgmodal__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.oxes-pkgmodal__price { flex: 1 1 auto; font-family: var(--font-display); font-size: 22px; color: var(--accent-soft); }
.oxes-pkgmodal__price del { font-family: var(--font-body); font-size: 14px; color: var(--fg-sub); margin-right: 6px; }
.oxes-pkgmodal__actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.oxes-pkgmodal__field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--fg-mute); }
.oxes-pkgmodal__field input { width: 90px; padding: 8px 10px; background: var(--bg-deep); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; }
.oxes-pkgmodal__note { color: var(--fg-mute); font-size: 14px; }
@media (max-width: 600px) { .oxes-pkgmodal__body { grid-template-columns: 1fr; } .oxes-pkgmodal__media { max-width: 160px; } }

.oxes-cart__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.oxes-cart__head h1 { margin: 0; }
.oxes-cart__back, .oxes-cart__link { color: var(--fg-mute); font-size: 14px; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.oxes-cart__back:hover, .oxes-cart__link:hover { color: var(--fg); }
.oxes-cart__layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .oxes-cart__layout { grid-template-columns: 1fr; } }
.oxes-cart__items { border: 1px solid var(--line); border-radius: 12px; background: var(--tex-card); }
.oxes-cart__item { display: grid; grid-template-columns: minmax(0, 1fr) 90px 110px 40px; gap: 12px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line); }
.oxes-cart__item:first-child { border-top: 0; }
.oxes-cart__item--ro { grid-template-columns: minmax(0, 1fr) auto; }
.oxes-cart__name { display: flex; flex-direction: column; gap: 2px; }
.oxes-cart__name span { font-size: 13px; color: var(--fg-mute); }
.oxes-cart__qty input { width: 100%; padding: 7px 9px; background: var(--bg-deep); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; }
.oxes-cart__total { text-align: right; font-weight: 600; }
.oxes-cart__actions { display: flex; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--line); }
form.oxes-cart__actions { border: 0; padding: 10px 0 0; }
.oxes-cart__codes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
@media (max-width: 600px) { .oxes-cart__codes { grid-template-columns: 1fr; } .oxes-cart__item { grid-template-columns: minmax(0,1fr) 70px 40px; } .oxes-cart__total { display: none; } }
.oxes-cart__code label { display: block; font-size: 14px; color: var(--fg-mute); margin-bottom: 6px; }
.oxes-cart__code > div { display: flex; gap: 8px; }
.oxes-cart__code input { flex: 1; min-width: 0; padding: 8px 10px; background: var(--bg-deep); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; }
.oxes-cart__sum { border: 1px solid var(--line); border-radius: 12px; background: var(--tex-card); padding: 20px; position: sticky; top: calc(var(--navbar-h) + 16px); }
.oxes-cart__sum h2 { margin: 0 0 10px; font-size: 18px; }
.oxes-cart__sum dl { margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.oxes-cart__sum dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.oxes-cart__sum dt { font-weight: 400; color: var(--fg-mute); }
.oxes-cart__sum dd { margin: 0; }
.oxes-cart__grand { padding-top: 10px; border-top: 1px solid var(--line); font-weight: 600; }
.oxes-cart__grand dt { color: var(--fg); font-weight: 600; }
.oxes-cart__go { width: 100%; justify-content: center; margin-top: 12px; }
.oxes-cart__sum .form-check { font-size: 13px; color: var(--fg-mute); display: block; }
.oxes-cart__sum .form-check a { color: var(--accent-soft); }
.oxes-cart__note { margin-top: 14px; color: var(--fg-mute); font-size: 14px; }

/* Profil vitrini: oyun verisi kartları */
.oxes-profile__game { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-top: 20px; }
.oxes-profile__gamecard { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--tex-card); }
.oxes-profile__stat-value.is-empty { color: var(--fg-sub); font-size: 14px; font-weight: 400; }

/* ─────────────────────────────────────────────────────────────────────────
   OY VER
   ───────────────────────────────────────────────────────────────────────── */
.oxes-vote__head h1 { margin: 0 0 6px; }
.oxes-vote__head p { margin: 0 0 20px; color: var(--fg-mute); }
.oxes-vote__sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.oxes-vote__site {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--tex-card); color: var(--fg); text-decoration: none;
    transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.oxes-vote__site:hover { border-color: var(--accent); transform: translateY(-2px); }
.oxes-vote__site-name { font-weight: 600; }
.oxes-vote__site-cta { font-size: 14px; color: var(--accent-soft); }
.oxes-vote__hint { margin: 10px 0 24px; font-size: 14px; color: var(--fg-mute); }
.oxes-vote__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 960px) { .oxes-vote__grid { grid-template-columns: 1fr; } }
.oxes-vote__side { display: flex; flex-direction: column; gap: 20px; }
.oxes-vote__card { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--tex-card); }
.oxes-vote__card h2 { margin: 0 0 6px; font-size: 19px; }
.oxes-vote__sub { margin: 0 0 14px; color: var(--fg-mute); font-size: 14px; }
.oxes-vote__cal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
@media (max-width: 560px) { .oxes-vote__cal { grid-template-columns: repeat(3, 1fr); } }
.oxes-vote__day { display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,0.02); }
.oxes-vote__day-n { font-size: 12px; color: var(--fg-sub); }
.oxes-vote__day-r { font-size: 14px; font-weight: 600; }
.oxes-vote__day.is-special { border-color: var(--accent-dim); background: rgba(46,154,142,0.08); }
.oxes-vote__day.is-special .oxes-vote__day-r { color: var(--accent-soft); }
.oxes-vote__day.is-done { opacity: 0.45; }
.oxes-vote__prizes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.oxes-vote__prizes li { display: grid; grid-template-columns: 24px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.oxes-vote__pos { color: var(--fg-sub); font-weight: 600; }
.oxes-vote__who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oxes-vote__cnt { color: var(--fg-mute); }
.oxes-vote__prize { color: var(--accent-soft); font-weight: 600; }
.oxes-vote__list { margin: 0; padding-left: 18px; color: var(--fg-mute); font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.oxes-vote__list strong { color: var(--fg); }

/* Ürün vitrini: warden idle (nefes + hafif sallanma), ürün gözleri */
.oxes-vitrin--products .oxes-vitrin__warden {
  transform-origin: 16% 96%;
  animation: oxes-warden-idle 5.5s ease-in-out infinite;
}
@keyframes oxes-warden-idle {
  0%, 100% { transform: translateY(0) scale(1, 1) rotate(0deg); }
  30%      { transform: translateY(-0.4%) scale(1.004, 1.012) rotate(-0.25deg); }
  60%      { transform: translateY(-0.9%) scale(1, 1.006) rotate(0.2deg); }
}
@media (prefers-reduced-motion: reduce) { .oxes-vitrin--products .oxes-vitrin__warden { animation: none; } }
.oxes-vitrinslot__icon { font-size: clamp(22px, 2.6vw, 40px); color: #80d8d0; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.oxes-vitrinslot--pkg .oxes-vitrinslot__count { color: #9fe3dc; font-size: clamp(9px, .9vw, 13px); }
.oxes-vitrinslot--pkg del { color: rgba(255,255,255,.5); font-weight: 400; }
.oxes-vitrinslot--pkg:hover .oxes-vitrinslot__icon { transform: translateY(-6%); }

/* Sepet: özet içinde indirim kodu */
.oxes-cart__coupon { margin: 0 0 4px; padding: 12px 0 4px; border-top: 1px dashed var(--line); }
.oxes-cart__coupon summary { cursor: pointer; font-size: 14px; color: var(--accent-soft); list-style: none; }
.oxes-cart__coupon summary::-webkit-details-marker { display: none; }
.oxes-cart__coupon summary::after { content: '+'; margin-left: 6px; color: var(--fg-sub); }
.oxes-cart__coupon[open] summary::after { content: '-'; }
.oxes-cart__coupon-form { display: flex; gap: 8px; margin-top: 10px; }
.oxes-cart__coupon-form input {
    flex: 1; min-width: 0; padding: 9px 11px;
    background: var(--bg-deep); color: var(--fg);
    border: 1px solid var(--line); border-radius: 8px;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.oxes-cart__coupon-form input:focus { outline: none; border-color: var(--accent); }

/* Sipariş onay sayfası */
.oxes-confirm__steps { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 20px; counter-reset: cstep; }
.oxes-confirm__steps li {
    counter-increment: cstep; display: flex; align-items: center; gap: 8px;
    padding: 6px 14px 6px 8px; border: 1px solid var(--line); border-radius: 999px;
    font-size: 14px; color: var(--fg-sub);
}
.oxes-confirm__steps li::before {
    content: counter(cstep); width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06); font-size: 12px; font-weight: 600;
}
.oxes-confirm__steps li.is-done { color: var(--fg-mute); }
.oxes-confirm__steps li.is-current { color: var(--fg); border-color: var(--accent); }
.oxes-confirm__steps li.is-current::before { background: var(--accent); color: #fff; }
.oxes-confirm__item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line); }
.oxes-confirm__item:first-child { border-top: 0; }
.oxes-confirm__thumb {
    width: 52px; height: 52px; border-radius: 10px; border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.03); overflow: hidden;
}
.oxes-confirm__thumb img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.oxes-confirm__thumb i { font-size: 22px; color: var(--fg-sub); }
.oxes-confirm__info { margin-top: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--tex-card); }
.oxes-confirm__info h2 { margin: 0 0 8px; font-size: 17px; }
.oxes-confirm__info ul { margin: 0; padding-left: 18px; color: var(--fg-mute); font-size: 14px; display: flex; flex-direction: column; gap: 5px; }
.oxes-confirm__info a { color: var(--accent-soft); }
.oxes-confirm__bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; margin: -4px 0 14px; }
.oxes-confirm__bar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.oxes-confirm__bar.is-short span { background: #c8665c; }

/* Warden vitrinin ÖNÜNDE dursun (kategori ve ürün sahnesi). Gözler ve tabela yine en üstte. */
.oxes-vitrin__case { z-index: 1; }
.oxes-vitrin__warden { z-index: 2; }
.oxes-vitrin__banner { z-index: 3; }
.oxes-vitrinslot { z-index: 4; }

/* ─────────────────────────────────────────────────────────────────────────
   YETKİLİLER - kademeli 3D kart ızgarası + CV profil penceresi
   ───────────────────────────────────────────────────────────────────────── */
.oxes-team__head { margin-bottom: 28px; }
.oxes-team__head h1 { margin: 0 0 6px; }
.oxes-team__head p { margin: 0; color: var(--fg-mute); }
.oxes-team__tier { margin-bottom: 36px; }
.oxes-team__tier-title {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 14px; font-size: 20px;
}
.oxes-team__tier-title::before { content: ""; width: 4px; height: 20px; border-radius: 2px; background: var(--tier-color); }
.oxes-team__tier-title span { font-size: 13px; color: var(--fg-sub); font-weight: 400; }
.oxes-team__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.oxes-team__card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px 14px 18px;
    font: inherit; color: inherit; text-align: center; cursor: pointer;
    border: 1px solid var(--line); border-radius: 14px;
    background:
        radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--tier-color) 18%, transparent), transparent 70%),
        var(--tex-card);
    transition: transform var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.oxes-team__card:hover, .oxes-team__card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--tier-color);
    box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--tier-color) 60%, transparent);
}
.oxes-team__model { position: relative; width: 100%; aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; }
.oxes-team__canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity .3s, transform .3s; }
.oxes-team__canvas.is-ready { opacity: 1; }
.oxes-team__fallback { width: 56%; image-rendering: pixelated; transition: opacity .3s; }
.oxes-team__canvas.is-ready + .oxes-team__fallback { opacity: 0; }
.oxes-team__card:hover .oxes-team__canvas.is-ready { transform: scale(1.04); }
.oxes-team__name { font-weight: 700; font-size: 17px; }
.oxes-team__role {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600;
    color: #fff;
    background: var(--tier-color);
}
.oxes-team__perm { font-size: 13px; color: var(--fg-mute); }

body.oxes-team--locked { overflow: hidden; }
.oxes-team__modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; }
.oxes-team__modal[hidden] { display: none; }
.oxes-team__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.72); backdrop-filter: blur(4px); }
.oxes-team__cv {
    position: relative;
    width: min(880px, 100%); max-height: calc(100vh - 40px); overflow: auto;
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    border: 1px solid color-mix(in srgb, var(--tier-color) 45%, var(--line));
    border-radius: 16px; background: #111;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.oxes-team__close {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06); color: var(--fg); border: 1px solid var(--line); cursor: pointer;
}
.oxes-team__cv-model {
    position: relative; min-height: 420px;
    background: radial-gradient(90% 70% at 50% 35%, color-mix(in srgb, var(--tier-color) 22%, transparent), transparent 75%), #0c0c0c;
    border-right: 1px solid var(--line);
}
.oxes-team__cv-model canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; cursor: grab; }
.oxes-team__cv-model canvas:active { cursor: grabbing; }
.oxes-team__cv-hint { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 12px; color: var(--fg-sub); pointer-events: none; }
.oxes-team__cv-body { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.oxes-team__cv-body h2 { margin: 0; font-size: 30px; }
.oxes-team__cv-body h3 { margin: 0 0 8px; font-size: 14px; letter-spacing: 0.04em; color: var(--fg-mute); }
.oxes-team__cv-body p { margin: 0; color: var(--fg); line-height: 1.6; }
.oxes-team__cv-body [hidden] { display: none !important; }
.oxes-team__facts { display: flex; gap: 24px; margin: 0; }
.oxes-team__facts dt { font-size: 12px; color: var(--fg-sub); }
.oxes-team__facts dd { margin: 2px 0 0; font-weight: 600; }
.oxes-team__abilities { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.oxes-team__abilities li { position: relative; padding-left: 18px; font-size: 14.5px; }
.oxes-team__abilities li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 2px; background: var(--tier-color); }
.oxes-team__inherited { margin-top: 10px; }
.oxes-team__inherited summary { cursor: pointer; font-size: 13.5px; color: var(--fg-mute); }
.oxes-team__inherited ul { margin-top: 8px; opacity: 0.8; }
.oxes-team__links { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 720px) {
    .oxes-team__cv { grid-template-columns: 1fr; }
    .oxes-team__cv-model { min-height: 300px; border-right: 0; border-bottom: 1px solid var(--line); }
    .oxes-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ Profil (oxes-me) ============ */
.oxes-me { width: 100%; max-width: var(--container, 1200px); margin: 0 auto; padding: 32px var(--pad, 16px) 64px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; }
.oxes-me__hero {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center;
  padding: clamp(18px, 3vw, 32px);
  border: 1px solid var(--tex-edge); border-radius: 16px;
  background: radial-gradient(90% 90% at 15% 40%, rgba(46,154,142,.14), transparent 60%), var(--card-green);
}
.oxes-me__model { position: relative; height: 380px; }
.oxes-me__model canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .4s ease; cursor: grab; }
.oxes-me__model canvas.is-ready { opacity: 1; }
.oxes-me__model canvas.is-ready + .oxes-me__fallback { opacity: 0; }
.oxes-me__fallback { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 140px; image-rendering: pixelated; transition: opacity .3s ease; pointer-events: none; }
.oxes-me__info { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.oxes-me__role { display: inline-flex; gap: 6px; align-items: center; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.oxes-me__name { margin: 0; font-family: var(--font-display); font-size: clamp(34px, 5vw, 56px); line-height: 1; overflow-wrap: anywhere; }
.oxes-me__facts { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--fg-mute); font-size: 14.5px; }
.oxes-me__balance {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 4px;
  padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(10,10,10,.45);
}
.oxes-me__balance-label { font-size: 13px; color: var(--fg-mute); }
.oxes-me__balance-value { font-family: var(--font-display); font-size: 22px; color: var(--fg); }
.oxes-me__links { display: flex; flex-wrap: wrap; gap: 8px; }
.oxes-me__links a {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong);
  color: var(--fg-soft); font-size: 14px; font-weight: 600;
}
.oxes-me__links a:hover { color: var(--fg); border-color: var(--accent); }
.oxes-me__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .oxes-me__grid { grid-template-columns: 1fr; } }
.oxes-me__card {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--tex-edge); border-radius: 14px; background: var(--card-green);
  min-width: 0;
}
.oxes-me__card h2 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.oxes-me__big { margin: 0; font-family: var(--font-display); font-size: 40px; line-height: 1.05; color: var(--fg); }
.oxes-me__big small { font-family: var(--font-body); font-size: 15px; color: var(--fg-mute); font-weight: 600; }
.oxes-me__big--name { font-size: 28px; overflow-wrap: anywhere; }
.oxes-me__sub { margin: -4px 0 0; color: var(--fg-soft); font-size: 14px; }
.oxes-me__bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.oxes-me__bar span { display: block; height: 100%; width: var(--p); background: var(--accent); border-radius: inherit; }
.oxes-me__kv { margin: 4px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.oxes-me__kv div { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(10,10,10,.35); min-width: 0; }
.oxes-me__kv dt { font-size: 12px; color: var(--fg-mute); }
.oxes-me__kv dd { margin: 2px 0 0; font-weight: 700; color: var(--fg); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oxes-me__muted { margin: 0; color: var(--fg-mute); line-height: 1.55; }
.oxes-me__hint { margin: 2px 0 0; font-size: 12.5px; color: var(--fg-dim); }
.oxes-me__orders { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.oxes-me__orders li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(10,10,10,.35); }
.oxes-me__orders span { min-width: 0; font-weight: 700; font-size: 14px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oxes-me__orders time { flex: 0 0 auto; font-size: 12px; color: var(--fg-mute); }
/* Rozetler: envanter gözleri + altında Minecraft eşya ipucu gibi açıklama kutusu (sculk kenarlı) */
.oxes-badges__count { margin-left: 6px; font-size: 12px; letter-spacing: 0; color: var(--fg-mute); font-weight: 700; }
.oxes-badges__grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 46px)); gap: 8px; }
.oxes-badges__slot {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 1; padding: 0;
  background: rgba(0, 0, 0, .45);
  border: 1px solid var(--line); border-radius: 6px;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .55), inset -2px -2px 0 rgba(255, 255, 255, .05);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.oxes-badges__slot img { width: 66%; height: auto; image-rendering: pixelated; filter: brightness(0) invert(.55); opacity: .6; transition: filter .15s, opacity .15s, transform .15s; }
.oxes-badges__slot.is-earned { border-color: rgba(98, 242, 247, .28); background: rgba(14, 40, 44, .55); }
.oxes-badges__slot.is-earned img { filter: drop-shadow(0 0 6px rgba(98, 242, 247, .35)); opacity: 1; }
.oxes-badges__slot:hover img, .oxes-badges__slot.is-active img { transform: scale(1.1); }
.oxes-badges__slot.is-active { border-color: var(--accent); background: rgba(41, 223, 235, .1); }
.oxes-badges__slot--empty { cursor: default; }
.oxes-badges__slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.oxes-badges__tip {
  padding: 10px 12px;
  border: 2px solid transparent; border-radius: 6px;
  background: linear-gradient(rgba(8, 12, 12, .94), rgba(8, 12, 12, .94)) padding-box,
              linear-gradient(180deg, #29dfeb, #0b4f55) border-box;
}
.oxes-badges__info { display: flex; flex-direction: column; gap: 4px; }
.oxes-badges__name { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--fg-soft); }
.oxes-badges__name.is-earned { color: #62f2f7; }
.oxes-badges__name span { padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--fg-mute); font-size: 11px; font-weight: 700; }
.oxes-badges__desc { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--fg-mute); }
.oxes-badges__prog { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.oxes-badges__prog .oxes-me__bar { flex: 1 1 auto; height: 6px; }
.oxes-badges__prog small { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--fg-soft); }
.oxes-badges__slot { position: relative; }
/* Minecraft yığın sayısı gibi sağ altta adet (kaç kez kazanıldı) */
.oxes-badges__n { position: absolute; right: 3px; bottom: 1px; font-family: var(--font-display); font-size: 12px; line-height: 1; color: #fff; text-shadow: 2px 2px 0 #3f3f3f; pointer-events: none; }
.oxes-badges__slot--empty { cursor: pointer; }
.oxes-badges__slot--empty:hover { border-color: rgba(98, 242, 247, .35); }
.oxes-inv__meta { margin: 0; font-size: 12px; color: var(--fg-dim); }

/* Rozet envanteri penceresi */
.oxes-inv { width: min(940px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; background: transparent; color: var(--fg); overflow: visible; }
.oxes-inv::backdrop { background: rgba(0, 0, 0, .72); }
.oxes-inv[open] { animation: oxes-inv-in .18s ease-out; }
@keyframes oxes-inv-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.oxes-inv__win {
  display: flex; flex-direction: column; max-height: calc(100dvh - 24px);
  border: 1px solid var(--tex-edge); border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 22, 24, .97), rgba(10, 11, 12, .98));
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .8);
  overflow: hidden;
}
.oxes-inv__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.oxes-inv__head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 22px; text-transform: uppercase; }
.oxes-inv__count { color: var(--fg-mute); font-size: 13px; font-weight: 700; white-space: nowrap; }
.oxes-inv__x { margin-left: auto; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--fg-soft); cursor: pointer; }
.oxes-inv__x:hover { color: var(--fg); border-color: var(--tex-edge-hover); }
.oxes-inv__x svg { width: 18px; height: 18px; }
.oxes-inv__body { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; padding: 18px 20px; overflow: auto; min-height: 0; }
.oxes-inv__grids { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.oxes-inv__sec h3 { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-mute); }
.oxes-inv__grid { display: grid; grid-template-columns: repeat(9, minmax(0, 52px)); gap: 6px; }
.oxes-inv__slot.is-soon img { filter: brightness(0) invert(.4); opacity: .4; }
.oxes-inv__slot.is-soon { border-style: dashed; }
.oxes-inv__q { font-family: var(--font-display); font-size: 20px; color: #6f7377; line-height: 1; }
/* Vitrinde olan rozet: sol üstte küçük sculk işareti */
.oxes-inv__pin { position: absolute; left: 3px; top: 3px; width: 7px; height: 7px; background: var(--accent); box-shadow: 0 0 6px var(--accent); opacity: 0; pointer-events: none; }
.oxes-inv__slot.is-pinned .oxes-inv__pin { opacity: 1; }
/* Seçili rozetin bilgi kutusu: büyük ikon, Minecraft eşya nadirliği renginde isim */
.oxes-inv__info {
  --rar: #e6e6e6;
  align-self: start; position: sticky; top: 0;
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px 18px 18px;
  border: 2px solid transparent; border-radius: 12px;
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, color-mix(in srgb, var(--rar) 12%, transparent), transparent 75%) padding-box,
    linear-gradient(rgba(10, 13, 14, .97), rgba(10, 13, 14, .97)) padding-box,
    linear-gradient(180deg, #29dfeb, #0b4f55) border-box;
}
.oxes-inv__info[data-rar="common"] { --rar: #f2f2f2; }
.oxes-inv__info[data-rar="uncommon"] { --rar: #ffff55; }
.oxes-inv__info[data-rar="rare"] { --rar: #55ffff; }
.oxes-inv__info[data-rar="epic"] { --rar: #ff55ff; }
.oxes-inv__hero { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.oxes-inv__big {
  flex: 0 0 auto; display: grid; place-items: center; width: 96px; height: 96px;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, .5);
  box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .55), inset -3px -3px 0 rgba(255, 255, 255, .05);
}
.oxes-inv__big img { width: 64px; height: 64px; image-rendering: pixelated; filter: brightness(0) invert(.55); opacity: .6; }
.oxes-inv__big .oxes-inv__q { font-size: 40px; }
.oxes-inv__info.is-earned .oxes-inv__big {
  border-color: color-mix(in srgb, var(--rar) 45%, transparent);
  box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .55), inset -3px -3px 0 rgba(255, 255, 255, .05), 0 0 30px -6px color-mix(in srgb, var(--rar) 55%, transparent);
}
.oxes-inv__info.is-earned .oxes-inv__big img { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--rar) 35%, transparent)); opacity: 1; }
.oxes-inv__name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.15; color: var(--fg-soft); overflow-wrap: anywhere; text-transform: uppercase; }
.oxes-inv__info.is-earned .oxes-inv__name { color: var(--rar); text-shadow: 2px 2px 0 color-mix(in srgb, var(--rar) 22%, #000); }
.oxes-inv__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.oxes-inv__state, .oxes-inv__rar { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.3; }
.oxes-inv__state { background: rgba(255, 255, 255, .08); color: var(--fg-mute); }
.oxes-inv__state[data-state="earned"] { background: rgba(41, 223, 235, .15); color: #62f2f7; }
.oxes-inv__rar { color: var(--rar); background: color-mix(in srgb, var(--rar) 10%, transparent); border: 1px solid color-mix(in srgb, var(--rar) 35%, transparent); }
.oxes-inv__desc { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--fg-soft); text-align: center; }
.oxes-inv__prog { display: flex; flex-direction: column; gap: 6px; }
.oxes-inv__prog-top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--fg-mute); }
.oxes-inv__prog-top b { color: var(--fg); }
.oxes-inv__prog .oxes-me__bar { height: 10px; }
.oxes-inv__facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.oxes-inv__facts div { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, .3); min-width: 0; }
.oxes-inv__facts dt { font-size: 11.5px; color: var(--fg-mute); }
.oxes-inv__facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 700; color: var(--fg); }
.oxes-inv__info .oxes-inv__btn { width: 100%; min-height: 44px; }
.oxes-inv__btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--accent); border-radius: 10px; background: var(--accent); color: #0c0f12;
  font-family: var(--font-body); font-size: 14px; font-weight: 700; cursor: pointer;
}
.oxes-inv__btn:disabled { opacity: .45; cursor: default; }
.oxes-inv__btn--ghost { background: transparent; color: var(--accent-soft); border-color: rgba(98, 242, 247, .35); }
.oxes-inv__btn--ghost:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
.oxes-inv__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 14px 20px 18px; border-top: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.oxes-inv__label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 70%, #9fdcff); }
.oxes-inv__label small { margin-left: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fg-mute); }
.oxes-inv__hotbar { display: grid; grid-template-columns: repeat(6, 52px); gap: 6px; }
.oxes-inv__actions { display: flex; gap: 8px; }
@media (max-width: 760px) {
  .oxes-inv__body { grid-template-columns: 1fr; }
  .oxes-inv__info { position: static; order: -1; gap: 12px; padding: 14px; }
  .oxes-inv__hero { flex-direction: row; text-align: left; gap: 14px; }
  .oxes-inv__big { width: 72px; height: 72px; }
  .oxes-inv__big img { width: 48px; height: 48px; }
  .oxes-inv__name { font-size: 19px; }
  .oxes-inv__chips { justify-content: flex-start; }
  .oxes-inv__desc { text-align: left; font-size: 15px; }
  .oxes-inv__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .oxes-inv__hotbar { grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; }
  .oxes-inv__hotbar-wrap { flex: 1 1 100%; }
  .oxes-inv__actions { flex: 1 1 100%; }
  .oxes-inv__actions .oxes-inv__btn { flex: 1 1 0; }
  .oxes-inv__head { padding: 14px 16px; }
  .oxes-inv__head { flex-wrap: wrap; row-gap: 2px; }
  .oxes-inv__head h2 { font-size: 18px; }
  .oxes-inv__count { order: 3; flex-basis: 100%; }
  .oxes-inv__body, .oxes-inv__foot { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) { .oxes-inv[open] { animation: none; } }
.oxes-me__cta { margin-top: auto; align-self: flex-start; font-size: 14px; font-weight: 700; color: var(--accent); }
.oxes-me__cta:hover { text-decoration: underline; }
.oxes-me__activity .oxes-act__text { white-space: normal; }
@media (max-width: 720px) {
  .oxes-me__hero { grid-template-columns: 1fr; text-align: left; }
  .oxes-me__model { height: 300px; }
}
.oxes-me__kv dd.is-wrap { white-space: normal; }


/* ============ Profil ambiyansı: taş doku arka plan + yukarıdan loş mavi ışık ============
   Taş doku sayfayla birlikte kayar; ışık (body::before + huzmeler) ekrana sabittir.
   Kaydırdıkça taşlar ve kartlar ışığın altından geçer, ışık seninle birlikte iner. */
body.oxes-page-me {
  background: var(--bg-deep) var(--tex-stone) repeat;
  background-size: 256px;
  background-attachment: scroll;
}
body.oxes-page-me::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  will-change: transform; transform: translateZ(0);
  /* Işığın merkezi ekranın ortasında (karakterin üstü); dışında kalan her yer koyu. */
  background:
    radial-gradient(ellipse 36% 60% at 50% 50%, rgba(40,118,156,.24), rgba(14,38,50,.30) 45%, rgba(8,8,9,.94) 82%),
    linear-gradient(180deg, rgba(8,8,9,.55), transparent 26%, transparent 62%, rgba(8,8,9,.65));
}
.oxes-me-light { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* Performans: iki huzme tek, koni boyutunda bir katmanda (::before) bir kez çizilir; katman
   yalnızca transform/opacity ile canlandırılır, her karede yeniden çizim olmaz. Koni dar
   (±16 derece) ve uzun (~ekranın altına kadar), katman da o kadar büyük. */
.oxes-me-light__beam {
  position: absolute; top: -8vh; left: 50%;
  width: 70vh; height: 105vh; margin-left: -35vh;
  transform-origin: 50% 0;
  will-change: transform, opacity;
  animation: oxes-me-sway 11s ease-in-out infinite, oxes-me-flicker 5.3s ease-in-out infinite;
}
.oxes-me-light__beam::before {
  content: ""; position: absolute; inset: 0;
  background:
    conic-gradient(from 180deg at 50% 0%,
      transparent 174deg, rgba(160,230,255,.05) 177deg, rgba(160,230,255,.09) 178.8deg, rgba(200,242,255,.14) 180deg,
      rgba(160,230,255,.09) 181.2deg, rgba(160,230,255,.05) 183deg, transparent 186deg),
    conic-gradient(from 180deg at 50% 0%,
      transparent 164deg, rgba(70,170,230,.03) 168deg, rgba(70,170,230,.06) 172deg, rgba(120,210,255,.12) 180deg,
      rgba(70,170,230,.06) 188deg, rgba(70,170,230,.03) 192deg, transparent 196deg);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.35) 0%, #000 24%, rgba(0,0,0,.75) 55%, transparent 92%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.35) 0%, #000 24%, rgba(0,0,0,.75) 55%, transparent 92%);
}
@keyframes oxes-me-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes oxes-me-flicker { 0%, 100% { opacity: .85; } 40% { opacity: 1; } 55% { opacity: .78; } 70% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) {
  .oxes-me-light__beam { animation: none; }
}

/* Kartlar: cam gibi yarı saydam; ışık havuzu yaklaştıkça (--lit 0-1) kenar ve üst yüzey aydınlanır. */
body.oxes-page-me .oxes-me__hero,
body.oxes-page-me .oxes-me__card {
  --lit: 0;
  background:
    linear-gradient(180deg, rgba(120,210,255, calc(.07 * var(--lit))), transparent 55%),
    rgba(12,13,14, calc(.8 - .1 * var(--lit)));
  border-color: rgba(120,210,255, calc(.06 + .24 * var(--lit)));
  box-shadow: 0 0 calc(40px * var(--lit)) rgba(80,180,240, calc(.10 * var(--lit))), 0 18px 40px -24px rgba(0,0,0,.85);
  /* backdrop-filter bilerek yok: arkadaki canlı ışıkla her karede yeniden bulanıklaştırma kasıyordu. */
  transition: border-color .3s ease, box-shadow .3s ease;
}
body.oxes-page-me .oxes-me__card h2 { color: color-mix(in srgb, var(--accent) 70%, #9fdcff); }

/* Sayfa arka planı (body::before, z 0) footer'ı ve üst barı örtmesin (iç sayfalarda bar
   position:static, z-index işlemiyordu; bar sayfayla kaymaya devam eder). */
body.oxes-page-me .oxes-foot-mini { position: relative; z-index: 1; }
body.oxes-page-me .oxes-topbar { position: relative; inset: auto; z-index: 50; }

/* ============ Profil: Sahne düzeni (ortada karakter + platform, iki yanda kartlar) ============ */
.oxes-stage { gap: 26px; }
.oxes-stage__head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding-top: 8px; }
.oxes-stage__name {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px, 6vw, 76px); line-height: 1; overflow-wrap: anywhere;
  text-shadow: 0 0 28px rgba(98,242,247,.22);
}
.oxes-stage .oxes-me__facts, .oxes-stage .oxes-me__links { justify-content: center; }
.oxes-stage__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px) minmax(0, 1fr);
  gap: 24px; align-items: center;
}
.oxes-stage__side { display: flex; flex-direction: column; gap: 16px; perspective: 1200px; min-width: 0; }
.oxes-stage__card {
  opacity: 0; translate: 0 24px;
  animation: oxes-stage-rise .8s cubic-bezier(.2,.7,.2,1) var(--d, 0s) forwards;
}
.oxes-stage__side--l .oxes-stage__card { rotate: y 6deg; transform-origin: 100% 50%; }
.oxes-stage__side--r .oxes-stage__card { rotate: y -6deg; transform-origin: 0 50%; }
@keyframes oxes-stage-rise { to { opacity: 1; translate: 0 0; } }
.oxes-stage__center { position: relative; height: 540px; display: flex; justify-content: center; align-items: flex-end; }
.oxes-me__model.oxes-stage__model { position: relative; width: 100%; height: 500px; margin-bottom: 18px; }
.oxes-stage__platform { position: absolute; left: 50%; bottom: 0; width: 320px; height: 90px; margin-left: -160px; pointer-events: none; }
.oxes-stage__glow {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(98,242,247,.32), rgba(15,166,173,.12) 60%, transparent);
}
.oxes-stage__ring {
  position: absolute; left: 50%; top: 50%; width: 300px; height: 70px; margin: -35px 0 0 -150px;
  border: 2px solid rgba(98,242,247,.5); border-radius: 50%;
  opacity: 0; will-change: transform, opacity;
  animation: oxes-stage-pulse 3.6s ease-out infinite;
}
@keyframes oxes-stage-pulse { 0% { transform: scale(.5); opacity: .85; } 100% { transform: scale(1.6); opacity: 0; } }
@media (max-width: 960px) {
  .oxes-stage__row { grid-template-columns: 1fr; }
  .oxes-stage__center { order: -1; height: 400px; }
  .oxes-me__model.oxes-stage__model { height: 370px; }
  .oxes-stage__side--l .oxes-stage__card, .oxes-stage__side--r .oxes-stage__card { rotate: none; }
}
@media (prefers-reduced-motion: reduce) {
  .oxes-stage__card { opacity: 1; translate: 0 0; animation: none; }
  .oxes-stage__ring { display: none; }
}

/* Sahne revize: ilk açılışta ışık karakterin üstüne düşer (satır ekran yüksekliğinde, dikeyde ortalı);
   isim/rol/linkler karakterin altında; ayak altı parlama ve halkalar kaldırıldı. */
.oxes-stage__row { min-height: calc(100vh - 130px); }
.oxes-stage__center { height: auto; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.oxes-me__model.oxes-stage__model { height: 440px; margin-bottom: 0; }
.oxes-stage__platform { display: none; }
.oxes-stage__plate { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.oxes-stage__plate .oxes-stage__name { font-size: clamp(38px, 4.6vw, 56px); }
.oxes-stage__plate .oxes-me__facts, .oxes-stage__plate .oxes-me__links { justify-content: center; }
@media (max-width: 960px) {
  .oxes-stage__row { min-height: 0; }
  .oxes-me__model.oxes-stage__model { height: 360px; }
}

/* Profil: yan kartlar anasayfadaki haftalık oy yarışı panosu gibi. Soluk gri kenar, üzerine
   gelince netleşir; arka plan (cam + ışık) olduğu gibi kalır. */
body.oxes-page-me .oxes-me__card.oxes-stage__card {
  border: 1px solid var(--tex-edge);
  box-shadow: 0 18px 40px -24px rgba(0,0,0,.85);
  transition: border-color var(--dur-base, .25s) var(--ease-out, ease), box-shadow var(--dur-base, .25s) var(--ease-out, ease);
}
body.oxes-page-me .oxes-me__card.oxes-stage__card:hover {
  border-color: var(--tex-edge-hover);
  box-shadow: 0 22px 46px -24px rgba(0,0,0,.9);
}

/* Hesap düğmeleri: ikonlu, dokulu kart zemini, gri kenar; üzerine gelince vurgu rengi. */
.oxes-me__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.oxes-me__actions a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; box-sizing: border-box;
  border: 1px solid var(--tex-edge); border-radius: 12px;
  background: var(--card-green);
  color: var(--fg); font-size: 14.5px; font-weight: 700; text-decoration: none;
  box-shadow: 0 10px 24px -16px rgba(0,0,0,.9);
  transition: border-color .2s ease, color .2s ease, translate .2s ease;
}
.oxes-me__actions a svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent); transition: color .2s ease; }
.oxes-me__actions a:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: #ffffff; translate: 0 -2px; }
.oxes-me__actions a:hover svg { color: #9ff5f8; }
.oxes-me__actions a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Ekrana göre ortalama: sahne, üst bardan sonra kalan ekranı tam doldurur ve içeriği ortalar.
   Kaydırma anasayfadaki gibi: bir tekerlek hareketiyle footer açılır, geri gelince sayfa başı. */
body.oxes-page-me .oxes-app { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; }
body.oxes-page-me .oxes-stage { min-height: calc(100vh - var(--me-top, 100px)); justify-content: center; padding-top: 0; padding-bottom: 12px; box-sizing: border-box; }
body.oxes-page-me .oxes-stage__row { min-height: 0; }
.oxes-me__model.oxes-stage__model { height: clamp(300px, calc(100vh - 440px), 440px); }
/* Kaydırma: CSS snap yerine profil sayfasındaki JS geçişi (anasayfadaki gibi, 480 ms); CSS snap tekerlek bitince hizaladığı için takılıyordu. */
@media (max-width: 960px) {
  body.oxes-page-me .oxes-stage { min-height: 0; padding-top: 12px; }
  .oxes-me__model.oxes-stage__model { height: 360px; }
}
/* Dört hesap düğmesi dar orta sütunda 2x2 düzgün ızgara (biri alt satırda tek kalmasın). */
.oxes-stage__plate .oxes-me__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 340px); }
.oxes-stage__plate .oxes-me__actions a { justify-content: center; }

/* Footer açıldıkça üstte kalan sahne kararır: ekrana sabit karanlık katman (--me-dim 0-1, JS);
   footer bu katmanın üstünde parlak kalır. */
body.oxes-page-me::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(6,7,8,.9); opacity: var(--me-dim, 0);
}
body.oxes-page-me .oxes-foot-mini { z-index: 2; }
.oxes-badges[data-inv-card] { cursor: pointer; }
.oxes-badges[data-inv-card]:hover { border-color: var(--tex-edge-hover); }
.oxes-badges h2 { display: flex; align-items: center; }
.oxes-badges__expand { margin-left: auto; width: 16px; height: 16px; color: var(--fg-mute); transition: color .15s, transform .15s; }
.oxes-badges[data-inv-card]:hover .oxes-badges__expand { color: var(--accent); transform: scale(1.12); }