/* NexHost — light / dark theme tokens */
:root {
    color-scheme: light;
    --font: "Outfit", system-ui, sans-serif;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 18px 50px -20px rgb(15 23 42 / 0.18);
    --shadow-sm: 0 8px 24px -12px rgb(15 23 42 / 0.12);

    --bg: #f4f6fb;
    --bg-elevated: #ffffff;
    --text: #0f172a;
    --text-muted: #64748b;
    --border: rgb(15 23 42 / 0.08);
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --accent: #06b6d4;
    --accent-2: #8b5cf6;
    --card: #ffffff;
    --hero-mesh-1: rgb(37 99 235 / 0.12);
    --hero-mesh-2: rgb(6 182 212 / 0.1);
    --hero-mesh-3: rgb(139 92 246 / 0.08);
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b0f17;
    --bg-elevated: #121826;
    --text: #e8edf5;
    --text-muted: #94a3b8;
    --border: rgb(255 255 255 / 0.08);
    --primary: #3b82f6;
    --primary-hover: #60a5fa;
    --accent: #22d3ee;
    --accent-2: #a78bfa;
    --card: #151c2c;
    --shadow: 0 24px 60px -20px rgb(0 0 0 / 0.55);
    --shadow-sm: 0 12px 32px -16px rgb(0 0 0 / 0.45);
    --hero-mesh-1: rgb(59 130 246 / 0.2);
    --hero-mesh-2: rgb(34 211 238 / 0.12);
    --hero-mesh-3: rgb(167 139 250 / 0.15);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    transition: background-color 0.35s ease, color 0.35s ease;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.container {
    width: min(1120px, 100% - clamp(1.25rem, 5vw, 2rem));
    margin-inline: auto;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .container {
        width: min(1120px, 100% - clamp(1rem, 4.5vw, 1.5rem));
    }
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: #fff;
    z-index: 1000;
    border-radius: var(--radius-sm);
}

.skip-link:focus {
    left: 0.5rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.35rem;
    min-height: 4rem;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text);
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
}

.logo:hover {
    text-decoration: none;
}

.logo-mark {
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow: 0 4px 14px rgb(37 99 235 / 0.35);
}

.logo-mark.small {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.35rem;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 1px;
    transition: transform 0.22s ease, opacity 0.18s ease;
    transform-origin: center;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.site-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: start;
    gap: 0.9rem;
    flex: 1;
    min-width: 0;
}

.nav-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem 1.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-list a {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.9375rem;
    text-decoration: none;
}

.nav-list a:hover {
    color: var(--text);
    text-decoration: none;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 0;
    flex-shrink: 0;
    justify-self: end;
}

.nav-user-menu {
    position: relative;
}

.nav-user-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.4rem 0.64rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 91%, transparent);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.nav-user-trigger:hover {
    border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
    background: color-mix(in srgb, var(--card) 80%, var(--bg));
}

.nav-user-menu.is-open .nav-user-trigger {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

.nav-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.86rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--accent) 74%, var(--primary)));
}

.nav-user-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    line-height: 1.14;
}

.nav-user-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-user-balance {
    margin-top: 0.15rem;
    font-size: 11px;
    color: var(--text-muted);
}

.nav-user-caret {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--text-muted);
    margin-left: 0.12rem;
    transition: transform 0.2s ease;
}

.nav-user-menu.is-open .nav-user-caret {
    transform: rotate(180deg);
}

/* —— Hesabım: sağdan panel (referans: koyu çekmece, gradient kart) —— */
.nav-account-layer {
    position: fixed;
    inset: 0;
    z-index: 10050;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0.28s ease;
}

.nav-account-layer.is-open {
    pointer-events: auto;
    visibility: visible;
}

.nav-account-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.52);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.nav-account-layer.is-open .nav-account-backdrop {
    opacity: 1;
}

.nav-account-drawer {
    position: absolute;
    top: 0;
    right: 0;
    width: min(100%, 22.5rem);
    max-width: 100%;
    height: 100%;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #0f111a;
    color: #f4f6ff;
    border-left: 1px solid rgba(80, 110, 255, 0.22);
    box-shadow: -28px 0 80px rgba(0, 0, 0, 0.55);
    transform: translateX(104%);
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-account-layer.is-open .nav-account-drawer {
    transform: translateX(0);
}

.nav-account-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.05rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.nav-account-drawer-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.nav-account-drawer-title-ico {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.55rem;
    background: linear-gradient(135deg, #3d5cff, #6366f1);
    color: #fff;
}

.nav-account-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.65);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-account-drawer-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.nav-account-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.05rem 1.25rem;
    -webkit-overflow-scrolling: touch;
}

.nav-account-profile {
    position: relative;
    border-radius: 1rem;
    padding: 1rem 1rem 0.85rem;
    margin-bottom: 1.1rem;
    overflow: hidden;
    background: linear-gradient(130deg, rgb(15 17 26), rgb(27 29 40) 45%, rgb(13 13 13 / 20%));
    border: 1px solid rgb(44 44 44 / 35%);
}

.nav-account-profile-glow {
    position: absolute;
    top: -40%;
    right: -20%;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(120, 170, 255, 0.45), transparent 65%);
    pointer-events: none;
}

.nav-account-profile-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.nav-account-avatar {
    width: 52px;
    height: 52px;
    border-radius: 0.65rem;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.2);
}

.nav-account-username {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.nav-account-bal-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 0fr;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.nav-account-bal-box {
    border-radius: 0.65rem;
    padding: 0.55rem 0.5rem;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-account-bal-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(244, 246, 255, 0.55);
    margin-bottom: 0.35rem;
}

.nav-account-eye {
    display: inline-flex;
    padding: 0.1rem;
    border: 0;
    background: transparent;
    color: rgba(244, 246, 255, 0.55);
    cursor: pointer;
    border-radius: 0.25rem;
}

.nav-account-eye:hover {
    color: #fff;
}

.nav-account-bal-val {
    display: block;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.nav-account-bal-val--muted {
    color: rgba(244, 246, 255, 0.72);
    font-weight: 700;
}

.nav-account-drawer.is-balance-masked .nav-account-bal-val {
    letter-spacing: 0.18em;
    font-size: 0.88rem;
}

.nav-account-topup {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.nav-account-topup:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(120, 140, 255, 0.35);
    color: #fff;
    text-decoration: none;
}

.nav-account-topup-ico {
    display: grid;
    place-items: center;
    color: rgba(180, 200, 255, 0.95);
}

.nav-account-chev {
    margin-left: auto;
    font-size: 1.15rem;
    opacity: 0.65;
}

.nav-account-section-kicker {
    margin: 1rem 0 0.45rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(244, 246, 255, 0.38);
}

.nav-account-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.nav-account-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.62rem 0.55rem;
    border-radius: 0.65rem;
    text-decoration: none;
    color: #f4f6ff;
    font-size: 13px;
    transition: background 0.15s ease;
}

.nav-account-item:hover {
    background: rgba(80, 110, 255, 0.14);
    color: #fff;
    text-decoration: none;
}

.nav-account-item-ico {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    flex-shrink: 0;
    color: #5b7cff;
}

.nav-account-item-ico svg {
    display: block;
}

.nav-account-item-txt {
    flex: 1;
    min-width: 0;
}

.nav-account-item-chev {
    color: rgba(244, 246, 255, 0.35);
    font-size: 1.1rem;
}

.nav-account-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1.15rem;
    padding: 0.72rem 1rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.12);
    color: #fecaca;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.nav-account-logout:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.65);
    color: #fff;
    text-decoration: none;
}

.nav-account-logout-ico {
    color: #f87171;
}

body.is-nav-account-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .nav-account-drawer,
    .nav-account-backdrop,
    .nav-account-layer {
        transition-duration: 0.01ms !important;
    }
}

.btn-theme {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    display: grid;
    place-items: center;
    color: var(--text);
    transition: transform 0.15s ease, border-color 0.2s;
}

.btn-theme .nav-theme-icons {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}

.btn-theme .nav-theme-icons .icon-sun,
.btn-theme .nav-theme-icons .icon-moon {
    grid-area: 1 / 1;
}

.btn-theme .nav-theme-label {
    display: none;
}

.btn-theme:hover {
    transform: scale(1.05);
}

[data-theme="light"] .btn-theme .icon-moon {
    display: none;
}

[data-theme="dark"] .btn-theme .icon-sun {
    display: none;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.25rem;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.btn:hover {
    text-decoration: none;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-block {
    width: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--accent) 70%, var(--primary)));
    color: #fff;
    box-shadow: 0 8px 24px rgb(37 99 235 / 0.35);
}

.btn-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}

.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-ghost:hover {
    background: color-mix(in srgb, var(--text) 6%, transparent);
}

/* Hero */
.hero {
    position: relative;
    padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(3rem, 6vw, 4rem);
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 70% 0%, var(--hero-mesh-1), transparent 55%),
        radial-gradient(ellipse 60% 50% at 10% 80%, var(--hero-mesh-2), transparent 50%),
        radial-gradient(ellipse 50% 40% at 90% 90%, var(--hero-mesh-3), transparent 45%);
    pointer-events: none;
}

.hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

@media (max-width: 900px) {
    .hero-inner {
        grid-template-columns: 1fr;
    }
}

.eyebrow {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 0.75rem;
}

.hero h1 {
    font-size: clamp(2rem, 4.5vw, 2.85rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
}

.gradient-text {
    background: linear-gradient(105deg, var(--primary), var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.lead {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin: 0 0 1.5rem;
    max-width: 36ch;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.hero-stats strong {
    display: block;
    color: var(--text);
    font-size: 1.1rem;
}

.hero-card {
    display: flex;
    justify-content: center;
}

.mock-panel {
    width: min(100%, 380px);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.mock-header {
    display: flex;
    gap: 6px;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 50%, var(--card));
}

.mock-header span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: 0.35;
}

.mock-body {
    padding: 1.25rem;
}

.mock-line {
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--border), transparent);
    margin-bottom: 0.65rem;
}

.mock-line.w-80 {
    width: 80%;
}

.mock-line.w-60 {
    width: 60%;
}

.mock-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.mock-chips span {
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    font-weight: 500;
}

[data-theme="dark"] .mock-chips span {
    background: rgb(59 130 246 / 0.2);
    color: #93c5fd;
}

/* Sections */
.section {
    padding: clamp(3rem, 6vw, 4.5rem) 0;
}

.section-alt {
    background: color-mix(in srgb, var(--text) 3%, var(--bg));
}

.section-head {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 2.5rem;
}

.section-head h2 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.6rem, 3vw, 2rem);
    letter-spacing: -0.02em;
}

.section-head p {
    margin: 0;
    color: var(--text-muted);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}

.pricing-grid.three {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
    .pricing-grid,
    .pricing-grid.three {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-inline: auto;
    }
}

.price-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.price-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
}

.price-card.featured {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    box-shadow: var(--shadow);
}

.badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--primary), var(--accent-2));
    color: #fff;
}

.price-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
}

.price {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
    letter-spacing: -0.02em;
}

.price .currency {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.85;
    vertical-align: super;
}

.price .period {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
}

.specs {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.specs li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
}

.specs li:last-child {
    border-bottom: none;
}

.specs li::before {
    content: "✓";
    color: var(--accent);
    font-weight: 700;
    margin-right: 0.5rem;
}

.price-card.compact .price {
    font-size: 1.65rem;
}

.fine-print {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 1.5rem;
}

/* TS3 */
.ts3-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

@media (max-width: 900px) {
    .ts3-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-inline: auto;
    }
}

.ts3-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem 1.5rem;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.ts3-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

.ts3-card.highlight {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 8%, var(--card)), var(--card));
}

.ts3-icon {
    font-size: 1.5rem;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.ts3-card h3 {
    margin: 0 0 0.25rem;
}

.price-inline {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.price-inline span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* Domain */
.section-domain {
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, var(--bg)), var(--bg));
}

.domain-form {
    max-width: 640px;
    margin: 0 auto;
}

.domain-input-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.domain-input-wrap input {
    flex: 1 1 200px;
    min-height: 3rem;
    padding: 0 1.1rem;
    font-family: inherit;
    font-size: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text);
}

.domain-input-wrap input:focus {
    outline: 2px solid color-mix(in srgb, var(--primary) 50%, transparent);
    outline-offset: 2px;
}

.domain-input-wrap .btn {
    min-height: 3rem;
    padding-inline: 1.5rem;
}

.domain-result {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--card);
    font-size: 0.95rem;
}

.domain-result.is-ok {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.domain-result.is-warn {
    border-color: color-mix(in srgb, #f59e0b 40%, var(--border));
}

.domain-result.is-err {
    border-color: color-mix(in srgb, #ef4444 35%, var(--border));
}

/* Features */
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.features-grid.features-rich {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.35rem;
    max-width: 1100px;
    margin-inline: auto;
}

@media (max-width: 900px) {
    .features-grid.features-rich {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .features-grid {
        grid-template-columns: 1fr;
    }

    .features-grid.features-rich {
        grid-template-columns: 1fr;
    }
}

.feature-card {
    padding: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--card);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.feature-card:hover {
    border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
}

.feature-card-rich {
    padding: 1.35rem 1.25rem 1.4rem;
    background: linear-gradient(165deg, color-mix(in srgb, var(--card) 92%, var(--bg)), var(--card));
}

.feature-card-rich:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.feature-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    margin-bottom: 0.85rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
}

.feature-icon {
    font-size: 1.35rem;
    line-height: 1;
    display: block;
}

.feature-card-rich h3 {
    margin: 0 0 0.45rem;
    font-size: 1.02rem;
    line-height: 1.3;
}

.feature-card-rich p {
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
    line-height: 1.5;
}

.feature-bullets {
    margin: 0;
    padding: 0 0 0 1.1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.feature-bullets li {
    margin-bottom: 0.25rem;
}

.feature-bullets a {
    font-weight: 600;
}

.feature-card:not(.feature-card-rich) .feature-icon {
    font-size: 1.75rem;
    display: block;
    margin-bottom: 0.75rem;
}

.feature-card:not(.feature-card-rich) h3 {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
}

.feature-card:not(.feature-card-rich) p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.why-nexhost .section-head p {
    max-width: 36rem;
    margin-inline: auto;
}

/* Footer */
.site-footer {
    padding: 3rem 0 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--bg-elevated);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (max-width: 700px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

.footer-brand p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0.5rem 0 0;
    max-width: 32ch;
}

.footer-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.75rem;
    color: var(--text-muted);
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.footer-links li {
    margin-bottom: 0.4rem;
}

.footer-links a {
    color: inherit;
}

.footer-bottom {
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.footer-bottom p {
    margin: 0;
}

/* Mobil / tablet ana menü — ≤1199px (dar masaüstünde yatay menü sarmasını önler), drawer + backdrop */
.site-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: color-mix(in srgb, var(--text) 42%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

body.is-site-nav-open .site-nav-backdrop {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.is-site-nav-open .site-header-main {
    z-index: 1010;
}

body.is-site-nav-open {
    overflow: hidden;
}

@media (min-width: 1200px) {
    .site-nav-drawer-head {
        display: none !important;
    }
}

@media (max-width: 1199px) {
    :root {
        --mobile-header-h: 4.15rem;
    }

    .site-nav-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        flex-shrink: 0;
        padding: 0.2rem 0.15rem 0.85rem;
        margin: 0 0 0.35rem;
        border-bottom: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
    }

    .site-nav-drawer-kicker {
        margin: 0;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .site-nav-drawer-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 0.65rem;
        background: color-mix(in srgb, var(--bg) 40%, var(--card));
        color: var(--text);
        font-size: 1.35rem;
        line-height: 1;
        cursor: pointer;
        transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
    }

    .site-nav-drawer-close:hover {
        background: color-mix(in srgb, var(--primary) 12%, var(--card));
        border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    }

    .site-nav-drawer-close:active {
        transform: scale(0.97);
    }

    .site-nav-backdrop {
        inset: 0;
        top: 0;
        z-index: 1045;
    }

    .site-header.site-header-main {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1010;
        overflow: visible;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.public-site {
        padding-top: calc(var(--mobile-header-h) + env(safe-area-inset-top, 0px));
    }

    .site-header .header-inner {
        min-height: var(--mobile-header-h);
        gap: 0.65rem;
        flex-wrap: nowrap;
    }

    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 2.75rem;
        min-height: 2.75rem;
        z-index: 2;
        margin-left: auto;
    }

    .header-inner .logo {
        min-width: 0;
        flex: 1;
    }

    .header-inner .logo-text {
        min-width: 0;
        max-width: min(58vw, 14rem);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .site-nav {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 100dvh;
        max-height: none;
        margin: 0;
        box-sizing: border-box;
        flex-direction: column;
        align-items: stretch;
        align-content: stretch;
        gap: 0;
        padding-top: max(0.65rem, env(safe-area-inset-top, 0px));
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
        padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
        background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--card) 98%, var(--primary) 2%) 0%,
            color-mix(in srgb, var(--card) 94%, var(--bg) 6%) 45%,
            color-mix(in srgb, var(--bg) 88%, var(--card) 12%) 100%
        );
        border: none;
        border-radius: 0;
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(100%);
        transition: opacity 0.26s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.26s ease;
        z-index: 1100;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .site-nav.is-open {
        display: flex;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
    }

    .nav-list-main {
        align-items: stretch;
        flex: 0 1 auto;
        min-height: 0;
        width: 100%;
        max-width: 100%;
        max-height: min(56dvh, calc(100dvh - 14.5rem));
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
    }

    .nav-list {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.45rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .nav-list-main > li {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        list-style: none;
        border-radius: 0.95rem;
        margin: 0;
        background: color-mix(in srgb, var(--card) 90%, var(--bg));
        box-shadow: 0 1px 0 color-mix(in srgb, #fff 4%, transparent) inset;
    }

    .nav-list-main > li:last-child {
        margin-bottom: 0;
    }

    .nav-list-main > li > a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-height: 3.15rem;
        padding: 0.8rem 1rem;
        font-size: 1.02rem;
        font-weight: 600;
        color: var(--text);
        border-bottom: none;
        text-align: left;
        border-radius: inherit;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .nav-list-main > li > a:active {
        background: color-mix(in srgb, var(--primary) 10%, transparent);
    }

    .nav-mega-wrap {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
    }

    .nav-mega-btn {
        display: flex;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        min-height: 3.15rem;
        padding: 0.8rem 1rem;
        text-align: left;
        font-size: 1.02rem;
        font-weight: 600;
        color: var(--text);
        border-radius: inherit;
        background: transparent;
        border: none;
        transition: background 0.15s ease, border-color 0.15s ease;
    }

    .nav-mega-wrap.is-open .nav-mega-btn {
        background: color-mix(in srgb, var(--primary) 8%, transparent);
    }

    .nav-mega-btn .nav-badge {
        margin-left: auto;
        font-size: 0.52rem;
        padding: 0.11rem 0.34rem;
    }

    .nav-mega-btn .nav-caret {
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }

    .nav-mega-wrap.is-open .nav-mega-btn .nav-caret {
        transform: rotate(180deg);
    }

    .mega-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .mega-item {
        min-height: 3.25rem;
        padding: 0.9rem 1rem;
        border-radius: 0.85rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .site-header-main .nav-mega-wrap .mega-panel {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .nav-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        align-content: stretch;
        gap: 0.5rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin-top: 0.65rem;
        flex: 0 0 auto;
        flex-shrink: 0;
        padding-top: 0.75rem;
        border-top: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
        text-align: left;
        position: relative;
        padding-bottom: 0.15rem;
    }

    .nav-actions .btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        justify-content: flex-start;
        text-align: left;
        padding-left: 1rem;
        padding-right: 1rem;
        min-height: 3rem;
        font-weight: 600;
        border-radius: 0.95rem;
    }

    .site-header-main .nav-actions .btn-theme {
        align-self: stretch;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 3.15rem;
        padding: 0.8rem 1rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0.75rem;
        border-radius: 0.95rem;
        border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
        background: color-mix(in srgb, var(--card) 90%, var(--bg));
        font-size: 1.02rem;
        font-weight: 600;
        box-sizing: border-box;
        place-items: unset;
    }

    .site-header-main .nav-actions .btn-theme:hover {
        transform: none;
        background: color-mix(in srgb, var(--primary) 9%, var(--card));
        border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
    }

    .site-header-main .nav-actions .btn-theme .nav-theme-icons {
        display: grid;
        place-items: center;
        width: 2.35rem;
        height: 2.35rem;
        flex-shrink: 0;
        border-radius: 0.65rem;
        background: color-mix(in srgb, var(--bg) 45%, var(--card));
        border: 1px solid var(--border);
        font-size: 1.05rem;
        grid-area: unset;
    }

    .site-header-main .nav-actions .btn-theme .nav-theme-label {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0.12rem;
        text-align: left;
        line-height: 1.2;
        min-width: 0;
    }

    .site-header-main .nav-actions .btn-theme .nav-theme-title {
        font-size: 1.02rem;
        font-weight: 600;
        color: var(--text);
        letter-spacing: -0.01em;
    }

    .site-header-main .nav-actions .btn-theme .nav-theme-desc {
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--text-muted);
        letter-spacing: 0.01em;
    }

    .nav-user-menu {
        width: 100%;
    }

    .nav-user-trigger {
        width: 100%;
        border-radius: var(--radius-sm);
        justify-content: flex-start;
        min-height: 3rem;
        padding: 0.5rem 0.7rem;
        gap: 0.55rem;
    }

    .nav-user-name {
        max-width: 100%;
    }

}

@media (max-width: 1199px) and (prefers-reduced-motion: reduce) {
    .site-nav,
    .site-nav-backdrop {
        transition-duration: 0.01ms;
    }

    .nav-toggle span {
        transition: none;
    }
}

/* —— Hero sağ görsel (renk token’ları değişmeden) —— */
.hero-visual {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-orbit {
    position: absolute;
    inset: -10% -5%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 55%),
        radial-gradient(circle at 70% 60%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 50%);
    filter: blur(2px);
    opacity: 0.9;
}

.hero-visual-stack {
    position: relative;
    width: min(100%, 400px);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.hero-glass {
    background: color-mix(in srgb, var(--card) 82%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-sm);
}

.hero-glass-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.hero-mini-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 64px;
    margin: 0.65rem 0;
}

.hero-mini-bars span {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--accent), var(--primary));
    opacity: 0.85;
    min-height: 12px;
}

.hero-glass-meta {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.hero-glass-row {
    font-size: 0.85rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
}

.hero-glass-row:last-child {
    border-bottom: none;
}

.hero-glass-row em {
    font-style: normal;
    color: var(--accent);
    font-weight: 600;
}

.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.45rem;
}

.dot-g {
    background: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

.dot-y {
    background: #eab308;
    box-shadow: 0 0 0 3px rgb(234 179 8 / 0.25);
}

.hero-ring-wrap {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 0.75rem;
}

.hero-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.hero-ring-bg {
    stroke: var(--border);
}

.hero-ring-fg {
    stroke: url(#heroGrad);
    stroke-linecap: round;
}

.hero-glass-bottom .hero-ring-wrap svg defs {
    display: none;
}

.hero-ring-fg {
    stroke: var(--primary);
}

.hero-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-ring-text strong {
    font-size: 1.15rem;
    line-height: 1;
}

.hero-ring-text small {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.hero-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hero-chip-list li {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 40%, var(--card));
}

.section-head-wide {
    max-width: 720px;
}

/* VDS satır paketleri (Keyubu tarzı liste) */
.vds-rows {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.vds-row {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.35rem 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.vds-row:hover {
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}

.vds-row.is-popular {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}

.vds-popular-tag {
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--primary), var(--accent-2));
    color: #fff;
}

.vds-row-head h3 {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
}

.vds-row-sub {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.vds-row-body {
    display: grid;
    grid-template-columns: 1fr 1.4fr minmax(160px, 200px);
    gap: 1.25rem;
    margin-top: 1.1rem;
    align-items: start;
}

@media (max-width: 900px) {
    .vds-row-body {
        grid-template-columns: 1fr;
    }

    .vds-popular-tag {
        position: static;
        display: inline-block;
        margin-bottom: 0.5rem;
    }
}

.vds-spec-label {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.vds-cpu-lines {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.vds-spec-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem 1rem;
}

.vds-spec-grid > div {
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 35%, var(--card));
}

.vds-num {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
}

.vds-cap {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.vds-row-price {
    text-align: right;
}

@media (max-width: 900px) {
    .vds-row-price {
        text-align: left;
    }
}

.vds-discount {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #ea580c;
    margin-bottom: 0.25rem;
}

[data-theme="dark"] .vds-discount {
    color: #fb923c;
}

.vds-price-main {
    margin: 0 0 0.85rem;
    font-size: 1.65rem;
    font-weight: 700;
}

.vds-price-main .period {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* TS3 yatay kart şeridi */
.ts3-section .ts3-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.15rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.ts3-card-h {
    flex: 0 0 min(300px, 85vw);
    scroll-snap-align: start;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.ts3-card-h.is-featured {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    box-shadow: var(--shadow);
}

.ts3-card-img-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    background: color-mix(in srgb, var(--text) 6%, var(--bg));
}

.ts3-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ts3-card-ph {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 20%, var(--card)), var(--card));
}

.ts3-tier-badge {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg) 15%, rgb(0 0 0 / 0.65));
    color: #fff;
    backdrop-filter: blur(6px);
}

.ts3-card-body {
    padding: 1.1rem 1.15rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ts3-card-body h2,
.ts3-card-body h3 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.ts3-card-desc {
    margin: 0 0 0.65rem;
    font-size: 0.88rem;
    color: var(--text-muted);
    flex: 1;
}

.ts3-inline-specs {
    list-style: none;
    margin: 0 0 0.85rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.ts3-inline-specs li strong {
    color: var(--text);
}

.ts3-card-price {
    margin-bottom: 0.75rem;
}

.ts3-old {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-right: 0.5rem;
}

.ts3-now {
    font-size: 1.35rem;
    font-weight: 700;
}

.ts3-now small {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
}

.muted {
    color: var(--text-muted);
}

/* Auth sayfaları */
.auth-page {
    padding: clamp(2rem, 6vw, 4rem) 0;
    min-height: 50vh;
}

.auth-page--modern {
    position: relative;
    min-height: calc(100vh - 5rem);
    padding: clamp(2.5rem, 8vw, 4.5rem) 0;
    overflow: hidden;
}

.auth-page-bg {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 70%;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 55% at 15% 20%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 55%),
        radial-gradient(ellipse 60% 50% at 85% 10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 50%),
        radial-gradient(ellipse 50% 40% at 50% 90%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 45%);
    opacity: 0.9;
}

[data-theme="dark"] .auth-page-bg {
    opacity: 0.55;
}

.auth-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 4vw, 2.75rem);
    align-items: center;
}

@media (min-width: 900px) {
    .auth-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(2rem, 5vw, 3.5rem);
        max-width: min(72rem, 100%);
        margin-inline: auto;
        align-items: start;
    }
}

.auth-aside {
    display: none;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.25rem 0;
}

@media (min-width: 900px) {
    .auth-aside {
        display: flex;
    }
}

.auth-aside-kicker {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.auth-aside-title {
    margin: 0;
    font-size: clamp(1.55rem, 2.8vw, 2.1rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--text);
}

.auth-aside-text {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 28rem;
}

.auth-aside-list {
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.auth-aside-list li {
    position: relative;
    padding-left: 1.15rem;
}

.auth-aside-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 70%, var(--accent));
}

.auth-card-wrap {
    max-width: 440px;
    margin: 0 auto;
}

.auth-page--modern .auth-card-wrap {
    max-width: min(32rem, 100%);
    width: 100%;
    margin-inline: auto;
}

@media (min-width: 900px) {
    .auth-page--modern .auth-card-wrap {
        max-width: min(34rem, 100%);
        margin-inline: auto;
    }
}

.auth-card--modern {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    border-radius: 1.25rem;
    padding: clamp(1.75rem, 4vw, 2.25rem) clamp(1.35rem, 3.5vw, 2rem);
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
    box-shadow:
        var(--shadow),
        0 0 0 1px color-mix(in srgb, #fff 6%, transparent) inset;
    background: color-mix(in srgb, var(--card) 96%, var(--bg));
}

[data-theme="dark"] .auth-card--modern {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 0 0 1px color-mix(in srgb, #fff 4%, transparent) inset;
}

.auth-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin: 0 0 0.85rem;
    background: color-mix(in srgb, var(--primary) 12%, var(--card));
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
}

.auth-card--modern h1 {
    font-size: clamp(1.45rem, 2.5vw, 1.75rem);
}

.stack-form--auth .stack-form-submit {
    margin-top: 0.85rem;
}

.stack-form--auth .form-row-2 {
    margin-top: 0.35rem;
}

.stack-form--auth .form-row-2 label {
    margin-top: 0.35rem;
}

.stack-form--auth input:focus-visible,
.stack-form--auth textarea:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.stack-form--auth input::placeholder {
    color: var(--text-muted);
    opacity: 0.75;
}

/* HTTP 404 — tam sayfa, kartsız tipografik düzen */
.http-error-page {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 5rem);
    padding: clamp(1.5rem, 5vw, 3rem) 0;
    overflow: hidden;
}

.http-error-bg {
    position: absolute;
    inset: -10% -15% auto;
    height: 72%;
    pointer-events: none;
    background:
        radial-gradient(ellipse 65% 48% at 18% 28%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 58%),
        radial-gradient(ellipse 50% 42% at 82% 18%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 52%),
        radial-gradient(ellipse 45% 38% at 50% 88%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 55%);
    opacity: 0.88;
}

[data-theme="dark"] .http-error-bg {
    opacity: 0.42;
}

.http-error-watermark {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    z-index: 0;
    font-size: clamp(6.5rem, 32vmin, 15rem);
    font-weight: 800;
    letter-spacing: -0.07em;
    line-height: 0.88;
    color: color-mix(in srgb, var(--primary) 16%, transparent);
    opacity: 0.38;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

[data-theme="dark"] .http-error-watermark {
    color: color-mix(in srgb, var(--text) 10%, transparent);
    opacity: 0.22;
}

.http-error-inner {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: clamp(2rem, 8vw, 5rem) 1rem;
    min-height: min(72vh, calc(100vh - 7rem));
}

.http-error-title {
    position: relative;
    margin: 0 0 1.1rem;
    max-width: 18ch;
    font-size: clamp(1.85rem, 4.8vw, 2.85rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: var(--text);
}

.http-error-title::after {
    content: "";
    display: block;
    width: 2.75rem;
    height: 3px;
    margin: 1rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--accent) 70%, var(--primary)));
}

.http-error-lead {
    margin: 0 0 2rem;
    max-width: 36rem;
    font-size: clamp(0.95rem, 2.1vw, 1.08rem);
    line-height: 1.65;
    color: var(--text-muted);
}

.http-error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
}

.http-error-actions .btn {
    min-width: 9.5rem;
}

.card-elevated {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem 1.75rem;
    box-shadow: var(--shadow);
}

.auth-card--modern.card-elevated {
    padding: clamp(1.75rem, 4vw, 2.25rem) clamp(1.35rem, 3.5vw, 2rem);
}

/* Kayıt — girişten farklı: üstte özet şerit, altta tek kart */
.auth-page--register-split .auth-register-stack {
    position: relative;
    z-index: 1;
    max-width: min(36rem, 100%);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(1.35rem, 3vw, 2rem);
}

.auth-register-hero {
    text-align: center;
    padding: 0 0.35rem;
}

.auth-register-title {
    margin: 0.35rem 0 0.45rem;
    font-size: clamp(1.65rem, 4vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--text);
}

.auth-register-lead {
    margin: 0 auto;
    max-width: 34rem;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.auth-register-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

.auth-register-chips li {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.38rem 0.75rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border) 75%, var(--primary) 25%);
    background: color-mix(in srgb, var(--card) 88%, var(--primary) 8%);
    color: var(--text);
}

.auth-page--register-split .auth-register-card-wrap {
    max-width: min(36rem, 100%);
}

.auth-page--register-split .auth-card--register {
    position: relative;
    overflow: hidden;
    box-shadow:
        var(--shadow),
        0 0 0 1px color-mix(in srgb, #fff 6%, transparent) inset,
        0 -4px 0 0 color-mix(in srgb, var(--primary) 55%, var(--accent)) inset;
}

[data-theme="dark"] .auth-page--register-split .auth-card--register {
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.35),
        0 0 0 1px color-mix(in srgb, #fff 4%, transparent) inset,
        0 -4px 0 0 color-mix(in srgb, var(--primary) 45%, var(--accent)) inset;
}

.auth-card h1 {
    margin: 0 0 0.35rem;
    font-size: 1.5rem;
}

.auth-lead {
    margin: 0 0 1.25rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.auth-footer {
    margin: 1.25rem 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.auth-hint {
    margin: 1rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.auth-hint code {
    font-size: 0.78rem;
}

.stack-form {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.stack-form label {
    font-weight: 600;
    font-size: 0.88rem;
    margin-top: 0.5rem;
}

.stack-form input,
.stack-form textarea {
    font-family: inherit;
    font-size: 1rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.stack-form textarea {
    resize: vertical;
    min-height: 120px;
}

.input-disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.field-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
}

.form-row-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.form-row-2 > div {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 500px) {
    .form-row-2 {
        grid-template-columns: 1fr;
    }
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.max-form {
    max-width: 100%;
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: 0.92rem;
}

.alert-error {
    border: 1px solid color-mix(in srgb, #ef4444 35%, var(--border));
    background: color-mix(in srgb, #ef4444 8%, var(--card));
}

.alert-warning {
    border: 1px solid color-mix(in srgb, #eab308 45%, var(--border));
    background: color-mix(in srgb, #eab308 12%, var(--card));
    color: var(--text);
}

.alert-ok {
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    background: color-mix(in srgb, var(--accent) 8%, var(--card));
}

/* Panel düzeni */
.panel-wrap {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
}

.panel-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    min-height: 100vh;
    padding: 1.25rem 1rem;
    border-right: 1px solid var(--border);
    background: var(--bg-elevated);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.panel-brand .logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}

.panel-brand .logo:hover {
    text-decoration: none;
}

.panel-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
}

.panel-nav a {
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    text-decoration: none;
}

.panel-nav a:hover {
    background: color-mix(in srgb, var(--text) 5%, transparent);
    color: var(--text);
    text-decoration: none;
}

.panel-nav a.is-active {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}

.panel-sidebar-foot {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: none;
}

/* Panel mobil: masaüstünde gizli öğeler */
.panel-nav-backdrop {
    display: none;
}

.panel-nav-toggle,
.panel-sidebar-close {
    display: none;
}

.panel-nav-toggle {
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.panel-nav-toggle:hover {
    background: color-mix(in srgb, var(--text) 5%, var(--card));
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
}

.panel-nav-toggle-bars {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 1.15rem;
}

.panel-nav-toggle-bar {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transform-origin: center;
    transition: transform 0.28s ease, opacity 0.2s ease;
}

body.is-panel-nav-open .panel-nav-toggle {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.panel-sidebar-close {
    position: absolute;
    top: max(0.55rem, env(safe-area-inset-top));
    right: 0.55rem;
    z-index: 5;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 92%, var(--bg));
    color: var(--text);
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.panel-sidebar-close:hover {
    background: color-mix(in srgb, var(--text) 8%, var(--card));
    color: var(--text);
}

@media (max-width: 900px) {
    .panel-wrap {
        display: block;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .panel-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 240;
        background: color-mix(in srgb, #0f172a 52%, transparent);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.28s ease, visibility 0.28s ease;
    }

    [data-theme="dark"] .panel-nav-backdrop {
        background: color-mix(in srgb, #020617 78%, transparent);
    }

    body.is-panel-nav-open .panel-nav-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body.is-panel-nav-open {
        overflow: hidden;
    }

    .panel-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: min(300px, calc(100vw - 2.5rem));
        max-width: 100%;
        z-index: 260;
        min-height: 0;
        height: 100vh;
        height: 100dvh;
        align-self: stretch;
        transform: translate3d(-102%, 0, 0);
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
        border-right: 1px solid var(--border);
        border-bottom: none;
        padding: 1rem 0.85rem;
        padding-top: max(1rem, env(safe-area-inset-top));
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 6px 0 32px rgba(2, 6, 23, 0.14);
        gap: 0.75rem;
    }

    [data-theme="dark"] .panel-sidebar {
        box-shadow: 8px 0 36px rgba(0, 0, 0, 0.45);
    }

    body.is-panel-nav-open .panel-sidebar {
        transform: translate3d(0, 0, 0);
    }

    body.is-panel-nav-open .panel-nav-toggle-bars .panel-nav-toggle-bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    body.is-panel-nav-open .panel-nav-toggle-bars .panel-nav-toggle-bar:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    body.is-panel-nav-open .panel-nav-toggle-bars .panel-nav-toggle-bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .panel-sidebar .panel-brand {
        padding-right: 2.75rem;
    }

    .panel-nav-toggle,
    .panel-sidebar-close {
        display: inline-flex;
    }

    .panel-main {
        min-height: 100vh;
        min-height: 100dvh;
        width: 100%;
    }

    .panel-topbar {
        padding: 0.65rem 0;
        position: sticky;
        top: 0;
        z-index: 50;
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .panel-topbar-inner,
    .panel-content.container,
    body.is-admin-shell .panel-content.container {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }

    body.is-admin-shell .panel-main {
        max-width: 100%;
        overflow-x: hidden;
    }

    body.is-admin-shell .panel-main > main.panel-content {
        box-sizing: border-box;
        max-width: 100%;
    }

    .panel-topbar-row {
        flex-wrap: wrap;
        align-items: center;
        gap: 0.55rem 0.75rem;
    }

    .panel-topbar-start {
        flex: 1 1 auto;
        min-width: 0;
    }

    .panel-user-block.panel-user-end {
        flex: 1 1 100%;
        text-align: left;
        order: 3;
        padding-top: 0.35rem;
        margin-top: 0.15rem;
        border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    }

    .panel-user-stack .panel-user-name {
        font-size: 0.88rem;
    }

    .panel-user-stack .panel-user-email {
        font-size: 0.72rem;
        word-break: break-word;
    }

    .panel-topbar-bayilik {
        max-width: min(100%, 12rem);
        font-size: 0.7rem;
        padding: 0.35rem 0.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.is-customer-shell .panel-nav--customer-icons a {
        min-height: 2.85rem;
        padding-top: 0.62rem;
        padding-bottom: 0.62rem;
    }

    body.is-admin-shell .admin-nav-group > summary {
        min-height: 2.75rem;
        padding: 0.55rem 0.45rem;
        align-items: center;
    }

    body.is-admin-shell .admin-nav-sub a {
        padding: 0.55rem 0.65rem;
        min-height: 2.6rem;
        display: flex;
        align-items: center;
    }

    body.is-admin-shell .admin-nav-toplink {
        min-height: 2.75rem;
        display: flex;
        align-items: center;
    }

    .panel-wrap--customer .panel-sidebar--customer,
    .panel-wrap--admin .panel-sidebar--admin {
        padding-left: max(0.78rem, env(safe-area-inset-left));
    }

    .table-wrap {
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .data-table th,
    .data-table td {
        padding: 0.55rem 0.65rem;
        font-size: 0.8125rem;
    }
}

@media (max-width: 900px) and (min-width: 521px) {
    .panel-user-block.panel-user-end {
        flex: 1 1 auto;
        order: 0;
        text-align: right;
        border-top: none;
        padding-top: 0;
        margin-top: 0;
    }
}

/* Müşteri paneli — sol menü: daha büyük ikon/yazı, sabit ikon sütunu ile hizalı */
.panel-wrap--customer {
    grid-template-columns: minmax(238px, 268px) 1fr;
}

.panel-sidebar--customer {
    padding: 1rem 0.78rem;
}

body.is-customer-shell .panel-sidebar--customer {
    border-right: none;
}

body.is-customer-shell .panel-nav--customer-icons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.28rem;
}

/* Ana sayfa — bayilik hızlı erişim (küçük butonlar) */
.panel-dash-bayilik-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    margin: 0 0 1rem;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    background: color-mix(in srgb, var(--text) 4%, var(--card));
}

.panel-dash-bayilik-bar-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.panel-dash-bayilik-bar-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

a.panel-dash-bayilik-mini {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.14rem 0.42rem;
    border-radius: 6px;
    line-height: 1.25;
    text-decoration: none;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
}

a.panel-dash-bayilik-mini:hover {
    background: color-mix(in srgb, var(--accent) 22%, var(--card));
    color: var(--accent);
    text-decoration: none;
}

[data-theme="dark"] a.panel-dash-bayilik-mini {
    color: color-mix(in srgb, var(--accent) 92%, #fff);
    background: color-mix(in srgb, var(--accent) 12%, var(--card));
    border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}

/* Ana sayfa TS3: AKTİF rozeti gibi küçük eylem linki */
.panel-dashboard-compact a.panel-dash-ts3-btn {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.14rem 0.42rem;
    border-radius: 6px;
    line-height: 1.25;
    white-space: nowrap;
    text-decoration: none;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    box-sizing: border-box;
    vertical-align: middle;
}

.panel-dashboard-compact a.panel-dash-ts3-btn:hover {
    background: color-mix(in srgb, var(--accent) 22%, var(--card));
    color: var(--accent);
    text-decoration: none;
}

[data-theme="dark"] .panel-dashboard-compact a.panel-dash-ts3-btn {
    color: color-mix(in srgb, var(--accent) 92%, #fff);
    background: color-mix(in srgb, var(--accent) 12%, var(--card));
    border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}

body.is-customer-shell .panel-nav--customer-icons a {
    display: grid;
    grid-template-columns: 1.85rem minmax(0, 1fr);
    align-items: center;
    column-gap: 0.58rem;
    padding: 0.52rem 0.55rem 0.52rem 0.42rem;
    min-height: 2.5rem;
    box-sizing: border-box;
    letter-spacing: 0.01em;
	font-size: 13px;
    border-radius: 10px;
    color: var(--text-muted);
    text-decoration: none;
}

body.is-customer-shell .panel-nav--customer-icons a:hover {
    background: color-mix(in srgb, var(--text) 5%, transparent);
    color: var(--text);
}

body.is-customer-shell .panel-nav--customer-icons a.is-active {
    background: transparent;
    color: var(--primary);
    box-shadow: inset 3px 0 0 var(--primary);
}

body.is-customer-shell .customer-nav-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    flex-shrink: 0;
    justify-self: center;
    color: color-mix(in srgb, var(--text-muted) 55%, var(--text));
    opacity: 0.92;
}

body.is-customer-shell .customer-nav-ico .admin-nav-svg {
    display: block;
    width: 1.35rem;
    height: 1.35rem;
}

body.is-customer-shell .panel-nav--customer-icons a.is-active .customer-nav-ico {
    color: color-mix(in srgb, var(--primary) 78%, var(--text));
    opacity: 1;
}

body.is-customer-shell .customer-nav-label {
    min-width: 0;
    line-height: 1.3;
    align-self: center;
}

[data-theme="dark"] body.is-customer-shell .panel-nav--customer-icons a {
    color: rgba(186, 198, 212, 0.82);
}

[data-theme="dark"] body.is-customer-shell .panel-nav--customer-icons a.is-active {
    color: rgba(147, 197, 253, 0.98);
}

[data-theme="dark"] body.is-customer-shell .customer-nav-ico {
    color: rgba(186, 198, 212, 0.55);
}

[data-theme="dark"] body.is-customer-shell .panel-nav--customer-icons a.is-active .customer-nav-ico {
    color: rgba(147, 197, 253, 0.92);
}

.panel-main {
    background: var(--bg);
    min-width: 0;
}

.panel-topbar {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-elevated) 70%, var(--bg));
}

.panel-topbar-inner,
.panel-content.container {
    width: min(1200px, 100% - 2rem);
    margin-inline: auto;
}

.panel-topbar-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.panel-topbar-start {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.panel-topbar-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 1.2rem;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.panel-topbar-back:hover {
    background: color-mix(in srgb, var(--text) 5%, var(--card));
    border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
    color: var(--text);
    text-decoration: none;
}

.panel-topbar-bayilik {
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1.2;
    text-decoration: none;
    max-width: min(100%, 14rem);
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-nav--customer-icons a.panel-nav-bayilik .customer-nav-label {
    font-weight: 700;
}

.panel-nav--customer-icons a.panel-nav-altusers .customer-nav-label {
}

.panel-user-block {
    min-width: 0;
    flex: 1 1 auto;
}

.panel-user-end {
    text-align: right;
}

.panel-user {
    margin: 0;
    color: var(--text-muted);
}

.panel-user-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.12rem;
    text-align: right;
}

.panel-user-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
}

.panel-user-email {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.25;
    word-break: break-all;
}

.panel-topbar-theme {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--card);
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .panel-topbar-row {
        flex-wrap: wrap;
    }

    .panel-user-stack {
        align-items: flex-end;
        width: 100%;
        order: 3;
        flex-basis: 100%;
        padding-top: 0.25rem;
        border-top: 1px solid var(--border);
    }
}

.panel-content {
    padding: 1.75rem 0 3rem;
}

/* TS3 sunucu yönetimi: ana alan üst/yan boşluksuz, içerik sayfaya yapışık */
body.is-customer-shell .panel-main > main.panel-content.panel-content--ts3-manage {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.panel-content.panel-content--ts3-manage {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.page-title {
    margin: 0 0 0.35rem;
    font-size: 1.65rem;
}

.page-sub {
    margin: 0 0 1.5rem;
    color: var(--text-muted);
}

/* Müşteri paneli — Profil (profil.php); genişlik .panel-content.container ile diğer sayfalarla aynı */
body.is-customer-shell .panel-profil {
    width: 100%;
    max-width: none;
}

body.is-customer-shell .panel-profil-form {
    margin: 0;
}

body.is-customer-shell .panel-profil-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    align-items: stretch;
}

body.is-customer-shell .panel-profil-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    padding: 1.15rem 1.2rem 1.28rem;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
}

body.is-customer-shell .panel-profil-card--span {
    grid-column: 1 / -1;
}

body.is-customer-shell .panel-profil-card-head {
    margin: 0 0 0.9rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
}

body.is-customer-shell .panel-profil-kicker {
    margin: 0;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

body.is-customer-shell .panel-profil-card-title {
    margin: 0.28rem 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}

body.is-customer-shell .panel-profil-card-desc {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted);
}

body.is-customer-shell .panel-profil .stack-form label:first-of-type {
    margin-top: 0;
}

body.is-customer-shell .panel-profil-card .stack-form {
    flex: 1 1 auto;
    min-width: 0;
}

body.is-customer-shell .panel-profil .stack-form input,
body.is-customer-shell .panel-profil .stack-form textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.is-customer-shell .panel-profil-row2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    margin-top: 0.15rem;
}

body.is-customer-shell .panel-profil-pair {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

body.is-customer-shell .panel-profil-pair label {
    font-weight: 600;
    font-size: 0.88rem;
}

body.is-customer-shell .panel-profil-pair input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text);
}

body.is-customer-shell .panel-profil-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

body.is-customer-shell .panel-profil-legend {
    font-size: 1.02rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    padding: 0;
    color: var(--text);
}

body.is-customer-shell .panel-profil-fieldset .field-hint {
    margin-top: 0;
    margin-bottom: 0.65rem;
}

body.is-customer-shell .panel-profil-footer {
    margin-top: 1.35rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

body.is-customer-shell .panel-profil-footer-note {
    font-size: 0.82rem;
    color: var(--text-muted);
}

@media (max-width: 720px) {
    body.is-customer-shell .panel-profil-grid {
        grid-template-columns: 1fr;
    }

    body.is-customer-shell .panel-profil-row2 {
        grid-template-columns: 1fr;
    }
}

.panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 700px) {
    .stat-grid:not(.admin-stats-grid) {
        grid-template-columns: 1fr;
    }
}

.stat-card {
    display: block;
    padding: 1.25rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--card);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
    border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.stat-num {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.stat-label {
    font-size: 0.88rem;
    color: var(--text-muted);
}

.empty-state {
    padding: 2rem;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-table th,
.data-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.data-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg) 40%, var(--card));
}

.data-table tr:last-child td {
    border-bottom: none;
}

.badge-status {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--text) 8%, var(--card));
}

.badge-active {
    color: var(--accent);
}

.badge-suspended {
    color: #f97316;
}

.badge-pending {
    color: #eab308;
}

.badge-inv-paid {
    color: var(--accent);
}

.badge-inv-unpaid {
    color: #f97316;
}

.badge-inv-cancelled {
    color: var(--text-muted);
}

.badge-ticket-open {
    color: #f97316;
}

.badge-ticket-answered {
    color: var(--primary);
}

.badge-ticket-closed {
    color: var(--text-muted);
}

.ticket-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ticket-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
    text-decoration: none;
    color: inherit;
}

.ticket-row:hover {
    border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
    text-decoration: none;
}

.ticket-row .muted {
    display: block;
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

.back-link {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
}

.section-mini-title {
    font-size: 1.05rem;
    margin: 1.5rem 0 0.75rem;
}

.thread {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.thread-msg {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    background: var(--card);
}

.thread-msg.is-staff {
    border-left: 3px solid var(--primary);
}

/* Admin panel enhancements */
.admin-nav-group {
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    border-radius: 14px;
    margin-bottom: 0.6rem;
    overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, transparent), color-mix(in srgb, var(--card) 84%, transparent));
    box-shadow: 0 8px 18px rgba(4, 9, 25, 0.14);
}

.admin-nav-group > summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    padding: 0.58rem 1.45rem 0.58rem 0.72rem;
    font-size: 0.8125rem;
    color: var(--text);
}

.admin-nav-group > summary::-webkit-details-marker {
    display: none;
}

.admin-nav-sub {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.5rem 0.65rem 0.95rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    background: color-mix(in srgb, var(--bg) 35%, transparent);
}

.admin-nav-sub a {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0.58rem 0.82rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 0.765rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    line-height: 1.42;
    white-space: normal;
    word-break: break-word;
}

.admin-nav-sub a.admin-nav-sub-nested {
    padding-left: 1.35rem;
    font-size: 0.72rem;
    opacity: 0.95;
}

.admin-nav-sub a.admin-nav-sub-nested::before {
    content: "↳";
    margin-right: 0.35rem;
    opacity: 0.55;
    font-weight: 600;
}

.admin-nav-sub a:hover {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    color: var(--text);
    text-decoration: none;
}

.admin-nav-sub a.is-active {
    background: color-mix(in srgb, var(--primary) 13%, transparent);
    border-color: transparent;
    color: var(--primary);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
}

.admin-nav-sub a.is-active::after {
    content: "";
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.35rem;
    border-radius: 999px;
    background: var(--primary);
    opacity: 0.92;
}

.admin-nav-toplink {
    display: block;
    border-radius: 11px;
    font-weight: 600;
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
    padding: 0.52rem 0.68rem;
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    background: color-mix(in srgb, var(--card) 90%, transparent);
    color: var(--text-muted);
    text-decoration: none;
}

.admin-nav-toplink:hover {
    color: var(--text);
    text-decoration: none;
    background: color-mix(in srgb, var(--card) 96%, transparent);
}

.admin-nav-toplink.is-active {
    background: color-mix(in srgb, var(--primary) 26%, transparent);
    border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
    color: var(--primary);
}

.admin-nav-group > summary::after {
    content: '';
    position: absolute;
    right: 0.85rem;
    top: 50%;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.2s ease;
    opacity: 0.75;
    pointer-events: none;
}

.admin-nav-group[open] > summary::after {
    transform: translateY(-35%) rotate(225deg);
}

.panel-wrap--admin {
    grid-template-columns: minmax(208px, 228px) 1fr;
}

.panel-sidebar--admin {
    padding: 0.85rem 0.62rem;
}

body.is-admin-shell .panel-sidebar {
    border-right: none;
}

.admin-field-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 0.15rem 0 0.2rem;
}

.admin-form-stack .admin-field-label:first-child {
    margin-top: 0;
}

.admin-data-shell {
    padding: 0;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--border);
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.07);
    background: color-mix(in srgb, var(--card) 96%, transparent);
}

.admin-data-shell .table-wrap {
    border: none;
    border-radius: 0;
}

.admin-data-table th,
.admin-data-table td {
    padding: 0.65rem 0.85rem;
    vertical-align: middle;
}

.admin-stat-tile {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.admin-stat-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.12);
}

.admin-traffic-board {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.25rem;
}

.admin-traffic-hero {
    border-radius: 20px;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--primary) 6%, var(--card)));
    box-shadow: 0 16px 36px rgba(2, 6, 23, 0.08);
}

.admin-traffic-hero-head h2 {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
}

.admin-traffic-hero-head p {
    margin: 0;
    font-size: 0.88rem;
}

.admin-traffic-metric-grid {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .admin-traffic-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .admin-traffic-metric-grid {
        grid-template-columns: 1fr;
    }
}

.admin-traffic-metric {
    border-radius: 14px;
    padding: 0.85rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    background: color-mix(in srgb, var(--bg-elevated) 88%, var(--card));
}

.admin-traffic-metric--accent {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
    background: color-mix(in srgb, var(--primary) 12%, var(--card));
}

.admin-traffic-metric-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.admin-traffic-metric-value {
    display: block;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.admin-traffic-metric-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.admin-traffic-split {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1.15fr 0.85fr;
}

@media (max-width: 960px) {
    .admin-traffic-split {
        grid-template-columns: 1fr;
    }
}

.admin-chart-card,
.admin-paths-card {
    border-radius: 18px;
    padding: 1.15rem 1.2rem;
}

.admin-chart-title {
    margin: 0 0 0.25rem;
    font-size: 1.02rem;
}

.admin-chart-sub {
    margin: 0 0 1rem;
    font-size: 0.82rem;
}

.admin-hour-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.2rem;
    height: 140px;
    padding: 0.25rem 0 0;
}

.admin-hour-bar {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 0.35rem;
}

.admin-hour-bar-fill {
    width: 100%;
    max-width: 14px;
    margin-inline: auto;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 85%, transparent), color-mix(in srgb, var(--primary) 35%, transparent));
    min-height: 4px;
    transition: height 0.2s ease;
}

.admin-hour-bar-label {
    font-size: 0.62rem;
    color: var(--text-muted);
    line-height: 1;
}

.admin-path-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.admin-path-list li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
}

.admin-path-code {
    font-size: 0.78rem;
    word-break: break-all;
    color: var(--text);
}

.admin-path-count {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--primary);
}

.admin-paths-empty {
    margin: 0.5rem 0 0;
    font-size: 0.88rem;
}

.admin-quick-card {
    margin-top: 1.15rem;
    border-radius: 18px;
    padding: 1.15rem 1.25rem;
}

.admin-quick-title {
    margin: 0 0 0.85rem;
    font-size: 1.05rem;
}

.admin-quick-links--row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-quick-links--row .btn {
    border-radius: 12px;
}

.admin-content-section-title {
    margin: 0 0 0.85rem;
    font-size: 1rem;
    font-weight: 700;
}

.admin-site-content-form .admin-form-card {
    margin-bottom: 1rem;
}

.admin-code-area {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.45;
}

.admin-save-btn {
    margin-top: 0.5rem;
    border-radius: 14px;
    padding: 0.75rem 1.5rem;
}

.panel-wrap--admin .admin-form-card .ts3-dash-row2 {
    grid-template-columns: 1fr !important;
}

.admin-form-card {
    padding: 1.15rem;
    margin-bottom: 1.1rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--card) 93%, transparent);
    box-shadow: 0 10px 20px rgba(2, 6, 23, 0.08);
}

.admin-table {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--card) 94%, transparent);
    overflow: hidden;
}

.admin-confirm {
    position: fixed;
    inset: 0;
    z-index: 200000;
    background: rgba(0, 0, 0, 0.78);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    padding: 1.25rem;
}

.admin-confirm[hidden] {
    display: none !important;
}

.admin-confirm-box {
    width: min(440px, calc(100vw - 2rem));
    padding: 1.35rem 1.45rem;
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    border-radius: 18px;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
    background: color-mix(in srgb, var(--card) 98%, var(--bg));
}

.admin-confirm-box #adminConfirmText {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.5;
}

.admin-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    margin-top: 1.1rem;
}

/* —— Admin tablolar (premium) —— */
.admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-table--premium {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
}

.admin-table--premium thead th {
    text-align: left;
    padding: 0.85rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-elevated) 88%, var(--primary));
    border-bottom: 1px solid var(--border);
}

.admin-table--premium tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    vertical-align: middle;
}

.admin-table--premium tbody tr:hover td {
    background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.admin-table--premium tbody tr:last-child td {
    border-bottom: none;
}

.admin-th-narrow {
    width: 4rem;
}

.admin-th-actions {
    width: 1%;
    min-width: 17rem;
    white-space: nowrap;
    text-align: right !important;
}

.admin-td-id {
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.admin-td-actions {
    text-align: right;
    white-space: nowrap;
    vertical-align: middle;
}

.admin-td-empty {
    padding: 1.5rem 1rem !important;
    text-align: center;
}

.admin-td-strong {
    display: block;
    font-weight: 600;
    color: var(--text);
}

.admin-td-sub {
    display: block;
    font-size: 0.82rem;
    margin-top: 0.2rem;
}

.admin-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.84rem;
    background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    padding: 0.2rem 0.45rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.admin-price-cell {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.admin-currency {
    font-size: 0.82em;
    color: var(--text-muted);
    font-weight: 500;
}

.admin-table-actions {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.45rem;
    justify-content: flex-end;
    align-items: center;
}

.admin-inline-form {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    margin: 0;
}

.admin-inline-form button {
    margin: 0;
}

.admin-table-actions > .btn,
.admin-table-actions > .admin-inline-form {
    flex-shrink: 0;
}

.admin-cat-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    color: var(--text);
    background: color-mix(in srgb, var(--text-muted) 14%, transparent);
    border-color: color-mix(in srgb, var(--border) 80%, var(--text-muted));
    max-width: 100%;
    white-space: normal;
    line-height: 1.25;
}

.admin-cat-badge--ts3 {
    background: color-mix(in srgb, #6366f1 22%, transparent);
    border-color: color-mix(in srgb, #6366f1 45%, var(--border));
    color: #a5b4fc;
}

.admin-cat-badge--vds {
    background: color-mix(in srgb, #0ea5e9 20%, transparent);
    border-color: color-mix(in srgb, #0ea5e9 40%, var(--border));
    color: #7dd3fc;
}

.admin-cat-badge--dedicated {
    background: color-mix(in srgb, var(--text-muted) 14%, transparent);
    color: var(--text);
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
}

.admin-cat-badge--vps {
    background: color-mix(in srgb, #10b981 20%, transparent);
    border-color: color-mix(in srgb, #10b981 40%, var(--border));
    color: #6ee7b7;
}

.admin-cat-badge--ryzen-vds {
    background: color-mix(in srgb, #f97316 18%, transparent);
    border-color: color-mix(in srgb, #f97316 38%, var(--border));
    color: #fdba74;
}

.admin-cat-badge--discord-bot,
.admin-cat-badge--discord {
    background: color-mix(in srgb, #5865f2 20%, transparent);
    border-color: color-mix(in srgb, #5865f2 42%, var(--border));
    color: #c4c9fc;
}

.admin-cat-badge--nested {
    background: color-mix(in srgb, #8b5cf6 18%, transparent);
    border-color: color-mix(in srgb, #8b5cf6 38%, var(--border));
    color: #ddd6fe;
}

.admin-cat-badge--colocation {
    background: color-mix(in srgb, #64748b 20%, transparent);
    border-color: color-mix(in srgb, #64748b 40%, var(--border));
    color: var(--text);
}

.admin-cat-badge--x {
    background: color-mix(in srgb, var(--text-muted) 15%, transparent);
    color: var(--text-muted);
}

.admin-cat-badge--minecraft {
    background: color-mix(in srgb, #22c55e 18%, transparent);
    border-color: color-mix(in srgb, #22c55e 42%, var(--border));
    color: #86efac;
}

.admin-cat-badge--hosting {
    background: color-mix(in srgb, #38bdf8 18%, transparent);
    border-color: color-mix(in srgb, #38bdf8 40%, var(--border));
    color: #7dd3fc;
}

/* TS3 yönetim: bayilik / alt port / paket rozetleri + satır vurgusu */
.admin-ts3-legend {
    margin-bottom: 1.25rem;
    padding: 1rem 1.15rem;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
    background: color-mix(in srgb, var(--card) 96%, var(--bg));
}

.admin-ts3-legend-title {
    margin: 0 0 0.65rem;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.admin-ts3-legend-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem 1rem;
}

@media (min-width: 768px) {
    .admin-ts3-legend-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.admin-ts3-legend-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
}

.admin-ts3-legend-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.35;
    flex: 1;
    min-width: 12rem;
}

.admin-ts3-kind-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--border);
    line-height: 1.2;
    white-space: nowrap;
    max-width: 100%;
}

.admin-ts3-kind-badge--reseller {
    background: color-mix(in srgb, #6366f1 20%, var(--card));
    border-color: color-mix(in srgb, #6366f1 42%, var(--border));
    color: #3730a3;
}

[data-theme="dark"] .admin-ts3-kind-badge--reseller {
    color: #c7d2fe;
}

.admin-ts3-kind-badge--sub {
    background: color-mix(in srgb, #14b8a6 18%, var(--card));
    border-color: color-mix(in srgb, #14b8a6 40%, var(--border));
    color: #0f766e;
}

[data-theme="dark"] .admin-ts3-kind-badge--sub {
    color: #5eead4;
}

.admin-ts3-kind-badge--standard {
    background: color-mix(in srgb, #3b82f6 18%, var(--card));
    border-color: color-mix(in srgb, #3b82f6 38%, var(--border));
    color: #1d4ed8;
}

[data-theme="dark"] .admin-ts3-kind-badge--standard {
    color: #93c5fd;
}

.admin-ts3-kind-badge--pending {
    background: color-mix(in srgb, #f59e0b 16%, var(--card));
    border-color: color-mix(in srgb, #f59e0b 36%, var(--border));
    color: #b45309;
}

[data-theme="dark"] .admin-ts3-kind-badge--pending {
    color: #fcd34d;
}

.admin-tr-ts3 > td:first-child {
    box-shadow: inset 4px 0 0 var(--border);
}

.admin-tr-ts3--reseller > td:first-child {
    box-shadow: inset 4px 0 0 #6366f1;
}

.admin-tr-ts3--sub > td:first-child {
    box-shadow: inset 4px 0 0 #14b8a6;
}

.admin-tr-ts3--standard > td:first-child {
    box-shadow: inset 4px 0 0 #3b82f6;
}

.admin-tr-ts3--pending > td:first-child {
    box-shadow: inset 4px 0 0 #f59e0b;
}

.admin-th-kind,
.admin-td-kind {
    min-width: 7.5rem;
    vertical-align: middle;
}

.admin-td-connect {
    font-size: 0.82rem;
    line-height: 1.35;
}

.admin-ts3-connect-sep {
    opacity: 0.65;
    margin: 0 0.1rem;
}

.admin-ts3-query-hint {
    display: block;
    font-size: 0.68rem;
    margin-top: 0.25rem;
}

.admin-ts3-connect-note {
    display: block;
}

.admin-ts3-connect-label {
    display: block;
    font-size: 0.72rem;
    margin-top: 0.2rem;
}

.admin-ts3-kurulum-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.65rem;
    margin-bottom: 1rem;
    align-items: center;
}

.admin-ts3-summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 94%, var(--bg));
}

.admin-ts3-summary-pill strong {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.admin-ts3-summary-pill--reseller {
    border-color: color-mix(in srgb, #6366f1 40%, var(--border));
    background: color-mix(in srgb, #6366f1 12%, var(--card));
}

.admin-ts3-summary-pill--sub {
    border-color: color-mix(in srgb, #14b8a6 40%, var(--border));
    background: color-mix(in srgb, #14b8a6 10%, var(--card));
}

.admin-ts3-summary-pill--standard {
    border-color: color-mix(in srgb, #3b82f6 38%, var(--border));
    background: color-mix(in srgb, #3b82f6 10%, var(--card));
}

.admin-ts3-summary-pill--pending {
    border-color: color-mix(in srgb, #f59e0b 38%, var(--border));
    background: color-mix(in srgb, #f59e0b 10%, var(--card));
}

.admin-ts3-group-row td {
    padding: 0.55rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-elevated) 88%, var(--card));
    border-bottom: 1px solid var(--border);
}

.admin-ts3-group-row--reseller td {
    color: #4338ca;
    background: color-mix(in srgb, #6366f1 10%, var(--card));
}

[data-theme="dark"] .admin-ts3-group-row--reseller td {
    color: #c7d2fe;
}

.admin-ts3-group-row--sub td {
    color: #0f766e;
    background: color-mix(in srgb, #14b8a6 8%, var(--card));
}

[data-theme="dark"] .admin-ts3-group-row--sub td {
    color: #5eead4;
}

.admin-ts3-group-row--standard td {
    color: #1d4ed8;
    background: color-mix(in srgb, #3b82f6 8%, var(--card));
}

[data-theme="dark"] .admin-ts3-group-row--standard td {
    color: #93c5fd;
}

.admin-ts3-group-row--pending td {
    color: #b45309;
    background: color-mix(in srgb, #f59e0b 8%, var(--card));
}

[data-theme="dark"] .admin-ts3-group-row--pending td {
    color: #fcd34d;
}

.admin-ts3-assign-hub {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin-top: 0.5rem;
}

@media (min-width: 768px) {
    .admin-ts3-assign-hub {
        grid-template-columns: 1fr 1fr;
    }
}

a.admin-ts3-assign-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.15rem 1.2rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--card);
    text-decoration: none;
    color: inherit;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.12s ease;
}

a.admin-ts3-assign-card:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    box-shadow: 0 6px 24px color-mix(in srgb, var(--text) 6%, transparent);
    transform: translateY(-1px);
}

.admin-ts3-assign-card--bayi {
    border-color: color-mix(in srgb, #6366f1 28%, var(--border));
}

.admin-ts3-assign-card--port {
    border-color: color-mix(in srgb, #3b82f6 28%, var(--border));
}

.admin-ts3-assign-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.25;
}

.admin-ts3-assign-card-desc {
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.admin-ts3-assign-card-meta {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.admin-ts3-assign-card .admin-ts3-assign-card-badge {
    margin-bottom: 0.15rem;
}

.admin-ts3-assign-form {
    margin-top: 0.35rem;
}

.admin-td-nowrap-sm {
    font-size: 0.78rem;
    white-space: nowrap;
}

.admin-ts3-port-hint {
    margin-top: 0.25rem;
    font-size: 0.72rem;
    line-height: 1.3;
}

.admin-ts3-port-hint-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.admin-status-pill--paid {
    background: color-mix(in srgb, #22c55e 18%, transparent);
    border-color: color-mix(in srgb, #22c55e 35%, var(--border));
    color: #86efac;
}

.admin-status-pill--unpaid {
    background: color-mix(in srgb, #f59e0b 18%, transparent);
    border-color: color-mix(in srgb, #f59e0b 35%, var(--border));
    color: #fcd34d;
}

.admin-status-pill--cancelled {
    background: color-mix(in srgb, var(--text-muted) 14%, transparent);
    border-color: var(--border);
    color: var(--text-muted);
}

.admin-status-pill--ban {
    background: color-mix(in srgb, #ef4444 20%, transparent);
    border-color: color-mix(in srgb, #ef4444 35%, var(--border));
    color: #fecaca;
}

.admin-status-pill--role-staff {
    background: color-mix(in srgb, var(--primary) 20%, transparent);
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
    color: var(--primary);
}

.admin-status-pill--role-user {
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
    color: var(--text-muted);
}

.admin-status-pill--ticket {
    background: color-mix(in srgb, #8b5cf6 16%, transparent);
    border-color: color-mix(in srgb, #8b5cf6 30%, var(--border));
    color: #c4b5fd;
}

.admin-status-pill--svc-active {
    background: color-mix(in srgb, #22c55e 18%, transparent);
    border-color: color-mix(in srgb, #22c55e 35%, var(--border));
    color: #86efac;
}

.admin-status-pill--svc-pending {
    background: color-mix(in srgb, #f59e0b 18%, transparent);
    border-color: color-mix(in srgb, #f59e0b 35%, var(--border));
    color: #fcd34d;
}

.admin-status-pill--svc-suspended {
    background: color-mix(in srgb, #ef4444 16%, transparent);
    border-color: color-mix(in srgb, #ef4444 30%, var(--border));
    color: #fca5a5;
}

.admin-user-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    border-radius: 20px;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    background: linear-gradient(125deg, color-mix(in srgb, var(--card) 94%, transparent), color-mix(in srgb, var(--primary) 8%, var(--card)));
    box-shadow: 0 14px 36px rgba(2, 6, 23, 0.08);
}

.admin-user-title {
    margin: 0 0 0.35rem;
    font-size: 1.45rem;
}

.admin-user-meta {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.admin-user-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.admin-user-since {
    font-size: 0.8rem;
    margin-left: 0.25rem;
}

.admin-user-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 720px) {
    .admin-user-stats {
        grid-template-columns: 1fr;
    }
}

.admin-user-stat {
    padding: 0.85rem 1rem;
    border-radius: 16px;
    text-align: center;
    border: 1px solid var(--border);
}

.admin-user-stat-num {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.admin-user-stat-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.admin-section-title {
    margin: 1.35rem 0 0.65rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.admin-contact-shell {
    padding: 1rem 1.1rem;
    border-radius: 20px;
}

.admin-empty-state {
    padding: 2rem 1rem;
    text-align: center;
    margin: 0;
}

.admin-contact-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.admin-contact-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1rem 1.15rem;
    background: color-mix(in srgb, var(--bg-elevated) 55%, var(--card));
}

.admin-contact-card--unread {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 15%, transparent);
}

.admin-contact-card-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.admin-contact-name {
    display: block;
    font-size: 1rem;
}

.admin-contact-email {
    font-size: 0.86rem;
    color: var(--primary);
    text-decoration: none;
}

.admin-contact-email:hover {
    text-decoration: underline;
}

.admin-contact-time {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.admin-contact-subject {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
}

.admin-contact-body {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text);
    margin-bottom: 0.85rem;
}

.admin-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.admin-unread-count {
    color: var(--primary);
}

.panel-sidebar--admin .panel-brand {
    margin-bottom: 0.3rem;
}

.panel-sidebar--admin .panel-brand .logo {
    padding: 0.3rem 0.4rem;
    border-radius: 12px;
    font-size: 0.9rem;
    gap: 0.45rem;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.panel-sidebar--admin .panel-brand .logo-mark {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 8px;
}

.panel-sidebar--admin .logo-text-stack {
    display: flex;
    flex-direction: column;
    gap: 0.02rem;
    line-height: 1.2;
}

.panel-sidebar--admin .logo-sub {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.panel-sidebar--admin .admin-nav-modern {
    gap: 0.3rem;
}

body.is-admin-shell .panel-sidebar-foot .btn {
    font-size: 0.84rem;
}

/* Kutu gölgesi yalnızca eski (shell dışı) panel düzeninde */
body:not(.is-admin-shell) .admin-nav-group {
    box-shadow: 0 4px 14px rgba(2, 6, 23, 0.06);
}

.admin-form-card input,
.admin-form-card select,
.admin-form-card textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.68rem 0.78rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-elevated) 72%, var(--bg));
    color: var(--text);
    margin-bottom: 0.55rem;
}

/* Checkbox / radio: geniş input kuralını uygulama (aksi halde kutu %100 genişler, etiket sağa kayar). */
.admin-form-card input[type="checkbox"],
.admin-form-card input[type="radio"] {
    width: auto;
    min-width: 1.125rem;
    height: 1.125rem;
    margin-bottom: 0;
    padding: 0;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: color-mix(in srgb, var(--primary) 85%, var(--text));
}

/* Ürün ekle/düzenle — TS3 paket ayarları */
.admin-ts3-spec-panel {
    margin-top: 0.75rem;
    padding: 1rem 1.15rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
    background: color-mix(in srgb, var(--card) 88%, var(--primary));
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-ts3-spec-heading {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text);
}

.admin-ts3-spec-hint {
    margin: 0 0 0.25rem;
    font-size: 0.78rem;
    line-height: 1.45;
}

.admin-ts3-spec-panel .admin-field-label {
    margin-bottom: 0.25rem;
}

.admin-ts3-spec-panel input[name="ts3_slots"] {
    max-width: 11rem;
    margin-bottom: 0;
}

.admin-ts3-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.35rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.admin-ts3-check-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    cursor: pointer;
    font-size: 0.8125rem;
    line-height: 1.4;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text);
}

.admin-ts3-check-row .admin-ts3-check-text {
    flex: 1;
    min-width: 0;
    padding-top: 0.06rem;
}

.admin-ts3-check-row input[type="checkbox"] {
    margin-top: 0.15rem;
}

.admin-form-stack {
    display: grid;
    gap: 0.6rem;
}

.admin-form-actions {
    display: flex;
    gap: 0.55rem;
    justify-content: flex-end;
}

.stat-grid.admin-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.stat-grid.admin-stats-grid .stat-card {
    border-radius: 14px;
    padding: 0.85rem 0.65rem;
    border: none !important;
    box-shadow: 0 4px 18px rgba(2, 6, 23, 0.07);
}

.stat-grid.admin-stats-grid .stat-card:hover {
    border: none !important;
    box-shadow: 0 8px 26px rgba(2, 6, 23, 0.11);
}

.stat-grid.admin-stats-grid .stat-num {
    font-size: 1.45rem;
}

.stat-grid.admin-stats-grid .stat-label {
    font-size: 0.76rem;
    line-height: 1.3;
}

[data-theme="dark"] .stat-grid.admin-stats-grid .stat-card {
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);
}

[data-theme="dark"] .stat-grid.admin-stats-grid .stat-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

@media (max-width: 900px) {
    .stat-grid.admin-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .stat-grid.admin-stats-grid {
        grid-template-columns: 1fr;
    }
}

.admin-overview-grid {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: 1fr 1fr;
    margin-top: 0.9rem;
}

.admin-overview-card {
    border-radius: 16px;
    padding: 1rem 1.05rem;
}

.admin-overview-card h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.admin-kpi-list {
    display: grid;
    gap: 0.5rem;
}

.admin-kpi-list > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.58rem 0.66rem;
    font-size: 0.9rem;
}

.admin-quick-links {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr 1fr;
}

.admin-form-card .ts3-dash-row2 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

@media (max-width: 1000px) {
    .admin-form-card .ts3-dash-row2 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .admin-form-card .ts3-dash-row2 {
        grid-template-columns: 1fr;
    }
    .admin-overview-grid,
    .admin-quick-links {
        grid-template-columns: 1fr;
    }
}

.thread-msg.is-user {
    border-left: 3px solid var(--accent);
}

.thread-msg header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.thread-body {
    font-size: 0.95rem;
    line-height: 1.55;
}

.thread-body-rich p {
    margin: 0 0 0.65em;
}

.thread-body-rich p:last-child {
    margin-bottom: 0;
}

.thread-body-rich ul,
.thread-body-rich ol {
    margin: 0.35em 0 0.65em 1.1em;
    padding: 0;
}

.thread-body-rich h1,
.thread-body-rich h2,
.thread-body-rich h3 {
    margin: 0.75em 0 0.35em;
    font-size: 1.05rem;
}

.thread-body-rich h1 {
    font-size: 1.15rem;
}

.thread-body-rich blockquote {
    margin: 0.5em 0;
    padding-left: 0.85rem;
    border-left: 3px solid color-mix(in srgb, var(--primary) 45%, var(--border));
    color: var(--text-muted);
}

.thread-body-rich pre {
    margin: 0.5em 0;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--text) 5%, var(--card));
    font-size: 0.85em;
    overflow-x: auto;
}

/* Ticket detay (müşteri paneli) */
.ticket-page {
    max-width: 100%;
}

.ticket-back {
    margin: 0 0 0.65rem;
    font-size: 0.86rem;
}

.ticket-back-link {
    color: var(--text-muted);
    text-decoration: none;
}

.ticket-back-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.ticket-page-header {
    padding: 1rem 1.1rem 1.05rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--card) 94%, var(--bg));
}

.ticket-page-title {
    margin: 0 0 0.35rem;
    font-size: clamp(1.05rem, 2.5vw, 1.28rem);
    line-height: 1.3;
}

.ticket-page-meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    font-size: 0.86rem;
}

.ticket-meta-label {
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.68rem;
}

.ticket-thread-shell {
    padding: 0.85rem 1rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
}

.ticket-thread-heading {
    margin: 0 0 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.thread--ticket {
    gap: 0.65rem;
}

.thread--ticket .thread-msg {
    padding: 0.85rem 1rem;
    border-radius: 12px;
}

.ticket-attachment-fig {
    margin: 0.65rem 0 0;
    padding: 0;
}

.ticket-attachment-fig a {
    display: inline-block;
    line-height: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 40%, var(--card));
}

.ticket-attachment-thumb {
    display: block;
    max-width: min(280px, 100%);
    max-height: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
}

.ticket-attachment-cap {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
}

.ticket-compose-card {
    padding: 1rem 1.1rem 1.15rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--card) 96%, var(--bg));
}

.ticket-compose-title {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
}

.ticket-compose-form {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.ticket-compose-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    color: var(--text-muted);
}

.ticket-compose-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 6.5rem;
    max-height: 14rem;
    padding: 0.65rem 0.78rem;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ticket-compose-textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.ticket-file-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.ticket-file-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    color: var(--text-muted);
}

.ticket-file-input {
    font-size: 0.78rem;
    max-width: 100%;
}

.ticket-file-hint {
    font-size: 0.74rem;
    line-height: 1.4;
    max-width: 36rem;
}

.ticket-compose-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.15rem;
}

[data-theme="dark"] .ticket-page-header,
[data-theme="dark"] .ticket-thread-shell,
[data-theme="dark"] .ticket-compose-card {
    background: color-mix(in srgb, var(--card) 88%, #0f172a);
    border-color: color-mix(in srgb, var(--border) 70%, #1e293b);
}

[data-theme="dark"] .ticket-compose-textarea {
    background: color-mix(in srgb, #0b1220 55%, var(--card));
    border-color: rgba(148, 163, 184, 0.2);
}

.ticket-editor-label {
    display: block;
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 0.45rem;
}

.ticket-quill-mount {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    overflow: hidden;
}

.ticket-quill-mount .ql-toolbar {
    border: none;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 80%, var(--bg));
}

.ticket-quill-mount .ql-container {
    border: none;
    font-family: inherit;
    font-size: 0.92rem;
    min-height: 160px;
}

.ticket-quill-mount .ql-editor {
    min-height: 160px;
    line-height: 1.55;
}

.ticket-quill-mount .ql-editor.ql-blank::before {
    color: var(--text-muted);
    font-style: normal;
}

.ticket-body-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ticket-reply-form .ticket-body-fallback:not(.ticket-body-hidden) {
    width: 100%;
    min-height: 140px;
    margin-bottom: 0.5rem;
}

[data-theme="light"] .panel-topbar .btn-theme .icon-moon,
[data-theme="light"] .btn-theme.panel-theme .icon-moon {
    display: none;
}

[data-theme="dark"] .panel-topbar .btn-theme .icon-sun,
[data-theme="dark"] .btn-theme.panel-theme .icon-sun {
    display: none;
}

.panel-dash-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}

.panel-dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

.panel-dashboard-compact {
    gap: 0.85rem;
}

@media (max-width: 860px) {
    .panel-dashboard {
        grid-template-columns: 1fr;
    }
}

.panel-dash-panel {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 1px 3px rgb(15 23 42 / 0.06);
    overflow: hidden;
    min-width: 0;
}

.panel-dashboard-compact .panel-dash-panel {
    border-radius: 10px;
}

.panel-dash-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.72rem 0.95rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, var(--card)), var(--card));
}

.panel-dash-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.panel-dashboard-compact .panel-dash-title {
    font-size: 0.88rem;
}

.panel-dash-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}

.panel-dash-link:hover {
    text-decoration: underline;
}

.panel-dash-empty {
    padding: 1.35rem 0.95rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.panel-dashboard-compact .panel-dash-empty {
    padding: 1.15rem 0.85rem;
    font-size: 0.8rem;
}

.panel-dash-empty p {
    margin: 0 0 1rem;
}

.panel-dash-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.panel-dash-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.65rem;
    padding: 0.65rem 0.95rem;
    border-bottom: 1px solid var(--border);
}

.panel-dashboard-compact .panel-dash-item {
    padding: 0.55rem 0.85rem;
}

.panel-dash-item:last-child {
    border-bottom: none;
}

.panel-dash-item-end {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.panel-dash-item-main {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    text-align: left;
}

.panel-dash-item-main strong {
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.35;
}

.panel-dash-item-main .muted {
    font-size: 0.72rem;
    line-height: 1.35;
}

.panel-dash-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.panel-dashboard-compact .panel-dash-item-main strong {
    font-size: 0.8rem;
}

.panel-dashboard-compact .panel-dash-item-main .muted {
    font-size: 0.68rem;
}

.panel-dash-list-tickets li {
    border-bottom: 1px solid var(--border);
}

.panel-dash-list-tickets li:last-child {
    border-bottom: none;
}

.panel-dash-ticket {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.65rem;
    padding: 0.65rem 0.95rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.panel-dashboard-compact .panel-dash-ticket {
    padding: 0.55rem 0.85rem;
}

.panel-dash-ticket:hover {
    background: color-mix(in srgb, var(--text) 4%, var(--card));
    text-decoration: none;
    color: inherit;
}

.panel-dash-ticket-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    text-align: left;
}

.panel-dash-ticket-body strong {
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.35;
}

.panel-dash-ticket-body .muted {
    font-size: 0.72rem;
    line-height: 1.35;
}

.panel-dashboard-compact .panel-dash-ticket-body strong {
    font-size: 0.8rem;
}

.panel-dashboard-compact .panel-dash-ticket-body .muted {
    font-size: 0.68rem;
}

.panel-dashboard-compact .badge-status {
    font-size: 0.65rem;
    padding: 0.40rem 0.38rem;
}

.panel-stat-compact {
    margin-bottom: 1.25rem;
}

.panel-stat-compact .stat-card {
    padding: 0.95rem 1rem;
}

.panel-stat-compact .stat-num {
    font-size: 1.55rem;
}

.panel-stat-compact .stat-label {
    font-size: 0.8rem;
}

.panel-page-ozet .stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.panel-page-ozet .page-title {
    font-size: 1.45rem;
}

.panel-page-ozet .page-sub {
    font-size: 0.88rem;
    margin-bottom: 1.15rem;
}

/* —— Üst bar, kampanya, mega menü, modal, ürün sayfaları (v3) —— */
.topbar {
    background: linear-gradient(90deg, #0f172a, #1e3a5f);
    color: #e2e8f0;
    font-size: 0.8rem;
}

.topbar-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1rem;
    min-height: 2.25rem;
}

.topbar a {
    color: #e2e8f0;
    text-decoration: none;
}

.topbar a:hover {
    text-decoration: underline;
}

.topbar-sep {
    margin: 0 0.5rem;
    opacity: 0.4;
}

.promo-strip {
    text-align: center;
    font-size: 0.8rem;
    padding: 0.45rem 1rem;
    background: color-mix(in srgb, var(--primary) 18%, #0f172a);
    color: #f8fafc;
}

.promo-strip strong {
    color: #fff;
}

.site-header-main {
    top: 0;
    /* Mega panel fixed konumda üst boşluk için */
    --site-header-stack-h: 4.35rem;
}

.nav-list-main {
    align-items: center;
    justify-content: flex-start;
    margin-right: 0;
    width: 100%;
}

.nav-mega-wrap {
    position: relative;
}

.nav-mega-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: none;
    border: none;
    font: inherit;
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem 0;
}

.nav-mega-btn:hover,
.nav-mega-btn[aria-expanded="true"] {
    color: var(--text);
}

.nav-caret {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--text-muted);
    margin-top: 2px;
}

.nav-badge {
    margin-left: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.14rem 0.42rem;
    border-radius: 999px;
    /* color-mix bazı tarayıcılarda neredeyse şeffaf kalabiliyor; opak yedek */
    background: rgba(56, 189, 248, 0.22);
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    border: 1px solid rgba(56, 189, 248, 0.45);
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
    color: color-mix(in srgb, var(--accent) 78%, #fff);
    vertical-align: middle;
    line-height: 1;
}

.nav-badge-inline {
    margin-left: 0.35rem;
    font-size: 0.6rem;
    vertical-align: super;
}

.mega-panel {
    position: absolute;
    left: 0;
    right: auto;
    transform: translateY(6px);
    top: 100%;
    margin-top: 0.5rem;
    min-width: min(920px, 94vw);
    padding: 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 200;
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.nav-mega-wrap.is-open .mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

@media (min-width: 1200px) {
    .header-inner {
        gap: 1.75rem;
    }

    /* Menü + tema/kullanıcı bloğu sağda (logo solda kalır) */
    .site-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        min-width: 0;
    }

    .nav-list-main {
        flex-wrap: wrap;
        justify-content: flex-end;
        width: auto;
        max-width: min(72vw, 58rem);
        margin-right: 0;
        gap: 0.25rem 0px;
    }

    .nav-list-main > li {
        flex: 0 0 auto;
    }

    .nav-list-main > li > a {
        display: inline-flex;
        align-items: center;
        font-size: 14px;
        font-weight: 600;
        padding: 0.5rem 0.95rem;
        border-radius: 10px;
    }

    .nav-list-main .nav-mega-btn {
        font-size: 14px;
        font-weight: 600;
        padding: 0.5rem 0.95rem;
        border-radius: 10px;
    }

    .nav-list-main > li > a:hover,
    .nav-list-main .nav-mega-btn:hover {
        background: color-mix(in srgb, var(--primary) 10%, transparent);
    }

    .nav-actions {
        justify-self: unset;
        flex-shrink: 0;
    }

    /* Sunucu mega paneli ekranda yatay ortada (viewport merkezi) */
    .site-header-main .nav-mega-wrap .mega-panel {
        position: fixed;
        left: 50%;
        right: auto;
        top: calc(var(--site-header-stack-h) + env(safe-area-inset-top, 0px));
        width: min(920px, calc(100vw - 1.5rem));
        max-width: 94vw;
        min-width: unset;
        margin-top: 0.35rem;
        transform: translate(-50%, 10px);
        z-index: 250;
    }

    .site-header-main .nav-mega-wrap .mega-panel::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -0.75rem;
        height: 0.75rem;
    }

    .site-header-main .nav-mega-wrap:hover .mega-panel,
    .site-header-main .nav-mega-wrap:focus-within .mega-panel,
    .site-header-main .nav-mega-wrap.is-open .mega-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }

    .nav-mega-wrap:hover .nav-mega-btn,
    .nav-mega-wrap:focus-within .nav-mega-btn {
        color: var(--text);
    }
}

/* Mobil çekmece: dosya içinde daha sonra gelen .nav-mega-btn (masaüstü satır menü)
   aynı özgüllükte olduğu için mobil kart/yazı stillerini eziyor — güçlü seçiciyle geri al */
@media (max-width: 1199px) {
    .site-header-main .site-nav .nav-list-main > li.nav-mega-wrap .nav-mega-btn {
        display: flex;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        min-height: 3.15rem;
        padding: 0.8rem 1rem;
        text-align: left;
        font-size: 1.02rem;
        font-weight: 600;
        line-height: 1.25;
        font-family: inherit;
        color: var(--text);
        border-radius: inherit;
        background: transparent;
        border: none;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

    .site-header-main .site-nav .nav-list-main > li.nav-mega-wrap.is-open .nav-mega-btn {
        background: color-mix(in srgb, var(--primary) 8%, transparent);
        color: var(--text);
    }

    .site-header-main .site-nav .nav-list-main > li.nav-mega-wrap .nav-mega-btn:active {
        background: color-mix(in srgb, var(--primary) 10%, transparent);
    }

    .site-header-main .site-nav .nav-list-main > li.nav-mega-wrap .nav-mega-btn .nav-caret {
        border-top-color: color-mix(in srgb, var(--text) 55%, var(--text-muted) 45%);
    }
}

.mega-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.65rem;
}

.mega-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.mega-item:hover {
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.mega-icon img {
    display: block;
}

.mega-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
}

.mega-sub {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
    line-height: 1.35;
}

/* Mega menü Tema 2 — çok sütun + sol CTA */
.site-header-main .nav-mega-wrap .mega-panel--theme2 {
    width: min(1120px, calc(100vw - 1.5rem));
    min-width: min(920px, 94vw);
    padding: 0;
    overflow: hidden;
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
}

[data-theme="dark"] .site-header-main .nav-mega-wrap .mega-panel--theme2 {
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
}

.mega2 {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 14rem;
}

.mega2-side {
    flex: 0 0 clamp(15rem, 26%, 18rem);
    padding: 1.35rem 1.25rem 1.5rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, var(--primary) 12%) 0%, color-mix(in srgb, var(--card) 92%, var(--primary) 8%) 100%);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.mega2-side-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    background: var(--card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.mega2-side-icon img {
    width: 1.85rem;
    height: 1.85rem;
    object-fit: contain;
}

.mega2-side-titles {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    gap: 0.12rem;
}

.mega2-side-t1 {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
}

.mega2-side-t2 {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--primary);
}

.mega2-side-desc {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.mega2-side-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.62rem 1rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.86rem;
    text-decoration: none;
    color: #ffffff !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 92%, #000 8%), var(--primary));
    border: 1px solid color-mix(in srgb, var(--primary) 70%, transparent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 35%, transparent);
}

.mega2-side-cta:visited {
    color: #ffffff !important;
}

.mega2-side-cta:hover {
    text-decoration: none;
    filter: brightness(1.05);
    color: #ffffff !important;
}

.mega2-side-cta:focus-visible {
    color: #ffffff !important;
    outline-offset: 2px;
}

.mega2-side-cta-arr {
    font-size: 1rem;
    opacity: 0.95;
    color: inherit;
}

.mega2-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mega2-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 1rem 1.1rem 0.85rem;
    flex: 1;
}

.mega2-col {
    padding: 0 0.85rem;
    border-left: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}

.mega2-col:first-child {
    border-left: none;
    padding-left: 0.35rem;
}

.mega2-col-h {
    margin: 0 0 0.65rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.mega2-col-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mega2-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.55rem 0.45rem;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.mega2-item:hover {
    background: color-mix(in srgb, var(--primary) 6%, var(--card));
    border-color: color-mix(in srgb, var(--primary) 15%, var(--border));
    text-decoration: none;
}

.mega2-item-ico {
    flex-shrink: 0;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 10px;
    overflow: hidden;
    background: color-mix(in srgb, var(--primary) 10%, var(--card));
    display: flex;
    align-items: center;
    justify-content: center;
}

.mega2-item-ico img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mega2-item-title {
    display: block;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text);
}

.mega2-item-sub {
    display: block;
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-top: 0.12rem;
    line-height: 1.35;
}

.mega2-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem 1rem;
    padding: 0.75rem 1.15rem;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 55%, var(--card) 45%);
}

.mega2-foot-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.5rem;
}

.mega2-trust-i {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.72rem;
    line-height: 1.35;
}

.mega2-trust-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    margin-top: 0.28rem;
    flex-shrink: 0;
    background: var(--mega2-dot, #22c55e);
}

.mega2-trust-pulse {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    margin-top: 0.25rem;
    flex-shrink: 0;
    background: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
    animation: mega2-pulse 1.8s ease-in-out infinite;
}

@keyframes mega2-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.55;
    }
}

.mega2-trust-txt strong {
    display: block;
    font-size: 0.78rem;
    color: var(--text);
}

.mega2-trust-sub {
    display: block;
    color: var(--text-muted);
    font-size: 0.7rem;
}

@media (max-width: 1100px) {
    .mega2-cols {
        grid-template-columns: 1fr 1fr;
    }

    .mega2-col:nth-child(3) {
        grid-column: 1 / -1;
        border-left: none;
        padding-top: 0.65rem;
        border-top: 1px dashed var(--border);
    }
}

@media (max-width: 720px) {
    .mega2 {
        flex-direction: column;
    }

    .mega2-side {
        flex: none;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .mega2-cols {
        grid-template-columns: 1fr;
    }

    .mega2-col {
        border-left: none;
        padding: 0.5rem 0;
        border-bottom: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
    }

    .mega2-col:last-child {
        border-bottom: none;
    }
}

/* Mega menü — “Tümünü İncele” tam liste sayfası */
.page-mega-catalog .mega-catalog-hero {
    padding: 1.75rem 0 1.25rem;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg) 88%, var(--primary) 10%) 0%,
        color-mix(in srgb, var(--card) 94%, var(--primary) 6%) 100%
    );
    border-bottom: 1px solid var(--border);
}

.page-mega-catalog .mega-catalog-hero .breadcrumb {
    margin-bottom: 1rem;
    font-size: 0.82rem;
}

.page-mega-catalog .mega-catalog-hero-inner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-mega-catalog .mega-catalog-hero-ico {
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 14px;
    background: var(--card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.page-mega-catalog .mega-catalog-hero-ico img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.page-mega-catalog .mega-catalog-title {
    margin: 0;
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.page-mega-catalog .mega-catalog-t1 {
    display: block;
    color: var(--text);
}

.page-mega-catalog .mega-catalog-t2 {
    display: block;
    color: var(--primary);
}

.page-mega-catalog .mega-catalog-title--plain {
    color: var(--text);
}

.page-mega-catalog .mega-catalog-lead {
    margin: 0.5rem 0 0;
    max-width: 40rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.page-mega-catalog .mega-catalog-body {
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
}

.page-mega-catalog .mega-catalog-block {
    margin-bottom: 2rem;
}

.page-mega-catalog .mega-catalog-block:last-of-type {
    margin-bottom: 0;
}

.page-mega-catalog .mega-catalog-block-h {
    margin: 0 0 0.85rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.page-mega-catalog .mega-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 0.75rem;
}

.page-mega-catalog .mega-catalog-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 0.9rem;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}

.page-mega-catalog .mega-catalog-card:hover {
    text-decoration: none;
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    box-shadow: 0 8px 26px color-mix(in srgb, var(--primary) 12%, transparent);
    transform: translateY(-1px);
}

.page-mega-catalog .mega-catalog-card-ico {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 11px;
    overflow: hidden;
    background: color-mix(in srgb, var(--primary) 10%, var(--card));
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-mega-catalog .mega-catalog-card-ico img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.page-mega-catalog .mega-catalog-card-title {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text);
}

.page-mega-catalog .mega-catalog-card-sub {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-muted);
}

.page-mega-catalog .mega-catalog-empty {
    max-width: 32rem;
    line-height: 1.5;
}

.mega-item--align-center .mega-body {
    text-align: center;
}

.mega-item--align-right .mega-body {
    text-align: right;
}

.mega-item--align-center .mega-title {
    justify-content: center;
}

.mega-item--align-right .mega-title {
    justify-content: flex-end;
}

.pill {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pill-sale {
    background: #10b981;
    color: #fff;
}

.pill-new {
    background: #f59e0b;
    color: #1e1b4b;
}

@media (max-width: 1199px) {
    .mega-panel {
        position: static;
        transform: none;
        min-width: 100%;
        margin-top: 0.5rem;
        margin-bottom: 0.25rem;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        display: none;
        box-shadow: none;
        padding: 0.35rem 0 0.5rem;
        background: transparent;
        border: none;
    }

    .nav-mega-wrap.is-open .mega-panel {
        display: block;
        transform: none;
    }
}

/* Hero pro */
.hero-pro .hero-pro-inner {
    align-items: stretch;
}

.hero-footnote {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0.5rem 0 0;
}

.hero-pro-visual {
    position: relative;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}

/* Hero sağ — gelişmiş sahne */
.hero-stage {
    position: relative;
    min-height: clamp(340px, 48vw, 440px);
    padding: 0.25rem 0 0.5rem;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    display: block;
}

.hero-stage-grid {
    position: absolute;
    inset: 4%;
    border-radius: 20px;
    background-image:
        linear-gradient(color-mix(in srgb, var(--border) 45%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--border) 45%, transparent) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: 0.35;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
    pointer-events: none;
    animation: hero-grid-shift 18s linear infinite;
}

@keyframes hero-grid-shift {
    to {
        background-position: 22px 22px;
    }
}

.hero-stage-aurora {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background:
        radial-gradient(ellipse 90% 60% at 20% 30%, color-mix(in srgb, var(--primary) 35%, transparent), transparent 55%),
        radial-gradient(ellipse 70% 50% at 85% 70%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 50%);
    opacity: 0.85;
    pointer-events: none;
}

.hero-stage-scan {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        color-mix(in srgb, var(--primary) 12%, transparent) 48%,
        transparent 52%
    );
    background-size: 100% 220%;
    animation: hero-scan 5.5s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.4;
}

@keyframes hero-scan {
    0%,
    100% {
        background-position: 0 0;
    }
    50% {
        background-position: 0 100%;
    }
}

.hero-orbit {
    position: absolute;
    width: 120px;
    height: 120px;
    top: 6%;
    right: 4%;
    pointer-events: none;
    z-index: 1;
}

.hero-orbit-ring {
    position: absolute;
    inset: 0;
    border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
    border-radius: 50%;
    animation: hero-orbit-spin 22s linear infinite;
}

.hero-orbit-dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
}

.hero-orbit-dot.od1 {
    top: -3px;
    left: calc(50% - 3.5px);
    animation: hero-dot-bob 2.8s ease-in-out infinite;
}

.hero-orbit-dot.od2 {
    bottom: 12%;
    right: 0;
    animation: hero-dot-bob 3.2s ease-in-out infinite 0.4s;
}

.hero-orbit-dot.od3 {
    bottom: 8%;
    left: 8%;
    background: var(--primary);
    animation: hero-dot-bob 2.6s ease-in-out infinite 0.9s;
}

@keyframes hero-orbit-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes hero-dot-bob {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.hero-command-center {
    position: relative;
    z-index: 3;
    margin: 0 auto 1rem;
    width: min(100%, 300px);
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
    background: color-mix(in srgb, var(--card) 78%, transparent);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--text) 4%, transparent) inset;
    overflow: hidden;
}

.hero-cc-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero-cc-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 10px #22c55e;
    animation: pulse-led 1.8s ease-in-out infinite;
}

.hero-cc-title {
    flex: 1;
    color: var(--text-muted);
}

.hero-cc-live {
    font-size: 0.62rem;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    background: color-mix(in srgb, #22c55e 22%, transparent);
    color: #16a34a;
}

[data-theme="dark"] .hero-cc-live {
    color: #86efac;
}

.hero-cc-metrics {
    padding: 0.65rem 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.hero-cc-metric {
    display: grid;
    grid-template-columns: 5.2rem 1fr auto;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
}

.hero-cc-label {
    color: var(--text-muted);
}

.hero-cc-bar {
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 8%, var(--border));
    overflow: hidden;
}

.hero-cc-fill {
    display: block;
    height: 100%;
    width: var(--w, 50%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    animation: hero-bar-pulse 3s ease-in-out infinite;
}

.hero-cc-fill-slow {
    animation-duration: 4.2s;
    animation-delay: -1s;
}

@keyframes hero-bar-pulse {
    0%,
    100% {
        opacity: 0.85;
    }
    50% {
        opacity: 1;
    }
}

.hero-cc-val {
    font-weight: 700;
    font-size: 0.72rem;
    text-align: right;
    white-space: nowrap;
}

.hero-cc-val small {
    font-weight: 600;
    opacity: 0.75;
    margin-left: 0.1rem;
}

.hero-cc-num {
    font-variant-numeric: tabular-nums;
    animation: hero-num-tick 4s ease-in-out infinite;
}

@keyframes hero-num-tick {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.82;
    }
}

.hero-cc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0 0.75rem 0.65rem;
}

.hero-cc-tags span {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 40%, var(--card));
    color: var(--text-muted);
}

.hero-stage-rack {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.hero-beams {
    width: min(280px, 90%);
    height: 72px;
    color: color-mix(in srgb, var(--primary) 65%, var(--accent));
    opacity: 0.55;
}

.hero-beam {
    stroke: currentColor;
    stroke-dasharray: 6 10;
    animation: hero-beam-dash 2.2s linear infinite;
}

.hero-beam-b {
    animation-delay: -0.7s;
    opacity: 0.7;
}

.hero-beam-c {
    animation-delay: -1.2s;
}

@keyframes hero-beam-dash {
    to {
        stroke-dashoffset: -32;
    }
}

.hero-float-chip {
    position: absolute;
    z-index: 4;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    background: color-mix(in srgb, var(--card) 85%, transparent);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
    animation: hero-float-y 3.4s ease-in-out infinite;
}

.hero-chip-1 {
    top: 20%;
    left: -13px;
    max-width: 42%;
}

.hero-chip-2 {
    bottom: 6%;
    right: -20px;
    animation-delay: -1.1s;
    animation-direction: reverse;
    max-width: 48%;
}

@media (max-width: 600px) {
    .hero-orbit {
        width: 88px;
        height: 88px;
        top: 2%;
    }

    .hero-cc-metric {
        grid-template-columns: 4.5rem 1fr auto;
        font-size: 0.68rem;
    }

    .hero-float-chip {
        font-size: 0.55rem;
    }
}

.hero-pro-glow {
    position: absolute;
    inset: 0;
    border-radius:8px;
    pointer-events: none;
}

.hero-rack {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: min(220px, 100%);
    z-index: 1;
}

.hero-rack-xl {
    width: min(268px, 100%);
    z-index: 1;
}

.hero-rack-xl .hero-rack-unit {
    height: 58px;
}

.hero-rack-unit {
    height: 52px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--bg) 40%, var(--card)));
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
}

.hero-rack-unit span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: 0.35;
}

.hero-rack-unit .blink {
    background: var(--accent);
    opacity: 1;
    animation: pulse-led 1.6s ease-in-out infinite;
}

@keyframes pulse-led {
    0%,
    100% {
        opacity: 0.35;
    }
    50% {
        opacity: 1;
    }
}

.hero-rack .u2 {
    border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
}

.hero-rack .u3 {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.hero-pro-cards {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    width: 100%;
    max-width: 280px;
}

.hero-pro-card {
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 90%, transparent);
    backdrop-filter: blur(10px);
}

.hpc-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
}

.hero-pro-card strong {
    display: block;
    font-size: 0.95rem;
}

.hero-pro-card small {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.hero-stats-pro {
    margin-top: 0.5rem;
}

/* Ana sayfa hero — mobil / dar ekran (istatistikler, CTA, boşluklar) */
@media (max-width: 900px) {
    .hero-pro .hero-pro-inner {
        gap: clamp(1.25rem, 4vw, 2rem);
    }

    .hero-copy .lead {
        max-width: none;
        line-height: 1.55;
    }

    .hero-stats,
    .hero-stats-pro {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.9rem 1rem;
        justify-items: start;
        width: 100%;
    }

    .hero-stats li {
        width: 100%;
        padding: 0.65rem 0.85rem;
        border-radius: var(--radius-sm);
        border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
        background: color-mix(in srgb, var(--card) 40%, transparent);
        box-sizing: border-box;
    }

    .hero-stats strong {
        font-size: 1.12rem;
    }

    .hero-cta {
        margin-bottom: 1.35rem;
    }
}

@media (max-width: 640px) {
    .hero {
        padding-top: clamp(1.75rem, 6vw, 3rem);
        padding-bottom: clamp(1.75rem, 5vw, 2.75rem);
    }

    .hero h1 {
        font-size: clamp(1.5rem, 8.5vw, 2.35rem);
        line-height: 1.18;
    }

    .hero .eyebrow {
        font-size: 0.72rem;
        letter-spacing: 0.05em;
    }

    .hero-copy .lead {
        font-size: 0.95rem;
        margin-bottom: 1.25rem;
    }

    .hero-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
    }

    .hero-cta .btn {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        min-height: 2.85rem;
    }

    .hero.hero-pro .hero-stage-visual,
    .hero.hero-pro .hero-pro-visual.hero-stage {
        min-height: min(52vw, 220px);
    }

    .hero.hero-pro .hero-vds-figure {
        max-width: 100%;
    }
}

/* Ana sayfa — öne çıkan VDS */
.section-home-vds {
    padding-top: 2.5rem;
    background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--primary) 4%, var(--bg)));
}

.section-head-wide {
    max-width: 640px;
}

.home-vds-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 720px;
    margin-inline: auto;
}

.home-vds-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding: 1.25rem 1.35rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.home-vds-row:hover {
    border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.home-vds-row.featured {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
    background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 8%, var(--card)), var(--card));
}

.home-vds-row-main {
    flex: 1 1 280px;
    min-width: 0;
}

.home-vds-row-titles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.home-vds-row h3 {
    margin: 0;
    font-size: 1.08rem;
}

.home-vds-pill {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--primary), var(--accent-2));
    color: #fff;
}

.home-vds-desc {
    margin: 0 0 0.75rem;
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.home-vds-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.home-vds-chips li {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.28rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 35%, var(--card));
    color: var(--text-muted);
}

.home-vds-row-side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    min-width: min(100%, 200px);
}

.home-vds-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem;
}

.home-vds-old {
    font-size: 0.82rem;
    text-decoration: line-through;
    color: var(--text-muted);
}

.home-vds-now {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.home-vds-now small {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}

.home-vds-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.home-vds-actions .btn {
    flex: 1 1 auto;
    min-width: 6.5rem;
    justify-content: center;
}

/* Hub */
.section-hub {
    padding-top: 2rem;
}

.hub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 900px) {
    .hub-grid {
        grid-template-columns: 1fr;
    }
}

.hub-card {
    display: block;
    padding: 1.25rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--card);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.hub-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
    text-decoration: none;
}

.hub-ico {
    display: block;
    margin-bottom: 0.65rem;
}

.hub-card h3 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.hub-card p {
    margin: 0 0 0.65rem;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.hub-link {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--primary);
}

.hub-ico-text {
    font-size: 2.25rem;
    line-height: 1;
}

/* Ürün sayfası */
.page-hero-slim {
    padding: clamp(2rem, 5vw, 3rem) 0 1.5rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--primary) 5%, var(--bg));
}

.page-hero-slim h1 {
    margin: 0.5rem 0 0.35rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.page-lead {
    margin: 0;
    max-width: 56ch;
    color: var(--text-muted);
}

.breadcrumb {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.breadcrumb a {
    color: inherit;
}

.breadcrumb span {
    margin: 0 0.35rem;
    opacity: 0.5;
}

.page-product .section:first-of-type + .section {
    padding-top: 2rem;
}

.narrow-prose,
.narrow-form {
    max-width: 640px;
    margin-inline: auto;
}

.prose-block h2 {
    margin: 1.5rem 0 0.5rem;
    font-size: 1.15rem;
}

.prose-block p {
    color: var(--text-muted);
}

.cta-center {
    text-align: center;
    margin-top: 1.5rem;
}

.info-cards {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

.info-card {
    padding: 1rem 1.15rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
}

.check-list {
    padding-left: 1.2rem;
    color: var(--text-muted);
}

.contact-form {
    margin-bottom: 1.5rem;
}

.contact-alt {
    padding: 1.25rem;
}

.contact-alt h2 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

/* OS grid + DC strip */
.os-grid-wrap {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border);
}

.os-grid-title {
    text-align: center;
    font-weight: 600;
    margin: 0 0 1rem;
}

.os-grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.65rem;
    max-width: 900px;
}

.os-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.65rem 0.35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
    font-size: 0.72rem;
    font-weight: 600;
}

.os-card-ico {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 12%, var(--card));
    color: var(--primary);
    display: grid;
    place-items: center;
    font-size: 0.65rem;
    margin-bottom: 0.35rem;
}

.dc-strip {
    padding: 1rem 0;
    background: color-mix(in srgb, var(--text) 4%, var(--bg));
    border-bottom: 1px solid var(--border);
}

.dc-strip-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.dc-logo {
    font-weight: 800;
    font-size: 0.85rem;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
}

.dc-strip p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    flex: 1;
    min-width: 200px;
}

/* Keyubu tarzı fiyat tablosu */
.price-table-wrap {
    border: none;
    background: transparent;
}

.price-table-keyubu {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.price-table-keyubu thead th {
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--accent) 55%, var(--primary)));
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.85rem 0.75rem;
    text-align: left;
}

.price-table-keyubu tbody td {
    padding: 0.85rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.price-table-keyubu tbody tr:last-child td {
    border-bottom: none;
}

.price-table-keyubu tbody tr:hover {
    background: color-mix(in srgb, var(--text) 3%, var(--card));
}

.cell-muted {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.pt-disc {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #ea580c;
    margin-bottom: 0.2rem;
}

[data-theme="dark"] .pt-disc {
    color: #fb923c;
}

.pt-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.25rem;
}

.pt-old-struck {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 600;
}

.catalog-discount-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 6px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, #16a34a), color-mix(in srgb, var(--primary) 42%, #15803d));
    color: #fff;
    line-height: 1.2;
}

.modal-price-meta {
    display: block;
    width: 100%;
    margin-bottom: 0.35rem;
}

.modal-price-meta:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.modal-price-old {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
}

.admin-price-cell .admin-price-old {
    display: block;
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.admin-price-cell .admin-price-sale {
    font-weight: 600;
}

.admin-price-cell .catalog-discount-badge {
    margin-left: 0.35rem;
    vertical-align: middle;
}

.vds-sc-price-promo {
    margin-bottom: 0.25rem;
}

.hizmet-price-old {
    text-decoration: line-through;
    color: var(--text-muted);
    margin-right: 0.35rem;
}

.hizmet-card-price-cell small {
    display: block;
    margin-bottom: 0.15rem;
}

.pt-price {
    font-size: 1.1rem;
    font-weight: 700;
}

.pt-price small {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
}

.pt-action {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .price-table-keyubu thead {
        display: none;
    }

    .price-table-keyubu tbody tr {
        display: block;
        border-bottom: 1px solid var(--border);
        padding: 0.75rem 0;
    }

    .price-table-keyubu tbody td {
        display: block;
        border: none;
        padding: 0.35rem 0.75rem;
    }

    .price-table-keyubu tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 0.15rem;
    }

    .pt-action::before {
        content: "";
    }
}

/* Modal */
html.modal-open {
    overflow: hidden;
}

.modal-root {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.modal-root[hidden] {
    display: none;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(15 23 42 / 0.55);
    backdrop-filter: blur(4px);
}

.modal-dialog {
    position: relative;
    width: min(480px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1.35rem;
    box-shadow: var(--shadow);
    z-index: 1;
}

.modal-dialog-wide {
    width: min(520px, 100%);
}

.modal-success-rich {
    text-align: center;
}

.checkout-done-ico {
    color: var(--accent);
    margin: 0 auto 0.65rem;
    display: flex;
    justify-content: center;
}

.checkout-done-title {
    margin: 0 0 0.35rem;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}

.checkout-done-lead {
    margin-bottom: 0.75rem !important;
}

.checkout-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, #ef4444 14%, var(--card));
    color: #dc2626;
    border: 1px solid color-mix(in srgb, #ef4444 45%, var(--border));
    margin-bottom: 1rem;
}

[data-theme="dark"] .checkout-status-pill {
    color: #f87171;
    background: color-mix(in srgb, #ef4444 18%, var(--bg));
}

.checkout-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 8px #ef4444;
    animation: pulse-led 1.5s ease-in-out infinite;
}

.checkout-invoice-card {
    text-align: left;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg) 40%, var(--card));
    overflow: hidden;
    margin-bottom: 1rem;
}

.checkout-invoice-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.checkout-invoice-card-head strong {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0;
    text-transform: none;
}

.checkout-invoice-rows {
    list-style: none;
    margin: 0;
    padding: 0.35rem 0;
    font-size: 0.88rem;
}

.checkout-invoice-rows li {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.checkout-invoice-rows li:last-child {
    border-bottom: none;
}

.checkout-invoice-rows li span:first-child {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.checkout-invoice-rows li strong {
    font-weight: 600;
}

.checkout-invoice-desc {
    grid-template-columns: 5.5rem 1fr;
}

.checkout-desc-text {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.checkout-pay-box {
    padding: 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px dashed color-mix(in srgb, var(--primary) 35%, var(--border));
    background: color-mix(in srgb, var(--primary) 6%, var(--card));
    margin-bottom: 1rem;
}

.checkout-pay-hint {
    margin: 0 0 0.65rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
    text-align: left;
}

.checkout-ts3-pay {
    margin-top: 1rem;
    padding: 1rem 1.05rem;
    text-align: left;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
}

.checkout-ts3-pay-title {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
}

.checkout-ts3-pay-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.checkout-ts3-pay-note {
    margin: 0.65rem 0 0;
}

.checkout-ts3-confirm .checkout-ts3-confirm-card {
    margin: 0.65rem 0 1rem;
    padding: 0.85rem 1rem;
    text-align: left;
}

.checkout-ts3-confirm-method {
    margin: 0.35rem 0 0;
    font-size: 1rem;
    font-weight: 600;
}

.checkout-ts3-confirm #checkoutTs3ConfirmHint {
    margin: 0 0 0.25rem;
    line-height: 1.45;
}

.checkout-status-pill.is-paid {
    background: color-mix(in srgb, #22c55e 16%, var(--card));
    color: #15803d;
    border-color: color-mix(in srgb, #22c55e 40%, var(--border));
}

[data-theme="dark"] .checkout-status-pill.is-paid {
    color: #86efac;
    background: color-mix(in srgb, #22c55e 18%, var(--bg));
}

.checkout-status-pill.is-paid .checkout-status-dot {
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
    animation: none;
}

.modal-actions-stack {
    flex-direction: column;
    align-items: stretch;
}

.modal-actions-stack .btn {
    width: 100%;
    justify-content: center;
}

.modal-x {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--text) 6%, var(--card));
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text);
}

.modal-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.modal-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
}

.modal-step-dot.is-on {
    background: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}

.modal-step-line {
    width: 24px;
    height: 2px;
    background: var(--border);
    border-radius: 1px;
}

.modal-title {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
}

.modal-lead {
    font-size: 0.92rem;
    color: var(--text-muted);
    margin: 0 0 1rem;
}

.modal-product {
    padding: 1rem;
    margin-bottom: 1rem;
}

.modal-p-name {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.modal-spec-list {
    margin: 0.5rem 0 0.75rem;
    padding-left: 1.1rem;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.modal-p-price {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
}

.modal-p-price .period {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
}

.modal-checklist {
    margin: 0 0 1rem;
    padding-left: 1.1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.page-hero-ryzen {
    background: linear-gradient(135deg, color-mix(in srgb, #7c3aed 12%, var(--bg)), var(--bg));
}

.page-hero-discord {
    background: linear-gradient(135deg, color-mix(in srgb, #5865f2 15%, var(--bg)), var(--bg));
}

/* Hero: sadece rack, kartlar kaldırıldı */
.hero-rack-lg {
    transform: scale(1.06);
}

/* TeamSpeak 3 sayfası (v4) */
.ts3-hero {
    position: relative;
    padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}

.ts3-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 70% at 20% 20%, color-mix(in srgb, #38bdf8 18%, transparent), transparent 55%),
        radial-gradient(ellipse 60% 50% at 90% 60%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 50%),
        linear-gradient(180deg, color-mix(in srgb, #0f172a 88%, var(--bg)), var(--bg));
    pointer-events: none;
}

[data-theme="light"] .ts3-hero-bg {
    background:
        radial-gradient(ellipse 80% 70% at 20% 20%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 55%),
        radial-gradient(ellipse 60% 50% at 90% 60%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 50%),
        linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, var(--bg)), var(--bg));
}

.ts3-hero-inner {
    position: relative;
}

.ts3-breadcrumb {
    color: color-mix(in srgb, var(--text) 65%, #94a3b8);
}

.ts3-breadcrumb a {
    color: inherit;
}

.ts3-hero-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 0.5rem;
}

.ts3-hero-title {
    margin: 0 0 0.65rem;
    font-size: clamp(1.75rem, 4vw, 2.35rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.ts3-hero-lead {
    margin: 0 0 1.25rem;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 52ch;
}

.ts3-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ts3-hero-pills li {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 70%, transparent);
    backdrop-filter: blur(8px);
}

.ts3-hero-note {
    margin: 0.75rem 0 0;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.ts3-showcase-section {
    padding-top: 2.5rem;
}

.ts3-section-head {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 2rem;
}

.ts3-section-head h2 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
}

.ts3-section-head p {
    margin: 0;
    color: var(--text-muted);
}

.ts3-pro-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.35rem;
    align-items: stretch;
}

@media (max-width: 1000px) {
    .ts3-pro-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-inline: auto;
    }
}

.ts3-pro-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--card);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ts3-pro-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}

.ts3-pro-card.is-featured {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    box-shadow: var(--shadow);
}

.ts3-pro-ribbon {
    position: absolute;
    top: 12px;
    right: -32px;
    z-index: 3;
    transform: rotate(45deg);
    width: 140px;
    text-align: center;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.35rem 0;
    background: linear-gradient(90deg, var(--accent), var(--primary));
    color: #fff;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.2);
}

.ts3-pro-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #0f172a;
}

.ts3-pro-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ts3-pro-img-ph {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #1e293b, #0f172a 50%, color-mix(in srgb, var(--primary) 35%, #0f172a));
}

.ts3-pro-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / 0.75));
    pointer-events: none;
}

.ts3-pro-tier {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 2;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    padding: 0.4rem 0.65rem;
    border-radius: 8px;
    background: rgb(0 0 0 / 0.55);
    color: #f8fafc;
    border: 1px solid rgb(255 255 255 / 0.12);
    backdrop-filter: blur(6px);
}

.ts3-pro-body {
    padding: 1.25rem 1.35rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.35rem;
}

.ts3-pro-name {
    margin: 0;
    font-size: 1.2rem;
}

.ts3-pro-desc {
    margin: 0 0 0.5rem;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.45;
    flex: 1;
}

.ts3-pro-features {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.4rem;
    font-size: 0.86rem;
    color: var(--text-muted);
}

.ts3-pro-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}

.tf-ico {
    color: var(--accent);
    font-size: 0.65rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.ts3-pro-features strong {
    color: var(--text);
}

.ts3-pro-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.ts3-pro-old {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.ts3-pro-price {
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.ts3-pro-cur {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.85;
    margin-right: 0.1rem;
}

.ts3-pro-per {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 0.15rem;
}

/* —— v7: Hero VDS foto, vitrin kartları, yorumlar —— */
.hero-stage-visual {
    position: relative;
    min-height: clamp(280px, 38vw, 380px);
    max-width: 440px;
	border-radius:8px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-vds-figure {
    position: relative;
    z-index: 2;
    margin: 0;
    width: 100%;
    max-width: 400px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
        0 20px 50px rgb(15 23 42 / 0.18),
        0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
}

.hero-vds-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    aspect-ratio: 3 / 2;
}

.hero-stage-visual .hero-float-chip {
    z-index: 3;
}

/* Öne çıkan VDS — 3 sütun vitrin kartı */
.vds-showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.35rem;
    align-items: start;
    max-width: 1100px;
    margin-inline: auto;
}

@media (max-width: 960px) {
    .vds-showcase {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .vds-showcase-card.is-featured {
        transform: none;
    }
}

.vds-showcase-card {
    position: relative;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--border) 90%, #cbd5e1);
    border-radius: 14px;
    padding: 2rem 1.75rem 1.75rem;
    box-shadow: 0 10px 36px rgb(15 23 42 / 0.08);
    text-align: center;
    transition: box-shadow 0.25s, transform 0.25s;
}

[data-theme="dark"] .vds-showcase-card {
    background: var(--card);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.vds-showcase-card:hover {
    box-shadow: 0 16px 44px rgb(15 23 42 / 0.12);
}

.vds-showcase-card.is-featured {
    border-top: 5px solid #1e3a8a;
    transform: scale(1.03);
    z-index: 1;
    padding-top: calc(2rem + 2px);
    box-shadow: 0 16px 48px rgb(30 58 138 / 0.15);
}

[data-theme="dark"] .vds-showcase-card.is-featured {
    border-top-color: var(--primary);
}

.vds-sc-ribbon {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.22rem 0.5rem;
    border-radius: 6px;
    background: linear-gradient(135deg, #1e3a8a, var(--primary));
    color: #fff;
}

.vds-sc-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.vds-sc-icon img {
    opacity: 0.92;
}

.vds-sc-title {
    margin: 0 0 1.1rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
}

[data-theme="dark"] .vds-sc-title {
    color: var(--text);
}

.vds-sc-features {
    list-style: none;
    margin: 0 0 1.35rem;
    padding: 0;
    text-align: left;
}

.vds-sc-features li {
    font-size: 0.86rem;
    line-height: 1.45;
    margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.vds-sc-features li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.vds-sc-val {
    font-weight: 700;
    color: #0f172a;
    margin-right: 0.35rem;
}

[data-theme="dark"] .vds-sc-val {
    color: var(--text);
}

.vds-sc-lbl {
    color: #64748b;
    font-weight: 400;
}

[data-theme="dark"] .vds-sc-lbl {
    color: var(--text-muted);
}

.vds-sc-price-block {
    margin-bottom: 1rem;
}

.vds-sc-old {
    display: block;
    font-size: 0.85rem;
    text-decoration: line-through;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}

.vds-sc-price {
    margin: 0;
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f172a;
}

[data-theme="dark"] .vds-sc-price {
    color: var(--text);
}

.vds-sc-price-num {
    margin-right: 0.08rem;
}

.vds-sc-price-cur {
    font-size: 1.1rem;
    font-weight: 700;
    opacity: 0.9;
}

.vds-sc-price-per {
    font-size: 0.95rem;
    font-weight: 500;
    color: #64748b;
    margin-left: 0.15rem;
}

[data-theme="dark"] .vds-sc-price-per {
    color: var(--text-muted);
}

.vds-sc-cta {
    width: 100%;
    border-radius: 999px;
    font-weight: 700;
    padding: 0.75rem 1rem;
}

.vds-showcase-note {
    text-align: center;
    font-size: 0.78rem;
    margin-top: 1.25rem;
    max-width: 640px;
    margin-inline: auto;
}

.vds-showcase-more {
    text-align: center;
    margin-top: 1rem;
}

/* Neden NexHost altı — yorumlar */
.testimonials-embed {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}

.testimonials-head {
    margin-bottom: 1.75rem;
}

.testimonials-empty {
    text-align: center;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.15rem;
}

.testimonial-card {
    margin: 0;
    padding: 1.25rem 1.35rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: var(--shadow-sm);
}

.testimonial-stars {
    color: #f59e0b;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.65rem;
}

.testimonial-text {
    margin: 0 0 0.85rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text);
}

.testimonial-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.testimonial-foot cite {
    font-style: normal;
    font-weight: 700;
    color: var(--text);
}

.testimonial-react {
    position: relative;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}

.testimonial-react.is-open {
    z-index: 30;
}

.testimonial-react-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
    min-height: 2.25rem;
}

.testimonial-react-agg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.testimonial-react-agg--empty {
    min-height: 0;
}

.testimonial-react-agg-item {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    user-select: none;
}

.testimonial-react-agg-sym {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.testimonial-react-agg-n {
    font-weight: 800;
    font-size: 0.72rem;
    color: var(--text);
}

.testimonial-react-trigger-wrap {
    position: relative;
    flex: 0 0 auto;
}

.testimonial-react-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.65rem 0.32rem 0.5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border) 80%, var(--primary) 20%);
    background: color-mix(in srgb, var(--card) 92%, var(--bg));
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 2px color-mix(in srgb, #000 6%, transparent);
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.12s ease;
}

.testimonial-react-trigger:hover {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
    background: color-mix(in srgb, var(--primary) 7%, var(--card));
}

.testimonial-react.is-open .testimonial-react-trigger {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}

.testimonial-react-trigger-ico,
.testimonial-react-trigger-mine {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.testimonial-react-trigger-label {
    letter-spacing: 0.02em;
}

.testimonial-react-trigger-chev {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.1rem;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--text-muted);
    transition: transform 0.18s ease;
}

.testimonial-react.is-open .testimonial-react-trigger-chev {
    transform: rotate(180deg);
}

.testimonial-react-pop {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.45rem);
    min-width: min(100%, 15.5rem);
    padding: 0.35rem;
    border-radius: 1.35rem;
    border: 1px solid color-mix(in srgb, var(--border) 75%, var(--primary) 15%);
    background: color-mix(in srgb, var(--card) 98%, var(--bg));
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.14),
        0 0 0 1px color-mix(in srgb, #fff 8%, transparent) inset;
    animation: testimonial-pop-in 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="dark"] .testimonial-react-pop {
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.45),
        0 0 0 1px color-mix(in srgb, #fff 5%, transparent) inset;
}

@keyframes testimonial-pop-in {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .testimonial-react-pop {
        animation: none;
    }

    .testimonial-react-trigger-chev {
        transition: none;
    }
}

.testimonial-react-pop-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.15rem 0.2rem;
}

.testimonial-twemoji {
    display: block;
    object-fit: contain;
    flex-shrink: 0;
    image-rendering: -webkit-optimize-contrast;
}

.testimonial-twemoji--agg {
    width: 1.1rem;
    height: 1.1rem;
}

.testimonial-twemoji--trigger {
    width: 1.15rem;
    height: 1.15rem;
}

.testimonial-twemoji--pop {
    width: 1.45rem;
    height: 1.45rem;
}

.testimonial-react-pop-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.55rem;
    height: 2.55rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.testimonial-react-pop-btn:hover {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    transform: scale(1.18);
}

.testimonial-react-pop-btn.is-picked {
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 28%, transparent);
}

.testimonial-react-pop-sym {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* Panel — değerlendirme */
.badge-review-status {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.badge-review-status.st-pending {
    background: color-mix(in srgb, #f59e0b 22%, transparent);
    color: #b45309;
}

.badge-review-status.st-approved {
    background: color-mix(in srgb, #22c55e 22%, transparent);
    color: #15803d;
}

.badge-review-status.st-rejected {
    background: color-mix(in srgb, #ef4444 18%, transparent);
    color: #b91c1c;
}

.review-my-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.review-my-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    background: var(--card);
}

.review-my-body {
    margin: 0.5rem 0;
    font-size: 0.9rem;
}

.review-my-time {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.review-pending-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.review-pending-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.15rem;
    background: var(--card);
}

.review-pending-card header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}

.review-pending-body {
    margin: 0.65rem 0;
    font-size: 0.92rem;
    line-height: 1.5;
}

.review-pending-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.small {
    font-size: 0.82rem;
}

/* —— v10: select, dedicated, kurumsal, iletişim, TS3 vitrin, fatura detay —— */
.stack-form select,
.review-submit-form select,
.contact-form-card select {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 2.35rem 0.5rem 0.85rem;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--text);
    background-color: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 14px;
    cursor: pointer;
}

.stack-form select:focus,
.review-submit-form select:focus,
.contact-form-card select:focus {
    outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
    outline-offset: 2px;
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

[data-theme="dark"] .stack-form select,
[data-theme="dark"] .review-submit-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Dedicated kiralık satırlar */
.dedicated-hero .page-lead {
    max-width: 42rem;
}

.dedicated-list-section {
    background: color-mix(in srgb, var(--text) 2.5%, var(--bg));
    padding-top: 2rem;
    padding-bottom: 2.5rem;
}

.dedicated-list-container {
    max-width: 1100px;
}

.dedicated-table {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.dedicated-row {
    display: grid;
    grid-template-columns: minmax(100px, 0.9fr) 48px minmax(120px, 1.1fr) repeat(3, minmax(88px, 1fr)) minmax(200px, 1.2fr);
    gap: 0.65rem 0.75rem;
    align-items: center;
    padding: 1rem 1.15rem;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--border) 85%, #cbd5e1);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgb(15 23 42 / 0.06);
}

[data-theme="dark"] .dedicated-row {
    background: var(--card);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.dedicated-code {
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: #0f172a;
}

[data-theme="dark"] .dedicated-code {
    color: var(--text);
}

.dedicated-logo {
    display: flex;
    justify-content: center;
}

.dedicated-cpu strong {
    font-size: 0.88rem;
}

.dedicated-spec {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}

.dedicated-spec strong {
    font-size: 0.84rem;
    color: #0f172a;
}

[data-theme="dark"] .dedicated-spec strong {
    color: var(--text);
}

.dedicated-sub {
    font-size: 0.72rem;
    color: #64748b;
}

[data-theme="dark"] .dedicated-sub {
    color: var(--text-muted);
}

.dedicated-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    text-align: right;
}

.dedicated-price {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
}

[data-theme="dark"] .dedicated-price {
    color: var(--text);
}

.dedicated-price small {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
}

.dedicated-note {
    font-size: 0.68rem;
    color: #64748b;
    max-width: 14rem;
}

.dedicated-kirala {
    background: #16a34a !important;
    border-color: #15803d !important;
    color: #fff !important;
    font-weight: 700;
    padding: 0.5rem 1.15rem;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.dedicated-kirala:hover {
    filter: brightness(1.05);
    color: #fff !important;
    text-decoration: none;
}

.dedicated-footnote {
    margin-top: 1.25rem;
    font-size: 0.78rem;
    text-align: center;
}

@media (max-width: 960px) {
    .dedicated-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "code logo"
            "cpu cpu"
            "spec1 spec2"
            "spec3 spec3"
            "action action";
    }

    .dedicated-row > .dedicated-code {
        grid-area: code;
    }

    .dedicated-row > .dedicated-logo {
        grid-area: logo;
        justify-content: flex-end;
    }

    .dedicated-row > .dedicated-cpu {
        grid-area: cpu;
    }

    .dedicated-row > .dedicated-spec:nth-child(4) {
        grid-area: spec1;
    }

    .dedicated-row > .dedicated-spec:nth-child(5) {
        grid-area: spec2;
    }

    .dedicated-row > .dedicated-spec:nth-child(6) {
        grid-area: spec3;
    }

    .dedicated-row > .dedicated-action {
        grid-area: action;
        align-items: stretch;
        text-align: left;
    }
}

/* TS3 vitrin — daha kurumsal blok */
.ts3-showcase-pro {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
    background: linear-gradient(180deg, color-mix(in srgb, #0f172a 94%, var(--bg)) 0%, var(--bg) 42%);
    border-top: 1px solid var(--border);
}

[data-theme="light"] .ts3-showcase-pro {
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 7%, var(--bg)) 0%, var(--bg) 50%);
}

.ts3-showcase-pro .ts3-section-head h2 {
    color: var(--text);
    font-size: clamp(1.5rem, 2.8vw, 1.95rem);
}

.ts3-showcase-pro .ts3-section-head p {
    font-size: 0.92rem;
    opacity: 0.92;
}

.page-ts3-pro .ts3-hero {
    padding-bottom: 1.75rem;
}

.ts3-pro-card.is-featured {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 16px 48px rgb(15 23 42 / 0.18);
}

/* Kurumsal */
.corp-hero {
    padding: clamp(2rem, 5vw, 3.25rem) 0;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(165deg, color-mix(in srgb, var(--primary) 8%, var(--bg)), var(--bg));
}

.corp-breadcrumb {
    margin-bottom: 0.75rem;
}

.corp-hero-title {
    margin: 0 0 0.65rem;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    letter-spacing: -0.02em;
}

.corp-hero-lead {
    margin: 0;
    max-width: 40rem;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.corp-stats-strip {
    padding: 1.35rem 0;
    border-bottom: 1px solid var(--border);
    background: var(--card);
}

.corp-stats-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    text-align: center;
}

@media (max-width: 768px) {
    .corp-stats-inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

.corp-stat strong {
    display: block;
    font-size: 1.15rem;
    color: var(--primary);
    margin-bottom: 0.2rem;
}

.corp-stat span {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.corp-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.15rem;
}

@media (max-width: 900px) {
    .corp-pillars {
        grid-template-columns: 1fr;
    }
}

.corp-pillar {
    padding: 1.35rem 1.25rem;
}

.corp-pillar-ico {
    display: block;
    font-size: 1.25rem;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.corp-pillar h3 {
    margin: 0 0 0.45rem;
    font-size: 1.05rem;
}

.corp-pillar p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.corp-cta {
    text-align: center;
    max-width: 520px;
    margin-inline: auto;
}

.corp-cta h2 {
    margin: 0 0 0.5rem;
}

.corp-cta p {
    color: var(--text-muted);
    margin: 0 0 1.25rem;
}

/* Kurumsal — gelişmiş düzen (hakkimizda.php) */
.page-corp--pro {
    position: relative;
    overflow-x: hidden;
}

.corp-page-bg {
    position: absolute;
    inset: -8% -15% auto;
    height: min(52rem, 85vh);
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 55% 42% at 18% 22%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 58%),
        radial-gradient(ellipse 45% 38% at 88% 12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 52%),
        radial-gradient(ellipse 50% 35% at 50% 95%, color-mix(in srgb, var(--primary) 6%, transparent), transparent 55%);
    opacity: 0.85;
}

[data-theme="dark"] .corp-page-bg {
    opacity: 0.45;
}

.page-corp--pro .corp-hero--pro {
    position: relative;
    z-index: 1;
    padding: clamp(2.25rem, 6vw, 4rem) 0 clamp(2.5rem, 6vw, 4.25rem);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 92%, var(--primary) 8%);
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--card) 40%, transparent) 0%,
        color-mix(in srgb, var(--bg) 88%, var(--primary) 4%) 100%
    );
}

.corp-hero-pro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: center;
}

@media (max-width: 900px) {
    .corp-hero-pro-grid {
        grid-template-columns: 1fr;
    }

    .corp-hero-pro-visual {
        order: -1;
        max-width: 20rem;
        margin-inline: auto;
    }
}

.corp-eyebrow {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--primary) 72%, var(--text-muted));
}

.page-corp--pro .corp-hero-title {
    font-size: clamp(1.85rem, 4.5vw, 2.65rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.page-corp--pro .corp-hero-lead {
    max-width: 38rem;
    font-size: 1.05rem;
    line-height: 1.62;
}

.corp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.35rem;
}

.corp-hero-pro-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.corp-hero-stack {
    position: relative;
    width: min(100%, 17rem);
    aspect-ratio: 1 / 1.05;
}

.corp-hero-faux {
    position: absolute;
    right: 0;
    width: 78%;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--border) 80%, var(--primary) 20%);
    background: color-mix(in srgb, var(--card) 94%, var(--bg));
    box-shadow: var(--shadow);
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text);
}

.corp-hero-faux small {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.corp-hero-faux--1 {
    top: 8%;
    transform: rotate(-4deg);
    z-index: 1;
}

.corp-hero-faux--2 {
    top: 38%;
    left: 0;
    width: 82%;
    transform: rotate(2deg);
    z-index: 2;
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
    box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent) inset;
}

.corp-hero-faux--3 {
    bottom: 6%;
    right: 4%;
    width: 72%;
    transform: rotate(-2deg);
    z-index: 3;
}

.corp-stats-strip--pro {
    position: relative;
    z-index: 1;
    padding: clamp(1.5rem, 4vw, 2.25rem) 0;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 96%, var(--bg));
}

.page-corp--pro .corp-stats-inner {
    gap: clamp(0.75rem, 2vw, 1.15rem);
}

.corp-stat-card {
    padding: 1rem 0.85rem;
    border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, var(--border) 88%, var(--primary) 12%);
    background: color-mix(in srgb, var(--bg) 55%, var(--card));
    box-shadow: 0 1px 0 color-mix(in srgb, #fff 5%, transparent) inset;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.corp-stat-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
    box-shadow: var(--shadow-sm);
}

.corp-values-section {
    position: relative;
    z-index: 1;
}

.corp-section-kicker {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.corp-values-head h2 {
    margin-top: 0;
}

.corp-pillars--pro {
    gap: clamp(1rem, 2.5vw, 1.5rem);
}

.corp-pillar--pro {
    position: relative;
    padding: clamp(1.35rem, 3vw, 1.75rem) clamp(1.2rem, 3vw, 1.6rem);
    border-radius: 1.1rem;
    border: 1px solid color-mix(in srgb, var(--border) 85%, var(--primary) 10%);
    background: color-mix(in srgb, var(--card) 97%, var(--bg));
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.corp-pillar--pro::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--accent) 65%, var(--primary)));
    opacity: 0.9;
}

.corp-pillar--pro:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}

.corp-pillar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.corp-pillar-badge {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 60%, var(--card));
}

.corp-pillar--pro .corp-pillar-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    font-size: 1.2rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--primary) 10%, var(--card));
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
}

.corp-pillar--pro h3 {
    font-size: 1.12rem;
}

.corp-pillar--pro p {
    font-size: 0.92rem;
    line-height: 1.58;
}

.corp-cta-section {
    position: relative;
    z-index: 1;
}

.corp-cta-band {
    max-width: 40rem;
    margin-inline: auto;
    text-align: center;
    padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.35rem, 4vw, 2.25rem);
    border-radius: 1.15rem;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
    background: linear-gradient(165deg, color-mix(in srgb, var(--card) 96%, var(--bg)), color-mix(in srgb, var(--primary) 5%, var(--card)));
    box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, #fff 5%, transparent) inset;
}

.corp-cta-band h2 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
}

.corp-cta-band p {
    margin: 0 0 1.35rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.corp-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
}

/* CMS (sayfa.php / hakkimizda blokları) */
.cms-public-page .cms-block-section-intro .section-head {
    margin-bottom: 0;
}

.cms-public-page .cms-block-pillars .corp-pillars {
    margin-top: 0;
}

.cms-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 900px) {
    .cms-card-grid {
        grid-template-columns: 1fr;
    }
}

.cms-feature-card {
    padding: 1.15rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    position: relative;
    overflow: hidden;
}

.cms-feature-card h3 {
    margin: 0;
    font-size: 1rem;
}

.cms-feature-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.cms-feature-ico {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary) 12%, var(--card));
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
    flex-shrink: 0;
}

.cms-feature-ico img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.cms-feature-card .btn {
    align-self: flex-start;
    margin-top: auto;
}

.cms-card-grid[class*="cms-card-grid--"] .cms-feature-card {
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
    border-radius: 18px;
}

.cms-card-grid--neon .cms-feature-card {
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(59, 130, 246, 0.18), transparent 58%),
        radial-gradient(80% 80% at 0% 100%, rgba(168, 85, 247, 0.16), transparent 62%),
        var(--card);
}

.cms-card-grid--glass .cms-feature-card {
    backdrop-filter: blur(6px);
    background: color-mix(in srgb, var(--card) 80%, #ffffff 20%);
}

.cms-card-grid--sunset .cms-feature-card {
    background:
        radial-gradient(90% 75% at 100% 100%, rgba(251, 146, 60, 0.15), transparent 60%),
        radial-gradient(90% 75% at 0% 0%, rgba(244, 114, 182, 0.15), transparent 60%),
        var(--card);
}

/* —— Nested Sunucu: premium kartlar (light/dark uyumlu) —— */
.page-nested-premium .nested-premium-section {
    background: color-mix(in srgb, var(--bg) 55%, transparent);
}

.nested-premium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.35rem;
    align-items: stretch;
}

.nested-premium-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.35rem 1.35rem 1.2rem;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--border) 92%, var(--primary) 8%);
    background: var(--card);
    color: var(--text);
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--text) 6%, transparent) inset,
        0 20px 44px rgba(15, 23, 42, 0.07);
    color-scheme: light dark;
}

html[data-theme="dark"] .nested-premium-card {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 24px 56px rgba(0, 0, 0, 0.35);
}

.nested-premium-card--empty {
    grid-column: 1 / -1;
    max-width: 520px;
    margin-inline: auto;
    text-align: center;
    align-items: center;
}

.nested-premium-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border);
}

.nested-premium-card__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}

.nested-premium-card__sub {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.nested-premium-card__brand {
    flex-shrink: 0;
}

.nested-premium-card__ico {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary) 14%, var(--card));
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
}

.nested-premium-card__ico img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.nested-premium-card__visual {
    min-height: 3.25rem;
}

.nested-premium-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.nested-premium-chip {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.28rem 0.55rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg) 40%, var(--card));
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.nested-premium-chip--ok {
    color: var(--text);
    border-color: color-mix(in srgb, #22c55e 35%, var(--border));
    background: color-mix(in srgb, #22c55e 12%, var(--card));
}

.nested-premium-card__pricing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.nested-premium-card__price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem 0.65rem;
}

.nested-premium-old {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-decoration: line-through;
}

.nested-premium-sale {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
}

.nested-premium-cur {
    font-size: 1rem;
    opacity: 0.85;
    margin-right: 0.12rem;
}

.nested-premium-sale strong {
    font-weight: 800;
}

.nested-premium-per {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 0.15rem;
}

.nested-premium-cta {
    display: block;
    width: 100%;
    margin-top: 0.15rem;
    padding: 0.72rem 1rem;
    border: none;
    border-radius: 12px;
    font: inherit;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(165deg, #ec4899 0%, #db2777 45%, #be185d 100%);
    box-shadow: 0 10px 28px rgba(219, 39, 119, 0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.nested-premium-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(219, 39, 119, 0.42);
}

html[data-theme="dark"] .nested-premium-cta {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.nested-premium-features {
    margin: 0;
    padding: 0.65rem 0 0;
    list-style: none;
    border-top: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.nested-premium-features li {
    padding: 0.28rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
}

.nested-premium-features li:last-child {
    border-bottom: none;
}

.nested-premium-features strong {
    color: var(--text);
    font-weight: 600;
}

/* —— TS3 Bayilik: premium tek kart (görsel hero + cam ödeme paneli) —— */
.bayilik-hero-wrap {
    margin-top: 2.75rem;
}

.bayilik-hero-section-head {
    margin-bottom: 1.25rem;
}

.bayilik-hero-card {
    --bayi-accent: #f59e0b;
    --bayi-accent2: #ea580c;
    --bayi-glow: color-mix(in srgb, var(--primary) 45%, #38bdf8);
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--bayi-glow) 35%, var(--border));
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--card) 92%, #0c1222) 0%, var(--card) 48%, var(--card) 100%);
    color: var(--text);
    box-shadow:
        0 4px 0 color-mix(in srgb, var(--bayi-accent) 22%, transparent),
        0 32px 64px color-mix(in srgb, #000 18%, transparent),
        0 0 0 1px color-mix(in srgb, #fff 5%, transparent) inset;
}

html[data-theme="dark"] .bayilik-hero-card {
    background:
        linear-gradient(160deg, #0f1729 0%, #0b1020 42%, color-mix(in srgb, var(--card) 88%, #020617) 100%);
    box-shadow:
        0 4px 0 color-mix(in srgb, var(--bayi-accent) 35%, transparent),
        0 40px 80px rgba(0, 0, 0, 0.55),
        0 0 120px color-mix(in srgb, var(--primary) 12%, transparent),
        0 0 0 1px color-mix(in srgb, #fff 8%, transparent) inset;
}

.bayilik-hero-card__aurora {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 55%;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 70% at 15% 20%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 55%),
        radial-gradient(ellipse 70% 60% at 88% 0%, color-mix(in srgb, var(--bayi-accent) 20%, transparent), transparent 50%),
        radial-gradient(ellipse 50% 40% at 50% 100%, color-mix(in srgb, #6366f1 15%, transparent), transparent 45%);
    opacity: 0.95;
}

.bayilik-hero-card__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(300px, 0.92fr);
    gap: 0;
    align-items: stretch;
    min-height: 420px;
}

.bayilik-hero-card__left {
    padding: 1.65rem 1.5rem 1.5rem 1.65rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    border-right: 1px solid color-mix(in srgb, var(--border) 65%, var(--primary));
}

.bayilik-hero-visual {
    position: relative;
    border-radius: 18px;
    min-height: 168px;
    padding: 1.15rem 1.25rem;
    overflow: hidden;
    background:
        linear-gradient(135deg, color-mix(in srgb, #1e293b 40%, var(--card)) 0%, color-mix(in srgb, var(--primary) 8%, #0f172a) 100%);
    border: 1px solid color-mix(in srgb, #fff 12%, var(--border));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent),
        0 16px 40px rgba(0, 0, 0, 0.25);
}

.bayilik-hero-visual__mesh {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image:
        linear-gradient(color-mix(in srgb, #fff 6%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, #fff 6%, transparent) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 80% 70% at 30% 30%, #000 20%, transparent 70%);
}

.bayilik-hero-visual__ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--bayi-accent) 45%, transparent);
    opacity: 0.55;
    pointer-events: none;
}

.bayilik-hero-visual__ring--a {
    width: 220px;
    height: 220px;
    left: -40px;
    bottom: -90px;
}

.bayilik-hero-visual__ring--b {
    width: 160px;
    height: 160px;
    right: 15%;
    top: -60px;
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}

.bayilik-hero-visual__ring--c {
    width: 100px;
    height: 100px;
    right: 8%;
    bottom: 10%;
    border-style: dashed;
    opacity: 0.35;
}

.bayilik-hero-visual__logo {
    position: relative;
    z-index: 2;
    width: 88px;
    height: 88px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, color-mix(in srgb, #fff 8%, transparent), transparent);
    border: 1px solid color-mix(in srgb, #fff 14%, transparent);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.35),
        0 0 40px color-mix(in srgb, var(--bayi-accent) 15%, transparent);
}

.bayilik-hero-visual__logo img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}

.bayilik-hero-visual__chips {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.85rem;
}

.bayilik-hero-vchip {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 25%, #1e293b);
    color: #e2e8f0;
    border: 1px solid color-mix(in srgb, #fff 10%, transparent);
}

.bayilik-hero-vchip--accent {
    background: linear-gradient(135deg, color-mix(in srgb, var(--bayi-accent) 85%, #fff), var(--bayi-accent2));
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--bayi-accent2) 40%, transparent);
}

.bayilik-hero-visual__mock {
    position: absolute;
    z-index: 1;
    right: 1rem;
    top: 50%;
    translate: 0 -50%;
    width: min(42%, 200px);
    padding: 0.65rem 0.7rem;
    border-radius: 12px;
    background: color-mix(in srgb, #000 35%, transparent);
    border: 1px solid color-mix(in srgb, #fff 12%, transparent);
    backdrop-filter: blur(8px);
}

.bayilik-mock-row {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}

.bayilik-mock-row:last-child {
    margin-bottom: 0;
}

.bayilik-mock-row span {
    flex: 1;
    height: 6px;
    border-radius: 4px;
    background: color-mix(in srgb, #fff 18%, transparent);
}

.bayilik-mock-row--wide span {
    flex: none;
    width: 100%;
    height: 10px;
}

.bayilik-mock-dot {
    flex: 0 0 10px !important;
    width: 10px;
    height: 10px !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--bayi-accent) 80%, #fff) !important;
}

.bayilik-hero-card__copy {
    padding-top: 0.15rem;
}

.bayilik-hero-card__badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.65rem;
}

.bayilik-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--bayi-accent), var(--bayi-accent2));
    box-shadow: 0 4px 16px color-mix(in srgb, var(--bayi-accent2) 45%, transparent);
}

.bayilik-hero-badge--soft {
    background: color-mix(in srgb, var(--primary) 16%, var(--card));
    color: var(--text);
    border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
    box-shadow: none;
    font-weight: 700;
}

.bayilik-hero-badge--line {
    background: transparent;
    color: var(--text-muted);
    border: 1px dashed color-mix(in srgb, var(--text-muted) 45%, var(--border));
    box-shadow: none;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.02em;
}

.bayilik-hero-title {
    margin: 0 0 0.45rem;
    font-size: clamp(1.35rem, 2.8vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--text);
}

html[data-theme="dark"] .bayilik-hero-title {
    background: linear-gradient(120deg, #f8fafc 0%, color-mix(in srgb, #f8fafc 70%, var(--bayi-accent)) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bayilik-hero-lead {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    max-width: 40rem;
}

.bayilik-hero-feature-grid {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.bayilik-hero-ftile {
    margin: 0;
    padding: 0.75rem 0.8rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--border) 85%, var(--primary));
    background: color-mix(in srgb, var(--bg) 22%, var(--card));
    box-shadow: 0 4px 16px color-mix(in srgb, #000 6%, transparent);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.bayilik-hero-ftile:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    box-shadow: 0 10px 28px color-mix(in srgb, #000 12%, transparent);
}

.bayilik-hero-ftile__ico {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-bottom: 0.45rem;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 14%, var(--card));
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
}

.bayilik-hero-ftile strong {
    display: block;
    font-size: 0.84rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
    color: var(--text);
}

.bayilik-hero-ftile span:last-child {
    font-size: 0.76rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.bayilik-hero-truststrip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.1rem;
    padding: 0.85rem 0 0;
    margin-top: auto;
    border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.bayilik-hero-trustitem {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.bayilik-hero-trustitem .bayilik-trust-ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.bayilik-hero-card__buy {
    padding: 1.35rem 1.35rem 1.4rem 1.25rem;
    background:
        linear-gradient(
            165deg,
            color-mix(in srgb, var(--primary) 14%, #020617) 0%,
            color-mix(in srgb, #020617 88%, var(--card)) 55%,
            color-mix(in srgb, var(--bayi-accent2) 18%, #0f172a) 100%
        );
    display: flex;
    align-items: stretch;
}

html[data-theme="light"] .bayilik-hero-card__buy {
    background:
        linear-gradient(
            165deg,
            color-mix(in srgb, var(--primary) 12%, var(--card)) 0%,
            color-mix(in srgb, var(--bg) 40%, var(--card)) 50%,
            color-mix(in srgb, var(--bayi-accent) 12%, var(--card)) 100%
        );
}

.bayilik-hero-buy-glass {
    width: 100%;
    align-self: center;
    padding: 1.35rem 1.25rem 1.3rem;
    border-radius: 18px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

html[data-theme="light"] .bayilik-hero-buy-glass {
    background: color-mix(in srgb, #fff 82%, var(--card));
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
    box-shadow: 0 16px 40px color-mix(in srgb, #000 10%, transparent);
}

.bayilik-hero-buy-eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, #fff 55%, var(--text-muted));
}

html[data-theme="light"] .bayilik-hero-buy-eyebrow {
    color: var(--text-muted);
}

.bayilik-hero-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.bayilik-hero-steps li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: color-mix(in srgb, #fff 88%, var(--text));
    padding: 0.35rem 0.55rem;
    border-radius: 10px;
    background: color-mix(in srgb, #fff 8%, transparent);
    border: 1px solid color-mix(in srgb, #fff 12%, transparent);
}

html[data-theme="light"] .bayilik-hero-steps li {
    color: var(--text);
    background: color-mix(in srgb, var(--bg) 35%, var(--card));
    border-color: var(--border);
}

.bayilik-hero-steps__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 800;
    background: linear-gradient(145deg, var(--bayi-accent), var(--bayi-accent2));
    color: #fff;
}

.bayilik-hero-pricebox {
    padding: 0.85rem 0.95rem;
    margin-bottom: 0.75rem;
    border-radius: 14px;
    background: color-mix(in srgb, #000 25%, transparent);
    border: 1px solid color-mix(in srgb, #fff 10%, transparent);
}

html[data-theme="light"] .bayilik-hero-pricebox {
    background: color-mix(in srgb, var(--bg) 50%, var(--card));
    border-color: var(--border);
}

.bayilik-hero-buy-label {
    margin: 0 0 0.35rem;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: color-mix(in srgb, #fff 50%, var(--text-muted));
    text-transform: uppercase;
}

html[data-theme="light"] .bayilik-hero-buy-label {
    color: var(--text-muted);
}

.bayilik-hero-price-block {
    margin: 0;
}

.bayilik-hero-old-line {
    margin: 0 0 0.15rem;
    font-size: 0.82rem;
    opacity: 0.9;
}

.bayilik-hero-price {
    margin: 0;
    font-size: clamp(2rem, 4.5vw, 2.65rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: #fff;
    text-shadow: 0 2px 24px color-mix(in srgb, var(--bayi-accent) 40%, transparent);
}

html[data-theme="light"] .bayilik-hero-price {
    color: var(--text);
    text-shadow: none;
}

.bayilik-hero-price__cur {
    font-size: 0.52em;
    font-weight: 700;
    opacity: 0.88;
    margin-right: 0.06em;
}

.bayilik-hero-price__per {
    font-size: 0.36em;
    font-weight: 600;
    color: color-mix(in srgb, #fff 60%, var(--text-muted));
    margin-left: 0.12em;
}

html[data-theme="light"] .bayilik-hero-price__per {
    color: var(--text-muted);
}

.bayilik-meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0.55rem 0 0;
    font-size: 0.72rem;
}

.bayilik-hero-buy-hint {
    margin: 0 0 0.85rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: color-mix(in srgb, #fff 72%, var(--text-muted));
}

html[data-theme="light"] .bayilik-hero-buy-hint {
    color: var(--text-muted);
}

.bayilik-hero-cta {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 0.65rem;
    padding: 0.9rem 1rem;
    border: none;
    border-radius: 14px;
    font: inherit;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 48%, #7c3aed 100%);
    box-shadow:
        0 4px 0 color-mix(in srgb, #1d4ed8 70%, #000),
        0 16px 36px color-mix(in srgb, #6366f1 45%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.bayilik-hero-cta:hover {
    transform: translateY(-2px);
    box-shadow:
        0 4px 0 color-mix(in srgb, #1d4ed8 70%, #000),
        0 22px 48px color-mix(in srgb, #6366f1 55%, transparent);
    color: #fff;
}

.bayilik-hero-cta:active {
    transform: translateY(1px);
}

.bayilik-hero-cta__shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, #fff 25%, transparent) 48%, transparent 62%);
    translate: -100% 0;
    animation: bayilik-cta-shine 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes bayilik-cta-shine {
    0%,
    65% {
        translate: -100% 0;
    }
    80% {
        translate: 100% 0;
    }
    100% {
        translate: 100% 0;
    }
}

.bayilik-hero-secondary {
    display: block;
    text-align: center;
    font-size: 0.82rem;
    color: color-mix(in srgb, #fff 92%, var(--primary));
    text-decoration: none;
    font-weight: 600;
}

html[data-theme="light"] .bayilik-hero-secondary {
    color: var(--primary);
}

.bayilik-hero-secondary:hover {
    text-decoration: underline;
}

.bayilik-trust-ico {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.bayilik-trust-ico--green {
    background: linear-gradient(145deg, #22c55e, #16a34a);
}

.bayilik-trust-ico--blue {
    background: linear-gradient(145deg, #38bdf8, #2563eb);
}

.bayilik-trust-ico--violet {
    background: linear-gradient(145deg, #a78bfa, #7c3aed);
}

@media (max-width: 960px) {
    .bayilik-hero-card__grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .bayilik-hero-card__left {
        border-right: none;
        border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, var(--primary));
    }

    .bayilik-hero-feature-grid {
        grid-template-columns: 1fr;
    }

    .bayilik-hero-visual__mock {
        display: none;
    }

    .bayilik-hero-card__buy {
        padding: 1.25rem 1rem 1.5rem;
    }
}

.discord-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.discord-list-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 0.85rem;
    align-items: center;
    padding: 1rem 1rem 1rem 0.85rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, #5865F2 28%, var(--border));
    background:
        linear-gradient(160deg, rgba(88, 101, 242, 0.12), transparent 42%),
        linear-gradient(340deg, rgba(59, 130, 246, 0.08), transparent 45%),
        var(--card);
}

.discord-list-thumb-wrap {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(88, 101, 242, 0.2);
}

.discord-list-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.discord-list-ico {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #5865F2;
    box-shadow: 0 10px 24px rgba(88, 101, 242, 0.28);
}

.discord-list-ico img {
    width: 24px;
    height: 24px;
}

.discord-list-main h3 {
    margin: 0 0 0.2rem;
    font-size: 12px;
}

.discord-list-main p {
    margin: 0 0 0.4rem;
	 font-size: 11px;
}

.discord-list-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.discord-list-specs li {
    font-size: 0.8rem;
    padding: 0.22rem 0.5rem;
    border-radius: 2px;
    border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border));
    background: color-mix(in srgb, var(--card) 86%, var(--bg));
}

.discord-list-price {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-end;
    min-width: 150px;
}

@media (max-width: 900px) {
    .discord-list-row {
        grid-template-columns: 1fr;
        align-items: start;
    }
    .discord-list-price {
        align-items: flex-start;
        min-width: 0;
    }
}

.cms-card-grid--steel .cms-feature-card {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg) 20%, var(--card)), var(--card));
    border-color: color-mix(in srgb, var(--text) 10%, var(--border));
}

.cms-card-grid--forest .cms-feature-card {
    background:
        radial-gradient(90% 75% at 0% 100%, rgba(16, 185, 129, 0.16), transparent 60%),
        radial-gradient(90% 75% at 100% 0%, rgba(34, 197, 94, 0.14), transparent 62%),
        var(--card);
}

.cms-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 800px) {
    .cms-two-col {
        grid-template-columns: 1fr;
    }
}

.cms-two-col__cell {
    padding: 1.1rem 1.15rem;
}

/* CMS — logo / ikon ızgarası */
.cms-icon-grid__inner {
    display: grid;
    gap: 0.75rem;
}

.cms-icon-card {
    background: var(--card);
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 85%, var(--text));
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--text) 4%, transparent),
        0 6px 20px color-mix(in srgb, var(--text) 6%, transparent);
    padding: 0.7rem 0.9rem;
    transition:
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.cms-icon-card:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--text) 5%, transparent),
        0 10px 28px color-mix(in srgb, var(--text) 9%, transparent);
}

.cms-icon-card__row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 2.5rem;
}

.cms-icon-card__img-wrap {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cms-icon-card__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.cms-icon-card__title {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
}

@media (max-width: 640px) {
    .cms-icon-grid__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* CMS — metin + görsel (VDS tarzı bölüm) */
.cms-split-media {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(1.25rem, 4vw, 2.35rem);
    align-items: center;
}

.cms-split-media--img-left .cms-split-media__visual {
    order: -1;
}

@media (max-width: 900px) {
    .cms-split-media {
        grid-template-columns: 1fr;
    }

    .cms-split-media--img-right .cms-split-media__visual {
        order: -1;
    }

    .cms-split-media--img-left .cms-split-media__visual {
        order: -1;
    }
}

.cms-split-media__title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.2rem, 2.4vw, 1.65rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
}

.cms-split-media__text.cms-prose {
    margin: 0;
    color: color-mix(in srgb, var(--text) 88%, var(--bg));
}

.cms-split-media__visual {
    border-radius: 14px;
    overflow: hidden;
    line-height: 0;
    box-shadow:
        0 4px 24px color-mix(in srgb, var(--text) 10%, transparent),
        0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent);
}

.cms-split-media__img {
    display: block;
    width: 100%;
    height: auto;
}

.cms-prose {
    padding: 1.15rem 1.2rem;
    line-height: 1.6;
    color: var(--text);
}

.cms-prose h2,
.cms-prose h3,
.cms-prose h4 {
    margin: 0.85em 0 0.4em;
    line-height: 1.25;
}

.cms-prose p {
    margin: 0 0 0.75em;
}

.cms-prose p:last-child {
    margin-bottom: 0;
}

.cms-prose ul,
.cms-prose ol {
    margin: 0.5em 0 0.75em 1.2em;
    padding: 0;
}

.cms-block-prose {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* CMS — hizalı metin bloğu */
.cms-text-block {
    width: 100%;
    box-sizing: border-box;
}

.cms-text-block--left {
    text-align: left;
}

.cms-text-block--right {
    text-align: right;
}

.cms-text-block--center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 48rem;
}

/* Ortada metin; listeler okunaklı kalsın */
.cms-text-block--center ul,
.cms-text-block--center ol {
    display: inline-block;
    text-align: left;
    vertical-align: top;
}

.cms-text-block--right ul,
.cms-text-block--right ol {
    display: inline-block;
    text-align: right;
    vertical-align: top;
}

.cms-block-editor-wrap .cms-block-list {
    margin-top: 0.25rem;
}

/* —— Admin CMS sayfa oluşturucu —— */
.cms-builder-root .cms-builder-head {
    margin-bottom: 1rem;
}

.cms-builder-root .cms-builder-hint {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
}

.cms-builder-layout {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 280px);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 1024px) {
    .cms-builder-layout {
        grid-template-columns: 1fr;
    }
}

.cms-builder-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.cms-builder-head-actions {
    flex-shrink: 0;
}

.cms-builder-drop-zone {
    min-height: 6rem;
}

.cms-builder-canvas-card {
    padding: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
}

.cms-builder-canvas-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: color-mix(in srgb, var(--primary) 6%, var(--bg-elevated));
    border-bottom: 1px solid var(--border);
}

.cms-builder-canvas-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.cms-builder-canvas-count {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.cms-builder-list {
    min-height: 4rem;
    padding: 0.75rem 1rem 0.5rem;
}

.cms-builder-empty {
    text-align: center;
    padding: 2rem 1rem;
    border: 2px dashed color-mix(in srgb, var(--primary) 28%, var(--border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--card) 88%, transparent);
    margin-bottom: 0.5rem;
}

.cms-builder-empty-title {
    margin: 0 0 0.35rem;
    font-weight: 600;
    font-size: 1.05rem;
}

.cms-drop-tail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 1rem 1rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    border: 1px dashed color-mix(in srgb, var(--primary) 22%, var(--border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg) 96%, var(--primary));
    transition: border-color 0.15s ease, background 0.15s ease;
}

.cms-drop-tail.is-empty-canvas {
    margin-top: 0;
}

.cms-drop-tail-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    color: var(--primary);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
}

.cms-drop-tail.is-drag-over,
.cms-drop-tail:hover {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    color: var(--text);
}

.cms-builder-sidebar {
    padding: 1rem 1rem 1.1rem;
    position: sticky;
    top: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    pointer-events: auto;
    z-index: 2;
}

.cms-builder-sidebar .cms-palette-tile--btn {
    pointer-events: auto;
}

.cms-builder-sidebar-title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 600;
}

.cms-builder-sidebar-lead {
    margin: 0 0 0.85rem;
    font-size: 0.8rem;
    line-height: 1.4;
}

.cms-palette-grid {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.cms-palette-row {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--card);
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cms-palette-row:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 8%, transparent);
}

.cms-palette-drag-handle {
    flex-shrink: 0;
    width: 1.75rem;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 0.15rem;
    border-radius: 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1;
    letter-spacing: -0.1em;
    border: none;
    border-right: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
}

.cms-palette-drag-handle:active {
    cursor: grabbing;
}

.cms-palette-tile {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    width: 100%;
    margin: 0;
    padding: 0.65rem 0.7rem;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    cursor: grab;
    user-select: none;
    box-sizing: border-box;
    color: inherit;
    font: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.cms-palette-tile.cms-palette-tile--btn {
    width: auto;
    flex: 1;
    min-width: 0;
    border: none;
    border-radius: 0;
    cursor: pointer;
    box-shadow: none;
    background: transparent;
}

.cms-palette-tile.cms-palette-tile--btn:hover {
    border-color: transparent;
    box-shadow: none;
}

.cms-palette-tile.cms-palette-tile--btn:active {
    transform: none;
}

.cms-palette-tile:hover:not(.cms-palette-tile--btn) {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 8%, transparent);
}

.cms-palette-tile:active:not(.cms-palette-tile--btn) {
    cursor: grabbing;
    transform: scale(0.99);
}

.cms-palette-tile.is-dragging {
    opacity: 0.55;
}

.cms-palette-tile-ico {
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    color: #fff;
}

.cms-palette-tile-ico--hero { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.cms-palette-tile-ico--stats { background: linear-gradient(135deg, #0ea5e9, #06b6d4); }
.cms-palette-tile-ico--intro { background: linear-gradient(135deg, #64748b, #475569); }
.cms-palette-tile-ico--pillars { background: linear-gradient(135deg, #d946ef, #a855f7); }
.cms-palette-tile-ico--cards { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.cms-palette-tile-ico--twocol { background: linear-gradient(135deg, #10b981, #059669); }
.cms-palette-tile-ico--prose { background: linear-gradient(135deg, #78716c, #57534e); }
.cms-palette-tile-ico--cta { background: linear-gradient(135deg, #ef4444, #dc2626); }

.cms-palette-tile-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.cms-palette-tile-text strong {
    font-size: 0.88rem;
    font-weight: 600;
}

.cms-palette-tile-text small {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.cms-block-card {
    margin-bottom: 0.65rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 11px;
    border-left: 4px solid color-mix(in srgb, var(--primary) 55%, var(--border));
    background: var(--card);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.cms-block-card.is-drag-over {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent);
}

.cms-block-card.is-dragging {
    opacity: 0.45;
}

.cms-block-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.65rem;
    background: color-mix(in srgb, var(--bg-elevated) 92%, var(--primary));
    border-bottom: 1px solid var(--border);
}

.cms-drag-handle {
    cursor: grab;
    user-select: none;
    color: var(--text-muted);
    letter-spacing: -0.12em;
    font-size: 1rem;
    line-height: 1;
    padding: 0.2rem 0.15rem;
    border-radius: 6px;
    transition: background 0.12s ease, color 0.12s ease;
}

.cms-drag-handle:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.cms-drag-handle:active {
    cursor: grabbing;
}

.cms-block-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 6px;
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    color: var(--primary);
}

.cms-block-head-text {
    flex: 1;
    min-width: 6rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.cms-block-head-text strong {
    font-size: 0.9rem;
    font-weight: 600;
}

.cms-block-type-slug {
    font-size: 0.72rem;
    font-family: ui-monospace, monospace;
    color: var(--text-muted);
}

.cms-block-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.cms-block-fields {
    padding: 0.85rem 1rem 1rem;
}

.cms-builder-root .cms-field {
    margin-bottom: 0.65rem;
}

.cms-builder-root .cms-field .admin-field-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.82rem;
}

.cms-builder-root .cms-block-fields .input-full,
.cms-builder-root .cms-block-fields .admin-code-area {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
}

.cms-json-details--builder {
    margin-top: 1.25rem;
}

.cms-json-details--builder summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.cms-json-details--builder summary:hover {
    color: var(--text);
}

.cms-json-details--builder .admin-code-area {
    margin-top: 0.5rem;
}

/* CMS sayfa editörü v2: hızlı ekle + önizleme gömülü */
.cms-quick-add-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-elevated) 94%, var(--primary));
}

.cms-quick-add-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
}

.cms-quick-add-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.cms-builder-layout--v2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 1024px) {
    .cms-builder-layout--v2 {
        grid-template-columns: 1fr;
    }
}

.cms-editor-primary {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.cms-live-preview-wrap {
    padding: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
}

.cms-live-preview-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--primary) 5%, var(--bg-elevated));
}

.cms-live-preview-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.cms-live-preview-hint {
    font-size: 0.75rem;
}

.cms-preview-surface {
    min-height: 12rem;
    max-height: min(70vh, 640px);
    overflow: auto;
    padding: 1rem 1rem 1.25rem;
    background: var(--bg);
    font-size: 0.9rem;
    line-height: 1.5;
    -webkit-overflow-scrolling: touch;
}

[data-theme="dark"] .cms-preview-surface {
    background: color-mix(in srgb, var(--bg) 90%, #0f172a);
}

.cms-preview-surface .container {
    max-width: 100% !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.cms-preview-surface .corp-hero-title {
    font-size: clamp(1.2rem, 2.5vw, 1.65rem) !important;
}

.cms-builder-sidebar .cms-palette-tile.cms-palette-tile--btn::after {
    content: "Ekle";
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary);
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    pointer-events: none;
}

.cms-builder-sidebar .cms-palette-tile--btn .cms-palette-tile-text {
    flex: 1;
    min-width: 0;
}

/* İletişim */
.contact-hero {
    padding: clamp(2rem, 5vw, 3rem) 0;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, var(--bg)), var(--bg));
}

.contact-breadcrumb {
    margin-bottom: 0.65rem;
}

.contact-hero-title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.65rem, 3.5vw, 2.1rem);
}

.contact-hero-lead {
    margin: 0;
    max-width: 36rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.contact-section {
    padding-top: 2rem;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 860px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

.contact-form-card {
    padding: 1.5rem 1.35rem;
}

.contact-form-title {
    margin: 0 0 1rem;
    font-size: 1.1rem;
}

.contact-aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-card {
    padding: 1.25rem 1.2rem;
}

.contact-card h2,
.contact-card h3 {
    margin: 0 0 0.65rem;
    font-size: 1.02rem;
}

.contact-quick-list {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.contact-quick-list li {
    margin-bottom: 0.35rem;
}

.contact-card-accent {
    border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
    background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 6%, var(--card)), var(--card));
}

.contact-alert {
    margin-bottom: 1rem;
}

/* İletişim — gelişmiş düzen (iletisim.php) */
.page-contact--pro {
    position: relative;
    overflow-x: hidden;
}

.contact-page-bg {
    position: absolute;
    inset: -6% -12% auto;
    height: min(48rem, 80vh);
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 50% 40% at 22% 18%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 55%),
        radial-gradient(ellipse 42% 36% at 85% 25%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 50%);
    opacity: 0.88;
}

[data-theme="dark"] .contact-page-bg {
    opacity: 0.42;
}

.contact-hero--pro {
    position: relative;
    z-index: 1;
    padding: clamp(2.25rem, 6vw, 3.75rem) 0 clamp(2rem, 5vw, 3rem);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 90%, var(--primary) 10%);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--card) 35%, transparent),
        color-mix(in srgb, var(--bg) 92%, var(--primary) 3%) 100%
    );
}

.contact-hero-pro-inner {

}

.contact-eyebrow {
    margin: 0 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--primary) 65%, var(--text-muted));
}

.page-contact--pro .contact-hero-title {
    font-size: clamp(1.85rem, 4vw, 2.45rem);
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.page-contact--pro .contact-hero-lead {
    font-size: 1.05rem;
    max-width: 38rem;
    line-height: 1.62;
}

.contact-section--pro {
    position: relative;
    z-index: 1;
    padding-top: clamp(1.75rem, 4vw, 2.75rem);
}

.contact-grid--pro {
    gap: clamp(1.35rem, 3vw, 2.25rem);
    align-items: stretch;
}

.contact-form-card--pro {
    position: relative;
    padding: clamp(1.5rem, 4vw, 2.15rem) clamp(1.35rem, 3.5vw, 1.85rem);
    border-radius: 1.1rem;
    border: 1px solid color-mix(in srgb, var(--border) 82%, var(--primary) 14%);
    background: color-mix(in srgb, var(--card) 98%, var(--bg));
    box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, #fff 5%, transparent) inset;
}

.contact-form-card--pro::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    border-radius: 1.1rem 1.1rem 0 0;
    background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--accent) 70%, var(--primary)));
}

.contact-form-head {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin-bottom: 1.15rem;
}

.contact-form-icon {
    flex-shrink: 0;
    width: 2.65rem;
    height: 2.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--primary) 12%, var(--card));
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
}

.contact-form-card--pro .contact-form-title {
    margin: 0 0 0.25rem;
    font-size: clamp(1.12rem, 2.2vw, 1.28rem);
}

.contact-form-sub {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
}

.contact-form-card--pro.stack-form label {
    margin-top: 0.65rem;
}

.contact-form-card--pro.stack-form label:first-of-type {
    margin-top: 0.35rem;
}

.contact-form-card--pro.stack-form input,
.contact-form-card--pro.stack-form textarea {
    border-radius: 0.65rem;
}

.contact-form-submit {
    margin-top: 1rem !important;
}

.contact-aside--pro {
    gap: clamp(1rem, 2vw, 1.35rem);
}

.contact-card--pro {
    padding: clamp(1.2rem, 3vw, 1.5rem) clamp(1.1rem, 2.5vw, 1.45rem);
    border-radius: 1rem;
    border: 1px solid var(--border);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.contact-card--pro:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
}

.contact-card-title {
    margin: 0 0 0.85rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.contact-quick-list--pro {
    margin-bottom: 0.85rem;
}

.contact-quick-list--pro li {
    margin-bottom: 0.5rem;
}

.contact-quick-list--pro li:last-child {
    margin-bottom: 0;
}

.contact-quick-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    background: color-mix(in srgb, var(--bg) 50%, var(--card));
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.contact-quick-row:hover {
    text-decoration: none;
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
    background: color-mix(in srgb, var(--primary) 6%, var(--card));
}

.contact-quick-ico {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}

.contact-quick-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.contact-quick-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.contact-quick-val {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
}

.contact-aside-note {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
}

.contact-panel-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.65rem;
    font-size: 1rem;
    color: color-mix(in srgb, var(--primary) 85%, var(--text));
    border-radius: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
    background: color-mix(in srgb, var(--primary) 8%, var(--card));
}

.contact-panel-lead {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    line-height: 1.55;
}

.contact-success-card {
    text-align: center;
    padding: clamp(2rem, 5vw, 2.75rem) clamp(1.35rem, 4vw, 2rem);
    border-radius: 1.1rem;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 6%, var(--card)), var(--card));
}

.contact-success-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--primary) 55%, var(--accent)));
    box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 35%, transparent);
}

.contact-success-title {
    margin: 0 0 0.5rem;
    font-size: 1.45rem;
}

.contact-success-text {
    margin: 0 0 1.35rem;
    color: var(--text-muted);
    line-height: 1.55;
}

/* Fatura detay (panel) */
.invoice-detail-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.invoice-detail-row {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
    align-items: center;
}

.invoice-detail-row:last-child {
    border-bottom: none;
}

.invoice-detail-k {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.invoice-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.invoice-pay-placeholder {
    padding: 1.25rem;
    margin-top: 0.5rem;
}

.invoice-pay-placeholder p {
    margin: 0 0 1rem;
}

.data-table td .btn-sm {
    margin: 0.15rem 0.15rem 0.15rem 0;
}

/* —— v11: footer pro + ts3 kurumsal güçlendirme —— */
.site-footer {
    position: relative;
    padding: 2rem 0 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
    background:
        radial-gradient(ellipse 80% 65% at 10% -15%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 60%),
        linear-gradient(180deg, color-mix(in srgb, #0b1220 95%, var(--bg-elevated)), var(--bg-elevated));
}

[data-theme="light"] .site-footer {
    background:
        radial-gradient(ellipse 80% 65% at 10% -15%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 60%),
        linear-gradient(180deg, color-mix(in srgb, var(--primary) 4%, var(--bg-elevated)), var(--bg-elevated));
}

.footer-grid.footer-grid-pro {
    grid-template-columns: 1.4fr repeat(3, minmax(140px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.1rem;
}

@media (max-width: 920px) {
    .footer-grid.footer-grid-pro {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .footer-grid.footer-grid-pro {
        grid-template-columns: 1fr;
    }
}

.footer-brand-pro .footer-brand-line {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.footer-brand-pro .footer-mini {
    margin-top: 0.55rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.footer-links a {
    color: var(--text-muted);
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-links a:hover {
    color: var(--text);
    transform: translateX(1px);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
}

@media (max-width: 780px) {
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

.footer-bottom-note {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.ts3-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin: 0 0 1.25rem;
}

@media (max-width: 960px) {
    .ts3-kpi-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .ts3-kpi-strip {
        grid-template-columns: 1fr;
    }
}

.ts3-kpi {
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
    background: color-mix(in srgb, var(--card) 86%, transparent);
    text-align: left;
}

.ts3-kpi strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

.ts3-kpi span {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.ts3-bottom-cta {
    margin-top: 1.3rem;
    padding: 1rem 1.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
    background: linear-gradient(150deg, color-mix(in srgb, var(--primary) 7%, var(--card)), var(--card));
}

.ts3-bottom-cta h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
}

.ts3-bottom-cta p {
    margin: 0;
    font-size: 0.86rem;
    color: var(--text-muted);
}

@media (max-width: 760px) {
    .ts3-bottom-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* —— v12: TS3 erişim paneli + hizmet kartları —— */
.ts3-access-panel {
    padding: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
    background: linear-gradient(165deg, color-mix(in srgb, var(--primary) 5%, var(--card)), var(--card));
}

.ts3-access-panel-head {
    padding: 1.15rem 1.2rem 0.85rem;
    border-bottom: 1px solid var(--border);
}

.ts3-access-panel-head h2 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.ts3-access-panel-head p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
}

.ts3-access-wait {
    padding: 1.25rem 1.2rem;
    background: color-mix(in srgb, var(--primary) 4%, transparent);
}

.ts3-access-wait p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
}

.ts3-access-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
}

@media (max-width: 720px) {
    .ts3-access-grid {
        grid-template-columns: 1fr;
    }
}

.ts3-access-grid > div {
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    margin: 0;
}

.ts3-access-grid > div:nth-child(2n) {
    border-right: none;
}

.ts3-access-grid dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0 0 0.25rem;
}

.ts3-access-grid dd {
    margin: 0;
    font-size: 0.88rem;
}

.ts3-mono {
    font-size: 0.82rem;
    word-break: break-all;
}

.ts3-secret-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.ts3-access-foot {
    margin: 0;
    padding: 0.75rem 1.1rem 1rem;
    font-size: 0.78rem;
}

.service-list-pro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.service-card-pro {
    display: grid;
    grid-template-columns: 1.2fr 1fr auto;
    gap: 1rem 1.25rem;
    align-items: center;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--border);
}

@media (max-width: 900px) {
    .service-card-pro {
        grid-template-columns: 1fr;
    }
}

.service-card-pro.is-ts3 {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}

.service-card-pro-title h2 {
    margin: 0 0 0.2rem;
    font-size: 1.02rem;
}

.service-card-pro-status {
    margin: 0.35rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.service-slot-pill {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
}

.service-card-pro-label {
    margin: 0.45rem 0 0;
    font-size: 0.84rem;
}

.service-ts3-mini {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.82rem;
}

.service-ts3-mini li span:first-child {
    display: inline-block;
    min-width: 5.5rem;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.service-ts3-pending {
    margin: 0;
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.45;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--text) 3%, var(--card));
}

.service-card-pro-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.82rem;
}

.service-card-pro-actions {
    justify-self: end;
}

@media (max-width: 900px) {
    .service-card-pro-actions {
        justify-self: stretch;
    }

    .service-card-pro-actions .btn {
        width: 100%;
        text-align: center;
    }
}

.ts3-admin-form .section-mini-title {
    margin-top: 0.75rem;
}

/* TeamSpeak 3 Sunucularım — bayilik tablo + portlu kartlar */
.ts3-mine-page {
    max-width: 72rem;
    margin: 0 auto;
    font-size: 0.875rem;
}

body.is-customer-shell .ts3-mine-page .ts3-mine-page-title.page-title {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.25;
    margin-bottom: 0.3rem;
}

body.is-customer-shell .ts3-mine-page .ts3-mine-page-sub.page-sub {
    font-size: 0.8125rem;
    line-height: 1.55;
    max-width: 38rem;
    margin: 0;
}

.ts3-mine-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem 1.1rem;
    margin-bottom: 1.1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}

.ts3-mine-page-title {
    margin-bottom: 0.35rem;
}

.ts3-mine-page-sub {
    margin: 0;
    max-width: 42rem;
}

.ts3-mine-page-cta {
    flex-shrink: 0;
    align-self: center;
}

.ts3-mine-section {
    margin-bottom: 2rem;
}

.ts3-mine-section:last-child {
    margin-bottom: 0;
}

.ts3-mine-section-head {
    margin-bottom: 0.85rem;
}

.ts3-mine-section-title {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.25rem;
}

.ts3-mine-section-hint {
    margin: 0;
}

.ts3-mine-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    background: color-mix(in srgb, var(--bg-elevated) 35%, var(--card));
    box-shadow: none;
}

.ts3-mine-table {
    width: 100%;
    min-width: 52rem;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.ts3-mine-table thead th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
    background: transparent;
}

.ts3-mine-table tbody td {
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}

.ts3-mine-table tbody tr:last-child td {
    border-bottom: none;
}

.ts3-mine-table tbody tr:hover td {
    background: color-mix(in srgb, var(--primary) 4%, var(--card));
}

.ts3-mine-td-strong {
    font-weight: 500;
    font-size: 0.8125rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.ts3-mine-td-meta {
    margin-top: 0.28rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    align-items: center;
}

.ts3-mine-table-code {
    font-size: 0.72rem;
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    word-break: break-all;
    line-height: 1.4;
}

.ts3-mine-td-label {
    max-width: 12rem;
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--text) 88%, var(--text-muted));
}

.ts3-mine-td-days {
    font-size: 0.78rem;
    white-space: nowrap;
}

.ts3-mine-table-col-act {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

.ts3-mine-mini-btn {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.14rem 0.42rem;
    border-radius: 6px;
    line-height: 1.25;
    text-decoration: none;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
}

.ts3-mine-mini-btn:hover {
    background: color-mix(in srgb, var(--accent) 22%, var(--card));
    color: var(--accent);
    text-decoration: none;
}

.ts3-mine-mini-muted {
    font-size: 0.68rem;
    color: var(--text-muted);
}

[data-theme="dark"] .ts3-mine-mini-btn {
    color: color-mix(in srgb, var(--accent) 92%, #fff);
    background: color-mix(in srgb, var(--accent) 12%, var(--card));
    border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}

[data-theme="dark"] .ts3-mine-table-wrap {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent),
        0 12px 32px rgba(0, 0, 0, 0.35);
}

.ts3-mine-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    align-items: center;
    justify-content: flex-end;
    max-width: 10rem;
}

.ts3-mine-card-badges .badge-status {
    font-size: 0.62rem;
    padding: 0.14rem 0.4rem;
    font-weight: 600;
}

.ts3-mine-brand .admin-nav-svg {
    display: block;
    width: 1.15rem;
    height: 1.15rem;
    opacity: 0.9;
}

.ts3-mine-actions--inline {
    margin-top: 0.45rem;
}

/* TeamSpeak 3 Sunucularım (panel) — portlu kartlar; düz yüzey + ince çerçeve */
.ts3-mine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.85rem;
}

.ts3-mine-card {
    position: relative;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 92%, var(--primary));
    background: var(--card);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ts3-mine-card:hover {
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent),
        0 6px 20px color-mix(in srgb, var(--text) 5%, transparent);
}

.ts3-mine-card-layout {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 0.9rem 0.85rem;
    align-items: flex-start;
}

.ts3-mine-brand {
    flex-shrink: 0;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--primary) 85%, var(--text));
    background: color-mix(in srgb, var(--primary) 6%, var(--bg-elevated));
    border: 1px solid color-mix(in srgb, var(--border) 85%, var(--primary));
}

.ts3-mine-brand-svg {
    width: 1.45rem;
    height: 1.45rem;
    opacity: 0.92;
}

.ts3-mine-card-stack {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
}

.ts3-mine-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.6rem;
}

.ts3-mine-card-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.ts3-mine-sku {
    margin: 0;
    font-size: 0.72rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.ts3-mine-sku-code {
    font-size: 0.68rem;
    padding: 0.12rem 0.38rem;
    border-radius: 5px;
    background: color-mix(in srgb, var(--bg-elevated) 92%, var(--primary));
    border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
    font-weight: 500;
}

.ts3-mine-slot-pill {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.16rem 0.42rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}

.ts3-mine-type-badge {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.14rem 0.48rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid var(--border);
    white-space: nowrap;
}

.ts3-mine-type-badge--bayi {
    background: color-mix(in srgb, #6366f1 16%, transparent);
    border-color: color-mix(in srgb, #6366f1 35%, var(--border));
    color: #4338ca;
}

[data-theme="dark"] .ts3-mine-type-badge--bayi {
    color: #c7d2fe;
}

.ts3-mine-type-badge--port {
    background: color-mix(in srgb, #3b82f6 14%, transparent);
    border-color: color-mix(in srgb, #3b82f6 32%, var(--border));
    color: #1d4ed8;
}

[data-theme="dark"] .ts3-mine-type-badge--port {
    color: #93c5fd;
}

.ts3-mine-type-badge--sub {
    background: color-mix(in srgb, #14b8a6 14%, transparent);
    border-color: color-mix(in srgb, #14b8a6 32%, var(--border));
    color: #0f766e;
}

[data-theme="dark"] .ts3-mine-type-badge--sub {
    color: #5eead4;
}

.ts3-mine-label {
    margin: 0;
    line-height: 1.4;
}

.ts3-mine-connect {
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-elevated) 88%, var(--card));
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
}

.ts3-mine-connect-label {
    display: block;
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.28rem;
}

.ts3-mine-connect-val {
    display: block;
    font-size: 0.75rem;
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    word-break: break-all;
    line-height: 1.4;
    color: var(--text);
    font-weight: 500;
}

.ts3-mine-host {
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.65rem;
    font-size: 0.72rem;
    padding-top: 0.42rem;
    margin-top: 0.1rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 94%, transparent);
}

.ts3-mine-host-label {
    color: var(--text-muted);
    font-weight: 500;
}

.ts3-mine-host-val {
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ts3-mine-actions {
    margin-top: 0.35rem;
}

.ts3-mine-cta {
    font-weight: 600;
    letter-spacing: 0.02em;
}

[data-theme="dark"] .ts3-mine-card {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 7%, transparent);
}

[data-theme="dark"] .ts3-mine-card:hover {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent),
        0 8px 28px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .ts3-mine-brand {
    background: color-mix(in srgb, var(--bg-elevated) 94%, var(--primary));
}

/* TS3 Sunucularım — bayilik: blok satırlar, sade panel (müşteri kabuğu) */
body.is-customer-shell .ts3-mine-page .ts3-mine-bayi-panel {
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--border) 88%, var(--primary));
    background: var(--card);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 3%, transparent);
    overflow: hidden;
}

body.is-customer-shell .ts3-mine-page .ts3-mine-bayi-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    background: color-mix(in srgb, var(--bg-elevated) 40%, var(--card));
}

body.is-customer-shell .ts3-mine-page .ts3-mine-bayi-panel-icon {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--primary) 90%, var(--text));
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
}

body.is-customer-shell .ts3-mine-page .ts3-mine-bayi-panel-icon .admin-nav-svg {
    width: 1.2rem;
    height: 1.2rem;
    display: block;
    opacity: 0.92;
}

body.is-customer-shell .ts3-mine-page .ts3-mine-bayi-panel-title {
    margin: 0 0 0.2rem;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.25;
}

body.is-customer-shell .ts3-mine-page .ts3-mine-bayi-panel-desc {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 40rem;
}

body.is-customer-shell .ts3-mine-page .ts3-mine-bayi-panel .ts3-mine-table-wrap {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0.5rem 0.75rem 0.75rem;
}

body.is-customer-shell .ts3-mine-page .ts3-mine-bayi-panel .ts3-mine-table {
    min-width: 50rem;
    border-spacing: 0 0.35rem;
    font-size: 0.78rem;
}

body.is-customer-shell .ts3-mine-page .ts3-mine-bayi-panel .ts3-mine-table thead th {
    padding: 0.3rem 0.65rem 0.45rem;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    vertical-align: bottom;
}

body.is-customer-shell .ts3-mine-page .ts3-mine-bayi-panel .ts3-mine-table tbody td {
    padding: 0.5rem 0.65rem;
    vertical-align: middle;
    border-style: solid;
    border-color: color-mix(in srgb, var(--border) 72%, transparent);
    border-width: 1px 0;
    background: color-mix(in srgb, var(--bg-elevated) 45%, var(--card));
}

body.is-customer-shell .ts3-mine-page .ts3-mine-bayi-panel .ts3-mine-table tbody td:first-child {
    border-left: 2px solid color-mix(in srgb, var(--primary) 42%, var(--border));
    border-radius: 9px 0 0 9px;
    border-right: none;
}

body.is-customer-shell .ts3-mine-page .ts3-mine-bayi-panel .ts3-mine-table tbody td:last-child {
    border-right: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: 0 9px 9px 0;
}

body.is-customer-shell .ts3-mine-page .ts3-mine-bayi-panel .ts3-mine-table tbody td:not(:first-child) {
    border-left: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

body.is-customer-shell .ts3-mine-page .ts3-mine-bayi-panel .ts3-mine-table tbody tr:hover td {
    background: color-mix(in srgb, var(--primary) 6%, var(--card));
}

body.is-customer-shell .ts3-mine-page .ts3-mine-bayi-panel .ts3-mine-td-strong {
    font-size: 0.78rem;
    font-weight: 500;
}

.ts3-mine-td-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.32rem;
}

.ts3-mine-td-status .badge-status {
    font-size: 0.6rem;
    padding: 0.12rem 0.38rem;
    font-weight: 600;
}

.ts3-mine-pill-ghost {
    display: inline-flex;
    align-items: center;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.16rem 0.42rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    color: color-mix(in srgb, var(--primary) 92%, var(--text));
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
}

.ts3-mine-conn-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.3rem 0.5rem;
    border-radius: 7px;
    background: color-mix(in srgb, var(--bg-elevated) 80%, var(--card));
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}

.ts3-mine-conn-chip .ts3-mine-table-code {
    font-size: 0.7rem;
    font-weight: 500;
}

.ts3-mine-days-val {
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.ts3-mine-days-val--warn {
    color: color-mix(in srgb, #ea580c 85%, var(--text));
}

[data-theme="dark"] .ts3-mine-days-val--warn {
    color: #fb923c;
}

.ts3-mine-table-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.32rem 0.65rem;
    border-radius: 7px;
    line-height: 1.2;
    text-decoration: none;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--card));
    border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border));
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ts3-mine-table-btn:hover {
    background: color-mix(in srgb, var(--primary) 18%, var(--card));
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    color: var(--primary);
    text-decoration: none;
}

[data-theme="dark"] .ts3-mine-table-btn {
    color: color-mix(in srgb, var(--primary) 88%, #fff);
}

.ts3-mine-cards-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
}

.ts3-mine-cards-panel-icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--primary) 88%, var(--text));
    background: color-mix(in srgb, var(--primary) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
}

.ts3-mine-cards-panel-icon .admin-nav-svg {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
    opacity: 0.9;
}

.ts3-mine-cards-panel-title {
    margin: 0 0 0.18rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.25;
}

.ts3-mine-cards-panel-desc {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--text-muted);
    max-width: 36rem;
}

body.is-customer-shell .ts3-mine-page .ts3-mine-card--port {
    border-radius: 12px;
    border-color: color-mix(in srgb, var(--border) 92%, var(--primary));
}

body.is-customer-shell .ts3-mine-page .ts3-mine-card--port::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 12px 12px 0 0;
    opacity: 1;
    pointer-events: none;
}

body.is-customer-shell .ts3-mine-page .ts3-mine-card--port .ts3-mine-card-layout {
    padding: 0.85rem 0.9rem;
}

body.is-customer-shell .ts3-mine-page .ts3-mine-card--port .ts3-mine-connect {
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    border-color: color-mix(in srgb, var(--border) 90%, transparent);
    background: color-mix(in srgb, var(--bg-elevated) 88%, var(--card));
}

body.is-customer-shell .ts3-mine-page .ts3-mine-card--port .ts3-mine-connect-val {
    font-size: 0.75rem;
    font-weight: 500;
}

.ts3-mine-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.38rem 0.85rem;
    border-radius: 8px;
    line-height: 1.25;
    text-decoration: none;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 9%, var(--card));
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ts3-mine-card-btn:hover {
    background: color-mix(in srgb, var(--primary) 16%, var(--card));
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
    color: var(--primary);
    text-decoration: none;
}

[data-theme="dark"] body.is-customer-shell .ts3-mine-page .ts3-mine-bayi-panel {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent);
}

[data-theme="dark"] .ts3-mine-card-btn {
    color: color-mix(in srgb, var(--primary) 90%, #fff);
}

@media (max-width: 640px) {
    body.is-customer-shell .ts3-mine-page .ts3-mine-bayi-panel-head {
        flex-direction: column;
        align-items: stretch;
    }

    body.is-customer-shell .ts3-mine-page .ts3-mine-bayi-panel-icon {
        width: 2.75rem;
        height: 2.75rem;
    }

    .ts3-mine-cards-panel-head {
        flex-direction: column;
    }
}

.checkout-ts3-success {
    margin: 0.75rem 0 1rem;
}

.checkout-ts3-connect {
    margin-top: 0.5rem;
    padding: 0.85rem 1rem;
}

.checkout-ts3-connect-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.checkout-ts3-connect code {
    font-size: 1rem;
    word-break: break-all;
}

/* Faturalar — kart ızgarası (light/dark uyumlu) */
.faturalar-page {
    max-width: 1200px;
}

.faturalar-intro {
    margin-bottom: 1.35rem;
}

.faturalar-page .faturalar-sub {
    font-size: 0.92rem;
    line-height: 1.5;
    max-width: 52ch;
}

.faturalar-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.faturalar-stat {
    position: relative;
    padding: 1.15rem 1.2rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.faturalar-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    background: var(--primary);
    opacity: 0.85;
}

.faturalar-stat--debt::before {
    background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--accent) 70%, var(--primary)));
}

.faturalar-stat--warn::before {
    background: linear-gradient(180deg, #f59e0b, #ea580c);
}

.faturalar-stat--ok::before {
    background: linear-gradient(180deg, #22c55e, #16a34a);
}

.faturalar-stat-k {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.45rem;
}

.faturalar-stat-num {
    display: block;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--text);
}

.faturalar-stat-num--ok {
    color: color-mix(in srgb, var(--accent) 55%, var(--text));
}

.faturalar-stat-cur {
    font-size: 0.85em;
    font-weight: 700;
    opacity: 0.85;
}

.faturalar-stat-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.faturalar-grid {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

@media (min-width: 1100px) {
    .faturalar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1400px) {
    .faturalar-page {
        max-width: 1320px;
    }

    .faturalar-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.invoice-list-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.2rem 1.25rem 1.15rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 96%, var(--bg));
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease, box-shadow 0.22s ease, transform 0.2s ease;
}

.invoice-list-card:hover {
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .invoice-list-card:hover {
        transform: none;
    }
}

.invoice-list-card__accent {
    position: absolute;
    left: 0;
    top: 0.65rem;
    bottom: 0.65rem;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: color-mix(in srgb, var(--primary) 55%, var(--border));
}

.invoice-list-card--paid .invoice-list-card__accent {
    background: linear-gradient(180deg, #22c55e, #15803d);
}

.invoice-list-card--unpaid .invoice-list-card__accent {
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 75%, #6366f1), var(--primary));
}

.invoice-list-card--due-soon .invoice-list-card__accent {
    background: linear-gradient(180deg, #fbbf24, #d97706);
}

.invoice-list-card--overdue .invoice-list-card__accent {
    background: linear-gradient(180deg, #f87171, #dc2626);
}

.invoice-list-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
    padding-left: 0.35rem;
}

.invoice-list-card__label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}

.invoice-list-card__no {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.invoice-list-card__badge.badge-status {
    flex-shrink: 0;
    padding: 0.32rem 0.65rem;
    border-radius: 999px;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}

.invoice-list-card .badge-inv-unpaid {
    background: color-mix(in srgb, #f97316 14%, var(--card));
    border-color: color-mix(in srgb, #f97316 35%, var(--border));
    color: #c2410c;
}

[data-theme="dark"] .invoice-list-card .badge-inv-unpaid {
    color: #fdba74;
    background: color-mix(in srgb, #f97316 18%, var(--bg));
}

.invoice-list-card .badge-inv-paid {
    background: color-mix(in srgb, var(--accent) 14%, var(--card));
    border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
    color: color-mix(in srgb, var(--accent) 55%, #14532d);
}

[data-theme="dark"] .invoice-list-card .badge-inv-paid {
    color: #86efac;
    background: color-mix(in srgb, #22c55e 16%, var(--bg));
    border-color: color-mix(in srgb, #22c55e 35%, var(--border));
}

.invoice-list-card .badge-inv-cancelled {
    background: color-mix(in srgb, var(--text-muted) 12%, var(--card));
    border-color: var(--border);
    color: var(--text-muted);
}

.invoice-list-card__amount {
    margin: 0 0 0.65rem;
    padding-left: 0.35rem;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.invoice-list-card__amount-val {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.invoice-list-card__amount-cur {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.invoice-list-card__desc {
    margin: 0 0 1rem;
    padding-left: 0.35rem;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.invoice-list-card__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 1rem;
    margin: 0 0 1.1rem;
    padding: 0.85rem 0.65rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg) 55%, var(--card));
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.invoice-list-card__meta > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.invoice-list-card__meta dt {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0 0 0.15rem;
}

.invoice-list-card__meta dd {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.invoice-list-card__dd--urgent {
    color: #dc2626;
    font-weight: 800;
}

[data-theme="dark"] .invoice-list-card__dd--urgent {
    color: #fca5a5;
}

.invoice-list-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.15rem;
    padding-left: 0.35rem;
}

.invoice-list-card__btn--pay {
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 28%, transparent);
}

.faturalar-empty {
    text-align: center;
    padding: 2.75rem 1.5rem;
    border-radius: var(--radius-md);
    border: 1px dashed color-mix(in srgb, var(--primary) 25%, var(--border));
    background: color-mix(in srgb, var(--card) 92%, var(--bg));
}

.faturalar-empty-visual {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    color: color-mix(in srgb, var(--primary) 45%, var(--text-muted));
}

.faturalar-empty-title {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.faturalar-empty-text {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 28rem;
    margin-inline: auto;
    line-height: 1.5;
}

/* Eski kompakt tablo sınıfları (başka sayfalar / geriye dönük) */
.faturalar-wrap {
    overflow-x: auto;
}

.data-table--compact {
    font-size: 0.78rem;
}

.data-table--compact th,
.data-table--compact td {
    padding: 1rem 0.45rem;
    vertical-align: top;
}

.faturalar-desc {
    max-width: 14rem;
    line-height: 1.35;
}

.faturalar-num {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.faturalar-date {
    font-size: 0.74rem;
    white-space: nowrap;
    color: var(--text-muted);
}

.faturalar-actions {
    white-space: nowrap;
}

.hizmetler-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--card) 90%, transparent);
}

.hizmet-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
	border-radius:8px;
}

.hizmet-card {
    padding: 1.15rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--card) 92%, transparent);
    box-shadow: var(--shadow-sm);
	border-radius:8px;
}

.hizmet-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.hizmet-card-head h2 {
    margin: 0 0 0.2rem;
    font-size: 1rem;
}

.hizmet-card-head p {
    margin: 0;
    font-size: 0.78rem;
}

.hizmet-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 0.8rem;
}

.hizmet-card-grid small {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 0.1rem;
}

.hizmet-card-grid strong {
    font-size: 0.84rem;
    word-break: break-word;
}

.hizmet-card-actions {
    margin-top: 0.85rem;
}

.hizmetler-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.txt-warn {
    color: #f59e0b;
}

.btn-is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.invoice-hero {
    padding: 1.25rem 1.35rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--card) 92%, transparent);
}

.invoice-page {
    max-width: 980px;
    display: grid;
    gap: 1rem;
}

.detail-page {
    max-width: 1100px;
    display: grid;
    gap: 1rem;
}

.invoice-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.invoice-hero-label {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.invoice-hero-no {
    margin: 0.15rem 0 0;
    font-size: 1.45rem;
    font-weight: 700;
}

.invoice-hero-amount {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.invoice-hero-k {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.invoice-hero-amount strong {
    font-size: 1.35rem;
    font-weight: 700;
}

.invoice-detail-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 880px) {
    .invoice-detail-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.invoice-block-title {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.invoice-dl {
    margin: 0;
}

.invoice-dl > div {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 0.5rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
}

.invoice-dl dt {
    margin: 0;
    color: var(--text-muted);
}

.invoice-dl dd {
    margin: 0;
}

.invoice-detail-card--note .invoice-note {
    margin: 0 0 0.85rem;
    font-size: 0.9rem;
    line-height: 1.45;
}

.invoice-detail-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--card) 92%, transparent);
    padding: 1rem 1.05rem;
}

.invoice-detail-actions {
    margin-top: 1.25rem;
}

@media (max-width: 900px) {
    .invoice-dl > div {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}

.pay-modal-layout {
    width: 100%;
    max-width: none;
}

.pay-modal {
    padding: 1.2rem 1.25rem;
    width: 100%;
}

.pay-modal-head {
    margin-bottom: 0.75rem;
}

.pay-modal-title {
    margin: 0;
    font-size: 1.35rem;
}

.pay-modal-sub {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.pay-modal-lead {
    margin: 0 0 1rem;
    font-size: 0.88rem;
    line-height: 1.45;
}

.pay-methods {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.65rem;
    align-items: stretch;
}

.pay-method {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--card) 90%, transparent);
}

.pay-method strong {
    display: block;
    font-size: 0.88rem;
}

.pay-method--total {
    font-size: 0.95rem;
    margin-top: 0;
    min-width: 180px;
}

.pay-modal-foot {
    margin: 1rem 0 0.75rem;
    font-size: 0.82rem;
}

/* Ticket — konuşma vurgusu */
.thread-msg.is-staff {
    border-left: 3px solid var(--primary);
}

@media (max-width: 1100px) {
    .panel-page-ozet .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .pay-methods {
        grid-template-columns: 1fr;
    }
}

/* —— Admin shell: ikonlar, geniş içerik (masaüstü; mobilde @media 900px kuralı geçerli kalsın) —— */
@media (min-width: 901px) {
    body.is-admin-shell .panel-content.container {
        width: min(1320px, calc(100% - 2rem));
        max-width: 1320px;
    }
}

/*
 * Admin iç sayfalar — tipografi (~12–13px gövde, küçük başlıklar).
 * Kapsam: yalnızca .panel-main (sol menü aynı). Index hariç: body.is-admin-dashboard.
 * Geri alma: (1) admin/index.php içindeki $panelBodyExtra = 'is-admin-dashboard'; satırını silin.
 *            (2) Bu bloğu kaldırın.
 */
body.is-admin-shell:not(.is-admin-dashboard) .panel-main {
    font-size: 0.8125rem; /* 13px */
    line-height: 1.45;
}

body.is-admin-shell:not(.is-admin-dashboard) .panel-main .page-title {
    font-size: 1rem; /* ~16px — önceki ~1.65rem yerine */
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.3rem;
}

body.is-admin-shell:not(.is-admin-dashboard) .panel-main .page-sub {
    font-size: 0.75rem; /* 12px */
    line-height: 1.45;
    margin-bottom: 1.1rem;
}

body.is-admin-shell:not(.is-admin-dashboard) .panel-main .section-mini-title {
    font-size: 0.875rem; /* 14px */
    margin: 1.05rem 0 0.5rem;
}

body.is-admin-shell:not(.is-admin-dashboard) .panel-main .back-link {
    font-size: 0.75rem;
}

body.is-admin-shell:not(.is-admin-dashboard) .panel-main h2:not(.page-title) {
    font-size: 0.9375rem;
}

body.is-admin-shell:not(.is-admin-dashboard) .panel-main h3 {
    font-size: 0.875rem;
}

body.is-admin-shell:not(.is-admin-dashboard) .panel-main .btn {
    font-size: 0.8125rem;
}

body.is-admin-shell:not(.is-admin-dashboard) .panel-main .btn-sm {
    font-size: 0.75rem;
}

body.is-admin-shell:not(.is-admin-dashboard) .panel-main .admin-field-label {
    font-size: 0.6875rem;
}

body.is-admin-shell:not(.is-admin-dashboard) .panel-main input,
body.is-admin-shell:not(.is-admin-dashboard) .panel-main select,
body.is-admin-shell:not(.is-admin-dashboard) .panel-main textarea {
    font-size: 0.8125rem;
}

body.is-admin-shell:not(.is-admin-dashboard) .panel-main .data-table,
body.is-admin-shell:not(.is-admin-dashboard) .panel-main .admin-data-table {
    font-size: 0.8125rem;
}

body.is-admin-shell:not(.is-admin-dashboard) .panel-main .alert {
    font-size: 0.8125rem;
}

body.is-admin-shell:not(.is-admin-dashboard) .panel-main .admin-list-toolbar .admin-list-search-meta,
body.is-admin-shell:not(.is-admin-dashboard) .panel-main .admin-list-toolbar {
    font-size: 0.75rem;
}

body.is-admin-shell:not(.is-admin-dashboard) .panel-main .empty-state,
body.is-admin-shell:not(.is-admin-dashboard) .panel-main .empty-state p {
    font-size: 0.8125rem;
}

body.is-admin-shell:not(.is-admin-dashboard) .panel-main .admin-form-card,
body.is-admin-shell:not(.is-admin-dashboard) .panel-main .stack-form label:not(.admin-field-label) {
    font-size: inherit;
}

body.is-admin-shell:not(.is-admin-dashboard) .panel-main .muted {
    font-size: 0.75rem;
}

body.is-admin-shell:not(.is-admin-dashboard) .panel-main code {
    font-size: 0.78em;
}

body.is-admin-shell:not(.is-admin-dashboard) .panel-topbar {
    font-size: 0.8125rem;
}

body.is-admin-shell:not(.is-admin-dashboard) .panel-topbar .panel-user-name {
    font-size: 0.8125rem;
}

body.is-admin-shell:not(.is-admin-dashboard) .panel-topbar .panel-user-email {
    font-size: 0.75rem;
}

body.is-admin-shell .admin-nav-group {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-bottom: 0.35rem;
}

body.is-admin-shell .admin-nav-sub {
    border-top: none;
    background: transparent;
    padding-top: 0.2rem;
}

/* Üst düzey menü: satır ve ikon arkasında dolgu yok; aktif = sol çizgi; çerçeve yok */
body.is-admin-shell .admin-nav-toplink {
    display: flex;
    align-items: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none;
    font-size: 0.825rem;
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.24rem;
    border-radius: 8px;
}

body.is-admin-shell .admin-nav-group > summary {
    display: flex;
    align-items: center;
    background: transparent !important;
    border: none !important;
    font-size: 0.825rem;
    padding: 0.45rem 1.22rem 0.45rem 0.54rem;
    border-radius: 8px;
}

body.is-admin-shell .admin-nav-toplink:hover {
    background: color-mix(in srgb, var(--text) 4%, transparent) !important;
    border: none !important;
}

body.is-admin-shell .admin-nav-toplink.is-active {
    background: transparent !important;
    border: none !important;
    box-shadow: inset 3px 0 0 var(--primary);
}

body.is-admin-shell .admin-nav-group[open] > summary {
    background: transparent !important;
}

.admin-nav-ico-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    margin-right: 0.52rem;
    flex-shrink: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: color-mix(in srgb, var(--text-muted) 58%, var(--text));
    opacity: 0.88;
    transition: color 0.18s ease, opacity 0.18s ease;
}

.admin-nav-ico-wrap .admin-nav-svg {
    display: block;
}

body.is-admin-shell .admin-nav-ico-wrap {
    width: 1.38rem;
    height: 1.38rem;
    margin-right: 0.46rem;
}

body.is-admin-shell .admin-nav-toplink:hover .admin-nav-ico-wrap,
body.is-admin-shell .admin-nav-group > summary:hover .admin-nav-ico-wrap {
    color: color-mix(in srgb, var(--text-muted) 38%, var(--text));
    background: transparent !important;
    opacity: 1;
}

body.is-admin-shell .admin-nav-toplink.is-active .admin-nav-ico-wrap {
    background: transparent !important;
    color: color-mix(in srgb, var(--primary) 72%, var(--text));
    opacity: 1;
}

body.is-admin-shell .admin-nav-group[open] > summary .admin-nav-ico-wrap {
    color: color-mix(in srgb, var(--text-muted) 35%, var(--text));
    background: transparent !important;
    opacity: 1;
}

[data-theme="dark"] body.is-admin-shell .admin-nav-ico-wrap {
    background: transparent !important;
    color: rgba(186, 198, 212, 0.5);
    opacity: 1;
}

[data-theme="dark"] body.is-admin-shell .admin-nav-toplink {
    border: none !important;
}

[data-theme="dark"] body.is-admin-shell .admin-nav-toplink:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border: none !important;
}

[data-theme="dark"] body.is-admin-shell .admin-nav-toplink.is-active {
    background: transparent !important;
    box-shadow: inset 3px 0 0 var(--primary);
    border: none !important;
}

[data-theme="dark"] body.is-admin-shell .admin-nav-toplink:hover .admin-nav-ico-wrap,
[data-theme="dark"] body.is-admin-shell .admin-nav-group > summary:hover .admin-nav-ico-wrap {
    background: transparent !important;
    color: rgba(203, 213, 225, 0.72);
}

[data-theme="dark"] body.is-admin-shell .admin-nav-toplink.is-active .admin-nav-ico-wrap {
    background: transparent !important;
    color: rgba(147, 197, 253, 0.92);
}

[data-theme="dark"] body.is-admin-shell .admin-nav-group[open] > summary .admin-nav-ico-wrap {
    background: transparent !important;
    color: rgba(203, 213, 225, 0.65);
}

body.is-admin-shell .admin-nav-sub a {
    padding-left: 2.2rem;
    padding-top: 0.44rem;
    padding-bottom: 0.44rem;
    font-size: 0.785rem;
}

body.is-admin-shell .admin-nav-sub a::before {
    content: "";
    position: absolute;
    left: 1.05rem;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: 0.45;
}

body.is-admin-shell .admin-nav-sub a.is-active::before {
    display: none;
}

body.is-admin-shell .admin-nav-sub a.is-active::after {
    left: 0.72rem;
}

body.is-admin-shell .admin-nav-sub a.is-active {
    box-shadow: none;
    border: none !important;
}

.admin-list-page-sub {
    margin-bottom: 0.85rem !important;
}

.admin-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 92%, var(--bg));
}

.admin-list-toolbar--slide {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.75rem;
}

.admin-list-toolbar--slide .admin-list-search-meta {
    flex: 1;
    min-width: 0;
    font-size: 0.78rem;
}

.admin-list-search-rail {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.admin-list-search-slide {
    overflow: hidden;
    max-width: 0;
    transition: max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-list-toolbar--slide.is-search-open .admin-list-search-slide {
    max-width: 240px;
}

.admin-list-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 94%, var(--bg));
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.admin-list-search-toggle:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--text-muted) 35%, var(--border));
}

.admin-list-search-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent);
}

.admin-list-toolbar--slide.is-search-open .admin-list-search-toggle {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
    background: color-mix(in srgb, var(--primary) 8%, var(--card));
}

.admin-list-search-ico {
    display: block;
}

.admin-list-search-input--compact {
    width: 228px;
    max-width: min(228px, calc(100vw - 8rem));
    box-sizing: border-box;
    padding: 0.42rem 0.65rem;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 0.8125rem;
}

.admin-list-search-input--compact:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 14%, transparent);
}

.admin-list-search-input {
    flex: 1;
    min-width: min(100%, 260px);
    padding: 0.65rem 0.95rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font: inherit;
}

.admin-list-search-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.admin-list-search-meta {
    font-size: 0.82rem;
    white-space: nowrap;
}

.admin-data-shell--list {
    border-radius: 14px;
}

.admin-data-shell--list .table-wrap {
    padding: 0.1rem 0 0;
}

.admin-table--dense {
    font-size: 0.8125rem;
}

.admin-data-shell--list .admin-table--dense thead th {
    padding: 0.42rem 0.65rem;
    font-size: 0.65rem;
    letter-spacing: 0.055em;
    background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
    border-bottom-color: var(--border);
}

.admin-data-shell--list .admin-table--dense tbody td {
    padding: 0.4rem 0.65rem;
    vertical-align: middle;
}

.admin-data-shell--list .admin-table--dense tbody tr:hover td {
    background: color-mix(in srgb, var(--primary) 4%, transparent);
}

.admin-data-shell--list .admin-table--dense .admin-td-strong {
    font-weight: 500;
    font-size: 0.8125rem;
}

.admin-data-shell--list .admin-table--dense .admin-mono {
    font-size: 0.75rem;
    padding: 0.12rem 0.35rem;
    border-radius: 6px;
}

.admin-data-shell--list .admin-table--dense .admin-price-cell {
    font-size: 0.8125rem;
    font-weight: 600;
}

.admin-data-shell--list .admin-table--dense .admin-currency {
    font-size: 0.75em;
}

.admin-data-shell--list .admin-table--dense .admin-cat-badge {
    padding: 0.18rem 0.48rem;
    font-size: 0.68rem;
}

.admin-data-shell--list .admin-table--dense .admin-status-pill {
    padding: 0.2rem 0.48rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.admin-data-shell--list .admin-table--dense .admin-table-actions {
    flex-wrap: nowrap;
    gap: 0.3rem;
}

.admin-data-shell--list .admin-table--dense .btn-sm {
    padding: 0.26rem 0.48rem;
    font-size: 0.74rem;
    line-height: 1.25;
}

.admin-data-shell--padded .admin-table--premium thead th,
.admin-data-shell--padded .admin-table--premium tbody td {
    padding: 0.8rem 1.05rem;
}

.admin-data-shell--padded .table-wrap {
    padding: 0.25rem 0 0.15rem;
}

[data-theme="dark"] body.is-admin-shell .panel-sidebar--admin {
    background: color-mix(in srgb, var(--bg-elevated) 88%, #020617);
}

[data-theme="dark"] body.is-admin-shell .admin-nav-group {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

[data-theme="dark"] body.is-admin-shell .admin-nav-sub a.is-active {
    background: rgba(59, 130, 246, 0.12);
    box-shadow: none;
    border: none !important;
}

[data-theme="dark"] body.is-admin-shell .admin-nav-sub a:hover {
    background: rgba(59, 130, 246, 0.08);
}

/* —— Admin canlı destek: oturum üst bilgisi —— */
body.is-admin-shell .admin-live-meta--detail {
    padding: 0.62rem 0.78rem 0.72rem;
}

body.is-admin-shell .admin-live-meta-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

body.is-admin-shell .admin-live-meta-row--kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    align-items: stretch;
    gap: 0.42rem;
}

body.is-admin-shell .admin-live-meta-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.38rem 0.52rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--text-muted) 8%, var(--card));
    border: 1px solid var(--border);
    min-width: 0;
}

body.is-admin-shell .admin-live-meta-kpi--accent {
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
    background: color-mix(in srgb, var(--primary) 9%, var(--card));
}

body.is-admin-shell .admin-live-meta-kpi-val {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

body.is-admin-shell .admin-live-meta-row:not(.admin-live-meta-row--kpis) {
    display: grid;
    grid-template-columns: minmax(3rem, 4.1rem) minmax(0, 1fr);
    gap: 0.35rem 0.55rem;
    align-items: start;
}

body.is-admin-shell .admin-live-meta-row .admin-live-meta-label {
    padding-top: 0.12rem;
    line-height: 1.2;
}

body.is-admin-shell .admin-live-meta-page {
    font-size: 0.76rem;
    line-height: 1.42;
    word-break: break-word;
    overflow-wrap: anywhere;
}

body.is-admin-shell .admin-live-meta-page a {
    color: var(--primary);
    text-decoration: none;
}

body.is-admin-shell .admin-live-meta-page a:hover {
    text-decoration: underline;
}

body.is-admin-shell .admin-live-meta-row--title .admin-live-meta-title-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.36;
}

body.is-admin-shell .admin-live-meta-ua-details {
    border-radius: 8px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 14%, var(--card));
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

body.is-admin-shell .admin-live-meta-ua-details summary {
    cursor: pointer;
    padding: 0.38rem 0.58rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    list-style: none;
    user-select: none;
}

body.is-admin-shell .admin-live-meta-ua-details summary::-webkit-details-marker {
    display: none;
}

body.is-admin-shell .admin-live-meta-ua-pre {
    margin: 0;
    padding: 0.5rem 0.7rem 0.65rem;
    font-size: 0.68rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    max-height: 5rem;
    overflow-y: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Gece modu: sohbet alanı tema değişkeninden sapmasın */
html[data-theme="dark"] body.is-admin-shell .admin-live-thread {
    background: #151c2c !important;
    color: #e8edf5;
    border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] body.is-admin-shell .admin-live-meta--placeholder {
    background: #121826 !important;
    color: #94a3b8;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] body.is-admin-shell .admin-live-meta--detail {
    background: #121826 !important;
    color: #e8edf5;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] body.is-admin-shell .admin-live-meta--detail .admin-live-meta-label {
    color: #94a3b8;
}

html[data-theme="dark"] body.is-admin-shell .admin-live-meta-code {
    background: rgba(0, 0, 0, 0.32);
    color: #e8edf5;
    border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] body.is-admin-shell .admin-live-meta-kpi {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] body.is-admin-shell .admin-live-meta-kpi--accent {
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.32);
}

html[data-theme="dark"] body.is-admin-shell .admin-live-meta-kpi-val {
    color: #93c5fd;
}

html[data-theme="dark"] body.is-admin-shell .admin-live-meta-row--title .admin-live-meta-title-text {
    color: #f1f5f9;
}

html[data-theme="dark"] body.is-admin-shell .admin-live-meta-ua-details {
    background: rgba(0, 0, 0, 0.22);
    border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] body.is-admin-shell .admin-live-meta-ua-details summary {
    color: #94a3b8;
}

html[data-theme="dark"] body.is-admin-shell .admin-live-meta-ua-pre {
    color: #94a3b8;
    border-top-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] body.is-admin-shell .admin-live-msgs {
    background: #0f141f !important;
    color: #e8edf5;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] body.is-admin-shell .admin-live-foot {
    background: #151c2c !important;
    color: #e8edf5;
}

html[data-theme="dark"] body.is-admin-shell .admin-live-compose-input {
    background: #0d1118 !important;
    color: #e8edf5;
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] body.is-admin-shell .admin-live-compose-input::placeholder {
    color: #94a3b8;
}

html[data-theme="dark"] body.is-admin-shell .admin-live-quick-hint {
    color: #94a3b8;
}

html[data-theme="dark"] body.is-admin-shell .admin-live-quick-hint code {
    background: rgba(0, 0, 0, 0.32);
    border-color: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

html[data-theme="dark"] body.is-admin-shell .admin-live-chip {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.28);
    color: #e8edf5;
}

html[data-theme="dark"] body.is-admin-shell .admin-live-chip:hover {
    background: rgba(59, 130, 246, 0.16);
}

html[data-theme="dark"] body.is-admin-shell .admin-live-chip-k {
    color: #93c5fd;
}

html[data-theme="dark"] body.is-admin-shell .admin-live-bubble--s {
    background: #1a2332 !important;
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] body.is-admin-shell .admin-live-bubble--sys {
    background: rgba(0, 0, 0, 0.35) !important;
    color: #94a3b8;
    border-color: rgba(255, 255, 255, 0.12);
}

/* —— Web Hosting vitrin (hosting.php) —— */
.hosting-vitrin-section {
    padding-bottom: 2.5rem;
}

.hosting-vitrin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

@media (max-width: 1100px) {
    .hosting-vitrin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

.hosting-vitrin-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.35rem 1.25rem 1.5rem;
    box-shadow: var(--shadow-sm);
    border-top: 4px solid #64748b;
}

.hosting-vitrin-card--gray {
    border-top-color: #475569;
}
.hosting-vitrin-card--purple {
    border-top-color: #7c3aed;
}
.hosting-vitrin-card--green {
    border-top-color: #16a34a;
}
.hosting-vitrin-card--red {
    border-top-color: #dc2626;
}

.hosting-vitrin-card.is-recommended {
    box-shadow: 0 20px 50px -18px rgb(22 163 74 / 0.35);
}

.hosting-vitrin-ribbon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #16a34a;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
}

.hosting-vitrin-title {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
}

.hosting-vitrin-sub {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    min-height: 2.6rem;
}

.hosting-vitrin-discount-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    background: rgb(59 130 246 / 0.12);
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
    font-size: 0.78rem;
    margin-bottom: 0.5rem;
}

.hosting-vitrin-old {
    text-decoration: line-through;
    color: var(--text-muted);
}

.hosting-vitrin-disc-pct {
    font-weight: 600;
    color: #2563eb;
}

.hosting-vitrin-now {
    margin: 0;
    font-size: 1.85rem;
    font-weight: 700;
}

.hosting-vitrin-now small {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
}

.hosting-vitrin-usd-hint {
    margin: 0.15rem 0 0.65rem;
    font-size: 0.8rem;
}

.hosting-vitrin-domain-box {
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.65rem;
    font-size: 0.82rem;
    text-align: center;
    margin-bottom: 0.85rem;
}

.hosting-vitrin-cta {
    margin: 0 0 0.35rem;
}

.hosting-vitrin-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none !important;
    background: #1e3a5f;
    color: #fff !important;
}

.hosting-vitrin-btn:hover {
    filter: brightness(1.06);
}

.hosting-vitrin-btn--green {
    background: #16a34a;
}

.hosting-vitrin-renewal {
    margin: 0 0 1rem;
    font-size: 0.78rem;
    text-align: center;
    color: var(--text-muted);
}

.hosting-vitrin-muted-link {
    color: inherit;
    text-decoration: underline;
}

.hosting-vitrin-feat-h {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
}

.hosting-vitrin-feat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.82rem;
}

.hosting-vitrin-feat-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.hosting-vitrin-check {
    color: #16a34a;
    font-weight: 700;
}

.hosting-vitrin-star {
    color: #ea580c;
}

.hosting-vitrin-new-badge {
    margin-left: 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    background: #ede9fe;
    color: #6d28d9;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

.hosting-vitrin-feat-list li.is-new-feature {
    font-weight: 600;
}

/* —— Hosting sipariş (hosting-siparis.php) —— */
.page-hosting-checkout .hosting-co-section {
    padding: 1.5rem 0 3rem;
}

.hosting-co-container {
    max-width: 1180px;
}

.hosting-co-crumb {
    margin-bottom: 1.25rem;
}

.hosting-co-grid {
    display: grid;
    grid-template-columns: 1fr min(360px, 100%);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 960px) {
    .hosting-co-grid {
        grid-template-columns: 1fr;
    }
}

.hosting-co-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.hosting-co-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.35rem 1.35rem 1.5rem;
    box-shadow: var(--shadow-sm);
}

.hosting-co-card-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
}

[data-theme="dark"] .hosting-co-card-title {
    color: var(--text);
}

.hosting-co-card-sub {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.hosting-co-card-head {
    margin-bottom: 1rem;
}

.hosting-co-packs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

@media (max-width: 1100px) {
    .hosting-co-packs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .hosting-co-packs {
        grid-template-columns: 1fr;
    }
}

.hosting-co-pack {
    position: relative;
    text-align: left;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.85rem 0.75rem 0.75rem;
    background: var(--bg-elevated);
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.hosting-co-pack.is-selected {
    border-color: #0066ff;
    box-shadow: 0 0 0 1px rgb(0 102 255 / 0.15);
}

.hosting-co-pack-pop {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -55%);
    background: #0066ff;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}

.hosting-co-pack-pop--rec {
    background: linear-gradient(135deg, #059669, #10b981);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.hosting-co-pack-top {
    padding-top: 0.35rem;
}

.hosting-co-pack h3 {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
}

.hosting-co-pack-price {
    margin: 0;
    font-size: 0.88rem;
}

.hosting-co-pack-feats {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.hosting-co-pack-feats li {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.2rem;
}

.hosting-co-mini-ico {
    width: 1.1rem;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.85;
}

.hosting-co-field-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.hosting-co-input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font: inherit;
    background: var(--bg-elevated);
    color: inherit;
}

.hosting-co-billing-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 640px) {
    .hosting-co-billing-row {
        grid-template-columns: 1fr;
    }
}

.hosting-co-bill-opt {
    position: relative;
    cursor: pointer;
    display: block;
}

.hosting-co-bill-opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.hosting-co-bill-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    background: var(--bg-elevated);
    transition: border-color 0.2s;
}

.hosting-co-bill-opt:has(input:checked) .hosting-co-bill-face {
    border-color: #0066ff;
}

.hosting-co-bill-pill {
    position: absolute;
    top: -0.35rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.62rem;
    font-weight: 700;
    background: #e0f2fe;
    color: #0369a1;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    white-space: nowrap;
}

.hosting-co-bill-pill--blue {
    background: rgb(0 102 255 / 0.12);
    color: #0066ff;
}

.hosting-co-bill-title {
    font-weight: 600;
    font-size: 0.9rem;
}

.hosting-co-aside .hosting-co-summary {
    position: sticky;
    top: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
}

.hosting-co-sum-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.hosting-co-sum-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.hosting-co-currency {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
}

.hosting-co-switch {
    position: relative;
    display: inline-flex;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.hosting-co-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.hosting-co-switch-ui {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background 0.2s;
}

.hosting-co-switch-ui::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.hosting-co-switch input:checked + .hosting-co-switch-ui {
    background: #0066ff;
}

.hosting-co-switch input:checked + .hosting-co-switch-ui::after {
    transform: translateX(20px);
}

.hosting-co-sum-lines {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    font-size: 0.85rem;
}

.hosting-co-sum-lines li {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.hosting-co-sum-sub {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.82rem;
}

.hosting-co-sum-sub li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.3rem;
}

.hosting-co-sum-disc {
    color: #16a34a;
    font-weight: 600;
}

.hosting-co-sum-total-label {
    margin: 0.85rem 0 0.15rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.hosting-co-sum-total {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    color: #0066ff;
}

.hosting-co-sum-period {
    margin: 0.15rem 0 1rem;
    font-size: 0.82rem;
}

.hosting-co-cart-btn {
    width: 100%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #0066ff !important;
    border: none;
    color: #fff !important;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    cursor: pointer;
}

.hosting-co-cart-btn:hover {
    filter: brightness(1.05);
}

.hosting-co-sum-foot {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.hosting-co-sum-foot-title {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
}

.hosting-co-sum-foot-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.hosting-co-sum-foot-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin-bottom: 0.3rem;
}

.hosting-co-foot-check {
    color: #16a34a;
    font-weight: 700;
    flex-shrink: 0;
}

/* CMS: katalog vitrin bloğu (catalog_showcase) */
.cms-catalog-showcase {
    padding: 2.5rem 0 3rem;
}

.cms-showcase-head {
    text-align: center;
    max-width: 46rem;
    margin: 0 auto 2rem;
}

.cms-showcase-title {
    margin: 0 0 0.35rem;
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.cms-showcase-sub {
    margin: 0;
    font-size: 0.95rem;
}

.cms-showcase-key {
    margin: 0.65rem 0 0;
    font-size: 0.78rem;
}

.cms-showcase-key code {
    font-size: 0.85em;
}

.cms-showcase-empty {
    max-width: 36rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
    text-align: center;
    border-radius: 14px;
}

.cms-showcase-table-wrap {
    overflow: auto;
    border-radius: 14px;
    padding: 0.25rem;
}

.cms-showcase-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.cms-showcase-table th,
.cms-showcase-table td {
    padding: 0.72rem 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    text-align: left;
    vertical-align: middle;
}

.cms-showcase-table thead th {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border-bottom: 2px solid color-mix(in srgb, var(--primary) 35%, var(--border));
}

.cms-showcase-table .cms-showcase-sale {
    font-size: 0.92rem;
}

.cms-showcase-th-price,
.cms-showcase-td-price {
    white-space: nowrap;
}

.cms-showcase-td-cta {
    width: 1%;
    white-space: nowrap;
}

.cms-showcase-td-cta .btn {
    white-space: nowrap;
    min-width: 6.5rem;
    padding: 0.42rem 1rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.cms-showcase-td-desc {
    vertical-align: top;
}

.cms-showcase-td-desc-plain {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
}

/* Özet hücresi: iç tablo (th/td) */
.cms-showcase-inline-specs {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.35;
}

.cms-showcase-inline-specs th,
.cms-showcase-inline-specs td {
    padding: 0.22rem 0.4rem 0.22rem 0;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
    vertical-align: top;
    text-align: left;
}

.cms-showcase-inline-specs tbody tr:last-child th,
.cms-showcase-inline-specs tbody tr:last-child td {
    border-bottom: none;
}

.cms-showcase-inline-specs th {
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    width: 1%;
    max-width: 8.5rem;
    padding-right: 0.55rem;
}

.cms-showcase-inline-specs td {
    color: color-mix(in srgb, var(--text) 88%, var(--text-muted));
    overflow-wrap: anywhere;
}

.cms-showcase-inline-specs__line {
    color: color-mix(in srgb, var(--text) 82%, var(--text-muted));
    white-space: normal;
    word-break: normal;
}

.cms-showcase-old {
    display: block;
    font-size: 0.72rem;
    text-decoration: line-through;
    color: var(--text-muted);
}

.cms-showcase-sale {
    font-weight: 800;
    font-size: 1.05rem;
}

.cms-showcase-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 1.1rem;
}

.cms-showcase-tile {
    padding: 1.15rem 1.2rem 1.25rem;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    border: 1px solid color-mix(in srgb, var(--border) 85%, var(--primary));
    background: linear-gradient(160deg, color-mix(in srgb, var(--card) 92%, var(--primary) 4%), var(--card));
}

.cms-showcase-tile-top {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.cms-showcase-tile-top h3 {
    margin: 0;
    font-size: 1.02rem;
}

.cms-showcase-tile-desc {
    margin: 0;
    flex: 1;
    font-size: 0.86rem;
    line-height: 1.45;
    white-space: pre-line;
}

.cms-showcase-tile-price {
    margin-top: 0.25rem;
}

.cms-showcase-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1.25rem;
}

.cms-showcase-card {
    position: relative;
    border-radius: 18px;
    padding: 1px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 55%, transparent), color-mix(in srgb, #6366f1 40%, transparent));
}

.cms-showcase-card-glow {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--primary) 25%, transparent), transparent 55%);
    opacity: 0.5;
    pointer-events: none;
    filter: blur(12px);
}

.cms-showcase-card-inner {
    position: relative;
    border-radius: 17px;
    padding: 1.15rem 1.2rem 1.2rem;
    background: var(--card);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cms-showcase-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.cms-showcase-card-head h3 {
    margin: 0;
    font-size: 1.05rem;
}

.cms-showcase-sku {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-family: ui-monospace, monospace;
}

.cms-showcase-card-desc {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    white-space: pre-line;
}

.cms-showcase-features {
    margin: 0.15rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.cms-showcase-card-foot {
    margin-top: auto;
    padding-top: 0.65rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* —— CMS vitrin: tema (minecraft / fivem / arma) + gelişmiş tablo —— */
.cms-showcase-game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
    gap: 1.35rem;
    align-items: stretch;
}

.cms-showcase-game-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border: 1px solid var(--game-border, color-mix(in srgb, var(--border) 80%, transparent));
    background: var(--game-card-bg, var(--card));
    box-shadow:
        0 14px 44px color-mix(in srgb, #000 32%, transparent),
        0 0 0 1px color-mix(in srgb, var(--game-accent, #fff) 12%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cms-showcase-game-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 22px 56px color-mix(in srgb, #000 38%, transparent),
        0 0 0 1px color-mix(in srgb, var(--game-accent, #fff) 22%, transparent),
        0 0 48px color-mix(in srgb, var(--game-accent, #6366f1) 18%, transparent);
}

.cms-showcase-game-card__ribbon {
    position: absolute;
    top: 0.65rem;
    right: -2.25rem;
    transform: rotate(38deg);
    transform-origin: center;
    background: linear-gradient(90deg, var(--game-accent, #22d3ee), color-mix(in srgb, var(--game-accent, #22d3ee) 70%, #fff));
    color: #0b1220;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35rem 2.5rem;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.cms-showcase-game-card__discount {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, #ef4444 92%, #fff);
    color: #fff;
}

.cms-showcase-game-card__top {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0.5rem 0.85rem;
    padding: 1.1rem 1rem 0.85rem;
    align-items: start;
}

.cms-showcase-game-card__media {
    grid-row: 1 / span 2;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 14px;
    overflow: hidden;
    background: color-mix(in srgb, var(--game-accent, #6366f1) 12%, var(--card));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-accent, #6366f1) 22%, transparent);
}

/* Ürün görseli (image_url): kutuda renkli zemin yok; şeffaf PNG için */
.cms-showcase-game-card__media--photo {
    background: transparent;
    box-shadow: none;
}

.cms-showcase-game-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cms-showcase-game-card__media--photo img {
    object-fit: contain;
    padding: 0.15rem;
}

.cms-showcase-game-card__headtext h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--game-title, var(--text));
}

.cms-showcase-game-card__sku {
    font-size: 0.7rem;
    font-family: ui-monospace, monospace;
    color: var(--text-muted);
}

.cms-showcase-game-card__pricebox {
    grid-column: 2;
    text-align: right;
}

.cms-showcase-game-card__old {
    display: block;
    font-size: 0.75rem;
    text-decoration: line-through;
    color: var(--text-muted);
}

.cms-showcase-game-card__sale {
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--game-price, var(--text));
}

.cms-showcase-game-card__sale small {
    font-size: 0.62em;
    font-weight: 700;
    opacity: 0.85;
}

.cms-showcase-game-specs {
    margin: 0;
    padding: 0.65rem 1rem;
    list-style: none;
    font-size: 0.82rem;
    line-height: 1.45;
    border-top: 1px dashed color-mix(in srgb, var(--game-border, var(--border)) 70%, transparent);
}

.cms-showcase-game-specs li {
    position: relative;
    padding-left: 1.15rem;
    margin: 0.35rem 0;
    color: color-mix(in srgb, var(--text) 88%, var(--text-muted));
    white-space: pre-line;
}

.cms-showcase-game-specs li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 2px;
    background: var(--game-accent, var(--primary));
    opacity: 0.85;
}

.cms-showcase-game-desc {
    margin: 0;
    padding: 0.5rem 1rem;
    font-size: 0.84rem;
    line-height: 1.5;
    border-top: 1px dashed color-mix(in srgb, var(--border) 75%, transparent);
    white-space: pre-line;
}

.cms-showcase-game-btn {
    margin: 0.35rem 1rem 0;
    display: block;
    width: calc(100% - 2rem);
    padding: 0.65rem 1rem;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.88rem;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(180deg, color-mix(in srgb, var(--game-btn, #6366f1) 100%, #fff 8%), var(--game-btn, #6366f1));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--game-btn, #6366f1) 45%, transparent);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cms-showcase-game-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--game-btn, #6366f1) 55%, transparent);
}

.cms-showcase-game-checks {
    margin: 0.75rem 0 0;
    padding: 0.75rem 1rem 1rem;
    list-style: none;
    font-size: 0.72rem;
    line-height: 1.5;
    background: var(--game-foot-bg, color-mix(in srgb, var(--card) 94%, var(--game-accent, #6366f1) 6%));
    border-top: 1px solid color-mix(in srgb, var(--game-border, var(--border)) 55%, transparent);
}

.cms-showcase-game-checks li {
    padding-left: 1.1rem;
    position: relative;
    margin: 0.2rem 0;
}

.cms-showcase-game-checks li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--game-accent, #22c55e);
    font-weight: 800;
    font-size: 0.75rem;
}

.cms-showcase-game-card.is-popular {
    outline: 2px solid var(--game-accent, #22d3ee);
    outline-offset: 2px;
}

/* Minecraft: sıra renkleri (tier) */
.cms-showcase-game-card--minecraft[data-tier="1"] {
    --game-accent: #c4703a;
    --game-btn: #ea8c3c;
    --game-price: #fcd34d;
    --game-border: color-mix(in srgb, #c4703a 45%, transparent);
    --game-foot-bg: color-mix(in srgb, #c4703a 14%, #1a1520);
    --game-title: #fde68a;
    --game-card-bg: linear-gradient(165deg, #2a1f18 0%, #151018 55%);
}

.cms-showcase-game-card--minecraft[data-tier="2"] {
    --game-accent: #94a3b8;
    --game-btn: #64748b;
    --game-price: #e2e8f0;
    --game-border: color-mix(in srgb, #94a3b8 40%, transparent);
    --game-foot-bg: color-mix(in srgb, #64748b 16%, #141820);
    --game-title: #f1f5f9;
    --game-card-bg: linear-gradient(165deg, #232a32 0%, #12161c 55%);
}

.cms-showcase-game-card--minecraft[data-tier="3"] {
    --game-accent: #7dd3fc;
    --game-btn: #38bdf8;
    --game-price: #e0f2fe;
    --game-border: color-mix(in srgb, #38bdf8 45%, transparent);
    --game-foot-bg: color-mix(in srgb, #0ea5e9 14%, #101820);
    --game-title: #f0f9ff;
    --game-card-bg: linear-gradient(165deg, #15232e 0%, #0f141c 55%);
}

.cms-showcase-game-card--minecraft[data-tier="4"] {
    --game-accent: #22d3ee;
    --game-btn: #06b6d4;
    --game-price: #cffafe;
    --game-border: color-mix(in srgb, #06b6d4 50%, transparent);
    --game-foot-bg: color-mix(in srgb, #06b6d4 16%, #0c1820);
    --game-title: #ecfeff;
    --game-card-bg: linear-gradient(165deg, #0c2430 0%, #0a1218 55%);
}

.cms-showcase-game-card--minecraft[data-tier="5"] {
    --game-accent: #f472b6;
    --game-btn: #db2777;
    --game-price: #fce7f3;
    --game-border: color-mix(in srgb, #db2777 45%, transparent);
    --game-foot-bg: color-mix(in srgb, #db2777 14%, #180c14);
    --game-title: #fdf2f8;
    --game-card-bg: linear-gradient(165deg, #2a1420 0%, #120a10 55%);
}

/* FiveM: koyu kart, mor / indigo neon — gece modu ile uyumlu */
.cms-showcase-game-card--fivem {
    --game-accent: #a78bfa;
    --game-btn: #7c3aed;
    --game-price: #ddd6fe;
    --game-border: color-mix(in srgb, #a78bfa 38%, transparent);
    --game-foot-bg: linear-gradient(180deg, color-mix(in srgb, #0c0a14 96%, #6d28d9 4%) 0%, #08060f 100%);
    --game-title: #f5f3ff;
    --game-card-bg: linear-gradient(152deg, #1a1430 0%, #0f0b1c 42%, #0a0814 100%);
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.55),
        0 0 0 1px color-mix(in srgb, #a78bfa 22%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}

.cms-catalog-showcase--theme-fivem .cms-showcase-game-card--fivem .cms-showcase-game-card__headtext h3 {
    color: var(--game-title, #f5f3ff);
}

.cms-catalog-showcase--theme-fivem .cms-showcase-game-card--fivem .cms-showcase-game-card__sku {
    color: color-mix(in srgb, #c4b5fd 75%, #64748b);
}

.cms-catalog-showcase--theme-fivem .cms-showcase-game-card--fivem .cms-showcase-game-specs li {
    color: color-mix(in srgb, #e9d5ff 82%, #94a3b8);
}

.cms-catalog-showcase--theme-fivem .cms-showcase-game-card--fivem .cms-showcase-game-checks {
    color: color-mix(in srgb, #c4b5fd 70%, #64748b);
}

.cms-catalog-showcase--theme-fivem .cms-showcase-game-card--fivem .cms-showcase-game-desc {
    color: color-mix(in srgb, #e9d5ff 75%, #64748b);
}

.cms-catalog-showcase--theme-fivem .cms-showcase-game-card--fivem .cms-showcase-game-card__old {
    color: #94a3b8;
}

/* Arma: koyu zemin, turuncu + mavi CTA */
.cms-showcase-game-card--arma {
    --game-accent: #fb923c;
    --game-btn: #2563eb;
    --game-price: #fed7aa;
    --game-border: color-mix(in srgb, #fb923c 42%, #1e3a5f 35%);
    --game-foot-bg: linear-gradient(180deg, #0f0c0a 0%, #0a0806 100%);
    --game-title: #ffedd5;
    --game-card-bg: linear-gradient(148deg, #1c1410 0%, #120e0a 45%, #0a0806 100%);
    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.52),
        0 0 0 1px color-mix(in srgb, #fb923c 32%, #1e3a8a),
        inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}

.cms-catalog-showcase--theme-arma .cms-showcase-game-card--arma .cms-showcase-game-card__headtext h3 {
    color: var(--game-title, #ffedd5);
}

.cms-catalog-showcase--theme-arma .cms-showcase-game-card--arma .cms-showcase-game-card__sku {
    color: color-mix(in srgb, #fdba74 70%, #64748b);
}

.cms-catalog-showcase--theme-arma .cms-showcase-game-card--arma .cms-showcase-game-specs li {
    color: color-mix(in srgb, #fed7aa 78%, #94a3b8);
}

.cms-catalog-showcase--theme-arma .cms-showcase-game-card--arma .cms-showcase-game-checks {
    color: color-mix(in srgb, #fdba74 65%, #78716c);
}

.cms-catalog-showcase--theme-arma .cms-showcase-game-card--arma .cms-showcase-game-desc {
    color: color-mix(in srgb, #fed7aa 72%, #78716c);
}

.cms-catalog-showcase--theme-arma .cms-showcase-game-card--arma .cms-showcase-game-card__old {
    color: #a8a29e;
}

/* CS2 — oyun vitrin kartı (turuncu / koyu panel; karanlık temada) */
.cms-showcase-game-card--cs2 {
    --game-accent: #f97316;
    --game-btn: #ea580c;
    --game-price: #fff7ed;
    --game-border: color-mix(in srgb, #f97316 42%, #334155 35%);
    --game-foot-bg: linear-gradient(180deg, #12100e 0%, #0a0908 100%);
    --game-title: #ffedd5;
    --game-card-bg: linear-gradient(148deg, #1c1814 0%, #141210 45%, #0c0b0a 100%);
    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.52),
        0 0 0 1px color-mix(in srgb, #f97316 28%, #1e293b),
        inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent);
}

.cms-catalog-showcase--theme-cs2 .cms-showcase-game-card--cs2 .cms-showcase-game-card__headtext h3 {
    color: var(--game-title, #ffedd5);
}

.cms-catalog-showcase--theme-cs2 .cms-showcase-game-card--cs2 .cms-showcase-game-card__sku {
    color: color-mix(in srgb, #fdba74 72%, #78716c);
}

.cms-catalog-showcase--theme-cs2 .cms-showcase-game-card--cs2 .cms-showcase-game-specs li {
    color: color-mix(in srgb, #fed7aa 80%, #94a3b8);
}

.cms-catalog-showcase--theme-cs2 .cms-showcase-game-card--cs2 .cms-showcase-game-checks {
    color: color-mix(in srgb, #fdba74 68%, #78716c);
}

.cms-catalog-showcase--theme-cs2 .cms-showcase-game-card--cs2 .cms-showcase-game-desc {
    color: color-mix(in srgb, #fed7aa 75%, #78716c);
}

.cms-catalog-showcase--theme-cs2 .cms-showcase-game-card--cs2 .cms-showcase-game-card__old {
    color: #a8a29e;
}

/* Oyun vitrin kartları — açık tema: açık kart gövdesi + koyu okunur metin */
[data-theme="light"] .cms-showcase-game-card--minecraft,
[data-theme="light"] .cms-showcase-game-card--fivem,
[data-theme="light"] .cms-showcase-game-card--arma,
[data-theme="light"] .cms-showcase-game-card--cs2 {
    --game-card-bg: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--card) 90%, var(--game-accent, var(--primary)) 10%) 100%);
    --game-foot-bg: color-mix(in srgb, var(--card) 96%, var(--game-accent, var(--primary)) 4%);
    --game-title: var(--text);
    box-shadow:
        0 12px 36px rgba(15, 23, 42, 0.09),
        0 0 0 1px color-mix(in srgb, var(--border) 85%, var(--game-accent, var(--primary)) 15%);
}

[data-theme="light"] .cms-catalog-showcase--theme-minecraft .cms-showcase-game-card--minecraft .cms-showcase-game-card__headtext h3,
[data-theme="light"] .cms-catalog-showcase--theme-fivem .cms-showcase-game-card--fivem .cms-showcase-game-card__headtext h3,
[data-theme="light"] .cms-catalog-showcase--theme-arma .cms-showcase-game-card--arma .cms-showcase-game-card__headtext h3,
[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-game-card--cs2 .cms-showcase-game-card__headtext h3 {
    color: var(--text);
}

[data-theme="light"] .cms-catalog-showcase--theme-minecraft .cms-showcase-game-card--minecraft .cms-showcase-game-card__sku,
[data-theme="light"] .cms-catalog-showcase--theme-fivem .cms-showcase-game-card--fivem .cms-showcase-game-card__sku,
[data-theme="light"] .cms-catalog-showcase--theme-arma .cms-showcase-game-card--arma .cms-showcase-game-card__sku,
[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-game-card--cs2 .cms-showcase-game-card__sku {
    color: var(--text-muted);
}

[data-theme="light"] .cms-catalog-showcase--theme-minecraft .cms-showcase-game-card--minecraft .cms-showcase-game-specs li,
[data-theme="light"] .cms-catalog-showcase--theme-fivem .cms-showcase-game-card--fivem .cms-showcase-game-specs li,
[data-theme="light"] .cms-catalog-showcase--theme-arma .cms-showcase-game-card--arma .cms-showcase-game-specs li,
[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-game-card--cs2 .cms-showcase-game-specs li {
    color: var(--text-muted);
}

[data-theme="light"] .cms-catalog-showcase--theme-minecraft .cms-showcase-game-card--minecraft .cms-showcase-game-desc,
[data-theme="light"] .cms-catalog-showcase--theme-minecraft .cms-showcase-game-card--minecraft .cms-showcase-game-desc.muted,
[data-theme="light"] .cms-catalog-showcase--theme-fivem .cms-showcase-game-card--fivem .cms-showcase-game-desc,
[data-theme="light"] .cms-catalog-showcase--theme-fivem .cms-showcase-game-card--fivem .cms-showcase-game-desc.muted,
[data-theme="light"] .cms-catalog-showcase--theme-arma .cms-showcase-game-card--arma .cms-showcase-game-desc,
[data-theme="light"] .cms-catalog-showcase--theme-arma .cms-showcase-game-card--arma .cms-showcase-game-desc.muted,
[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-game-card--cs2 .cms-showcase-game-desc,
[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-game-card--cs2 .cms-showcase-game-desc.muted {
    color: var(--text-muted);
}

[data-theme="light"] .cms-catalog-showcase--theme-minecraft .cms-showcase-game-card--minecraft .cms-showcase-game-checks,
[data-theme="light"] .cms-catalog-showcase--theme-minecraft .cms-showcase-game-card--minecraft .cms-showcase-game-checks.muted,
[data-theme="light"] .cms-catalog-showcase--theme-fivem .cms-showcase-game-card--fivem .cms-showcase-game-checks,
[data-theme="light"] .cms-catalog-showcase--theme-fivem .cms-showcase-game-card--fivem .cms-showcase-game-checks.muted,
[data-theme="light"] .cms-catalog-showcase--theme-arma .cms-showcase-game-card--arma .cms-showcase-game-checks,
[data-theme="light"] .cms-catalog-showcase--theme-arma .cms-showcase-game-card--arma .cms-showcase-game-checks.muted,
[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-game-card--cs2 .cms-showcase-game-checks,
[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-game-card--cs2 .cms-showcase-game-checks.muted {
    color: var(--text-muted);
}

[data-theme="light"] .cms-catalog-showcase--theme-minecraft .cms-showcase-game-card--minecraft .cms-showcase-game-card__sale,
[data-theme="light"] .cms-catalog-showcase--theme-fivem .cms-showcase-game-card--fivem .cms-showcase-game-card__sale,
[data-theme="light"] .cms-catalog-showcase--theme-arma .cms-showcase-game-card--arma .cms-showcase-game-card__sale,
[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-game-card--cs2 .cms-showcase-game-card__sale {
    color: var(--text);
}

[data-theme="light"] .cms-catalog-showcase--theme-minecraft .cms-showcase-game-card--minecraft .cms-showcase-game-card__old,
[data-theme="light"] .cms-catalog-showcase--theme-fivem .cms-showcase-game-card--fivem .cms-showcase-game-card__old,
[data-theme="light"] .cms-catalog-showcase--theme-arma .cms-showcase-game-card--arma .cms-showcase-game-card__old,
[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-game-card--cs2 .cms-showcase-game-card__old {
    color: var(--text-muted);
}

/* Temalı tablo (FiveM / Arma / Minecraft) */
.cms-showcase-table-wrap--themed {
    background: var(--tbl-bg, color-mix(in srgb, var(--card) 96%, var(--primary) 4%));
    border: 1px solid color-mix(in srgb, var(--border) 70%, var(--primary) 15%);
}

.cms-catalog-showcase--theme-fivem .cms-showcase-table-wrap--themed {
    --tbl-bg: linear-gradient(180deg, #1a1430, #0f0b1c);
    border-color: color-mix(in srgb, #a78bfa 32%, #1e1b2e);
}

.cms-catalog-showcase--theme-fivem .cms-showcase-table-wrap--themed .cms-showcase-table {
    color: #e9d5ff;
}

.cms-catalog-showcase--theme-fivem .cms-showcase-table-wrap--themed .cms-showcase-table thead th {
    color: #c4b5fd;
    border-bottom-color: #7c3aed;
}

.cms-catalog-showcase--theme-fivem .cms-showcase-table-wrap--themed .cms-showcase-table th,
.cms-catalog-showcase--theme-fivem .cms-showcase-table-wrap--themed .cms-showcase-table td {
    border-bottom-color: color-mix(in srgb, #334155 85%, #a78bfa 15%);
}

.cms-catalog-showcase--theme-fivem .cms-showcase-table-wrap--themed .btn-primary {
    background: linear-gradient(180deg, #7c3aed, #6d28d9);
    border-color: transparent;
}

.cms-catalog-showcase--theme-arma .cms-showcase-table-wrap--themed {
    --tbl-bg: linear-gradient(180deg, #1c1410, #0f0c0a);
    border-color: color-mix(in srgb, #fb923c 35%, #1e3a5f 25%);
}

.cms-catalog-showcase--theme-arma .cms-showcase-table-wrap--themed .cms-showcase-table {
    color: #fed7aa;
}

.cms-catalog-showcase--theme-arma .cms-showcase-table-wrap--themed .cms-showcase-table thead th {
    color: #fdba74;
    border-bottom-color: #ea580c;
}

.cms-catalog-showcase--theme-arma .cms-showcase-table-wrap--themed .cms-showcase-table th,
.cms-catalog-showcase--theme-arma .cms-showcase-table-wrap--themed .cms-showcase-table td {
    border-bottom-color: color-mix(in srgb, #44403c 80%, #ea580c 20%);
}

.cms-catalog-showcase--theme-arma .cms-showcase-table-wrap--themed .btn-primary {
    background: linear-gradient(180deg, #3b82f6, #2563eb);
    border-color: transparent;
}

.cms-catalog-showcase--theme-minecraft .cms-showcase-table-wrap--themed {
    --tbl-bg: linear-gradient(180deg, #1e293b, #0f172a);
    border-color: color-mix(in srgb, #22d3ee 30%, #334155);
}

.cms-catalog-showcase--theme-minecraft .cms-showcase-table-wrap--themed .cms-showcase-table {
    color: #e2e8f0;
}

.cms-catalog-showcase--theme-minecraft .cms-showcase-table-wrap--themed .cms-showcase-table thead th {
    color: #94a3b8;
    border-bottom-color: #22d3ee;
}

.cms-catalog-showcase--theme-minecraft .cms-showcase-table-wrap--themed .cms-showcase-table th,
.cms-catalog-showcase--theme-minecraft .cms-showcase-table-wrap--themed .cms-showcase-table td {
    border-bottom-color: #334155;
}

.cms-catalog-showcase--theme-minecraft .cms-showcase-table-wrap--themed .btn-primary {
    background: linear-gradient(180deg, #06b6d4, #0891b2);
    border-color: transparent;
}

.cms-showcase-table-pkg {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.cms-showcase-table-pkg__img {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    overflow: hidden;
    background: color-mix(in srgb, var(--primary) 10%, var(--card));
}

.cms-showcase-table-pkg__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cms-catalog-showcase--theme-classic .cms-showcase-table-pkg__img {
    display: none;
}

/* Klasik kart vitrin: tema sınıfı yalnızca ince ayar */
.cms-catalog-showcase--theme-minecraft .cms-showcase-cards .cms-showcase-card {
    background: linear-gradient(135deg, color-mix(in srgb, #22d3ee 18%, transparent), color-mix(in srgb, #a855f7 12%, transparent));
}

.cms-catalog-showcase--theme-fivem .cms-showcase-cards .cms-showcase-card,
.cms-catalog-showcase--theme-arma .cms-showcase-cards .cms-showcase-card {
    background: linear-gradient(135deg, color-mix(in srgb, #6366f1 22%, transparent), color-mix(in srgb, #f97316 10%, transparent));
}

/* —— Vitrin: liste & şerit (kart dışı yerleşimler) —— */
.cms-showcase-list-wrap {
    overflow: hidden;
    border-radius: var(--radius, 14px);
}

.cms-showcase-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cms-showcase-list__item {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}

.cms-showcase-list__item:last-child {
    border-bottom: none;
}

.cms-showcase-list__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.85rem 1.25rem;
    align-items: center;
    padding: 0.95rem 1.1rem;
}

.cms-showcase-list__media {
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary) 10%, var(--card));
}

.cms-showcase-list__media--photo {
    background: transparent;
}

.cms-showcase-list__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cms-showcase-list__media--photo img {
    object-fit: contain;
    padding: 0.1rem;
}

.cms-showcase-list__body {
    min-width: 0;
}

.cms-showcase-list__name {
    display: block;
    font-size: 0.92rem;
    margin: 0 0 0.15rem;
}

.cms-showcase-list__sku {
    font-size: 0.72rem;
    display: block;
    margin-bottom: 0.25rem;
}

.cms-showcase-list__feat-list {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.cms-showcase-list__feat-list li {
    position: relative;
    padding: 0.15rem 0 0.15rem 0.85rem;
    border-left: 2px solid color-mix(in srgb, var(--primary) 45%, var(--border));
}

.cms-showcase-list__feat-list li + li {
    margin-top: 0.12rem;
}

.cms-showcase-list__desc {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre-line;
}

.cms-showcase-list__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
    text-align: right;
}

.cms-showcase-list__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
}

.cms-showcase-list__aside .btn {
    white-space: nowrap;
    min-width: 6rem;
    font-size: 0.78rem;
}

.cms-showcase-list-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    padding: 0.75rem 1.1rem;
    border-top: 1px solid var(--border);
    font-size: 0.78rem;
    align-items: center;
}

.cms-showcase-list-trust__i {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.cms-showcase-list-trust__i::before {
    content: "✓";
    font-weight: 800;
    color: var(--primary);
    font-size: 0.72rem;
}

@media (max-width: 640px) {
    .cms-showcase-list__row {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .cms-showcase-list__media {
        justify-self: start;
    }

    .cms-showcase-list__aside {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        text-align: left;
    }

    .cms-showcase-list__price {
        align-items: flex-start;
    }
}

.cms-showcase-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cms-showcase-stack-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    border-radius: var(--radius, 14px);
    overflow: hidden;
    position: relative;
}

.cms-showcase-stack-row__accent {
    width: 5px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--primary), var(--accent));
}

.cms-showcase-stack-row__main {
    flex: 1 1 14rem;
    display: flex;
    gap: 1rem;
    padding: 1.1rem 1rem;
    min-width: 0;
    align-items: flex-start;
}

.cms-showcase-stack-row__media {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary) 10%, var(--card));
}

.cms-showcase-stack-row__media--photo {
    background: transparent;
}

.cms-showcase-stack-row__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cms-showcase-stack-row__media--photo img {
    object-fit: contain;
    padding: 0.12rem;
}

.cms-showcase-stack-row__title {
    margin: 0 0 0.2rem;
    font-size: 1rem;
    font-weight: 700;
}

.cms-showcase-stack-row__sku {
    font-size: 0.74rem;
    display: block;
    margin-bottom: 0.35rem;
}

.cms-showcase-stack-row__feat-list {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.cms-showcase-stack-row__feat-list li {
    padding: 0.18rem 0 0.18rem 0.9rem;
    border-left: 2px solid color-mix(in srgb, var(--primary) 45%, var(--border));
}

.cms-showcase-stack-row__feat-list li + li {
    margin-top: 0.15rem;
}

.cms-showcase-stack-row__desc {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    white-space: pre-line;
}

.cms-showcase-stack-row__side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.65rem;
    padding: 1.1rem 1.2rem;
    border-left: 1px solid var(--border);
    min-width: 9.5rem;
}

.cms-showcase-stack-row__price {
    text-align: right;
}

.cms-showcase-stack-row__side .btn {
    white-space: nowrap;
    min-width: 6.5rem;
    font-size: 0.8rem;
}

.cms-showcase-stack-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    padding: 0.65rem 0;
    font-size: 0.78rem;
    justify-content: center;
}

.cms-showcase-stack-trust__i::before {
    content: "✓";
    font-weight: 800;
    color: var(--primary);
    margin-right: 0.25rem;
    font-size: 0.72rem;
}

@media (max-width: 720px) {
    .cms-showcase-stack-row__side {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border);
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        min-width: unset;
    }

    .cms-showcase-stack-row__price {
        text-align: left;
    }
}

/* Liste / şerit: tema vurguları */
.cms-showcase-list-wrap--themed {
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
    background: color-mix(in srgb, var(--card) 96%, var(--primary) 4%);
}

.cms-catalog-showcase--theme-cs2 .cms-showcase-list__item {
    border-left: 3px solid #f97316;
}

.cms-catalog-showcase--theme-cs2 .cms-showcase-list-trust__i::before,
.cms-catalog-showcase--theme-cs2 .cms-showcase-stack-trust__i::before {
    color: #f97316;
}

.cms-catalog-showcase--theme-cs2 .cms-showcase-stack-row--themed .cms-showcase-stack-row__accent {
    background: linear-gradient(180deg, #f97316, #ea580c);
}

.cms-catalog-showcase--theme-minimal .cms-showcase-list-wrap--themed {
    background: var(--card);
    border-color: var(--border);
}

.cms-catalog-showcase--theme-minimal .cms-showcase-list__item {
    border-left: 2px solid color-mix(in srgb, var(--border) 70%, var(--text-muted) 30%);
}

.cms-catalog-showcase--theme-minecraft .cms-showcase-list__item {
    border-left: 3px solid #38bdf8;
}

.cms-catalog-showcase--theme-fivem .cms-showcase-list__item {
    border-left: 3px solid #a78bfa;
}

.cms-catalog-showcase--theme-arma .cms-showcase-list__item {
    border-left: 3px solid #fb923c;
}

.cms-catalog-showcase--theme-minecraft .cms-showcase-stack-row--themed .cms-showcase-stack-row__accent {
    background: linear-gradient(180deg, #38bdf8, #0ea5e9);
}

.cms-catalog-showcase--theme-fivem .cms-showcase-stack-row--themed .cms-showcase-stack-row__accent {
    background: linear-gradient(180deg, #a78bfa, #7c3aed);
}

.cms-catalog-showcase--theme-arma .cms-showcase-stack-row--themed .cms-showcase-stack-row__accent {
    background: linear-gradient(180deg, #fb923c, #ea580c);
}

/* Tablo: CS2 & minimal temalar */
.cms-catalog-showcase--theme-cs2 .cms-showcase-table-wrap--themed {
    --tbl-bg: linear-gradient(180deg, #141820, #0a0e14);
    border-color: color-mix(in srgb, #f97316 38%, #1e293b);
}

.cms-catalog-showcase--theme-cs2 .cms-showcase-table-wrap--themed .cms-showcase-table {
    color: #e2e8f0;
}

.cms-catalog-showcase--theme-cs2 .cms-showcase-table-wrap--themed .cms-showcase-table thead th {
    color: #fdba74;
    border-bottom-color: #f97316;
}

.cms-catalog-showcase--theme-cs2 .cms-showcase-table-wrap--themed .cms-showcase-table th,
.cms-catalog-showcase--theme-cs2 .cms-showcase-table-wrap--themed .cms-showcase-table td {
    border-bottom-color: color-mix(in srgb, #334155 80%, #f97316 20%);
}

.cms-catalog-showcase--theme-cs2 .cms-showcase-table-wrap--themed .btn-primary {
    background: linear-gradient(180deg, #f97316, #ea580c);
    border-color: transparent;
}

/* CS2 — klasik kart / fayans (yalnızca oyun kartı dışı düzenler): karanlık temada koyu panel */
[data-theme="dark"] .cms-catalog-showcase--theme-cs2 .cms-showcase-cards .cms-showcase-card {
    background: linear-gradient(135deg, color-mix(in srgb, #f97316 70%, #92400e), color-mix(in srgb, #1e293b 55%, #0f172a));
    padding: 2px;
}

[data-theme="dark"] .cms-catalog-showcase--theme-cs2 .cms-showcase-cards .cms-showcase-card-inner {
    background: linear-gradient(165deg, #1c1917 0%, #141a22 45%, #0c1018 100%);
    color: #e8edf5;
    border: 1px solid color-mix(in srgb, #f97316 28%, #334155 72%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
}

[data-theme="dark"] .cms-catalog-showcase--theme-cs2 .cms-showcase-cards .cms-showcase-card-head h3 {
    color: #fff7ed;
}

[data-theme="dark"] .cms-catalog-showcase--theme-cs2 .cms-showcase-cards .cms-showcase-sku {
    color: #fdba74;
}

[data-theme="dark"] .cms-catalog-showcase--theme-cs2 .cms-showcase-cards .cms-showcase-card-desc,
[data-theme="dark"] .cms-catalog-showcase--theme-cs2 .cms-showcase-cards .cms-showcase-card-desc.muted {
    color: #cbd5e1;
}

[data-theme="dark"] .cms-catalog-showcase--theme-cs2 .cms-showcase-cards .cms-showcase-features {
    color: #cbd5e1;
}

[data-theme="dark"] .cms-catalog-showcase--theme-cs2 .cms-showcase-cards .cms-showcase-features li {
    color: #e2e8f0;
}

[data-theme="dark"] .cms-catalog-showcase--theme-cs2 .cms-showcase-cards .cms-showcase-card-foot {
    border-top-color: color-mix(in srgb, #f97316 22%, #334155 78%);
}

[data-theme="dark"] .cms-catalog-showcase--theme-cs2 .cms-showcase-cards .cms-showcase-old {
    color: #94a3b8;
}

[data-theme="dark"] .cms-catalog-showcase--theme-cs2 .cms-showcase-cards .cms-showcase-sale {
    color: #f8fafc;
}

[data-theme="dark"] .cms-catalog-showcase--theme-cs2 .cms-showcase-tile {
    background: linear-gradient(160deg, #1a1412 0%, #121820 55%, #0d1118 100%);
    color: #e8edf5;
    border-color: color-mix(in srgb, #f97316 35%, #334155);
}

[data-theme="dark"] .cms-catalog-showcase--theme-cs2 .cms-showcase-tile-top h3 {
    color: #fff7ed;
}

[data-theme="dark"] .cms-catalog-showcase--theme-cs2 .cms-showcase-tile-desc,
[data-theme="dark"] .cms-catalog-showcase--theme-cs2 .cms-showcase-tile-desc.muted {
    color: #cbd5e1;
}

/* CS2 — açık tema: klasik kart / fayans site token’ları (beyaz kart, koyu metin) */
[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-cards .cms-showcase-card {
    background: linear-gradient(135deg, color-mix(in srgb, #f97316 55%, #fb923c), color-mix(in srgb, #38bdf8 18%, #f97316));
    padding: 2px;
}

[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-cards .cms-showcase-card-inner {
    background: var(--card);
    color: var(--text);
    border: 1px solid color-mix(in srgb, #f97316 22%, var(--border));
    box-shadow: none;
}

[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-cards .cms-showcase-card-head h3 {
    color: var(--text);
}

[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-cards .cms-showcase-sku {
    color: var(--text-muted);
}

[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-cards .cms-showcase-card-desc,
[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-cards .cms-showcase-card-desc.muted {
    color: var(--text-muted);
}

[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-cards .cms-showcase-features,
[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-cards .cms-showcase-features li {
    color: var(--text-muted);
}

[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-cards .cms-showcase-card-foot {
    border-top-color: var(--border);
}

[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-cards .cms-showcase-old {
    color: var(--text-muted);
}

[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-cards .cms-showcase-sale {
    color: var(--text);
}

[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-tile {
    background: var(--card);
    color: var(--text);
    border-color: color-mix(in srgb, #f97316 28%, var(--border));
}

[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-tile-top h3 {
    color: var(--text);
}

[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-tile-desc,
[data-theme="light"] .cms-catalog-showcase--theme-cs2 .cms-showcase-tile-desc.muted {
    color: var(--text-muted);
}

.cms-catalog-showcase--theme-minimal .cms-showcase-table-wrap--themed {
    --tbl-bg: var(--card);
    border-color: var(--border);
}

.cms-catalog-showcase--theme-minimal .cms-showcase-table-wrap--themed .cms-showcase-table {
    color: var(--text);
}

.cms-catalog-showcase--theme-minimal .cms-showcase-table-wrap--themed .cms-showcase-table thead th {
    color: var(--text-muted);
    border-bottom-color: var(--border);
}

.cms-catalog-showcase--theme-minimal .cms-showcase-table-wrap--themed .cms-showcase-table th,
.cms-catalog-showcase--theme-minimal .cms-showcase-table-wrap--themed .cms-showcase-table td {
    border-bottom-color: var(--border);
}

.cms-catalog-showcase--theme-minimal .cms-showcase-table-pkg__img {
    display: none;
}