/* =====================================================================
   NATION — theme.css
   Teknik katalog / spec-sheet dili: siyah zemin, kırık beyaz metin,
   tek vurgu rengi (sinyal kırmızısı), 1px çizgiler, köşeli formlar.
   Tüm bileşenler "nx-" önekli; eski CSS'lerle çakışmaz. En son yüklenir.
   ===================================================================== */

:root {
    --nx-bg: #0a0a0a;
    --nx-bg-2: #101010;
    --nx-bg-3: #171717;
    --nx-line: #222221;
    --nx-line-2: #353533;
    --nx-text: #f1f0ec;
    --nx-muted: #8f8e89;
    --nx-dim: #5f5e5a;
    --nx-red: #e3342f;
    --nx-red-hover: #f24a44;
    --nx-on-red: #0a0a0a;

    --nx-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* Metin fontu (butonlar, menü, kartlar, formlar). Başlıklar Archivo'da kalır. */
    --nx-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --nx-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --nx-max: 1320px;
    --nx-pad: clamp(16px, 4vw, 40px);
    --nx-nav-h: 68px;
    --nx-ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 960px) {
    :root {
        --nx-nav-h: 60px;
    }
}

/* ---------------------------------------------------------------------
   Temel — eski temanın arka plan resmini / karartmasını kapat
   --------------------------------------------------------------------- */
html,
body {
    background: var(--nx-bg) none !important;
}

body {
    /* generic.css "overflow: hidden" body'yi scroll container yapıp sticky header'ı bozuyordu */
    overflow: visible !important;
    overflow-x: clip !important;
    color: var(--nx-text);
    font-family: var(--nx-sans);
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body::before {
    content: none !important;
    display: none !important;
}


::selection {
    background: var(--nx-red);
    color: var(--nx-on-red);
}

.page-index .site,
.page-category .site {
    gap: 0;
}

.nx-wrap {
    width: 100%;
    max-width: var(--nx-max);
    margin: 0 auto;
    padding: 0 var(--nx-pad);
    box-sizing: border-box;
}

.nx-red {
    color: var(--nx-red);
}

.nx-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--nx-red);
    flex-shrink: 0;
}

.nx-label {
    margin: 0;
    font: 500 12px/1 var(--nx-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nx-red);
}

:where(.nx-header, .nx-home, .nx-footer) :focus-visible {
    outline: 2px solid var(--nx-red);
    outline-offset: 3px;
}

/* ---------------------------------------------------------------------
   Butonlar
   --------------------------------------------------------------------- */
.nx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 50px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 2px;
    font: 700 13px/1 var(--nx-sans);
    font-stretch: 108%;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s;
    box-sizing: border-box;
}

.nx-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform .3s var(--nx-ease);
}

/* Sadece ok işareti kayar, ikonlar yerinde kalır */
.nx-btn:hover svg:not(.nx-ico) {
    transform: translateX(4px);
}

.nx-btn-red {
    background: var(--nx-red);
    color: var(--nx-on-red);
}

.nx-btn-red:hover {
    background: var(--nx-red-hover);
    color: var(--nx-on-red);
}

.nx-btn-line {
    border-color: var(--nx-line-2);
    color: var(--nx-text);
}

.nx-btn-line:hover {
    border-color: var(--nx-text);
    color: var(--nx-text);
}

.nx-btn-dark {
    background: var(--nx-bg);
    color: var(--nx-text);
}

.nx-btn-dark:hover {
    background: #1d1d1c;
    color: var(--nx-text);
}

/* Header'daki küçük kutu butonlar (giriş, sepet, hesap) */
.nx-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--nx-line-2);
    border-radius: 2px;
    background: transparent;
    color: var(--nx-text);
    font: 700 12px/1 var(--nx-sans);
    letter-spacing: .07em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
    box-sizing: border-box;
}

.nx-chip:hover {
    border-color: var(--nx-text);
    color: var(--nx-text);
}

.nx-chip svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   Header / navigasyon
   --------------------------------------------------------------------- */
.nx-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--nx-bg);
    border-bottom: 1px solid var(--nx-line);
}

.nx-announce {
    margin: 0;
    padding: 10px var(--nx-pad);
    background: var(--nx-red);
    color: var(--nx-on-red);
    text-align: center;
    font: 600 12px/1.3 var(--nx-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Navigasyon ekranın tam genişliğinde (içerik konteynerine hizalanmaz) */
.nx-nav-inner {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
    height: var(--nx-nav-h);
    padding: 0 clamp(16px, 2.2vw, 36px);
}

/* "nationstore" yazısı — nation kırmızı, store beyaz */
.nx-wordmark {
    font: 800 21px/1 var(--nx-display);
    font-stretch: 116%;
    letter-spacing: -.01em;
    color: var(--nx-text);
    white-space: nowrap;
}

.nx-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    color: var(--nx-text);
    text-decoration: none;
}

.nx-brand:hover {
    color: var(--nx-text);
}

.nx-brand-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

/* ---------------------------------------------------------------------
   İkonlar (icon.twig)
   --------------------------------------------------------------------- */
.nx-ico {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    vertical-align: middle;
}

.nx-ico-sm {
    width: 12px;
    height: 12px;
}

.nx-ico-lg {
    width: 22px;
    height: 22px;
}

/* Kare ikon kutusu (spec şeridi, Discord vb.) */
.nx-ico-box {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--nx-line-2);
    color: var(--nx-text);
    flex-shrink: 0;
}

.nx-ico-box .nx-ico {
    width: 20px;
    height: 20px;
}

.nx-brand-name {
    font: 800 19px/1 var(--nx-display);
    font-stretch: 120%;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.nx-links {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    gap: 2px;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}

.nx-links > li {
    position: relative;
    display: flex;
}

.nx-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    color: var(--nx-muted);
    font: 700 12px/1 var(--nx-sans);
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s;
}

.nx-link::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    background: var(--nx-line-2);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--nx-ease), background-color .2s;
}

.nx-link:hover {
    color: var(--nx-text);
}

.nx-link:hover::after {
    transform: scaleX(1);
}

.nx-link.is-active {
    color: var(--nx-text);
}

.nx-link.is-active::after {
    background: var(--nx-red);
    transform: scaleX(1);
}

.nx-link .nx-ico {
    color: var(--nx-dim);
    transition: color .2s;
}

.nx-link:hover .nx-ico,
.nx-link.is-active .nx-ico {
    color: var(--nx-red);
}

/* Link rozeti ("special", "sale" ...): adın son kelimesinin hemen altında, ortalı */
.nx-badge-anchor {
    position: relative;
    display: inline-block;
}

.nx-badge {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 6px;
    background: var(--nx-red);
    color: var(--nx-on-red);
    font: 700 9px/1 var(--nx-mono);
    letter-spacing: .06em;
    text-transform: lowercase;
    white-space: nowrap;
    pointer-events: none;
}

.nx-ext {
    width: 9px;
    height: 9px;
    opacity: .6;
}

.nx-caret {
    width: 10px;
    height: 6px;
    transition: transform .2s;
}

/* Alt kategori açılır menüsü */
.nx-sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    min-width: 220px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--nx-bg-2);
    border: 1px solid var(--nx-line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s, transform .2s, visibility .2s;
}

.nx-links > li.has-sub:hover > .nx-sub,
.nx-links > li.has-sub:focus-within > .nx-sub {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.nx-links > li.has-sub:hover .nx-caret {
    transform: rotate(180deg);
}

.nx-sub a {
    display: block;
    padding: 11px 12px;
    color: var(--nx-muted);
    font: 600 14px/1.2 var(--nx-sans);
    text-decoration: none;
}

.nx-sub a:hover,
.nx-sub a.is-active {
    background: var(--nx-bg-3);
    color: var(--nx-text);
}

/* Sağ taraf */
.nx-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 18px;
    border-left: 1px solid var(--nx-line);
    height: 40px;
}

.nx-chip .nx-ico-brand {
    width: 14px;
    height: 14px;
    color: var(--nx-red);
}

.nx-cart {
    position: relative;
    justify-content: center;
    width: 40px;
    padding: 0;
}

.nx-cart .nx-cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
}

/* generic.css'teki global ".login-text {... !important}" kuralını ez (sınıf main.js için gerekli) */
[data-fivem-login] .login-text {
    color: inherit !important;
    font: inherit !important;
    letter-spacing: inherit !important;
    line-height: 1 !important;
}

.nx-login.is-loading,
[data-fivem-login].is-loading {
    opacity: .55;
    pointer-events: none;
}

.nx-cart-count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--nx-red);
    color: var(--nx-on-red);
    font: 700 11px/1 var(--nx-mono);
    box-sizing: border-box;
}

/* Hesap menüsü */
.nx-user {
    position: relative;
}

.nx-user > summary {
    list-style: none;
}

.nx-user > summary::-webkit-details-marker {
    display: none;
}

.nx-user[open] > summary {
    border-color: var(--nx-text);
}

.nx-user[open] .nx-caret {
    transform: rotate(180deg);
}

.nx-user-initial {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    background: var(--nx-red);
    color: var(--nx-on-red);
    font: 700 11px/1 var(--nx-mono);
}

.nx-user-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none;
    letter-spacing: .01em;
    font-size: 13px;
}

.nx-user-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 5;
    min-width: 230px;
    background: var(--nx-bg-2);
    border: 1px solid var(--nx-line);
}

.nx-user-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--nx-line);
    color: var(--nx-text);
    font: 600 14px/1 var(--nx-sans);
    text-decoration: none;
}

.nx-user-menu a:last-child {
    border-bottom: 0;
}

.nx-user-menu a:hover {
    background: var(--nx-bg-3);
    color: var(--nx-text);
}

.nx-user-menu a > span {
    flex: 1;
}

.nx-user-menu a .nx-ico {
    color: var(--nx-muted);
}

.nx-user-menu a.is-danger,
.nx-user-menu a.is-danger .nx-ico {
    color: var(--nx-red);
}

/* Menü butonu (mobil) */
.nx-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--nx-line-2);
    border-radius: 2px;
    background: transparent;
    color: var(--nx-text);
    font: 700 12px/1 var(--nx-sans);
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
}

.nx-menu-lines {
    display: grid;
    gap: 5px;
    width: 16px;
}

.nx-menu-lines i {
    display: block;
    height: 1.5px;
    background: currentColor;
    transition: transform .3s var(--nx-ease);
}

.nx-menu-btn[aria-expanded="true"] .nx-menu-lines i:first-child {
    transform: translateY(3.25px) rotate(45deg);
}

.nx-menu-btn[aria-expanded="true"] .nx-menu-lines i:last-child {
    transform: translateY(-3.25px) rotate(-45deg);
}

/* Mobil menü paneli */
.nx-mobile {
    position: fixed;
    top: var(--nx-nav-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    padding: 8px var(--nx-pad) 32px;
    background: var(--nx-bg);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nx-mobile-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nx-mobile-links a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--nx-line);
    color: var(--nx-text);
    font: 800 28px/1 var(--nx-display);
    font-stretch: 112%;
    text-transform: uppercase;
    text-decoration: none;
}

.nx-mobile-links a.is-active {
    color: var(--nx-red);
}

.nx-mobile-links .is-sub a {
    padding: 14px 0 14px 40px;
    font-size: 18px;
    color: var(--nx-muted);
}

.nx-mobile-links a .nx-ico {
    width: 22px;
    height: 22px;
    color: var(--nx-red);
}

.nx-mobile-links .nx-badge {
    position: static;
    transform: none;
    align-self: flex-start;
}

.nx-mobile-foot .nx-btn .nx-ico {
    width: 16px;
    height: 16px;
}

.nx-mobile-user {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nx-mobile-foot {
    display: grid;
    gap: 10px;
    margin-top: auto;
    padding-top: 32px;
}

.nx-mobile-user {
    margin: 0 0 6px;
    color: var(--nx-muted);
    font-size: 14px;
}

.nx-mobile-user strong {
    color: var(--nx-text);
}

html.nx-menu-open {
    overflow: hidden;
}

@media (max-width: 1080px) {
    .nx-link {
        padding: 0 9px;
        font-size: 12px;
    }

    .nx-link::after {
        left: 9px;
        right: 9px;
    }

    .nx-login .login-text {
        display: none;
    }
}

@media (max-width: 960px) {
    .nx-links,
    .nx-actions .nx-login,
    .nx-actions .nx-user {
        display: none;
    }

    .nx-menu-btn {
        display: inline-flex;
    }

    .nx-actions {
        margin-left: auto;
        padding-left: 0;
        border-left: 0;
    }

    .nx-brand-logo {
        width: 38px;
        height: 38px;
    }
}


/* mobile-fixes.css'teki genel buton kurallarını header'da etkisizleştir */
@media (max-width: 768px) {
    .nx-header .nx-chip {
        min-height: 40px !important;
        padding: 0 14px !important;
        font-size: 12px !important;
    }

    .nx-header .nx-menu-btn,
    .nx-header .nx-cart {
        min-height: 40px !important;
        padding: 0 !important;
    }

    .nx-home .nx-btn,
    .nx-mobile .nx-btn {
        min-height: 50px !important;
        padding: 0 24px !important;
        font-size: 13px !important;
    }
}

/* ---------------------------------------------------------------------
   Yükleniyor iskeleti
   --------------------------------------------------------------------- */
@keyframes nx-shimmer {
    to {
        background-position: -200% 0;
    }
}

.nx-skel {
    background: linear-gradient(90deg, var(--nx-bg-3) 0%, #1e1e1d 50%, var(--nx-bg-3) 100%);
    background-size: 200% 100%;
    animation: nx-shimmer 1.4s linear infinite;
}

.nx-skel-line {
    height: 12px;
    margin-bottom: 12px;
}

.nx-skel-lg {
    height: 20px;
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
/* Hero + özellik şeridi birlikte ilk ekranı tam doldurur: şerit ekranın altında biter,
   altındaki bölüm görünmez. İçerik hero'da dikey ortalanır. */
.nx-home {
    --nx-specs-h: 190px;
}

.nx-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - var(--nx-nav-h) - var(--nx-specs-h) - 2px);
    min-height: calc(100svh - var(--nx-nav-h) - var(--nx-specs-h) - 2px);
    overflow: hidden;
    border-bottom: 1px solid var(--nx-line);
}

.nx-hero > .nx-wrap {
    position: relative;
    z-index: 1;
}

/* Işıklar çerçeveli butonun içinden görünmesin */
.nx-hero .nx-btn-line {
    background: var(--nx-bg);
}

/* Kareli defter: 48px kareler, aşağıdan yukarıya doğru şeffaflaşır */
.nx-hero-bg {
    --nx-cell: 48px;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Gri ızgara aşağıdan yukarıya şeffaflaşır. Kırmızı ışık canvas'ı maskesiz → fare ışığı üstte de görünür. */
.nx-hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: var(--nx-cell) var(--nx-cell);
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
    mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
}

/* Karelerin yanıp sönen kırmızı çizgileri (theme.js çizer; ızgarayla aynı 0,0 noktasından başlar) */
.nx-hero-bg canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Sadece hero'da: koyu palmiye silüeti. Altta tamamen karanlık, yukarı çıktıkça hafif açılır. */
.nx-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(to top, var(--nx-bg) 0%, rgba(10, 10, 10, .9) 35%, rgba(10, 10, 10, .72) 70%, rgba(10, 10, 10, .55) 100%),
        url('https://resmim.net/cdn/2026/04/11/Cdaj37.png') center bottom / cover no-repeat;
    filter: grayscale(1);
    pointer-events: none;
}

.nx-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: stretch;
    padding-top: clamp(28px, 3vw, 44px);
    padding-bottom: clamp(32px, 3.4vw, 52px);
}

/* Sol blok kartla aynı yükseklikte: üst satır kartın üst kenarına, istatistikler alt kenarına hizalı.
   Kart 3D eğik olduğu için sol kenarı ~%2.5 kısa görünür → dikeyde o kadar iç boşluk. */
.nx-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 22px;
}

.nx-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 28px;
    color: var(--nx-muted);
    font: 500 12px/1.4 var(--nx-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.nx-sep {
    color: var(--nx-dim);
}

.nx-hero-title {
    margin: 0;
    color: var(--nx-text);
    font-family: var(--nx-display);
    font-weight: 800;
    font-stretch: 112%;
    font-size: clamp(46px, 6.4vw, 94px);
    line-height: .88;
    letter-spacing: -.025em;
    text-transform: uppercase;
}

@media (max-width: 1080px) {
    .nx-hero-title {
        font-size: clamp(46px, 11vw, 112px);
    }
}

.nx-hero-lead {
    max-width: 46ch;
    margin: 32px 0 0;
    color: var(--nx-muted);
    font: 500 17px/1.6 var(--nx-sans);
}

.nx-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
}

.nx-hero-stats {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding-top: 36px;
}

.nx-hero-stats > div {
    padding: 18px 32px 0 0;
    margin-right: 32px;
    border-top: 1px solid rgba(227, 52, 47, .4);
    border-right: 1px solid rgba(227, 52, 47, .4);
}

.nx-hero-stats > div:last-child {
    margin-right: 0;
}

.nx-hero-stats dt {
    color: var(--nx-dim);
    font: 500 11px/1 var(--nx-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nx-hero-stats dd {
    margin: 10px 0 0;
    font: 700 24px/1 var(--nx-display);
    font-stretch: 110%;
}

/* Öne çıkan ürün kartı */
/* Kart sağa doğru taşar ve 3D eğilir: sağ kenar önde, sol kenar arkada.
   (rotateY negatif → sağ kenar izleyiciye yaklaşır; eksen sağ kenar olduğu için kart sağa yaslı kalır) */
.nx-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-right: calc(clamp(0px, 5vw, 80px) * -1);
    border: 1px solid var(--nx-line);
    background: var(--nx-bg-2);
    transform-origin: right center;
    transform: perspective(1800px) rotateY(-9deg);
    box-shadow: -28px 32px 60px rgba(0, 0, 0, .55);
    transition: transform .8s var(--nx-ease);
}

.nx-feature:hover {
    transform: perspective(1800px) rotateY(-5deg);
}

/* Görselin üzerindeki katman */
.nx-feature-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    pointer-events: none;
}

.nx-feature-overlay > * {
    pointer-events: auto;
}

.nx-feature-tag,
.nx-feature-count,
.nx-feature-btn {
    height: 32px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 2px;
    background: rgba(10, 10, 10, .8);
    color: var(--nx-text);
}

.nx-feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    font: 500 11px/1 var(--nx-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nx-feature-tag .nx-ico {
    width: 14px;
    height: 14px;
}

.nx-feature-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nx-feature-count {
    display: inline-grid;
    place-items: center;
    padding: 0 10px;
    font: 500 11px/1 var(--nx-mono);
    letter-spacing: .06em;
}

.nx-feature-btn {
    display: grid;
    place-items: center;
    width: 32px;
    padding: 0;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}

.nx-feature-btn svg {
    width: 12px;
    height: 12px;
}

.nx-feature-btn:hover {
    border-color: var(--nx-red);
    color: var(--nx-red);
}

/* İlerleme çubuğu: kartın en üst kenarında */
.nx-feature-progress {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    width: 100%;
    height: 2px;
    background: var(--nx-red);
    transform: scaleX(0);
    transform-origin: left;
}

/* Süre = slider'ın otomatik geçiş süresi (theme.js animasyon bitince sonraki slayta geçer) */
.nx-feature-progress.is-running {
    animation: nx-progress 7s linear forwards;
}

.nx-feature.is-paused .nx-feature-progress {
    animation-play-state: paused;
}

@keyframes nx-progress {
    to {
        transform: scaleX(1);
    }
}

.nx-feature-slot {
    display: flex;
    flex: 1;
    overflow: hidden;
    touch-action: pan-y;
}

.nx-slides {
    display: flex;
    width: 100%;
    transition: transform .7s var(--nx-ease);
}

.nx-slide,
.nx-feature-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 100%;
    min-width: 0;
}

.nx-feature-media {
    position: relative;
    display: block;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    background: var(--nx-bg-3);
    border-bottom: 1px solid var(--nx-line);
}

.nx-feature-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .8s var(--nx-ease);
}

/* Üstteki etiket ve okların okunması için görselin üst kısmında hafif karartma */
.nx-feature-media::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, rgba(10, 10, 10, .6), rgba(10, 10, 10, 0));
    pointer-events: none;
}

/* "Best seller" etiketi üst katmanla çakışmasın → görselin sol altına */
.nx-feature-media .nx-card-flag {
    top: auto;
    bottom: 0;
}

.nx-slide:hover .nx-feature-media img {
    transform: scale(1.035);
}

.nx-feature-body {
    flex: 1;
    padding: 16px 18px 16px;
}

.nx-feature-title {
    margin: 0;
    font: 800 19px/1.1 var(--nx-display);
    font-stretch: 106%;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

.nx-feature-title a {
    color: var(--nx-text);
    text-decoration: none;
    transition: color .2s;
}

.nx-feature-title a:hover {
    color: var(--nx-red);
}

/* Açıklamadan çıkarılan özellik kutuları */
.nx-feats {
    display: grid;
    gap: 6px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.nx-feat {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 9px 12px;
    border: 1px solid var(--nx-line);
    background: var(--nx-bg);
    transition: border-color .2s;
}

.nx-feat:hover {
    border-color: var(--nx-line-2);
}

.nx-feat-ico {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--nx-line-2);
    background: var(--nx-bg-2);
    font-size: 16px;
    line-height: 1;
}

.nx-feat-ico.is-num {
    color: var(--nx-red);
    font: 500 11px/1 var(--nx-mono);
}

.nx-feat-text strong {
    display: block;
    color: var(--nx-text);
    font: 800 14px/1.25 var(--nx-sans);
}

.nx-feat-text p {
    display: -webkit-box;
    margin: 4px 0 0;
    overflow: hidden;
    color: var(--nx-muted);
    font-size: 13px;
    line-height: 1.45;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.nx-feature-summary {
    display: -webkit-box;
    margin: 16px 0 0;
    overflow: hidden;
    color: var(--nx-muted);
    font-size: 14px;
    line-height: 1.65;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

@media (prefers-reduced-motion: reduce) {
    .nx-slides {
        transition: none;
    }
}

.nx-feature-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    border-top: 1px solid var(--nx-line);
}

/* ---------------------------------------------------------------------
   Spec şeridi
   --------------------------------------------------------------------- */
.nx-specs {
    border-bottom: 1px solid var(--nx-line);
}

.nx-spec-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 3D ikon dikey ortada, kartın kenarından biraz taşar. Metin ikonun olduğu taraftan
   boşluk bırakır (--nx-art-space) → ikon ile metin çakışmaz. */
.nx-spec {
    --nx-art-size: 130px;
    --nx-art-bleed: 30px;
    --nx-art-space: 112px;
    position: relative;
    overflow: hidden;
    min-height: var(--nx-specs-h, 170px);
    padding: 30px 28px 32px;
    border-left: 1px solid var(--nx-line);
    isolation: isolate;
}

.nx-specs .nx-spec-list .nx-spec--right {
    padding-right: var(--nx-art-space);
}

.nx-specs .nx-spec-list .nx-spec--left {
    padding-left: var(--nx-art-space);
}

.nx-spec:first-child {
    padding-left: 0;
    border-left: 0;
}

.nx-spec > :not(.nx-spec-art) {
    position: relative;
    z-index: 1;
}

/* Arka plandaki 3D ikon: üst üste binen gölgelerle ekstrüzyon + hafif perspektif */
.nx-spec-art {
    position: absolute;
    top: 50%;
    z-index: 0;
    width: var(--nx-art-size);
    height: var(--nx-art-size);
    color: #34342f;
    pointer-events: none;
    transform: translateY(-50%) perspective(700px) rotateY(var(--nx-art-ry)) rotateX(10deg);
    transition: color .4s, transform .6s var(--nx-ease);
    filter:
        drop-shadow(1px 1px 0 #1b1b19)
        drop-shadow(1px 1px 0 #1b1b19)
        drop-shadow(1px 1px 0 #191917)
        drop-shadow(1px 1px 0 #171715)
        drop-shadow(1px 1px 0 #151513)
        drop-shadow(1px 1px 0 #131312)
        drop-shadow(8px 10px 14px rgba(0, 0, 0, .6));
}

.nx-spec-art .nx-ico {
    width: 100%;
    height: 100%;
    stroke-width: 1.3;
}

.nx-spec--right .nx-spec-art {
    --nx-art-ry: -24deg;
    right: calc(var(--nx-art-bleed) * -1);
}

.nx-spec--left .nx-spec-art {
    --nx-art-ry: 24deg;
    left: calc(var(--nx-art-bleed) * -1);
}

.nx-spec:hover .nx-spec-art {
    color: rgba(227, 52, 47, .55);
    transform: translateY(-50%) perspective(700px) rotateY(calc(var(--nx-art-ry) * .5)) rotateX(4deg);
}

.nx-spec-no {
    display: block;
    color: var(--nx-dim);
    font: 500 12px/1 var(--nx-mono);
}

.nx-spec h3 {
    margin: 24px 0 10px;
    color: var(--nx-text);
    font: 800 15px/1.2 var(--nx-sans);
    font-stretch: 108%;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.nx-spec p {
    margin: 0;
    color: var(--nx-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* ---------------------------------------------------------------------
   Bölümler
   --------------------------------------------------------------------- */
.nx-section {
    padding: clamp(64px, 9vw, 120px) 0;
    border-bottom: 1px solid var(--nx-line);
}

.nx-section-head {
    margin-bottom: clamp(32px, 4vw, 48px);
}

.nx-section-head--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
}

.nx-h2 {
    margin: 16px 0 0;
    color: var(--nx-text);
    font-family: var(--nx-display);
    font-weight: 800;
    font-stretch: 110%;
    font-size: clamp(34px, 4.8vw, 64px);
    line-height: .95;
    letter-spacing: -.015em;
    text-transform: uppercase;
}

.nx-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--nx-line-2);
    color: var(--nx-text);
    font: 700 13px/1 var(--nx-sans);
    letter-spacing: .07em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color .2s;
}

.nx-link-arrow svg {
    width: 16px;
    height: 16px;
    transition: transform .3s var(--nx-ease);
}

.nx-link-arrow:hover {
    border-color: var(--nx-red);
    color: var(--nx-text);
}

.nx-link-arrow:hover svg {
    transform: translateX(4px);
}

/* ---------------------------------------------------------------------
   Kategori dizini
   --------------------------------------------------------------------- */
.nx-cat-index {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--nx-line);
}

.nx-cat-ico {
    width: 56px;
    height: 56px;
    color: var(--nx-muted);
    transition: color .2s, border-color .2s;
}

.nx-cat-ico .nx-ico {
    width: 24px;
    height: 24px;
}

.nx-cat-row:hover .nx-cat-ico {
    color: var(--nx-red);
    border-color: var(--nx-red);
}

.nx-cat-row {
    display: grid;
    grid-template-columns: 48px 56px minmax(0, 1fr) auto 32px;
    align-items: center;
    gap: 24px;
    padding: clamp(20px, 3vw, 32px) 12px;
    border-bottom: 1px solid var(--nx-line);
    color: var(--nx-text);
    text-decoration: none;
    transition: background-color .3s;
}

.nx-cat-row:hover {
    background: var(--nx-bg-2);
    color: var(--nx-text);
}

.nx-cat-no {
    color: var(--nx-dim);
    font: 500 13px/1 var(--nx-mono);
    transition: color .2s;
}

.nx-cat-name {
    font: 800 clamp(28px, 5vw, 64px)/1 var(--nx-display);
    font-stretch: 112%;
    letter-spacing: -.015em;
    text-transform: uppercase;
    transition: transform .45s var(--nx-ease);
}

.nx-cat-count {
    color: var(--nx-muted);
    font: 500 13px/1 var(--nx-mono);
    text-transform: uppercase;
    white-space: nowrap;
}

.nx-cat-arrow {
    display: flex;
    color: var(--nx-dim);
    transition: color .2s, transform .3s var(--nx-ease);
}

.nx-cat-arrow svg {
    width: 28px;
    height: 28px;
}

.nx-cat-row:hover .nx-cat-no,
.nx-cat-row:hover .nx-cat-arrow {
    color: var(--nx-red);
}

.nx-cat-row:hover .nx-cat-name {
    transform: translateX(14px);
}

.nx-cat-row:hover .nx-cat-arrow {
    transform: translateX(4px);
}

/* ---------------------------------------------------------------------
   Ürün kartları
   --------------------------------------------------------------------- */
.nx-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.nx-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--nx-line);
    background: var(--nx-bg-2);
    color: var(--nx-text);
    text-decoration: none;
    transition: border-color .25s;
}

a.nx-card:hover {
    border-color: #4a4a47;
    color: var(--nx-text);
}

.nx-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--nx-bg-3);
    border-bottom: 1px solid var(--nx-line);
}

.nx-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--nx-ease);
}

a.nx-card:hover .nx-card-media img {
    transform: scale(1.04);
}

.nx-card-flag {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 7px 10px;
    background: var(--nx-red);
    color: var(--nx-on-red);
    font: 700 10px/1 var(--nx-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nx-card-body {
    flex: 1;
    padding: 18px 18px 20px;
}

.nx-card-tags {
    margin: 0 0 10px;
    color: var(--nx-muted);
    font: 500 11px/1.4 var(--nx-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.nx-card-title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--nx-text);
    font: 800 17px/1.3 var(--nx-sans);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

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

.nx-card-price {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    color: var(--nx-text);
    font: 700 15px/1 var(--nx-mono);
}

.nx-card-price del {
    color: var(--nx-dim);
    font-size: 12px;
    font-weight: 500;
}

.nx-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--nx-muted);
    font: 700 12px/1 var(--nx-sans);
    letter-spacing: .07em;
    text-transform: uppercase;
    transition: color .2s;
}

.nx-card-cta svg {
    width: 14px;
    height: 14px;
    transition: transform .3s var(--nx-ease);
}

a.nx-card:hover .nx-card-cta,
a.nx-card-cta:hover {
    color: var(--nx-red);
}

a.nx-card:hover .nx-card-cta svg,
a.nx-card-cta:hover svg {
    transform: translateX(4px);
}

a.nx-card-cta {
    text-decoration: none;
}

/* ---------------------------------------------------------------------
   Modüller — son alıcılar
   --------------------------------------------------------------------- */
.nx-modules {
    display: grid;
    gap: 20px;
}

/* 5 kart tek satır: sıra no + zaman, büyük avatar, isim, ürün, fiyat */
.nx-recent-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--nx-line);
    border-left: 1px solid var(--nx-line);
}

.nx-recent-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding: 20px 20px 22px;
    border-right: 1px solid var(--nx-line);
    border-bottom: 1px solid var(--nx-line);
    transition: background-color .2s;
}

/* Üstte kırmızı çizgi hover'da soldan dolar */
.nx-recent-item::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--nx-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--nx-ease);
}

.nx-recent-item:hover {
    background: var(--nx-bg-2);
}

.nx-recent-item:hover::before {
    transform: scaleX(1);
}

.nx-recent-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font: 500 11px/1 var(--nx-mono);
    text-transform: uppercase;
}

.nx-recent-no {
    color: var(--nx-red);
}

.nx-recent-time {
    overflow: hidden;
    color: var(--nx-dim);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nx-recent-avatar {
    width: 64px;
    height: 64px;
    border: 1px solid var(--nx-line-2);
    object-fit: cover;
    background: var(--nx-bg-3);
    filter: grayscale(1);
    transition: filter .3s, border-color .3s;
}

.nx-recent-item:hover .nx-recent-avatar {
    border-color: var(--nx-red);
    filter: none;
}

.nx-recent-initial {
    display: grid;
    place-items: center;
    color: var(--nx-text);
    font: 700 22px/1 var(--nx-mono);
    filter: none;
}

.nx-recent-text {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.nx-recent-text strong {
    overflow: hidden;
    color: var(--nx-text);
    font: 800 15px/1.2 var(--nx-sans);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nx-recent-text span {
    display: -webkit-box;
    overflow: hidden;
    color: var(--nx-muted);
    font-size: 13px;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.nx-recent-price {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--nx-line);
    color: var(--nx-text);
    font: 600 13px/1 var(--nx-mono);
}

.nx-recent-empty {
    margin: 0;
    color: var(--nx-muted);
}
.nx-empty {
    margin: 0;
    color: var(--nx-muted);
}

/* ---------------------------------------------------------------------
   SSS
   --------------------------------------------------------------------- */
.nx-faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}

.nx-faq-aside {
    position: sticky;
    top: calc(var(--nx-nav-h) + 32px);
}

.nx-faq-aside > p:not(.nx-label) {
    max-width: 34ch;
    margin: 28px 0 24px;
    color: var(--nx-muted);
    font-size: 15px;
    line-height: 1.65;
}

.nx-faq-body a {
    color: var(--nx-text);
    text-decoration: underline;
    text-decoration-color: var(--nx-red);
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.nx-faq-body a:hover {
    color: var(--nx-red);
}

.nx-faq-list {
    border-top: 1px solid var(--nx-line);
}

.nx-faq-item {
    border-bottom: 1px solid var(--nx-line);
}

.nx-faq-item > summary {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 16px;
    padding: 26px 0;
    color: var(--nx-text);
    font: 700 18px/1.35 var(--nx-sans);
    list-style: none;
    cursor: pointer;
}

.nx-faq-item > summary::-webkit-details-marker {
    display: none;
}

.nx-faq-no {
    color: var(--nx-dim);
    font: 500 12px/1 var(--nx-mono);
    transition: color .2s;
}

.nx-faq-item[open] .nx-faq-no,
.nx-faq-item > summary:hover .nx-faq-no {
    color: var(--nx-red);
}

.nx-faq-icon {
    position: relative;
    width: 16px;
    height: 16px;
}

.nx-faq-icon::before,
.nx-faq-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 16px;
    height: 1.5px;
    margin-top: -.75px;
    background: currentColor;
    transition: transform .3s var(--nx-ease);
}

.nx-faq-icon::after {
    transform: rotate(90deg);
}

.nx-faq-item[open] .nx-faq-icon {
    color: var(--nx-red);
}

.nx-faq-item[open] .nx-faq-icon::after {
    transform: rotate(0deg);
}

.nx-faq-body {
    padding: 0 40px 28px 64px;
}

.nx-faq-body p {
    max-width: 62ch;
    margin: 0;
    color: var(--nx-muted);
    font-size: 15px;
    line-height: 1.7;
}

/* ---------------------------------------------------------------------
   Discord bloğu
   --------------------------------------------------------------------- */
.nx-discord {
    background: var(--nx-red);
    color: var(--nx-on-red);
}

.nx-discord-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: end;
    padding-top: clamp(56px, 8vw, 112px);
    padding-bottom: clamp(56px, 8vw, 112px);
}

.nx-discord .nx-label {
    color: var(--nx-on-red);
    opacity: .7;
}

.nx-discord-title {
    margin: 18px 0 0;
    color: var(--nx-on-red);
    font-family: var(--nx-display);
    font-weight: 800;
    font-stretch: 112%;
    font-size: clamp(44px, 6vw, 96px);
    line-height: .88;
    letter-spacing: -.025em;
    text-transform: uppercase;
}

.nx-discord-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    border-top: 2px solid var(--nx-on-red);
}

.nx-discord-stats > div {
    padding-top: 16px;
}

.nx-discord-stats dt {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 500 11px/1 var(--nx-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .75;
}

.nx-discord-stats dd {
    margin: 8px 0 0;
    font: 800 48px/1 var(--nx-display);
    font-stretch: 110%;
}

.nx-discord-side > p {
    max-width: 40ch;
    margin: 28px 0 28px;
    font-size: 16px;
    line-height: 1.6;
}

.nx-discord-side > p.nx-discord-note {
    margin: 16px 0 0;
    font: 500 11px/1.4 var(--nx-mono);
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .7;
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.nx-footer {
    background: var(--nx-bg);
}

.nx-footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 48px;
    padding: 72px 0 56px;
}

.nx-footer-brand p {
    max-width: 32ch;
    margin: 20px 0 0;
    color: var(--nx-muted);
    font-size: 15px;
    line-height: 1.6;
}

.nx-footer-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.nx-footer-cols h4 {
    margin: 0 0 20px;
    color: var(--nx-dim);
    font: 500 11px/1 var(--nx-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nx-footer-cols ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nx-footer-cols a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--nx-text);
    font-size: 15px;
    text-decoration: none;
    transition: color .2s;
}

.nx-footer-cols a .nx-ico {
    width: 15px;
    height: 15px;
    color: var(--nx-dim);
    transition: color .2s;
}

.nx-footer-cols a:hover,
.nx-footer-cols a:hover .nx-ico {
    color: var(--nx-red);
}

/* Dev "nation store" yazısı: sönük çizgi + üstte soldan sağa kayan kırmızı ışık */
.nx-mark {
    overflow: hidden;
    padding-top: 8px;
}

.nx-mark-stage {
    position: relative;
}

/* Dar/orta ekran: logo + yazı birlikte alana sığdırılır (yazı biraz sağa kayar) */
.nx-mark-wrap {
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 48px);
}

.nx-mark svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Geniş ekran: yazı site hizasında (eski yerinde), logo hizanın soluna taşar.
   viewBox'ın sol 180 birimi logo için → svg %118 genişlikte ve %18 sola kayık. */
@media (min-width: 1700px) {
    .nx-mark-wrap {
        max-width: var(--nx-max);
        padding: 0 var(--nx-pad);
    }

    .nx-mark svg {
        width: calc(100% * 1180 / 1000);
        margin-left: calc(100% * -180 / 1000);
    }
}

.nx-svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.nx-mark text {
    fill: none;
    stroke-width: 1.4px;
    vector-effect: non-scaling-stroke;
}

/* Logo: logo-line.png maskesiyle boyanan dikdörtgen → rengi fill ile verilir */
.nx-mark-logo {
    stroke: none !important;
}

/* Logo çizgileri yazınınkinden ince → bir ton açık, ışıksız halde dengeli dursun */
.nx-mark-base .nx-mark-logo {
    fill: #3a3a37;
}

.nx-mark-glow .nx-mark-logo {
    fill: var(--nx-red);
}

.nx-mark text {
    font-family: var(--nx-display);
    font-size: 150px;
    font-weight: 900;
    font-stretch: 112%;
}

.nx-mark-base text {
    stroke: #2c2c2a;
}

.nx-mark-glow {
    position: absolute;
    inset: 0;
    filter: drop-shadow(0 0 4px var(--nx-red)) drop-shadow(0 0 14px rgba(227, 52, 47, .55));
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 36%, #000 47%, #000 53%, transparent 64%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 36%, #000 47%, #000 53%, transparent 64%, transparent 100%);
    -webkit-mask-size: 300% 100%;
    mask-size: 300% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: nx-sweep 7s linear infinite;
}

.nx-mark-glow text {
    stroke: var(--nx-red);
    stroke-width: 2px;
}

/* mask-position 100% → ışık solda (ekran dışı), 0% → sağda (ekran dışı): soldan sağa akar */
@keyframes nx-sweep {
    from {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }

    to {
        -webkit-mask-position: 0% 0;
        mask-position: 0% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nx-mark-glow {
        animation: none;
        -webkit-mask-position: 50% 0;
        mask-position: 50% 0;
    }
}

.nx-footer-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 28px 0 40px;
    border-top: 1px solid var(--nx-line);
}

.nx-footer-bottom p {
    margin: 0;
    color: var(--nx-dim);
    font-size: 12px;
    line-height: 1.7;
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .nx-hero-grid {
        grid-template-columns: 1fr;
    }

    .nx-hero-stats {
        padding-top: 48px;
    }

    .nx-feature,
    .nx-feature:hover {
        max-width: 640px;
        margin-right: 0;
        transform: none;
        box-shadow: none;
    }
}

@media (max-width: 960px) {
    .nx-spec-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nx-spec:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }

    .nx-spec:nth-child(n + 3) {
        border-top: 1px solid var(--nx-line);
    }

    .nx-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Dar ekranda 5 kart tek satırda kalır, yana kaydırılır */
    .nx-recent-list {
        grid-template-columns: repeat(5, minmax(210px, 1fr));
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .nx-recent-list::-webkit-scrollbar {
        display: none;
    }

    .nx-recent-item {
        scroll-snap-align: start;
    }

    .nx-faq-grid,
    .nx-discord-grid,
    .nx-footer-top {
        grid-template-columns: 1fr;
    }

    .nx-faq-aside {
        position: static;
    }

}

@media (max-width: 640px) {
    .nx-spec-list,
    .nx-grid {
        grid-template-columns: 1fr;
    }

    .nx-recent-list {
        grid-template-columns: repeat(5, 72%);
    }

    .nx-spec {
        min-height: 160px;
        padding: 28px 0;
        border-left: 0;
    }

    .nx-spec:nth-child(n + 2) {
        border-top: 1px solid var(--nx-line);
    }

    .nx-hero-stats > div {
        padding-right: 20px;
        margin-right: 20px;
    }

    .nx-hero-stats dd {
        font-size: 20px;
    }

    .nx-hero-cta .nx-btn {
        flex: 1 1 100%;
    }

    .nx-cat-row {
        grid-template-columns: 32px minmax(0, 1fr) 24px;
        grid-template-areas:
            "no name arrow"
            "no count arrow";
        row-gap: 8px;
        column-gap: 14px;
        padding-left: 0;
        padding-right: 0;
    }

    .nx-cat-ico { display: none; }
    .nx-cat-no { grid-area: no; }
    .nx-cat-name { grid-area: name; }
    .nx-cat-count { grid-area: count; }
    .nx-cat-arrow { grid-area: arrow; }

    .nx-cat-arrow svg {
        width: 22px;
        height: 22px;
    }

    .nx-faq-item > summary {
        grid-template-columns: 32px minmax(0, 1fr) 16px;
        font-size: 16px;
    }

    .nx-faq-body {
        padding: 0 0 24px 48px;
    }

    .nx-footer-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nx-footer-bottom {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nx-skel {
        animation: none;
    }

    .nx-header *,
    .nx-home *,
    .nx-footer * {
        transition: none !important;
    }
}


/* =====================================================================
   SEPET — sağdan açılan çekmece (checkout.html, main.js openBasket)
   Eski checkout-modern.css kaldırıldı; shared/generic/mobile-fixes
   kuralları burada ezilir.
   ===================================================================== */
.popup.basket-popup {
    position: fixed !important;
    inset: 0;
    z-index: 10000 !important;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    padding: 0 !important;
    background: rgba(5, 5, 5, .78);
}

.popup.basket-popup .popup-scroll-cont {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    height: 100%;
    min-height: 100%;
    padding: 0 !important;
}

.popup.basket-popup .popup-content.basket-popup-content {
    display: flex;
    flex-direction: column;
    width: min(560px, 100vw) !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-left: 1px solid var(--nx-line-2);
    border-radius: 0 !important;
    background: var(--nx-bg) !important;
    box-shadow: none;
    color: var(--nx-text);
    font-family: var(--nx-sans);
    overflow: hidden;
}

/* Çekmece tutamağı (shared.css) — masaüstünde gereksiz */
.popup.basket-popup .popup-content::after {
    display: none;
}

/* Kapat butonu — main.js "Close" yazılı buton ekler, X çizgilerle çizilir */
.popup.basket-popup .popup-close {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 3;
    width: 40px !important;
    height: 40px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--nx-line-2);
    border-radius: 2px;
    background: transparent none !important;
    color: transparent;
    font-size: 0 !important;
    opacity: 1;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}

.popup.basket-popup .popup-close::before,
.popup.basket-popup .popup-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 1.6px;
    background: var(--nx-text);
    transform: translate(-50%, -50%) rotate(45deg);
    transition: background-color .2s;
}

.popup.basket-popup .popup-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.popup.basket-popup .popup-close:hover {
    border-color: var(--nx-red);
    background: var(--nx-red) none !important;
}

.popup.basket-popup .popup-close:hover::before,
.popup.basket-popup .popup-close:hover::after {
    background: var(--nx-on-red);
}

.popup.basket-popup :focus-visible {
    outline: 2px solid var(--nx-red);
    outline-offset: 3px;
}

/* shared.css ".basket { z-index: 1001 }" formu kapat butonunun üstüne çıkarıyordu */
.basket-popup-content .nx-bk-form {
    z-index: auto;
}

.nx-bk-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* --- Başlık ---------------------------------------------------------- */
.basket-popup-content .nx-bk-head {
    position: relative;
    display: block;
    flex-shrink: 0;
    margin: 0;
    padding: 28px 88px 26px 28px;
    border-bottom: 1px solid var(--nx-line);
    background: none;
    overflow: hidden;
}

/* Hero'daki kareli defter dokusunun küçük bir yankısı */
.basket-popup-content .nx-bk-head::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--nx-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--nx-line) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: -1px -1px;
    opacity: .55;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 75%);
    mask-image: linear-gradient(90deg, #000, transparent 75%);
    pointer-events: none;
}

.nx-bk-head > * {
    position: relative;
}

.nx-bk-head .nx-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.nx-bk-head .nx-label::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--nx-red);
}

.nx-bk-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    font: 800 34px/.95 var(--nx-display);
    font-stretch: 118%;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--nx-text);
}

.nx-bk-count {
    margin-top: 2px;
    padding: 4px 6px;
    border: 1px solid var(--nx-red);
    font: 600 12px/1 var(--nx-mono);
    letter-spacing: .04em;
    color: var(--nx-red);
}

/* --- Liste ----------------------------------------------------------- */
.basket-popup-content .nx-bk-body {
    flex: 1;
    min-height: 0;
    padding: 0 !important;
    background: none !important;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--nx-line-2) transparent;
}

.basket-popup-content .nx-bk-list {
    display: block;
    margin: 0;
    padding: 0 !important;
    list-style: none;
}

.basket-popup-content .nx-bk-item {
    display: grid;
    grid-template-columns: 22px 92px minmax(0, 1fr) auto 36px;
    grid-template-areas: "idx thumb info price remove";
    align-items: center;
    column-gap: 16px;
    width: 100%;
    margin: 0;
    padding: 18px 28px !important;
    border-bottom: 1px solid var(--nx-line);
    border-radius: 0;
    background: transparent !important;
    transition: background-color .2s;
}

.basket-popup-content .nx-bk-item:hover {
    background: var(--nx-bg-2) !important;
}

.nx-bk-idx {
    grid-area: idx;
    font: 500 11px/1 var(--nx-mono);
    color: var(--nx-dim);
}

.nx-bk-thumb {
    grid-area: thumb;
    display: block;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--nx-line-2);
    background: var(--nx-bg-3);
    overflow: hidden;
}

.nx-bk-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s var(--nx-ease);
}

.nx-bk-item:hover .nx-bk-thumb img {
    transform: scale(1.05);
}

.nx-bk-info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.nx-bk-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font: 800 14px/1.2 var(--nx-sans);
    font-stretch: 106%;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--nx-text);
    text-decoration: none;
    transition: color .2s;
}

.nx-bk-name:hover {
    color: var(--nx-red);
}

.nx-bk-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 11px/1 var(--nx-mono);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--nx-muted);
}

.nx-bk-meta svg {
    width: 12px;
    height: 12px;
    color: var(--nx-red);
}

.nx-bk-price {
    grid-area: price;
    font: 600 14px/1 var(--nx-mono);
    color: var(--nx-text);
    white-space: nowrap;
}

.nx-bk-price strong {
    font-weight: inherit;
}

.basket-popup-content .nx-bk-remove {
    grid-area: remove;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--nx-line-2);
    border-radius: 2px;
    background: transparent;
    color: var(--nx-muted);
    transition: border-color .2s, color .2s, background-color .2s;
}

.basket-popup-content .nx-bk-remove::before {
    display: none;
}

.nx-bk-remove svg {
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.basket-popup-content .nx-bk-remove:hover {
    border-color: var(--nx-red);
    background: var(--nx-red);
    color: var(--nx-on-red);
}

/* --- Boş sepet -------------------------------------------------------- */
.nx-bk-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 48px 28px;
}

.nx-bk-empty-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 10px;
    border: 1px solid var(--nx-line-2);
    color: var(--nx-red);
}

.nx-bk-empty-ico svg {
    width: 28px;
    height: 28px;
}

.nx-bk-empty h3 {
    margin: 0;
    font: 800 22px/1 var(--nx-display);
    font-stretch: 115%;
    text-transform: uppercase;
    color: var(--nx-text);
}

.nx-bk-empty p {
    margin: 0 0 10px;
    max-width: 32ch;
    font-size: 14px;
    line-height: 1.5;
    color: var(--nx-muted);
}

.basket-popup-content:has(.nx-bk-empty) .nx-bk-foot {
    display: none;
}

/* --- Alt kısım: toplam + ödeme --------------------------------------- */
.nx-bk-foot {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 28px 26px;
    border-top: 1px solid var(--nx-line-2);
    background: var(--nx-bg-2);
}

.basket-popup-content .nx-bk-foot .basket-checkout {
    margin: 0 0 10px;
    padding: 0 !important;
    border: 0;
    background: none !important;
}

.nx-bk-totals {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    color: var(--nx-muted);
}

.nx-bk-totals > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.nx-bk-totals dt {
    font: 500 11px/1 var(--nx-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nx-bk-totals dd {
    margin: 0;
    font: 500 13px/1 var(--nx-mono);
    color: var(--nx-text);
}

/* shared.css ".basket .basket-checkout .total (strong)" renk + 16/24px veriyor — ez */
.basket-popup-content .basket-checkout .nx-bk-totals {
    color: var(--nx-muted);
    font-size: inherit;
}

.basket-popup-content .basket-checkout .nx-bk-totals dd strong {
    font-size: inherit;
    font-weight: inherit;
}

.nx-bk-totals .nx-bk-muted {
    font-size: 11px;
    color: var(--nx-dim);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.nx-bk-totals .nx-bk-grand {
    align-items: flex-end;
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--nx-line);
}

.nx-bk-grand dt {
    font: 800 18px/1 var(--nx-display);
    font-stretch: 115%;
    letter-spacing: 0;
    color: var(--nx-text);
}

.nx-bk-grand dd {
    font: 600 28px/1 var(--nx-mono);
    letter-spacing: -.02em;
    color: var(--nx-text);
}

.basket-popup-content .nx-bk-pay,
.basket-popup-content .nx-bk-continue {
    width: 100%;
}

.basket-popup-content .nx-bk-pay {
    height: 56px;
    border: 0;
    font-size: 14px;
}

.nx-bk-pay .nx-ico {
    width: 16px;
    height: 16px;
}

.basket-popup-content .nx-bk-pay:disabled {
    opacity: .55;
    cursor: progress;
}

.basket-popup-content .nx-bk-continue {
    height: 46px;
    font-size: 12px;
}

.nx-bk-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--nx-dim);
}

.nx-bk-note svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--nx-muted);
}

/* --- Güncelleniyor (ürün silinirken) ---------------------------------- */
@keyframes nx-bk-load {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(250%);
    }
}

.popup.basket-popup .basket-popup-content.updating::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 4;
    width: 40%;
    height: 2px;
    margin: 0;
    background: var(--nx-red);
    animation: nx-bk-load 1s var(--nx-ease) infinite;
}

.popup.basket-popup .basket-popup-content.updating > * {
    filter: none;
    opacity: .45;
    transition: opacity .2s;
}

/* mobile-fixes.css'in genel popup/buton kurallarını sepette etkisizleştir */
@media (max-width: 768px) {
    .popup.basket-popup .popup-content.basket-popup-content {
        padding: 0 !important;
    }

    .basket-popup-content .nx-btn {
        min-height: 0 !important;
        padding: 0 24px !important;
    }

    .basket-popup-content .nx-bk-pay {
        font-size: 14px !important;
    }

    .basket-popup-content .nx-bk-continue {
        font-size: 12px !important;
    }
}

@media (max-width: 560px) {
    .basket-popup-content .nx-bk-head {
        padding: 22px 76px 20px 18px;
    }

    .popup.basket-popup .popup-close {
        top: 18px;
        right: 18px;
    }

    .nx-bk-title {
        font-size: 28px;
    }

    .basket-popup-content .nx-bk-item {
        grid-template-columns: 84px minmax(0, 1fr) 36px;
        grid-template-areas:
            "thumb info remove"
            "thumb price remove";
        row-gap: 10px;
        column-gap: 14px;
        padding: 16px 18px !important;
    }

    .nx-bk-idx {
        display: none;
    }

    .nx-bk-thumb {
        align-self: start;
    }

    .nx-bk-foot {
        padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
    }

    .nx-bk-grand dd {
        font-size: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .popup.basket-popup .basket-popup-content.updating::before {
        animation: none;
        width: 100%;
    }
}


/* =====================================================================
   KATEGORİ SAYFASI (category.html + package-entry.twig kartları)
   ===================================================================== */
.nx-catalog {
    background: var(--nx-bg);
}

.nx-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

:where(.nx-catalog) :focus-visible {
    outline: 2px solid var(--nx-red);
    outline-offset: 3px;
}

/* --- Başlık ------------------------------------------------------------ */
.nx-cathead {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--nx-line);
}

/* Arka plan görseli (Assets/bg.png, category.html'de --nx-cathead-bg ile verilir) — çok karartılmış:
   yazıların olduğu sol taraf neredeyse siyah, sağa doğru ve yukarı doğru hafif açılır */
.nx-cathead::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(to top, var(--nx-bg) 0%, rgba(10, 10, 10, .55) 40%, rgba(10, 10, 10, .25) 100%),
        linear-gradient(to right, rgba(10, 10, 10, .97) 0%, rgba(10, 10, 10, .9) 40%, rgba(10, 10, 10, .7) 70%, rgba(10, 10, 10, .6) 100%),
        var(--nx-cathead-bg, none) right 30% / cover no-repeat;
    filter: saturate(.7);
    pointer-events: none;
}

.nx-cathead-inner {
    position: relative;
    z-index: 1;
    padding-top: 28px;
}

.nx-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: var(--nx-dim);
    font: 500 11px/1 var(--nx-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nx-crumbs a {
    color: var(--nx-muted);
    text-decoration: none;
    transition: color .2s;
}

.nx-crumbs a:hover {
    color: var(--nx-red);
}

.nx-crumbs [aria-current] {
    color: var(--nx-text);
}

.nx-cathead-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 40px;
    padding: clamp(40px, 5vw, 72px) 0 clamp(36px, 4vw, 56px);
}

.nx-cathead .nx-kicker {
    margin-bottom: 22px;
}

.nx-cathead-title {
    margin: 0;
    color: var(--nx-text);
    font: 800 clamp(52px, 8.4vw, 136px)/.88 var(--nx-display);
    font-stretch: 115%;
    letter-spacing: -.02em;
    text-transform: uppercase;
}

.nx-cathead-lead {
    max-width: 58ch;
    margin: 26px 0 0;
    color: var(--nx-muted);
    font-size: 16px;
    line-height: 1.6;
}

.nx-cathead-stats {
    display: flex;
    margin: 0;
}

.nx-cathead-stats > div {
    min-width: 132px;
    padding: 18px 28px 0 0;
    margin-right: 28px;
    border-top: 1px solid rgba(227, 52, 47, .4);
    border-right: 1px solid rgba(227, 52, 47, .4);
}

.nx-cathead-stats > div:last-child {
    margin-right: 0;
}

.nx-cathead-stats dt {
    color: var(--nx-dim);
    font: 500 11px/1 var(--nx-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nx-cathead-stats dd {
    margin: 10px 0 0;
    font: 700 30px/1 var(--nx-display);
    font-stretch: 110%;
}

/* Kategori sekmeleri — arka planı bulanık kutular (ızgara/görsel üstünde okunur kalsın),
   seçili olanın çerçevesi kırmızı */
.nx-cattabs {
    display: flex;
    gap: 10px;
    padding-bottom: 28px;
    overflow-x: auto;
    scrollbar-width: none;
}

.nx-cattabs::-webkit-scrollbar {
    display: none;
}

.nx-cattab {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    height: 52px;
    padding: 0 22px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 2px;
    background: rgba(12, 12, 12, .55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--nx-muted);
    font: 800 13px/1 var(--nx-sans);
    font-stretch: 108%;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s, border-color .2s, background-color .2s;
}

.nx-cattab .nx-ico {
    width: 18px;
    height: 18px;
}

.nx-cattab-no {
    color: var(--nx-dim);
    font: 500 11px/1 var(--nx-mono);
    letter-spacing: 0;
}

.nx-cattab:hover {
    border-color: rgba(255, 255, 255, .3);
    color: var(--nx-text);
}

.nx-cattab.is-active {
    border-color: var(--nx-red);
    background: rgba(227, 52, 47, .08);
    color: var(--nx-text);
}

.nx-cattab.is-active .nx-ico,
.nx-cattab.is-active .nx-cattab-no {
    color: var(--nx-red);
}
/* --- Araç çubuğu (yapışkan) --------------------------------------------- */
.nx-toolbar {
    position: sticky;
    top: var(--nx-nav-h);
    z-index: 20;
    border-bottom: 1px solid var(--nx-line);
    background: rgba(10, 10, 10, .94);
}

.nx-toolbar-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block: 14px;
}

.nx-search {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 320px;
    max-width: 440px;
    height: 44px;
    padding: 0 12px 0 14px;
    border: 1px solid var(--nx-line-2);
    border-radius: 2px;
    color: var(--nx-muted);
    transition: border-color .2s;
    cursor: text;
}

.nx-search:focus-within {
    border-color: var(--nx-text);
}

.nx-search > svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.nx-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--nx-text);
    font: 600 14px/1 var(--nx-sans);
}

.nx-search input::placeholder {
    color: var(--nx-dim);
}

.nx-search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.nx-search kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border: 1px solid var(--nx-line-2);
    color: var(--nx-dim);
    font: 500 11px/1 var(--nx-mono);
}

.nx-search:focus-within kbd {
    visibility: hidden;
}

.nx-filters {
    display: flex;
    border: 1px solid var(--nx-line-2);
    border-radius: 2px;
}

.nx-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    border: 0;
    border-right: 1px solid var(--nx-line-2);
    background: transparent;
    color: var(--nx-muted);
    font: 800 12px/1 var(--nx-sans);
    font-stretch: 106%;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s, background-color .2s;
}

.nx-filter:last-child {
    border-right: 0;
}

.nx-filter[hidden] {
    display: none;
}

.nx-filter span {
    color: var(--nx-dim);
    font: 500 11px/1 var(--nx-mono);
    letter-spacing: 0;
}

.nx-filter:hover {
    color: var(--nx-text);
}

/* Aktif: koyu zemin + altta kırmızı çizgi (logolar kırmızı zeminde kaybolmasın) */
.nx-filter.is-active {
    background: var(--nx-bg-3);
    color: var(--nx-text);
    box-shadow: inset 0 -2px 0 var(--nx-red);
}

.nx-filter .nx-ico {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.nx-filter.is-active .nx-ico {
    color: var(--nx-red);
}

/* Framework logoları (Assets/esx.png, qb.png, qbox.png): pasifken soluk gri, aktif/hover'da renkli */
.nx-fw-logo {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    object-fit: contain;
    filter: grayscale(1) brightness(1.3);
    opacity: .6;
    transition: filter .2s, opacity .2s;
}

.nx-fw-logo--wide {
    width: auto;
    height: 11px;
}

.nx-filter:hover .nx-fw-logo,
.nx-filter.is-active .nx-fw-logo {
    filter: none;
    opacity: 1;
}

.nx-filter.is-active span {
    color: var(--nx-red);
}

.nx-sort {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    color: var(--nx-dim);
    font: 500 11px/1 var(--nx-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nx-sort select {
    height: 44px;
    padding: 0 40px 0 14px;
    border: 1px solid var(--nx-line-2);
    border-radius: 2px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23f1f0ec' stroke-width='1.6'/%3E%3C/svg%3E") right 14px center / 14px no-repeat;
    color: var(--nx-text);
    font: 700 13px/1 var(--nx-sans);
    letter-spacing: .02em;
    text-transform: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.nx-sort select:hover,
.nx-sort select:focus {
    border-color: var(--nx-text);
    outline: 0;
}

.nx-sort option {
    background: var(--nx-bg-2);
    color: var(--nx-text);
}

/* --- Ürünler ------------------------------------------------------------ */
.nx-catbody {
    padding: clamp(32px, 4vw, 48px) 0 clamp(80px, 9vw, 128px);
}

.nx-results {
    margin: 0 0 20px;
    color: var(--nx-dim);
    font: 500 12px/1 var(--nx-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.nx-results strong {
    color: var(--nx-text);
    font-weight: 600;
}

.nx-catgrid[hidden] {
    display: none;
}

/* Kategori açıklaması (ör. MAP → Asset Escrow notu) */
.nx-catnote {
    display: flex;
    gap: 18px;
    margin-bottom: 32px;
    padding: 20px 22px;
    border: 1px solid var(--nx-line);
    border-left: 2px solid var(--nx-red);
    background: var(--nx-bg-2);
}

.nx-catnote-ico {
    display: flex;
    flex-shrink: 0;
    color: var(--nx-red);
}

.nx-catnote-ico .nx-ico {
    width: 22px;
    height: 22px;
}

.nx-catnote-text {
    color: var(--nx-muted);
    font-size: 14px;
    line-height: 1.6;
}

.nx-catnote-text p {
    margin: 0;
}

.nx-catnote-text p + p {
    margin-top: 8px;
}

.nx-catnote-text p:has(> br:only-child) {
    display: none;
}

.nx-catnote-text a {
    color: var(--nx-text);
    text-decoration: underline;
    text-decoration-color: var(--nx-red);
    text-underline-offset: 3px;
}

.nx-catnote-text a:hover {
    color: var(--nx-red);
}

/* Kart (package-entry.twig) — anasayfadaki nx-card'ın sunucu tarafı hali.
   Başlık linki ::after ile tüm kartı tıklanabilir yapar. */
.nx-pcard {
    position: relative;
    border-radius: 2px !important;
    overflow: hidden;
}

.nx-filters.is-single {
    display: none;
}

.nx-pcard[hidden] {
    display: none;
}

.nx-pcard:hover {
    border-color: #4a4a47;
}

.nx-pcard:hover .nx-card-media img {
    transform: scale(1.04);
}

.nx-pcard:hover .nx-card-cta {
    color: var(--nx-red);
}

.nx-pcard:hover .nx-card-cta svg {
    transform: translateX(4px);
}

.nx-pcard .nx-card-media {
    display: block;
}

.nx-pcard .nx-card-media img.is-placeholder {
    object-fit: contain;
    padding: 18%;
    opacity: .35;
}

.nx-card-flag--sale {
    left: auto;
    right: 0;
    background: var(--nx-text);
    color: var(--nx-bg);
}

.nx-pcard-link {
    color: inherit;
    text-decoration: none;
}

.nx-pcard-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

.nx-pcard-link:hover {
    color: var(--nx-text);
}

.nx-fw {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.nx-fw li {
    padding: 5px 7px;
    border: 1px solid var(--nx-line-2);
    color: var(--nx-muted);
    font: 500 10px/1 var(--nx-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nx-fw li.is-generic {
    padding-left: 0;
    border-color: transparent;
    color: var(--nx-dim);
}

.nx-card-countdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    color: var(--nx-red);
    font: 500 11px/1 var(--nx-mono);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.nx-card-countdown .nx-ico {
    width: 14px;
    height: 14px;
}

/* Boş kategori / sonuç yok */
.nx-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: clamp(40px, 6vw, 72px);
    border: 1px dashed var(--nx-line-2);
}

.nx-empty[hidden] {
    display: none;
}

.nx-empty-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 10px;
    border: 1px solid var(--nx-line-2);
    color: var(--nx-red);
}

.nx-empty-ico .nx-ico {
    width: 28px;
    height: 28px;
}

.nx-empty h2 {
    margin: 0;
    color: var(--nx-text);
    font: 800 28px/1 var(--nx-display);
    font-stretch: 115%;
    text-transform: uppercase;
}

.nx-empty p {
    max-width: 46ch;
    margin: 0 0 10px;
    color: var(--nx-muted);
    font-size: 15px;
    line-height: 1.55;
}

@media (max-width: 1080px) {
    .nx-catgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nx-toolbar-inner {
        flex-wrap: wrap;
    }

    .nx-search {
        flex: 1 1 100%;
        max-width: none;
    }
}

@media (max-width: 768px) {
    .nx-cathead-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .nx-toolbar {
        position: static;
    }

    .nx-filters {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .nx-sort {
        margin-left: 0;
    }

    /* mobile-fixes.css'in genel buton/seçim kurallarını etkisizleştir */
    .nx-catalog .nx-filter {
        min-height: 0 !important;
        padding: 0 14px !important;
        font-size: 12px !important;
    }

    .nx-catalog .nx-btn {
        min-height: 50px !important;
        padding: 0 24px !important;
        font-size: 13px !important;
    }

    .nx-search input {
        font-size: 16px !important;
    }
}

@media (max-width: 640px) {
    .nx-catgrid {
        grid-template-columns: 1fr;
    }

    .nx-cattab {
        height: 46px;
        padding: 0 16px;
    }

    .nx-cathead-stats > div {
        min-width: 0;
    }

    .nx-cathead-stats dd {
        font-size: 24px;
    }
}


/* =====================================================================
   ÜRÜN SAYFASI (package.html + package-actions.twig)
   ===================================================================== */
.page-package .site {
    gap: 0;
}

.nx-pkg {
    padding: 28px 0 clamp(80px, 9vw, 128px);
    background: var(--nx-bg);
    color: var(--nx-text);
}

:where(.nx-pkg) :focus-visible {
    outline: 2px solid var(--nx-red);
    outline-offset: 3px;
}

.nx-pkg-crumbs {
    margin-bottom: 24px;
}

.nx-pkg-crumbs [aria-current] {
    max-width: 40ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nx-pkg-top {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* --- Medya: gösterici + galeri ------------------------------------------ */
.nx-pkg-media {
    min-width: 0;
}

.nx-viewer {
    position: relative;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--nx-line-2);
    background: var(--nx-bg-2);
    overflow: hidden;
    outline: 0;
}

.nx-viewer-video,
.nx-viewer-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.nx-viewer-img {
    object-fit: contain;
    background: #050505;
}

.nx-viewer-video[hidden],
.nx-viewer-img[hidden] {
    display: none;
}

.nx-viewer-btn {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 2px;
    background: rgba(10, 10, 10, .6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--nx-text);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .2s, border-color .2s, background-color .2s;
}

.nx-viewer-btn svg {
    width: 16px;
    height: 16px;
}

.nx-viewer-btn--prev {
    left: 14px;
}

.nx-viewer-btn--next {
    right: 14px;
}

.nx-viewer-btn[hidden] {
    display: none;
}

.nx-viewer:hover .nx-viewer-btn,
.nx-viewer-btn:focus-visible {
    opacity: 1;
}

.nx-viewer-btn:hover {
    border-color: var(--nx-red);
    background: var(--nx-red);
    color: var(--nx-on-red);
}

.nx-viewer-count {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    padding: 6px 8px;
    background: rgba(10, 10, 10, .7);
    color: var(--nx-text);
    font: 500 11px/1 var(--nx-mono);
    letter-spacing: .04em;
    pointer-events: none;
}

/* Video oynarken sayaç YouTube kontrollerine binmesin */
.nx-viewer:has(.nx-viewer-video:not([hidden])) .nx-viewer-count,
.nx-viewer-count[hidden] {
    display: none;
}

/* Galeri şeridi */
.nx-gallery {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 10px;
}

.nx-gallery.is-single {
    display: none;
}

.nx-gallery-track {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.nx-gallery-track::-webkit-scrollbar {
    display: none;
}

.nx-gallery-arrow {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    padding: 0;
    border: 1px solid var(--nx-line-2);
    border-radius: 2px;
    background: transparent;
    color: var(--nx-text);
    cursor: pointer;
    transition: border-color .2s, color .2s, opacity .2s;
}

.nx-gallery.has-overflow .nx-gallery-arrow {
    display: flex;
}

.nx-gallery-arrow svg {
    width: 14px;
    height: 14px;
}

.nx-gallery-arrow:hover:not(:disabled) {
    border-color: var(--nx-red);
    color: var(--nx-red);
}

.nx-gallery-arrow:disabled {
    opacity: .3;
    cursor: default;
}

.nx-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 148px;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 1px solid var(--nx-line-2);
    border-radius: 0;
    background: var(--nx-bg-3);
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color .2s;
}

.nx-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .55;
    transition: opacity .2s;
}

.nx-thumb:hover img,
.nx-thumb.is-active img {
    opacity: 1;
}

.nx-thumb:hover {
    border-color: rgba(255, 255, 255, .35);
}

.nx-thumb.is-active {
    border-color: var(--nx-red);
    box-shadow: inset 0 0 0 1px var(--nx-red);
}

.nx-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nx-thumb-play .nx-ico {
    width: 30px;
    height: 30px;
    padding: 8px;
    background: var(--nx-red);
    color: var(--nx-on-red);
    fill: currentColor;
}

/* --- Bilgi kutusu -------------------------------------------------------- */
.nx-pkg-info {
    position: sticky;
    top: calc(var(--nx-nav-h) + 20px);
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 2.4vw, 34px);
    border: 1px solid var(--nx-line-2);
    background: var(--nx-bg-2);
}

.nx-pkg-fw {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.nx-pkg-fw:empty {
    display: none;
}

.nx-pkg-fw li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--nx-line-2);
    color: var(--nx-text);
    font: 500 11px/1 var(--nx-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.nx-pkg-fw .nx-fw-logo {
    filter: none;
    opacity: 1;
}

.nx-pkg-fw .nx-ico {
    width: 15px;
    height: 15px;
    color: var(--nx-red);
}

.nx-pkg-title {
    margin: 0;
    color: var(--nx-text);
    font: 800 clamp(24px, 2vw, 32px)/1.08 var(--nx-display);
    font-stretch: 106%;
    letter-spacing: -.01em;
    text-transform: uppercase;
}

.nx-pkg-escrow,
.nx-pkg-countdown {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    padding: 7px 10px;
    border: 1px solid var(--nx-line-2);
    color: var(--nx-muted);
    font: 500 11px/1 var(--nx-mono);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.nx-pkg-escrow .nx-ico,
.nx-pkg-countdown .nx-ico {
    width: 14px;
    height: 14px;
    color: var(--nx-red);
}

.nx-pkg-countdown {
    margin-top: 8px;
    border-color: rgba(227, 52, 47, .5);
    color: var(--nx-text);
}

.nx-pkg-summary {
    margin: 20px 0 0;
    color: var(--nx-muted);
    font-size: 15px;
    line-height: 1.6;
}

.nx-pkg-summary[hidden] {
    display: none;
}

/* Satın alma */
.nx-buy {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--nx-line);
}

.nx-buy-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 18px;
}

.nx-buy-now {
    color: var(--nx-text);
    font: 700 34px/1 var(--nx-mono);
    letter-spacing: -.02em;
}

.nx-buy-now--text {
    font-size: 16px;
    letter-spacing: 0;
}

.nx-buy-price del {
    color: var(--nx-dim);
    font: 500 16px/1 var(--nx-mono);
}

.nx-buy-save {
    padding: 5px 7px;
    background: var(--nx-red);
    color: var(--nx-on-red);
    font: 700 11px/1 var(--nx-mono);
}

.nx-buy-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nx-buy-btns .nx-btn {
    flex: 1 1 auto;
}

.nx-buy-btns .add,
.nx-buy-btns .subscribe,
.nx-buy-btns .open-basket-cta {
    flex: 1 1 100%;
    height: 56px;
    font-size: 14px;
}

.nx-buy-btns .nx-btn[hidden] {
    display: none;
}

.nx-buy-btns .nx-ico {
    width: 17px;
    height: 17px;
}

.nx-buy-btns .is-disabled {
    opacity: .45;
    pointer-events: none;
}

/* main.js sepete eklerken .updating verir */
.nx-buy.updating .nx-buy-btns {
    opacity: .5;
    pointer-events: none;
}

.nx-buy-reason {
    margin: 12px 0 0;
    color: var(--nx-red);
    font-size: 13px;
}

.nx-pkg-meta {
    display: grid;
    gap: 12px;
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--nx-line);
}

.nx-pkg-meta > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.nx-pkg-meta dt {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--nx-dim);
    font: 500 11px/1 var(--nx-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nx-pkg-meta dt .nx-ico {
    width: 15px;
    height: 15px;
    color: var(--nx-muted);
}

.nx-pkg-meta dd {
    margin: 0;
    color: var(--nx-text);
    font-size: 13px;
    text-align: right;
}

/* --- Özellikler ----------------------------------------------------------- */
.nx-pkg-features {
    padding-top: clamp(64px, 7vw, 104px);
}

.nx-pkg-features[hidden] {
    display: none;
}

.nx-pkg-features-head {
    margin-bottom: clamp(28px, 3.4vw, 44px);
    text-align: center;
}

.nx-pkg-features-head .nx-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.nx-pkg-features-head .nx-label::before,
.nx-pkg-features-head .nx-label::after {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--nx-red);
}

.nx-pkg-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Özellik kutusu: emoji kutusuz, büyük ve soluk; solda dikeyde ortalı, kenardan taşan
   3D arka plan (anasayfadaki .nx-spec-art ile aynı fikir). Metin ikonun sağından başlar. */
.nx-pfeat {
    --nx-art-size: 104px;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 118px;
    padding: 22px 24px 22px 108px;
    border: 1px solid var(--nx-line);
    background: var(--nx-bg-2);
    overflow: hidden;
    isolation: isolate;
    transition: border-color .2s;
}

.nx-pfeat:hover {
    border-color: var(--nx-line-2);
}

.nx-pfeat > div {
    position: relative;
    z-index: 1;
}

.nx-pfeat-ico {
    position: absolute;
    top: 50%;
    left: -22px;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--nx-art-size);
    height: var(--nx-art-size);
    font-size: 84px;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-50%) perspective(700px) rotateY(26deg) rotateX(10deg);
    /* renkli emoji → koyu gri silüet + katmanlı gölgeyle ekstrüzyon */
    filter:
        grayscale(1) brightness(.32) contrast(1.15)
        drop-shadow(1px 1px 0 #151513)
        drop-shadow(1px 1px 0 #131312)
        drop-shadow(1px 1px 0 #111110)
        drop-shadow(1px 1px 0 #0f0f0e)
        drop-shadow(6px 8px 10px rgba(0, 0, 0, .6));
    opacity: .9;
    transition: filter .5s, transform .6s var(--nx-ease);
}

.nx-pfeat:hover .nx-pfeat-ico {
    transform: translateY(-50%) perspective(700px) rotateY(12deg) rotateX(4deg);
    filter:
        grayscale(.35) brightness(.55)
        drop-shadow(1px 1px 0 #151513)
        drop-shadow(1px 1px 0 #131312)
        drop-shadow(1px 1px 0 #111110)
        drop-shadow(1px 1px 0 #0f0f0e)
        drop-shadow(6px 8px 10px rgba(0, 0, 0, .6));
}

/* Çizgi ikon (anahtar kelimeden seçilen) — anasayfadaki spec ikonlarıyla aynı görünüm */
.nx-pfeat-ico.is-svg {
    color: #3a3a36;
    filter:
        drop-shadow(1px 1px 0 #1b1b19)
        drop-shadow(1px 1px 0 #191917)
        drop-shadow(1px 1px 0 #171715)
        drop-shadow(1px 1px 0 #151513)
        drop-shadow(1px 1px 0 #131312)
        drop-shadow(6px 8px 10px rgba(0, 0, 0, .6));
    transition: color .4s, transform .6s var(--nx-ease);
}

.nx-pfeat-ico.is-svg svg {
    width: 88%;
    height: 88%;
}

.nx-pfeat:hover .nx-pfeat-ico.is-svg {
    color: rgba(227, 52, 47, .55);
    filter:
        drop-shadow(1px 1px 0 #1b1b19)
        drop-shadow(1px 1px 0 #191917)
        drop-shadow(1px 1px 0 #171715)
        drop-shadow(1px 1px 0 #151513)
        drop-shadow(1px 1px 0 #131312)
        drop-shadow(6px 8px 10px rgba(0, 0, 0, .6));
}

/* Emoji yoksa büyük numara */
.nx-pfeat-ico.is-num {
    color: #3a3a36;
    font: 800 64px/1 var(--nx-display);
    font-stretch: 115%;
    filter:
        drop-shadow(1px 1px 0 #1b1b19)
        drop-shadow(1px 1px 0 #171715)
        drop-shadow(1px 1px 0 #131312)
        drop-shadow(1px 1px 0 #0f0f0e);
}

.nx-pfeat:hover .nx-pfeat-ico.is-num {
    color: rgba(227, 52, 47, .55);
    filter:
        drop-shadow(1px 1px 0 #1b1b19)
        drop-shadow(1px 1px 0 #171715)
        drop-shadow(1px 1px 0 #131312)
        drop-shadow(1px 1px 0 #0f0f0e);
}
.nx-pfeat h3 {
    margin: 2px 0 8px;
    color: var(--nx-text);
    font: 800 15px/1.3 var(--nx-sans);
    font-stretch: 105%;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.nx-pfeat p {
    margin: 0;
    color: var(--nx-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* --- Tam açıklama ---------------------------------------------------------- */
.nx-pkg-desc {
    padding-top: clamp(40px, 5vw, 64px);
}

.nx-pkg-details {
    border: 1px solid var(--nx-line);
    background: var(--nx-bg-2);
}

.nx-pkg-details > summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    cursor: pointer;
    list-style: none;
}

.nx-pkg-details > summary::-webkit-details-marker {
    display: none;
}

.nx-pkg-details-hint {
    margin-left: auto;
    color: var(--nx-dim);
    font: 500 11px/1 var(--nx-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.nx-pkg-details[open] .nx-pkg-details-hint {
    visibility: hidden;
}

.nx-pkg-details > summary svg {
    width: 16px;
    height: 16px;
    color: var(--nx-muted);
    transition: transform .3s var(--nx-ease);
}

.nx-pkg-details[open] > summary svg {
    transform: rotate(180deg);
}

.nx-pkg-details > summary:hover svg {
    color: var(--nx-red);
}

.nx-prose {
    padding: 4px 22px 28px;
    border-top: 1px solid var(--nx-line);
    color: var(--nx-muted);
    font-size: 15px;
    line-height: 1.7;
}

.nx-prose > :first-child {
    margin-top: 20px;
}

.nx-prose h1,
.nx-prose h2,
.nx-prose h3,
.nx-prose h4 {
    margin: 28px 0 10px;
    color: var(--nx-text);
    font: 800 17px/1.3 var(--nx-sans);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.nx-prose h3 {
    font-size: 19px;
}

.nx-prose p {
    margin: 0 0 12px;
}

.nx-prose span[style] {
    font-size: inherit !important;
}

.nx-prose strong {
    color: var(--nx-text);
}

.nx-prose a {
    color: var(--nx-text);
    text-decoration: underline;
    text-decoration-color: var(--nx-red);
    text-underline-offset: 3px;
}

.nx-prose a:hover {
    color: var(--nx-red);
}

.nx-prose ul {
    margin: 0 0 12px;
    padding-left: 18px;
}

.nx-prose li {
    margin: 4px 0;
}

.nx-prose li::marker {
    color: var(--nx-red);
}

.nx-prose hr {
    margin: 28px 0;
    border: 0;
    border-top: 1px solid var(--nx-line);
}

.nx-prose code {
    padding: 2px 6px;
    background: var(--nx-bg-3);
    color: var(--nx-text);
    font: 500 .88em var(--nx-mono);
}

/* Resimler yukarıdaki galeride, video üstte → açıklamada tekrar gösterme */
.nx-prose img,
.nx-prose iframe {
    display: none;
}

@media (max-width: 1080px) {
    .nx-pkg-top {
        grid-template-columns: 1fr;
    }

    .nx-pkg-info {
        position: static;
    }
}

@media (max-width: 768px) {
    .nx-pkg-feature-grid {
        grid-template-columns: 1fr;
    }

    .nx-thumb {
        width: 112px;
    }

    .nx-viewer-btn {
        opacity: 1;
    }

    /* mobile-fixes.css'in genel buton kurallarını etkisizleştir */
    .nx-pkg .nx-btn {
        min-height: 0 !important;
        padding: 0 20px !important;
        font-size: 13px !important;
    }

    .nx-pkg .nx-viewer-btn,
    .nx-pkg .nx-gallery-arrow,
    .nx-pkg .nx-thumb {
        min-height: 0 !important;
        padding: 0 !important;
    }
}


/* =====================================================================
   GİRİŞ (username.html) — tam sayfa + açılır pencere (login-popup)
   ===================================================================== */
.page-login .site {
    gap: 0;
}

.nx-login-page {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100svh - var(--nx-nav-h));
    padding: clamp(40px, 6vw, 96px) var(--nx-pad);
    overflow: hidden;
    border-bottom: 1px solid var(--nx-line);
}

/* Arka plan görseli (bg.png) — kategori başlığındaki gibi çok karartılmış */
.nx-login-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at center, rgba(10, 10, 10, .72) 0%, rgba(10, 10, 10, .92) 60%, var(--nx-bg) 100%),
        var(--nx-cathead-bg, none) center 30% / cover no-repeat;
    filter: saturate(.6);
    pointer-events: none;
}

.nx-login-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
}

/* --- Kart ------------------------------------------------------------------ */
.nx-signin {
    position: relative;
    padding: clamp(28px, 3.4vw, 44px);
    border: 1px solid var(--nx-line-2);
    background: rgba(12, 12, 12, .82);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: var(--nx-text);
    font-family: var(--nx-sans);
    text-align: left;
}

/* Üst kenarda kırmızı şerit */
.nx-signin::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 72px;
    height: 2px;
    background: var(--nx-red);
}

.nx-login-logos {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--nx-line);
}

.nx-login-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.nx-login-x {
    color: var(--nx-dim);
    font: 500 20px/1 var(--nx-sans);
}

.nx-login-cfx {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--nx-text);
    font: 800 17px/1 var(--nx-sans);
    letter-spacing: .02em;
}

.nx-login-cfx svg {
    width: 24px;
    height: 24px;
}

.nx-signin .nx-label {
    margin-bottom: 14px;
}

.nx-login-title {
    margin: 0;
    color: var(--nx-text);
    font: 800 clamp(40px, 4.6vw, 56px)/.95 var(--nx-display);
    font-stretch: 115%;
    letter-spacing: -.015em;
    text-transform: uppercase;
}

.nx-login-lead {
    margin: 18px 0 28px;
    color: var(--nx-muted);
    font-size: 15px;
    line-height: 1.6;
}

/* Buton: .btn-primary / .btn-fivem-login eski stilleri (generic.css) burada ezilir */
/* generic.css ".btn-fivem-login" her şeyi !important veriyor → burada da !important şart */
.nx-signin .nx-login-btn,
.login-popup-content .nx-signin .nx-login-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    height: 56px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: var(--nx-red) !important;
    box-shadow: none !important;
    color: var(--nx-on-red) !important;
    font-family: var(--nx-sans) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    font-stretch: 108%;
    line-height: 1 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase;
    text-decoration: none !important;
    transform: none !important;
    filter: none;
    cursor: pointer !important;
    transition: background-color .2s !important;
}

.nx-signin .nx-login-btn:hover,
.login-popup-content .nx-signin .nx-login-btn:hover {
    background: var(--nx-red-hover) !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--nx-on-red) !important;
    transform: none !important;
}

/* Yükleniyor dönen halkası kırmızı zeminde koyu */
.nx-signin .nx-login-btn.is-loading::before {
    border-color: var(--nx-on-red);
    border-top-color: transparent;
}

.nx-signin .nx-login-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.nx-signin .nx-login-btn .login-text {
    display: inline !important;
    color: inherit !important;
    font: inherit !important;
    letter-spacing: inherit !important;
}

.nx-signin .nx-login-btn .nx-login-arrow {
    width: 14px;
    height: 14px;
    margin-left: auto;
    transition: transform .3s var(--nx-ease);
}

.nx-signin .nx-login-btn:hover .nx-login-arrow {
    transform: translateX(4px);
}

.nx-signin .nx-login-btn.is-loading {
    opacity: .7;
    pointer-events: none;
}

/* IGN formu (harici giriş kapalıysa) */
.nx-login-form {
    display: grid;
    gap: 12px;
}

.nx-login-field {
    display: grid;
    gap: 8px;
}

.nx-login-field span {
    color: var(--nx-dim);
    font: 500 11px/1 var(--nx-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nx-login-field input {
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--nx-line-2);
    border-radius: 2px;
    background: var(--nx-bg);
    color: var(--nx-text);
    font: 600 15px/1 var(--nx-sans);
    outline: 0;
    transition: border-color .2s;
}

.nx-login-field input:focus {
    border-color: var(--nx-text);
}

.nx-login-perks {
    display: grid;
    gap: 12px;
    margin: 28px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--nx-line);
    list-style: none;
}

.nx-login-perks li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--nx-muted);
    font-size: 14px;
}

.nx-login-perks .nx-ico {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--nx-red);
}

.nx-login-help {
    margin: 24px 0 0;
    color: var(--nx-dim);
    font: 500 11px/1.5 var(--nx-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.nx-login-help a {
    color: var(--nx-text);
    text-decoration: underline;
    text-decoration-color: var(--nx-red);
    text-underline-offset: 3px;
}

.nx-login-help a:hover {
    color: var(--nx-red);
}

/* --- Açılır pencere hali --------------------------------------------------- */
.popup.login-popup {
    position: fixed !important;
    inset: 0;
    z-index: 10000 !important;
    background: rgba(5, 5, 5, .8);
}

.popup.login-popup .popup-content.login-popup-content {
    width: 100%;
    max-width: 480px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0;
    border-radius: 0 !important;
    background: transparent;
    display: block;
    text-align: left;
}

.popup.login-popup .popup-content::after {
    display: none;
}

.popup.login-popup .popup-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--nx-line-2);
    border-radius: 2px;
    background: transparent none !important;
    color: transparent;
    font-size: 0;
    opacity: 1;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}

.popup.login-popup .popup-close::before,
.popup.login-popup .popup-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 1.6px;
    background: var(--nx-text);
    transform: translate(-50%, -50%) rotate(45deg);
}

.popup.login-popup .popup-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.popup.login-popup .popup-close:hover {
    border-color: var(--nx-red);
    background: var(--nx-red) none !important;
}

.popup.login-popup .popup-close:hover::before,
.popup.login-popup .popup-close:hover::after {
    background: var(--nx-on-red);
}

@media (max-width: 768px) {
    .popup.login-popup .popup-content.login-popup-content {
        max-width: 100% !important;
    }

    .nx-signin .nx-login-btn {
        min-height: 0 !important;
        padding: 0 20px !important;
        font-size: 14px !important;
    }

    .nx-login-field input {
        font-size: 16px !important;
    }
}

/* =====================================================================
   KUTULAR v2 — katmanlı, detaylı kutular
   · Kenar: beyazdan kırmızıya geçen ince parıltı (--edge, border-box katmanı)
   · Ürün kartı "bilet": görsel iç çerçevede, fiyat kesikli çizgiyle ayrılır,
     iki yanda bilet oyukları; hover'da nişangah köşeler + ışık süpürmesi + yükselme
   ===================================================================== */
:root {
    --nx-r: 16px;          /* büyük kutular */
    --nx-r-md: 12px;       /* görseller, iç kutular */
    --nx-r-sm: 10px;       /* butonlar, sekmeler, küçük kutular */
    --nx-edge: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 32%, rgba(255, 255, 255, .025) 62%, rgba(227, 52, 47, .3));
    --nx-edge-hot: linear-gradient(160deg, rgba(227, 52, 47, .85), rgba(255, 255, 255, .08) 38%, rgba(255, 255, 255, .04) 62%, rgba(227, 52, 47, .7));
    --nx-fill: linear-gradient(180deg, #161615 0%, #0f0f0e 100%);
}

/* ---------- Ürün kartı ---------- */
.nx-card {
    --edge: var(--nx-edge);
    --ny: 59px; /* bilet oyuğunun alttan yüksekliği (= alt şerit yüksekliği + kenar) */
    position: relative;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: var(--nx-r);
    background: var(--nx-fill) padding-box, var(--edge) border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    -webkit-mask:
        radial-gradient(circle at left 0 bottom var(--ny), transparent 9px, #000 9.5px),
        radial-gradient(circle at right 0 bottom var(--ny), transparent 9px, #000 9.5px);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle at left 0 bottom var(--ny), transparent 9px, #000 9.5px),
        radial-gradient(circle at right 0 bottom var(--ny), transparent 9px, #000 9.5px);
    mask-composite: intersect;
    transition: transform .45s var(--nx-ease), box-shadow .45s var(--nx-ease);
}

.nx-card:hover,
a.nx-card:hover {
    --edge: var(--nx-edge-hot);
    border-color: transparent;
    transform: translateY(-6px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -70px 70px -60px rgba(227, 52, 47, .45);
}

.nx-card.is-loading {
    -webkit-mask: none;
    mask: none;
}

/* Görsel: iç çerçeve */
.nx-card-media {
    border: 0;
    border-radius: var(--nx-r-md);
    isolation: isolate;
}

/* Alta doğru karartma + hover'da beliren nişangah köşeleri */
.nx-card-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(var(--nx-red), var(--nx-red)) top 12px left 12px / 20px 2px no-repeat,
        linear-gradient(var(--nx-red), var(--nx-red)) top 12px left 12px / 2px 20px no-repeat,
        linear-gradient(var(--nx-red), var(--nx-red)) bottom 12px right 12px / 20px 2px no-repeat,
        linear-gradient(var(--nx-red), var(--nx-red)) bottom 12px right 12px / 2px 20px no-repeat,
        linear-gradient(to top, rgba(12, 12, 11, .55), transparent 42%);
    background-size: 0 2px, 2px 0, 0 2px, 2px 0, 100% 100%;
    transition: background-size .45s var(--nx-ease);
}

.nx-card:hover .nx-card-media::before {
    background-size: 20px 2px, 2px 20px, 20px 2px, 2px 20px, 100% 100%;
}

/* Işık süpürmesi */
.nx-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .14) 50%, transparent 62%) no-repeat;
    background-size: 260% 100%;
    background-position: 160% 0;
    transition: background-position 0s;
}

.nx-card:hover .nx-card-media::after {
    background-position: -60% 0;
    transition: background-position 1s var(--nx-ease);
}

/* Rozetler: hap şeklinde, hafif parıltılı */
.nx-card-flag {
    top: 10px;
    left: 10px;
    z-index: 3;
    padding: 6px 10px;
    border-radius: 999px;
    box-shadow: 0 6px 18px -6px rgba(227, 52, 47, .8);
}

.nx-card-flag--sale {
    right: 10px;
    left: auto;
    box-shadow: none;
}

.nx-card-body {
    padding: 16px 10px 16px;
}

/* Framework etiketleri: hap + kırmızı nokta */
.nx-card .nx-fw {
    margin-bottom: 12px;
}

.nx-card .nx-fw li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    background: rgba(255, 255, 255, .035);
    color: #b9b8b2;
}

.nx-card .nx-fw li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--nx-red);
    box-shadow: 0 0 6px rgba(227, 52, 47, .9);
}

.nx-card .nx-fw li.is-generic::before {
    background: var(--nx-dim);
    box-shadow: none;
}

.nx-card-title {
    font-size: 16px;
}

/* Alt şerit: bilet koçanı (kesikli çizgi, iki yanda oyuk) */
.nx-card-foot {
    height: 58px;
    margin: 0 -8px -8px;
    padding: 0 16px 0 18px;
    border-top: 1px dashed rgba(255, 255, 255, .13);
    background: linear-gradient(180deg, rgba(255, 255, 255, .015), rgba(255, 255, 255, 0));
}

.nx-card-price {
    font-size: 17px;
}

.nx-card-price del {
    font-size: 12px;
}

/* "View" + kutulu ok; hover'da kırmızı dolar */
.nx-card-cta {
    gap: 10px;
}

.nx-card-cta svg {
    box-sizing: content-box;
    width: 14px;
    height: 14px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--nx-r-sm);
    transition: background-color .25s, border-color .25s, color .25s, transform .35s var(--nx-ease);
}

.nx-card:hover .nx-card-cta {
    color: var(--nx-text);
}

.nx-card:hover .nx-card-cta svg {
    border-color: var(--nx-red);
    background: var(--nx-red);
    color: var(--nx-on-red);
    transform: translateX(2px);
}

/* ---------- Diğer kutular: aynı aile, sade ---------- */
.nx-feature-frame,
.nx-viewer,
.nx-pkg-info,
.nx-pfeat,
.nx-pkg-details,
.nx-signin {
    --edge: var(--nx-edge);
    border: 1px solid transparent !important;
    border-radius: var(--nx-r);
    background: var(--nx-fill) padding-box, var(--edge) border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.nx-feature-frame,
.nx-viewer,
.nx-pfeat {
    overflow: hidden;
}

.nx-pfeat:hover,
.nx-feature:hover .nx-feature-frame {
    --edge: var(--nx-edge-hot);
}

.nx-signin {
    background: linear-gradient(180deg, rgba(22, 22, 21, .92), rgba(12, 12, 12, .92)) padding-box, var(--edge) border-box;
}

/* Öne çıkan ürün: gölge iç çerçevenin şeklini takip eder */
.nx-feature {
    border: 0;
    background: none;
    box-shadow: none;
    filter: drop-shadow(-24px 30px 34px rgba(0, 0, 0, .55));
}

.nx-feature-frame {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.nx-feat {
    border-color: rgba(255, 255, 255, .07);
    border-radius: var(--nx-r-md);
    background: rgba(255, 255, 255, .02);
}

.nx-feat:hover {
    border-color: rgba(227, 52, 47, .45);
}

.nx-feat-ico,
.nx-ico-box {
    border-radius: 8px;
}

/* ---------- Butonlar & küçük kutular ---------- */
.nx-btn,
.nx-chip,
.nx-cattab,
.nx-search,
.nx-filters,
.nx-sort select,
.nx-fw li,
.nx-pkg-fw li,
.nx-feature-tag,
.nx-feature-count,
.nx-feature-btn {
    border-radius: var(--nx-r-sm);
}

.nx-btn-red {
    background: linear-gradient(180deg, #ee433d, #d72c27);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 26px -12px rgba(227, 52, 47, .75);
}

.nx-btn-red:hover {
    background: linear-gradient(180deg, #f6544e, #e0352f);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 14px 32px -12px rgba(227, 52, 47, .9);
}

.nx-btn-line {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .025);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.nx-btn-line:hover {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .05);
}

/* Kategori sayfasındaki kartlar Tebex'in eski article.product kuralını da taşıyor → daha güçlü seçiciyle */
article.product.nx-card {
    border: 1px solid transparent;
    border-radius: var(--nx-r) !important;
    background: var(--nx-fill) padding-box, var(--edge) border-box;
}

.nx-pcard:hover {
    border-color: transparent;
}
/* =====================================================================
   BLUEPRINT kutular — kareli teknik çizim zemini, kesikli kenar,
   köşelerde vida/pim noktaları (hover'da kırmızı), ikon yuvarlak içinde,
   altta "SPEC 01" ölçü çizgisi. (Ürün kartları hariç)
   ===================================================================== */
.nx-spec,
.nx-pfeat,
.nx-faq-item,
.nx-recent-item,
.nx-pkg-info,
.nx-pkg-details {
    --pin: rgba(255, 255, 255, .28);
    --pin-fill: var(--nx-bg);
    position: relative;
    border: 1px dashed rgba(255, 255, 255, .14) !important;
    border-radius: 6px;
    background:
        linear-gradient(rgba(255, 255, 255, .032) 1px, transparent 1px) 0 0 / 16px 16px,
        linear-gradient(90deg, rgba(255, 255, 255, .032) 1px, transparent 1px) 0 0 / 16px 16px,
        #0d0d0c;
    box-shadow: none;
    transition: border-color .3s;
}

.nx-pkg-info {
    position: sticky;
}

.nx-spec:hover,
.nx-pfeat:hover,
.nx-faq-item:hover,
.nx-faq-item[open],
.nx-recent-item:hover {
    --pin: var(--nx-red);
    --pin-fill: var(--nx-red);
    border-color: rgba(227, 52, 47, .7) !important;
}

/* Köşe pimleri — tek katmanda dört radial-gradient */
.nx-spec::before,
.nx-pfeat::before,
.nx-faq-item::before,
.nx-recent-item::before,
.nx-pkg-info::before,
.nx-pkg-details::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    width: auto;
    height: auto;
    transform: none;
    pointer-events: none;
    background:
        radial-gradient(circle at 10px 10px, var(--pin-fill) 2.4px, var(--pin) 2.9px 3.7px, transparent 4.2px),
        radial-gradient(circle at calc(100% - 10px) 10px, var(--pin-fill) 2.4px, var(--pin) 2.9px 3.7px, transparent 4.2px),
        radial-gradient(circle at 10px calc(100% - 10px), var(--pin-fill) 2.4px, var(--pin) 2.9px 3.7px, transparent 4.2px),
        radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), var(--pin-fill) 2.4px, var(--pin) 2.9px 3.7px, transparent 4.2px);
    transition: filter .3s;
}

.nx-spec:hover::before,
.nx-pfeat:hover::before,
.nx-faq-item:hover::before,
.nx-faq-item[open]::before,
.nx-recent-item:hover::before {
    filter: drop-shadow(0 0 3px rgba(227, 52, 47, .9));
}

/* Yuvarlak ikon */
.nx-spec .nx-spec-art,
.nx-pfeat .nx-pfeat-ico {
    position: static;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: var(--nx-bg);
    color: var(--nx-red);
    font-size: 20px;
    opacity: 1;
    transform: none !important;
    filter: none !important;
    transition: border-color .3s, box-shadow .3s;
}

.nx-spec .nx-spec-art .nx-ico,
.nx-pfeat .nx-pfeat-ico svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.6;
}

.nx-pfeat .nx-pfeat-ico.is-svg,
.nx-pfeat:hover .nx-pfeat-ico.is-svg {
    color: var(--nx-red);
}

.nx-pfeat .nx-pfeat-ico.is-num,
.nx-pfeat:hover .nx-pfeat-ico.is-num {
    color: var(--nx-red);
    font: 600 14px/1 var(--nx-mono);
}

.nx-spec:hover .nx-spec-art,
.nx-pfeat:hover .nx-pfeat-ico {
    border-color: rgba(227, 52, 47, .7);
    box-shadow: 0 0 0 4px rgba(227, 52, 47, .1);
}

/* ---------- Ana sayfa: 4 özellik kutusu ---------- */
.nx-specs {
    padding: 40px 0;
}

.nx-spec-list {
    gap: 16px;
    counter-reset: spec;
}

.nx-specs .nx-spec-list .nx-spec,
.nx-specs .nx-spec-list .nx-spec--left,
.nx-specs .nx-spec-list .nx-spec--right,
.nx-spec:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    padding: 26px 24px 22px;
    overflow: visible;
    counter-increment: spec;
}

.nx-spec-no {
    display: none;
}

.nx-spec h3 {
    margin: 20px 0 8px;
}

.nx-spec p {
    flex: 1;
}

/* "SPEC 01" ölçü çizgisi */
.nx-spec::after {
    content: "SPEC " counter(spec, decimal-leading-zero);
    align-self: stretch;
    margin-top: 18px;
    color: var(--nx-dim);
    font: 500 10px/1 var(--nx-mono);
    letter-spacing: .12em;
    text-align: center;
    background: linear-gradient(90deg, rgba(255, 255, 255, .12) calc(50% - 40px), transparent calc(50% - 40px) calc(50% + 40px), rgba(255, 255, 255, .12) calc(50% + 40px)) center / 100% 1px no-repeat;
}

/* ---------- Ürün sayfası: Under the hood ---------- */
.nx-pkg-feature-grid {
    gap: 14px;
}

.nx-pfeat {
    align-items: flex-start;
    gap: 18px;
    min-height: 0;
    padding: 24px 24px 22px;
    overflow: visible;
}

.nx-pfeat h3 {
    margin-top: 2px;
}

/* ---------- SSS ---------- */
.nx-faq-list {
    display: grid;
    gap: 10px;
    border-top: 0;
}

.nx-faq-item > summary {
    padding: 22px 26px;
}

.nx-faq-body {
    padding: 0 40px 24px 90px;
}

/* ---------- Recently purchased ---------- */
.nx-recent-list {
    gap: 12px;
    border: 0;
}

.nx-recent-item {
    padding: 22px 20px 22px;
}

.nx-recent-item:hover {
    background:
        linear-gradient(rgba(255, 255, 255, .032) 1px, transparent 1px) 0 0 / 16px 16px,
        linear-gradient(90deg, rgba(255, 255, 255, .032) 1px, transparent 1px) 0 0 / 16px 16px,
        #100f0e;
}

/* =====================================================================
   BUTONLAR — ana: HUD (iki köşesi kesik blok) · ikincil: Blueprint (kesikli kenar)
   İkisinde de 4 köşe pimi; hover'da dolgu soldan sağa kayar.
   ===================================================================== */
.nx-btn {
    --pin: rgba(255, 255, 255, .35);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: color .35s ease, border-color .3s, background-color .3s;
}

/* Kayan dolgu */
.nx-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--nx-text);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.7, 0, .2, 1);
}

.nx-btn:hover::before {
    transform: scaleX(1);
}

/* Köşe pimleri */
.nx-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 7px 7px, var(--pin) 1.6px, transparent 2.2px),
        radial-gradient(circle at calc(100% - 7px) 7px, var(--pin) 1.6px, transparent 2.2px),
        radial-gradient(circle at 7px calc(100% - 7px), var(--pin) 1.6px, transparent 2.2px),
        radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), var(--pin) 1.6px, transparent 2.2px);
    transition: opacity .3s;
}

/* ---- Ana: HUD kesik köşeli kırmızı blok ---- */
.nx-btn-red,
.nx-btn-dark {
    --pin: rgba(10, 10, 10, .55);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
}

.nx-btn-red,
.nx-btn-red:hover {
    background: var(--nx-red);
    box-shadow: none;
    color: var(--nx-on-red);
}

/* Kesik köşedeki pimler köşeden biraz içeride */
.nx-btn-red::after,
.nx-btn-dark::after {
    background:
        radial-gradient(circle at 7px 7px, var(--pin) 1.6px, transparent 2.2px),
        radial-gradient(circle at calc(100% - 11px) 11px, var(--pin) 1.6px, transparent 2.2px),
        radial-gradient(circle at 11px calc(100% - 11px), var(--pin) 1.6px, transparent 2.2px),
        radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), var(--pin) 1.6px, transparent 2.2px);
}

/* Discord bölümündeki koyu buton (kırmızı zemin üstünde) */
.nx-btn-dark,
.nx-btn-dark:hover {
    --pin: rgba(255, 255, 255, .35);
    background: var(--nx-bg);
    color: var(--nx-text);
}

.nx-btn-dark:hover {
    --pin: rgba(10, 10, 10, .5);
    color: var(--nx-bg);
}

/* ---- İkincil: Blueprint kesikli kenar ---- */
.nx-btn-line {
    border: 1px dashed rgba(255, 255, 255, .24);
    border-radius: 4px;
    background: rgba(10, 10, 10, .55);
    box-shadow: none;
    color: var(--nx-text);
}

.nx-btn-line:hover {
    --pin: rgba(10, 10, 10, .5);
    border: 1px solid var(--nx-text);
    background: rgba(10, 10, 10, .55);
    color: var(--nx-bg);
}

/* Kırmızı zeminde (Discord bölümü) ikincil buton */
.nx-discord .nx-btn-line {
    border-color: rgba(10, 10, 10, .45);
    background: transparent;
    color: var(--nx-on-red);
}

/* Giriş butonu yüklenirken ::before dönen halka olarak kalsın (kayan dolgu değil) */
.nx-btn.is-loading::before {
    position: static;
    inset: auto;
    z-index: auto;
    background: none;
    transform: none;
    transform-origin: 50% 50%;
    transition: none;
}
/* =====================================================================
   KATEGORİ SEKMELERİ — butonlarla aynı aile
   Seçili değil: Blueprint (kesikli kenar + 4 pim) · Seçili: HUD kesik köşeli kırmızı blok
   Hover: dolgu soldan sağa kayar
   ===================================================================== */
.nx-cattab {
    --pin: rgba(255, 255, 255, .32);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px dashed rgba(255, 255, 255, .22);
    border-radius: 4px;
    transition: color .35s ease, border-color .3s;
}

.nx-cattab::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--nx-text);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.7, 0, .2, 1);
}

.nx-cattab::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 7px 7px, var(--pin) 1.6px, transparent 2.2px),
        radial-gradient(circle at calc(100% - 7px) 7px, var(--pin) 1.6px, transparent 2.2px),
        radial-gradient(circle at 7px calc(100% - 7px), var(--pin) 1.6px, transparent 2.2px),
        radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), var(--pin) 1.6px, transparent 2.2px);
}

.nx-cattab:hover {
    --pin: rgba(10, 10, 10, .5);
    border: 1px solid var(--nx-text);
    color: var(--nx-bg);
}

.nx-cattab:hover::before {
    transform: scaleX(1);
}

.nx-cattab:hover .nx-ico,
.nx-cattab:hover .nx-cattab-no {
    color: inherit;
}

/* Seçili sekme: HUD kesik köşeli kırmızı blok */
.nx-cattab.is-active {
    --pin: rgba(10, 10, 10, .55);
    border: 0;
    border-radius: 0;
    background: var(--nx-red);
    color: var(--nx-on-red);
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
}

.nx-cattab.is-active::after {
    background:
        radial-gradient(circle at 7px 7px, var(--pin) 1.6px, transparent 2.2px),
        radial-gradient(circle at calc(100% - 11px) 11px, var(--pin) 1.6px, transparent 2.2px),
        radial-gradient(circle at 11px calc(100% - 11px), var(--pin) 1.6px, transparent 2.2px),
        radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), var(--pin) 1.6px, transparent 2.2px);
}

.nx-cattab.is-active .nx-ico,
.nx-cattab.is-active .nx-cattab-no {
    color: var(--nx-on-red);
}

.nx-cattab.is-active .nx-cattab-no {
    opacity: .6;
}

/* Araç çubuğu (arama, filtreler, sıralama) — Blueprint kesikli kenar */
.nx-search,
.nx-filters,
.nx-sort select {
    border: 1px dashed rgba(255, 255, 255, .22) !important;
    border-radius: 4px;
}

.nx-search:focus-within,
.nx-sort select:focus,
.nx-sort select:hover {
    border-style: solid !important;
    border-color: var(--nx-text) !important;
}
/* =====================================================================
   FRAMEWORK ŞERİDİ — tek parça teknik etiket: kesikli çerçeve, bölmeler
   arasında kesikli ayraç, her bölmede logo + ad. Logolar gri; kart hover'da renklenir.
   ===================================================================== */
.nx-card .nx-fw {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 0 12px;
    border: 1px dashed rgba(255, 255, 255, .18);
    border-radius: 4px;
    background: rgba(255, 255, 255, .02);
}

.nx-card .nx-fw li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 0;
    border-radius: 0;
    background: none;
    color: #a9a8a2;
    font: 600 10px/1 var(--nx-mono);
    letter-spacing: .1em;
}

.nx-card .nx-fw li + li {
    border-left: 1px dashed rgba(255, 255, 255, .14);
}

.nx-card .nx-fw li::before {
    content: "";
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 0;
    background: center / contain no-repeat;
    box-shadow: none;
    filter: grayscale(1) brightness(1.7);
    opacity: .7;
    transition: filter .3s, opacity .3s;
}

.nx-card .nx-fw li[data-fw="ESX"]::before {
    width: 24px;
    background-image: var(--nx-logo-esx);
}

.nx-card .nx-fw li[data-fw="QB-Core"]::before {
    background-image: var(--nx-logo-qb);
}

.nx-card .nx-fw li[data-fw="Qbox"]::before {
    background-image: var(--nx-logo-qbox);
}

.nx-card .nx-fw li[data-fw="Standalone"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3342f' stroke-width='1.8'%3E%3Cpath d='M21 7.5 12 3 3 7.5v9L12 21l9-4.5v-9Z'/%3E%3Cpath d='M3 7.5 12 12l9-4.5'/%3E%3Cpath d='M12 12v9'/%3E%3C/svg%3E");
}

.nx-card .nx-fw li.is-generic::before {
    display: none;
}

.nx-card:hover .nx-fw {
    border-color: rgba(255, 255, 255, .3);
}

.nx-card:hover .nx-fw li {
    color: var(--nx-text);
}

.nx-card:hover .nx-fw li::before {
    filter: none;
    opacity: 1;
}

/* =====================================================================
   BEST SELLER — HUD etiketi: sağ alt köşesi kesik kırmızı blok, alev ikonu, pimler
   ===================================================================== */
.nx-card-flag {
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px 7px 10px;
    border-radius: 0;
    background: var(--nx-red);
    box-shadow: none;
    color: var(--nx-on-red);
    font: 700 10px/1 var(--nx-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
}

/* Pimler: sağ üst ve sol alt */
.nx-card-flag::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at calc(100% - 5px) 5px, rgba(10, 10, 10, .55) 1.3px, transparent 1.9px),
        radial-gradient(circle at 4px calc(100% - 4px), rgba(10, 10, 10, .55) 1.3px, transparent 1.9px);
}

.nx-flag-ico {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transform-origin: 50% 100%;
}

.nx-card:hover .nx-flag-ico,
.nx-feature:hover .nx-flag-ico {
    animation: nx-flicker .9s ease-in-out infinite;
}

@keyframes nx-flicker {
    0%, 100% { transform: scale(1) rotate(0); }
    30% { transform: scale(1.12, .94) rotate(-4deg); }
    60% { transform: scale(.94, 1.1) rotate(3deg); }
}

/* İndirim etiketi: sağda, ayna görüntüsü kesik */
.nx-card-flag--sale {
    right: 10px;
    left: auto;
    padding: 7px 10px 7px 16px;
    background: var(--nx-text);
    color: var(--nx-bg);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}

/* --- Framework şeridi: biraz daha küçük --- */
.nx-card .nx-fw li {
    gap: 6px;
    padding: 5px 8px;
    font-size: 9px;
    letter-spacing: .09em;
}

.nx-card .nx-fw li::before {
    width: 12px;
    height: 12px;
}

.nx-card .nx-fw li[data-fw="ESX"]::before {
    width: 20px;
}

/* --- Best seller: köşe kesimi ve pimler arka planda (clip-path yok → kıvılcımlar dışarı taşabilir) --- */
.nx-card-flag {
    overflow: visible;
    gap: 7px;
    padding: 6px 16px 6px 9px;
    clip-path: none;
    background:
        radial-gradient(circle at calc(100% - 5px) 5px, rgba(10, 10, 10, .55) 1.3px, transparent 1.9px),
        radial-gradient(circle at 4px calc(100% - 4px), rgba(10, 10, 10, .55) 1.3px, transparent 1.9px),
        linear-gradient(315deg, transparent 6.5px, var(--nx-red) 7px);
}

.nx-card-flag--sale {
    clip-path: none;
    background: linear-gradient(45deg, transparent 6.5px, var(--nx-text) 7px);
}

.nx-flag-ico {
    width: 16px;
    height: 16px;
    margin: -3px 0 -2px;
}

/* Kıvılcımlar: alevin iki yanından yukarı uçar (::before sola, ::after sağa) */
.nx-card-flag::before,
.nx-card-flag::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 15px;
    right: auto;
    bottom: auto;
    width: 3px;
    height: 3px;
    margin: -2px 0 0 0;
    border-radius: 50%;
    background: #ffcf6b;
    box-shadow:
        0 0 4px 1px rgba(255, 140, 50, .9),
        -5px 3px 0 -.4px #ff8a3d,
        4px 5px 0 -.6px #ffb44f,
        -2px 8px 0 -.8px #ff5a2a;
    opacity: 0;
    pointer-events: none;
}

.nx-card-flag::before {
    top: 50%;
    left: 15px;
}

.nx-card-flag::after {
    top: 50%;
    left: 17px;
}

.nx-card:hover .nx-card-flag::before,
.nx-feature:hover .nx-card-flag::before {
    animation: nx-ember-l 1.1s ease-out infinite;
}

.nx-card:hover .nx-card-flag::after,
.nx-feature:hover .nx-card-flag::after {
    animation: nx-ember-r 1.1s ease-out .55s infinite;
}

@keyframes nx-ember-l {
    0% { opacity: 0; transform: translate(0, 0) scale(1); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translate(-16px, -20px) scale(.4); }
}

@keyframes nx-ember-r {
    0% { opacity: 0; transform: translate(0, 0) scale(1); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translate(16px, -18px) scale(.4); }
}

.nx-card-flag--sale::before,
.nx-card-flag--sale::after {
    display: none;
}

/* =====================================================================
   BEST SELLER ŞERİDİ — görselin üstünde değil, kartın tepesine yapışık bant
   (kartın bir parçası gibi): alev + yazı, sağ uçta ikaz bandı çizgileri
   ===================================================================== */
.nx-card > .nx-card-band {
    position: relative;
    top: auto;
    left: auto;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    margin: -8px -8px 8px;
    padding: 0 14px;
    border-radius: 15px 15px 0 0;
    background: linear-gradient(90deg, #e8372f 0%, #c9261f 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .3);
    clip-path: none;
    color: var(--nx-on-red);
    font: 700 10px/1 var(--nx-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Bant ile görsel arasında ince bağlantı: görselin üst kenarına kırmızı çizgi */
.nx-card > .nx-card-band + .nx-card-media {
    box-shadow: 0 -2px 0 0 var(--nx-red);
}

/* İkaz bandı çizgileri + iki pim */
.nx-band-tape {
    position: relative;
    width: 54px;
    height: 12px;
    margin-left: auto;
    background: repeating-linear-gradient(-45deg, rgba(10, 10, 10, .5) 0 4px, transparent 4px 8px);
    -webkit-mask: linear-gradient(90deg, transparent, #000 30%);
    mask: linear-gradient(90deg, transparent, #000 30%);
}

.nx-card > .nx-card-band .nx-flag-ico {
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Kıvılcımlar bant içinde kalsın: daha kısa yol */
.nx-card > .nx-card-band::before,
.nx-card > .nx-card-band::after {
    top: 50%;
    left: 21px;
}

.nx-card:hover > .nx-card-band::before {
    animation: nx-ember-band-l 1s ease-out infinite;
}

.nx-card:hover > .nx-card-band::after {
    animation: nx-ember-band-r 1s ease-out .5s infinite;
}

@keyframes nx-ember-band-l {
    0% { opacity: 0; transform: translate(0, 2px) scale(1); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translate(-14px, -11px) scale(.35); }
}

@keyframes nx-ember-band-r {
    0% { opacity: 0; transform: translate(0, 2px) scale(1); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translate(18px, -10px) scale(.35); }
}

/* =====================================================================
   BEST SELLER ŞERİDİ v2 — oyun içi panel başlığı: koyudan kırmızı gün batımına,
   sağda Los Santos silüeti (gökdelenler + palmiyeler), kalın italik başlık, sıra sayacı
   ===================================================================== */
.nx-card > .nx-card-band {
    height: 42px;
    gap: 10px;
    padding: 0 16px 0 14px;
    border-radius: 15px 15px 0 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 44'%3E%3Cpath fill='%23120909' d='M0 44V34h8v-5h7v5h6V22h8v-6h4v6h6v8h8v-6h8V10h3V6h2v4h3v14h8v8h9V18h10v8h8v6h8v-8h10v-8h8v8h7v8h12v-4h9v6h8v10z'/%3E%3Cg fill='%23ffb35c' opacity='.75'%3E%3Crect x='26' y='25' width='2' height='2'/%3E%3Crect x='61' y='14' width='2' height='2'/%3E%3Crect x='61' y='20' width='2' height='2'/%3E%3Crect x='99' y='23' width='2' height='2'/%3E%3Crect x='134' y='20' width='2' height='2'/%3E%3Crect x='134' y='27' width='2' height='2'/%3E%3C/g%3E%3Cg fill='none' stroke='%23120909' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M196 44c0-10 1-18 4-26'/%3E%3Cpath d='M200 18c-5-3-10-2-13 2M200 18c4-4 9-4 13 0M200 18c-2-5-6-7-11-6M200 18c2-5 7-6 11-4M200 18c0 4-2 7-5 9'/%3E%3Cpath d='M224 44c0-8-1-13-3-19'/%3E%3Cpath d='M221 25c-4-2-8-1-10 2M221 25c3-3 7-3 10 0M221 25c-1-4-5-5-8-4M221 25c2-4 5-5 8-3'/%3E%3C/g%3E%3C/svg%3E") right -6px bottom -1px / 250px 46px no-repeat,
        radial-gradient(70px 46px at 72% 112%, rgba(255, 196, 120, .75), rgba(255, 110, 60, .35) 45%, transparent 75%),
        linear-gradient(90deg, #150a09 0%, #24100e 34%, #7d1d18 68%, #d2402a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 170, 120, .35),
        inset 0 0 0 1px rgba(227, 52, 47, .45),
        inset 0 -1px 0 rgba(0, 0, 0, .5);
    color: var(--nx-text);
    font: 600 10px/1 var(--nx-mono);
    letter-spacing: .1em;
}

.nx-card > .nx-card-band .nx-flag-ico {
    width: 17px;
    height: 17px;
    color: #ff5a2a;
    filter: drop-shadow(0 0 6px rgba(255, 90, 42, .75));
}

.nx-card > .nx-card-band b {
    font: italic 800 15px/1 var(--nx-display);
    font-stretch: 112%;
    letter-spacing: -.01em;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

.nx-band-rank {
    color: var(--nx-text);
    font: 700 11px/1 var(--nx-mono);
    letter-spacing: .04em;
}

.nx-band-rank i {
    color: rgba(241, 240, 236, .5);
    font-style: normal;
}

/* Eski ikaz bandı artık yok */
.nx-band-tape {
    display: none;
}

/* Hover: gün batımı biraz parlar */
.nx-card:hover > .nx-card-band {
    box-shadow:
        inset 0 1px 0 rgba(255, 190, 140, .5),
        inset 0 0 0 1px rgba(227, 52, 47, .8),
        inset 0 -1px 0 rgba(0, 0, 0, .5);
}

/* Kıvılcımlar: alevin yeni konumu */
.nx-card > .nx-card-band::before,
.nx-card > .nx-card-band::after {
    left: 21px;
}

/* =====================================================================
   BEST SELLER SEKMESİ v3 — küçük: sol üstte yamuk uçlu sekme
   (içinde Los Santos silüeti: Maze Bank kulesi, merkez, palmiye, Vinewood tabelası),
   ucunda eğik çizgiler, kartın üst kenarı boyunca ince kırmızı çizgi
   ===================================================================== */
.nx-card > .nx-card-band {
    --tab: 300px;
    height: 28px;
    gap: 7px;
    margin: -8px -8px 8px;
    padding: 0 12px;
    border-radius: 15px 15px 0 0;
    box-shadow: none;
    font: 600 10px/1 var(--nx-mono);
    background:
        /* Los Santos silüeti (sekmenin sağ kısmı) */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 26'%3E%3Cpath fill='%23170a09' d='M74 26C80 15 95 11 110 14C119 16 126 20 130 26Z'/%3E%3Cg fill='%23f1f0ec' opacity='.85'%3E%3Crect x='88' y='14.2' width='1.6' height='2.4'/%3E%3Crect x='90.8' y='13.8' width='1.6' height='2.4'/%3E%3Crect x='93.6' y='13.5' width='1.6' height='2.4'/%3E%3Crect x='96.4' y='13.4' width='1.6' height='2.4'/%3E%3Crect x='99.2' y='13.4' width='1.6' height='2.4'/%3E%3Crect x='102' y='13.6' width='1.6' height='2.4'/%3E%3Crect x='104.8' y='13.9' width='1.6' height='2.4'/%3E%3Crect x='107.6' y='14.3' width='1.6' height='2.4'/%3E%3C/g%3E%3Cpath fill='%230d0606' d='M0 26V20H6V16H11V22H15V12H20V9H23V12H27V18H30V14H34V6L37 1.5L40 6V14H43V8H47V11H50V20H55V15H59V22H64V18H70V26Z'/%3E%3Cpath d='M37 1.5V-2' stroke='%230d0606' stroke-width='.8'/%3E%3Cg fill='%23ffb35c' opacity='.8'%3E%3Crect x='17' y='15' width='1.2' height='1.2'/%3E%3Crect x='36' y='10' width='1.2' height='1.2'/%3E%3Crect x='38' y='16' width='1.2' height='1.2'/%3E%3Crect x='44' y='12' width='1.2' height='1.2'/%3E%3Crect x='56' y='18' width='1.2' height='1.2'/%3E%3C/g%3E%3Cg fill='none' stroke='%230d0606' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M68 26c0-5 .6-9 2.4-12'/%3E%3Cpath d='M70.4 14c-3-1.6-5.6-1-7.4 1M70.4 14c2.4-2.2 5.2-2.2 7.4-.2M70.4 14c-1-2.8-3.4-3.8-6-3.2M70.4 14c1.2-2.8 4-3.4 6.2-2.2'/%3E%3C/g%3E%3C/svg%3E") calc(var(--tab) - 152px) 100% / 130px 26px no-repeat,
        /* eğik çizgiler: sekmenin hemen ardında */
        repeating-linear-gradient(115deg, var(--nx-red) 0 3px, transparent 3px 8px) var(--tab) 0 / 34px 100% no-repeat,
        /* sekme: sağ ucu yamuk kesik */
        linear-gradient(115deg, #1c0c0b 0%, #5c1814 45%, #c4351f calc(100% - 13px), transparent calc(100% - 13px)) 0 0 / var(--tab) 100% no-repeat,
        /* kartın üst kenarı boyunca ince kırmızı çizgi */
        linear-gradient(var(--nx-red), var(--nx-red)) 0 100% / 100% 1px no-repeat;
}

.nx-card > .nx-card-band .nx-flag-ico {
    width: 13px;
    height: 13px;
}

.nx-card > .nx-card-band b {
    font: italic 800 12px/1 var(--nx-display);
    font-stretch: 112%;
    letter-spacing: .01em;
}

.nx-card:hover > .nx-card-band {
    box-shadow: none;
}

/* Görselin üstündeki çizgi artık şeridin alt çizgisi — tekrar etmesin */
.nx-card > .nx-card-band + .nx-card-media {
    box-shadow: none;
}

.nx-card > .nx-card-band::before,
.nx-card > .nx-card-band::after {
    left: 18px;
}

/* =====================================================================
   BEST SELLER ŞERİDİ v4 — ince tam genişlik başlık: koyudan kırmızı gün batımına,
   yazının ardında eğik çizgiler, sağda Los Santos silüeti
   (Vinewood tepeleri + tabela, Maze Bank, FIB, merkez, palmiyeler)
   ===================================================================== */
.nx-card > .nx-card-band {
    height: 30px;
    gap: 7px;
    margin: -8px -8px 8px;
    padding: 0 12px;
    border-radius: 15px 15px 0 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40'%3E %3Cdefs%3E %3Cg id='crown'%3E %3Cpath d='M0 0Q-5 -3 -11 1.5Q-5 -1 0 1Z'/%3E %3Cpath d='M0 0Q5 -3 11 1.5Q5 -1 0 1Z'/%3E %3Cpath d='M0 0Q-3.5 -5 -8.5 -5.5Q-3.6 -3.2 0 1Z'/%3E %3Cpath d='M0 0Q3.5 -5 8.5 -5.5Q3.6 -3.2 0 1Z'/%3E %3Cpath d='M0 .2Q-3 2.5 -7 7Q-2 2.8 .6 .9Z'/%3E %3Cpath d='M0 .2Q3 2.5 7 7Q2 2.8 -.6 .9Z'/%3E %3Cpath d='M0 0Q-.6 -4 -1.6 -7Q.4 -4 .8 0Z'/%3E %3C/g%3E %3C/defs%3E %3Cpath fill='%23250c0a' d='M0 40V28C12 21 24 17 38 17C50 17 57 21 65 23C75 25 83 20 95 19C106 18 114 22 122 27V40Z'/%3E %3Cg fill='%23f1f0ec' opacity='.85'%3E %3Crect x='23' y='19.2' width='1.8' height='2.8'/%3E%3Crect x='25.8' y='18.8' width='.9' height='2.8'/%3E %3Crect x='27.7' y='18.4' width='1.8' height='2.8'/%3E%3Crect x='30.5' y='18.1' width='1.6' height='2.8'/%3E %3Crect x='33.1' y='17.9' width='2.2' height='2.8'/%3E%3Crect x='36.3' y='17.9' width='1.8' height='2.8'/%3E %3Crect x='39.1' y='18' width='1.8' height='2.8'/%3E%3Crect x='41.9' y='18.2' width='1.8' height='2.8'/%3E %3C/g%3E %3Cg fill='%231c0807'%3E %3Crect x='92' y='25' width='8' height='15'/%3E %3Cpath d='M100 40V17h3v-3h3v3h3V40Z'/%3E %3Crect x='118' y='15' width='6' height='25'/%3E %3Crect x='135' y='18' width='6' height='22'/%3E %3Cpath d='M150 40V12h2V9h2v3h2V40Z'/%3E %3Crect x='160' y='19' width='7' height='21'/%3E %3Crect x='172' y='24' width='8' height='16'/%3E %3C/g%3E %3Cg fill='%230b0505'%3E %3Crect x='96' y='30' width='7' height='10'/%3E %3Crect x='103' y='25' width='5' height='15'/%3E %3Crect x='108' y='30' width='6' height='10'/%3E %3Cpath d='M114 40V21h1.5v-2h2v2h1.5V40Z'/%3E %3Crect x='119' y='26' width='6' height='14'/%3E %3Cpath d='M125 40V10L133 6V40Z'/%3E %3Crect x='128.6' y='1.5' width='.8' height='6'/%3E %3Cpath d='M133 40V22h2v-2h2v2h1V40Z'/%3E %3Cpath d='M138 40V14H139.5V12H145.5V14H147V40Z'/%3E %3Crect x='142.2' y='8' width='.7' height='4'/%3E %3Crect x='147' y='24' width='6' height='16'/%3E %3Cpath d='M153 40V18L155 16L157 18V40Z'/%3E %3Crect x='157' y='27' width='7' height='13'/%3E %3Crect x='164' y='22' width='5' height='18'/%3E %3Crect x='169' y='30' width='8' height='10'/%3E %3Crect x='177' y='26' width='4' height='14'/%3E %3Crect x='181' y='32' width='10' height='8'/%3E %3Crect x='191' y='35' width='49' height='5'/%3E %3C/g%3E %3Cg fill='%23ffb35c'%3E %3Crect x='116' y='24' width='1' height='1'/%3E%3Crect x='116' y='29' width='1' height='1'/%3E %3Crect x='127' y='13' width='1' height='1'/%3E%3Crect x='130.5' y='18' width='1' height='1'/%3E %3Crect x='127' y='25' width='1' height='1'/%3E%3Crect x='130.5' y='31' width='1' height='1'/%3E %3Crect x='140.5' y='17' width='1' height='1'/%3E%3Crect x='143.5' y='22' width='1' height='1'/%3E %3Crect x='140.5' y='30' width='1' height='1'/%3E%3Crect x='154.5' y='22' width='1' height='1'/%3E %3Crect x='166' y='26' width='1' height='1'/%3E%3Crect x='105' y='29' width='1' height='1'/%3E %3Crect x='149' y='28' width='1' height='1'/%3E %3C/g%3E %3Cg fill='%230b0505'%3E %3Cpath d='M202.4 21.5Q200.6 30 201.2 40H199.6Q199.2 30 201.6 21.3Z'/%3E %3Cuse href='%23crown' transform='translate(202 21)'/%3E %3Cpath d='M220.6 26Q219 32 219.6 40H218.2Q218 32 219.8 25.8Z'/%3E %3Cuse href='%23crown' transform='translate(220.2 25.6) scale(.8)'/%3E %3Cpath d='M233.6 29Q232.6 34 233 40H231.8Q231.6 34 232.8 28.8Z'/%3E %3Cuse href='%23crown' transform='translate(233.2 28.6) scale(.62)'/%3E %3C/g%3E %3C/svg%3E") right 0 bottom 1px / auto 29px no-repeat,
        repeating-linear-gradient(115deg, rgba(227, 52, 47, .95) 0 2px, transparent 2px 6px) 142px 9px / 26px 12px no-repeat,
        radial-gradient(110px 44px at 86% 125%, rgba(255, 190, 120, .55), rgba(255, 100, 60, .22) 50%, transparent 80%),
        linear-gradient(90deg, #130908 0%, #1c0b0a 36%, #571511 64%, #b7301f 100%);
    box-shadow: inset 0 1px 0 rgba(255, 160, 120, .22), inset 0 -1px 0 var(--nx-red);
}

.nx-card:hover > .nx-card-band {
    box-shadow: inset 0 1px 0 rgba(255, 180, 140, .35), inset 0 -1px 0 var(--nx-red);
}

.nx-card > .nx-card-band .nx-flag-ico {
    width: 13px;
    height: 13px;
    color: #ff5a2a;
    filter: drop-shadow(0 0 5px rgba(255, 90, 42, .7));
}

.nx-card > .nx-card-band b {
    font: italic 800 12px/1 var(--nx-display);
    font-stretch: 112%;
    letter-spacing: .01em;
    color: var(--nx-text);
}

/* =====================================================================
   BEST SELLER ŞERİDİ v5 — sağ ucu HUD köşesi gibi çapraz kesik, kartın
   sağ kenarından önce biter (--end). Kesik kenarda da kırmızı çizgi var.
   ===================================================================== */
.nx-card > .nx-card-band {
    --end: 26px;   /* şeridin alt ucu kartın sağından bu kadar önce biter */
    --cut: 24px;   /* çapraz kesimin yatay boyu */
    background:
        /* çapraz kenar çizgisi */
        linear-gradient(to top right, transparent calc(50% - 1.6px), var(--nx-red) calc(50% - 1.6px), var(--nx-red) 50%, transparent 50%) right var(--end) top 0 / var(--cut) 100% no-repeat,
        /* Los Santos silüeti: kesiğin hemen önünde */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40'%3E %3Cdefs%3E %3Cg id='crown'%3E %3Cpath d='M0 0Q-5 -3 -11 1.5Q-5 -1 0 1Z'/%3E %3Cpath d='M0 0Q5 -3 11 1.5Q5 -1 0 1Z'/%3E %3Cpath d='M0 0Q-3.5 -5 -8.5 -5.5Q-3.6 -3.2 0 1Z'/%3E %3Cpath d='M0 0Q3.5 -5 8.5 -5.5Q3.6 -3.2 0 1Z'/%3E %3Cpath d='M0 .2Q-3 2.5 -7 7Q-2 2.8 .6 .9Z'/%3E %3Cpath d='M0 .2Q3 2.5 7 7Q2 2.8 -.6 .9Z'/%3E %3Cpath d='M0 0Q-.6 -4 -1.6 -7Q.4 -4 .8 0Z'/%3E %3C/g%3E %3C/defs%3E %3Cpath fill='%23250c0a' d='M0 40V28C12 21 24 17 38 17C50 17 57 21 65 23C75 25 83 20 95 19C106 18 114 22 122 27V40Z'/%3E %3Cg fill='%23f1f0ec' opacity='.85'%3E %3Crect x='23' y='19.2' width='1.8' height='2.8'/%3E%3Crect x='25.8' y='18.8' width='.9' height='2.8'/%3E %3Crect x='27.7' y='18.4' width='1.8' height='2.8'/%3E%3Crect x='30.5' y='18.1' width='1.6' height='2.8'/%3E %3Crect x='33.1' y='17.9' width='2.2' height='2.8'/%3E%3Crect x='36.3' y='17.9' width='1.8' height='2.8'/%3E %3Crect x='39.1' y='18' width='1.8' height='2.8'/%3E%3Crect x='41.9' y='18.2' width='1.8' height='2.8'/%3E %3C/g%3E %3Cg fill='%231c0807'%3E %3Crect x='92' y='25' width='8' height='15'/%3E %3Cpath d='M100 40V17h3v-3h3v3h3V40Z'/%3E %3Crect x='118' y='15' width='6' height='25'/%3E %3Crect x='135' y='18' width='6' height='22'/%3E %3Cpath d='M150 40V12h2V9h2v3h2V40Z'/%3E %3Crect x='160' y='19' width='7' height='21'/%3E %3Crect x='172' y='24' width='8' height='16'/%3E %3C/g%3E %3Cg fill='%230b0505'%3E %3Crect x='96' y='30' width='7' height='10'/%3E %3Crect x='103' y='25' width='5' height='15'/%3E %3Crect x='108' y='30' width='6' height='10'/%3E %3Cpath d='M114 40V21h1.5v-2h2v2h1.5V40Z'/%3E %3Crect x='119' y='26' width='6' height='14'/%3E %3Cpath d='M125 40V10L133 6V40Z'/%3E %3Crect x='128.6' y='1.5' width='.8' height='6'/%3E %3Cpath d='M133 40V22h2v-2h2v2h1V40Z'/%3E %3Cpath d='M138 40V14H139.5V12H145.5V14H147V40Z'/%3E %3Crect x='142.2' y='8' width='.7' height='4'/%3E %3Crect x='147' y='24' width='6' height='16'/%3E %3Cpath d='M153 40V18L155 16L157 18V40Z'/%3E %3Crect x='157' y='27' width='7' height='13'/%3E %3Crect x='164' y='22' width='5' height='18'/%3E %3Crect x='169' y='30' width='8' height='10'/%3E %3Crect x='177' y='26' width='4' height='14'/%3E %3Crect x='181' y='32' width='10' height='8'/%3E %3Crect x='191' y='35' width='49' height='5'/%3E %3C/g%3E %3Cg fill='%23ffb35c'%3E %3Crect x='116' y='24' width='1' height='1'/%3E%3Crect x='116' y='29' width='1' height='1'/%3E %3Crect x='127' y='13' width='1' height='1'/%3E%3Crect x='130.5' y='18' width='1' height='1'/%3E %3Crect x='127' y='25' width='1' height='1'/%3E%3Crect x='130.5' y='31' width='1' height='1'/%3E %3Crect x='140.5' y='17' width='1' height='1'/%3E%3Crect x='143.5' y='22' width='1' height='1'/%3E %3Crect x='140.5' y='30' width='1' height='1'/%3E%3Crect x='154.5' y='22' width='1' height='1'/%3E %3Crect x='166' y='26' width='1' height='1'/%3E%3Crect x='105' y='29' width='1' height='1'/%3E %3Crect x='149' y='28' width='1' height='1'/%3E %3C/g%3E %3Cg fill='%230b0505'%3E %3Cpath d='M202.4 21.5Q200.6 30 201.2 40H199.6Q199.2 30 201.6 21.3Z'/%3E %3Cuse href='%23crown' transform='translate(202 21)'/%3E %3Cpath d='M220.6 26Q219 32 219.6 40H218.2Q218 32 219.8 25.8Z'/%3E %3Cuse href='%23crown' transform='translate(220.2 25.6) scale(.8)'/%3E %3Cpath d='M233.6 29Q232.6 34 233 40H231.8Q231.6 34 232.8 28.8Z'/%3E %3Cuse href='%23crown' transform='translate(233.2 28.6) scale(.62)'/%3E %3C/g%3E %3C/svg%3E") right calc(var(--end) + var(--cut) - 4px) bottom 1px / auto 29px no-repeat,
        radial-gradient(110px 44px at calc(100% - 110px) 125%, rgba(255, 190, 120, .55), rgba(255, 100, 60, .22) 50%, transparent 80%),
        linear-gradient(90deg, #130908 0%, #1c0b0a 36%, #571511 64%, #b7301f 100%);
    box-shadow: inset 0 1px 0 rgba(255, 160, 120, .22), inset 0 -1px 0 var(--nx-red);
    clip-path: polygon(0 0, calc(100% - var(--end) - var(--cut)) 0, calc(100% - var(--end)) 100%, 0 100%);
}

/* =====================================================================
   Best seller kartı: şeridin çapraz kesiği kartın kendisinde de devam eder
   → kartın sağ üst köşesi aynı açıyla kesik (52px üstte → 65px sağ kenarda),
   kesik kenar boyunca kırmızı çizgi.
   ===================================================================== */
.nx-card:has(> .nx-card-band) {
    clip-path: polygon(0 0, calc(100% - 52px) 0, 100% 65px, 100% 100%, 0 100%);
}

.nx-card:has(> .nx-card-band)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    width: 52px;
    height: 65px;
    pointer-events: none;
    background: linear-gradient(to top right, transparent calc(50% - 1.6px), var(--nx-red) calc(50% - 1.6px), var(--nx-red) 50%, transparent 50%);
}

/* =====================================================================
   Best seller kartı — tek, temiz HUD köşesi: şerit kartın sağ kenarına kadar
   gider; kartın sağ üst köşesi şeridin çapraz kesiğiyle aynı çizgiden kesilir.
   (önceki uzun kesik ve ikinci çizgi kaldırıldı)
   ===================================================================== */
.nx-card > .nx-card-band {
    --end: 0px;
}

.nx-card:has(> .nx-card-band) {
    clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 31px, 100% 100%, 0 100%);
}

.nx-card:has(> .nx-card-band)::after {
    content: none;
}

/* Windows 11 (Fluent 3D) emojileri — theme.js → initEmoji */
.nx-emoji {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    margin: 0 .05em;
    vertical-align: -.25em;
    object-fit: contain;
    user-select: none;
}

.nx-pfeat-ico .nx-emoji,
.nx-feat-ico .nx-emoji {
    width: 24px;
    height: 24px;
    margin: 0;
    vertical-align: middle;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
}

.nx-feat-ico .nx-emoji {
    width: 20px;
    height: 20px;
}

/* Açıklamadaki resimler galeriye taşındığı için gizli — emojiler hariç */
.nx-prose img.nx-emoji {
    display: inline-block;
}
/* Öne çıkan panel etiketi: best seller slaytında alev + "Best seller" */
.nx-feature-tag .nx-tag-flame {
    display: inline-grid;
    place-items: center;
}

.nx-feature-tag .nx-flag-ico {
    width: 14px;
    height: 14px;
    color: #ff5a2a;
    filter: drop-shadow(0 0 5px rgba(255, 90, 42, .7));
}

.nx-feature-tag.is-best {
    border-color: rgba(227, 52, 47, .55);
}
/* Mobil düzeltme: öne çıkan panelin iç çerçevesi slayt şeridinin toplam genişliği kadar
   genişleyip hero'yu taşırıyordu → çerçeve ve ızgara sütunu küçülebilsin */
.nx-feature,
.nx-feature-frame,
.nx-feature-slot {
    min-width: 0;
}

@media (max-width: 1080px) {
    .nx-feature,
    .nx-feature-frame,
    .nx-feature-slot {
        max-width: 100%;
    }
}

@media (max-width: 1080px) {
    .nx-hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Mobil: panel üstündeki etiket ve sayaç tek satırda, içerik kadar geniş */
.nx-feature-overlay > *,
.nx-feature-tag,
.nx-feature-count,
.nx-feature-nav {
    flex: none;
    width: auto;
    white-space: nowrap;
}
/* Mobil: filtre şeridi kaydırılır, butonlar küçülmez (sayılar logolarla çakışmasın) */
.nx-filters .nx-filter {
    flex: none;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .nx-filters {
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .nx-filters::-webkit-scrollbar {
        display: none;
    }

    /* "Home / Catalogue / Scripts" tek satır */
    .nx-crumbs {
        flex-wrap: nowrap;
        overflow: hidden;
        white-space: nowrap;
    }
}
/* mobile-fixes.css dokunmatikte her link/butona min 44x44 veriyor → temanın satır içi küçük
   linklerini (breadcrumb, footer, açıklama içi) bozuyordu; onları muaf tut */
@media (pointer: coarse) {
    .nx-crumbs a,
    .nx-prose a,
    .nx-faq-body a,
    .nx-footer a,
    .nx-link-arrow {
        min-width: 0 !important;
        min-height: 0 !important;
    }
}
/* Breadcrumb: linkler/ayraçlar küçülmez, sadece son öğe (ürün adı) kısalır */
.nx-crumbs > * {
    flex: none;
}

.nx-crumbs > :last-child {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Menüdeki piksel kedi (theme.js → initNavCat) — menünün alt çizgisinde gezer */
.nx-nav-inner {
    position: relative;
}

.nx-navcat {
    position: absolute;
    left: 0;
    bottom: 0; /* ayaklar menünün alt çizgisinde — dışarı taşmaz */
    z-index: 0;
    pointer-events: none;
    image-rendering: pixelated;
}

.nx-nav-inner > :not(.nx-navcat, .nx-navcat-hit, .nx-navcat-say) {
    position: relative;
    z-index: 1;
}
/* Kedi menü yazılarının altından geçerken yazılar net kalsın */
.nx-link > span {
    text-shadow: 0 0 3px var(--nx-bg), 0 0 6px var(--nx-bg), 0 1px 0 var(--nx-bg);
}

/* Kediye tıklama alanı + piksel konuşma balonu */
.nx-nav-inner > .nx-navcat-hit {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.nx-navcat-hit:focus-visible {
    outline: 2px dashed var(--nx-red);
    outline-offset: 2px;
}

.nx-nav-inner > .nx-navcat-say {
    --px: 2px;
    --ink: #f1f0ec;
    position: absolute;
    bottom: 40px; /* kedinin başının üstü */
    z-index: 4;
    display: none;
    pointer-events: none;
    filter: drop-shadow(var(--px) var(--px) 0 var(--nx-red));
}

.nx-navcat-say.is-on {
    display: block;
    animation: nx-say 2.8s steps(1) both;
}

/* Piksel köşeli kutu */
.nx-navcat-say span {
    display: block;
    padding: 6px 9px 5px;
    background: var(--ink);
    color: #0a0a0a;
    font: 8px/1.2 'Press Start 2P', var(--nx-mono);
    letter-spacing: 0;
    white-space: nowrap;
    clip-path: polygon(
        var(--px) 0, calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px),
        100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)) 100%,
        var(--px) 100%, var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px)), 0 var(--px), var(--px) var(--px)
    );
}

/* Kuyruk: kademeli piksel üçgen (6-4-2 px), başın üstüne iner */
.nx-navcat-say::after {
    content: "";
    position: absolute;
    top: 100%;
    left: var(--tail, 50%);
    width: 6px;
    height: 6px;
    transform: translateX(-2px);
    background:
        linear-gradient(var(--ink), var(--ink)) 0 0 / 6px 2px no-repeat,
        linear-gradient(var(--ink), var(--ink)) 0 2px / 4px 2px no-repeat,
        linear-gradient(var(--ink), var(--ink)) 0 4px / 2px 2px no-repeat;
}

@keyframes nx-say {
    0% { transform: scale(.4); opacity: 0; }
    4% { transform: scale(.7); opacity: 1; }
    8% { transform: scale(1); }
    92% { transform: scale(1); opacity: 1; }
    96% { transform: scale(.7); }
    100% { transform: scale(.4); opacity: 0; }
}

.nx-navcat-say.is-on {
    transform-origin: var(--tail, 50%) 100%;
}
/* Spam sonrası küs: imleç normal */
.nx-nav-inner > .nx-navcat-hit.is-ignoring {
    cursor: default;
}
/* Telefonda menü alçak: balon menünün ALTINDA çıkar, kuyruk yukarı (kediye) bakar */
@media (max-width: 760px) {
    .nx-nav-inner > .nx-navcat-say {
        top: calc(100% + 10px);
        bottom: auto;
    }

    .nx-nav-inner > .nx-navcat-say::after {
        top: auto;
        bottom: 100%;
        transform: translateX(-2px) scaleY(-1);
    }

    .nx-navcat-say.is-on {
        transform-origin: var(--tail, 50%) 0;
    }
}