/**
 * YON shell — YON / ana sayfa tasarım sistemi
 * Header, üst bar, nav, arama, dropdown, story bar
 */
.yon-shell {
    --ys-bg: var(--h-bg-page);
    --ys-bg-2: var(--h-bg-header);
    --ys-bg-3: var(--h-bg-raised);
    --ys-border: var(--h-border);
    --ys-purple: var(--h-blue);
    --ys-purple-2: var(--h-blue-text);
    --ys-orange: var(--h-orange);
    --ys-green: var(--h-green);
    --ys-text: var(--h-text-bright);
    --ys-muted: var(--h-text-muted);
    color: var(--ys-text);
    background: var(--ys-bg);
    box-shadow: 0 1px 0 rgba(45, 48, 58, 0.45);
}

.yon-shell.is-scrolled {
    background: color-mix(in srgb, var(--h-bg-page) 82%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
        0 1px 0 var(--h-border),
        0 12px 40px -16px rgba(0, 0, 0, 0.55);
}

.yon-shell .yon-site-topbar {
    background: var(--h-bg-page);
    border-bottom: 1px solid var(--h-border);
}

.yon-shell .yon-social {
    color: var(--h-text-muted);
    border-radius: var(--h-radius-sm);
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.yon-shell .yon-social:hover {
    color: var(--h-blue-text);
    background: var(--h-blue-soft);
}

.yon-shell .yon-site-topbar__links {
    color: var(--h-text-muted);
}

.yon-shell .yon-site-topbar__links a:hover {
    color: var(--h-text-bright);
}

.yon-shell .yon-site-topbar__lang {
    color: var(--h-text);
}

.yon-shell .yon-menu-btn,
.yon-shell .yon-logo {
    color: var(--h-text-bright);
}

.yon-shell .yon-logo__text {
    color: var(--h-text-bright);
}

.yon-shell .yon-search input {
    color: var(--h-text) !important;
}

.yon-shell .yon-search input::placeholder {
    color: var(--h-text-muted) !important;
}

.yon-shell .yon-search__icon {
    color: var(--h-text-muted) !important;
}

.yon-shell .yon-search__loader {
    color: var(--h-blue) !important;
}

.yon-shell .yon-search__hint {
    color: var(--h-orange);
    background: var(--h-orange-soft);
    border-color: rgba(255, 179, 0, 0.28);
}

.yon-shell .yon-search__submit:hover {
    filter: brightness(1.07);
}

.yon-shell .yon-search-panel {
    background: var(--h-bg-card) !important;
    border: 1px solid var(--h-border) !important;
    border-radius: var(--h-radius-lg) !important;
    box-shadow: var(--h-shadow-elevated) !important;
}

.yon-shell .yon-site-balance {
    background: var(--h-green-soft);
    border-color: color-mix(in srgb, var(--h-green) 28%, var(--h-border));
    color: var(--h-green);
    border-radius: var(--h-radius-sm);
}

.yon-shell .yon-site-balance__eye {
    border-left-color: color-mix(in srgb, var(--h-green) 22%, var(--h-border));
}

.yon-shell .yon-site-balance__eye:hover {
    background: color-mix(in srgb, var(--h-green) 14%, transparent);
}

.yon-shell .yon-user {
    color: var(--h-text-bright);
}

.yon-shell .yon-user:hover {
    background: var(--h-blue-soft);
}

.yon-shell .yon-user__icon {
    background: var(--h-bg-raised);
    border-color: var(--h-border);
    color: var(--h-text-muted);
}

.yon-shell .yon-user__text strong {
    color: var(--h-text-bright);
}

.yon-shell .yon-user__text small,
.yon-shell .yon-user__chev {
    color: var(--h-text-muted);
}

.yon-shell .yon-cart,
.yon-shell .yon-header-icon {
    color: var(--h-text-muted);
}

.yon-shell .yon-cart:hover,
.yon-shell .yon-header-icon:hover,
.yon-shell .yon-hdrop.is-open > .yon-header-icon,
.yon-shell .yon-hdrop.is-open > .yon-hdrop__trigger.yon-cart {
    color: var(--h-text-bright);
    background: var(--h-blue-soft);
    border-color: rgba(61, 90, 254, 0.28);
}

.yon-shell .yon-site-header__actions .yon-hdrop__trigger.yon-cart,
.yon-shell .yon-site-header__actions .yon-header-icon {
    background: var(--h-bg-raised);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-sm);
}

.yon-shell .yon-site-header__actions .yon-hdrop__trigger.yon-cart:hover,
.yon-shell .yon-site-header__actions .yon-header-icon:hover {
    background: var(--h-blue-soft);
    border-color: rgba(61, 90, 254, 0.28);
    color: var(--h-blue-text);
}

.yon-shell .yon-cart__badge {
    background: var(--h-gradient-green);
    color: var(--h-green-text-on);
}

.yon-shell .yon-auth-trigger {
    background: var(--h-bg-raised);
    border-color: var(--h-border);
    color: var(--h-text);
    border-radius: var(--h-radius-sm);
}

.yon-shell .yon-auth-trigger:hover,
.yon-shell .yon-hdrop--auth.is-open .yon-auth-trigger {
    background: var(--h-blue-soft);
    border-color: rgba(61, 90, 254, 0.28);
    color: var(--h-text-bright);
}

.yon-shell .yon-auth-trigger__icon {
    background: var(--h-bg-card);
}

.yon-shell .yon-auth-trigger__chev {
    color: var(--h-text-muted);
}

.yon-shell .yon-auth-drop__btn {
    background: var(--h-bg-raised);
    border-color: var(--h-border);
    color: var(--h-text);
    border-radius: var(--h-radius-sm);
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease, background 0.15s, border-color 0.15s, color 0.15s;
}

.yon-shell .yon-auth-drop__btn:hover {
    background: var(--h-blue-soft);
    border-color: rgba(61, 90, 254, 0.28);
    color: var(--h-blue-text);
}

.yon-shell .yon-auth-drop__btn--login {
    background: linear-gradient(135deg, var(--h-blue) 0%, var(--h-blue-dark) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--h-shadow-blue);
}

.yon-shell .yon-auth-drop__btn--login:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(61, 90, 254, 0.35);
    color: #fff;
    background: linear-gradient(135deg, var(--h-blue) 0%, var(--h-blue-dark) 100%);
    border-color: transparent;
}

.yon-shell .yon-auth-drop__btn--register {
    background: var(--h-gradient-green);
    border-color: transparent;
    color: var(--h-green-text-on);
    box-shadow: var(--h-shadow-green);
}

.yon-shell .yon-auth-drop__btn--register:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px var(--h-green-glow);
    color: var(--h-green-text-on);
    background: var(--h-gradient-green);
    border-color: transparent;
}

.yon-shell .yon-auth-drop__btn--accent {
    background: var(--h-orange-soft);
    border-color: rgba(255, 179, 0, 0.35);
    color: var(--h-orange);
}

.yon-shell .yon-auth-drop__btn--accent:hover {
    background: rgba(255, 179, 0, 0.2);
    border-color: rgba(255, 179, 0, 0.5);
    color: var(--h-text-bright);
}

.yon-shell .yon-cart-drop__alert {
    background: var(--h-blue-soft);
    border-color: rgba(61, 90, 254, 0.28);
    color: var(--h-blue-text);
}

.yon-shell .yon-cart-drop__empty,
.yon-shell .yon-cart-drop__item-meta,
.yon-shell .yon-cart-drop__total {
    color: var(--h-text-muted);
}

.yon-shell .yon-cart-drop__item-name {
    color: var(--h-text);
}

.yon-shell .yon-cart-drop__total strong {
    color: var(--h-text-bright);
}

.yon-shell .yon-cart-drop__item-link:hover {
    background: var(--h-blue-soft);
}

.yon-shell .yon-cart-drop__cta {
    background: var(--h-gradient-green);
    color: var(--h-green-text-on);
    border-radius: var(--h-radius-sm);
    box-shadow: var(--h-shadow-green);
}

.yon-shell .yon-site-nav__game {
    background: var(--h-bg-raised);
    border-color: var(--h-border);
    color: var(--h-text-muted);
}

.yon-shell .yon-site-nav__game:hover {
    color: var(--h-text-bright);
    border-color: rgba(61, 90, 254, 0.35);
    background: var(--h-blue-soft);
}

.yon-shell .yon-site-nav__cta:hover {
    box-shadow: 0 8px 18px -8px var(--h-green-glow);
}

.yon-shell .yon-site-nav__cta.is-active {
    box-shadow:
        0 0 0 2px var(--h-green-glow),
        0 6px 16px -8px var(--h-green-glow);
}

.yon-shell .yon-merch {
    background: var(--h-gradient-green);
    color: var(--h-green-text-on) !important;
    border-radius: var(--h-radius-sm);
    box-shadow: var(--h-shadow-green);
}

.yon-shell .yon-ad-shop-cta {
    background: linear-gradient(135deg, var(--h-blue) 0%, var(--h-blue-dark) 100%) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: var(--h-shadow-blue) !important;
    border-radius: 10px !important;
}

.yon-shell .yon-ad-shop-cta:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px var(--h-blue-glow) !important;
    color: #fff !important;
}

.yon-shell .yon-ad-shop-cta i {
    color: inherit !important;
}

.yon-shell .yon-theme {
    background: var(--h-bg-raised);
    border-color: var(--h-border);
    color: var(--h-text-muted);
    border-radius: var(--h-radius-sm);
}

.yon-shell .yon-theme:hover {
    color: var(--h-orange);
    border-color: rgba(255, 179, 0, 0.35);
    background: var(--h-orange-soft);
}

.yon-shell .yon-site-stories {
    background: var(--h-bg-page);
    border-bottom: 1px solid var(--h-border);
}

.yon-shell--has-stories .yon-shell .yon-site-stories,
.yon-shell.yon-shell--has-stories .yon-site-stories {
    background: var(--h-bg-page);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.yon-shell .yon-site-stories__nav {
    background: var(--h-bg-raised);
    border-color: var(--h-border);
    color: var(--h-text-muted);
}

.yon-shell .yon-site-stories__nav:hover {
    background: var(--h-blue-soft);
    border-color: rgba(61, 90, 254, 0.35);
    color: var(--h-text-bright);
}

.yon-shell .yon-site-story__ring {
    background: linear-gradient(135deg, var(--h-green) 0%, var(--h-blue) 60%, var(--h-blue-dark) 100%);
    box-shadow: 0 0 0 1px var(--h-border);
}

.yon-shell .yon-site-story__ring--violet {
    background: linear-gradient(135deg, var(--h-blue), var(--h-blue-dark));
}

.yon-shell .yon-site-story__avatar {
    background: var(--h-bg-raised);
    border-color: var(--h-bg-page);
}

.yon-shell .yon-site-story__label {
    color: var(--h-text-muted);
}

.yon-shell .yon-site-story:hover .yon-site-story__label {
    color: var(--h-text);
}

.yon-drawer {
    background: var(--h-bg-header);
}

.yon-drawer__head {
    background: var(--h-bg-page);
}

[data-theme="dark"] .yon-body {
    background: var(--h-bg-page) !important;
}

[data-theme="light"] .yon-shell {
    box-shadow: 0 1px 0 var(--h-border);
}

[data-theme="light"] .yon-shell.is-scrolled {
    background: color-mix(in srgb, var(--h-bg-header) 92%, transparent);
}

.yon-shell.yon-shell--yon,
.yon-shell.yon-shell--yon.is-scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

.yon-shell.yon-shell--yon .yon-drawer,
.yon-shell.yon-shell--yon .yon-mobile-menu {
    background: var(--h-bg-header);
    border-color: var(--h-border);
}

/* v4 mobile drawer glass (deploy-marker: yon-shell-v4) */
.yon-shell.yon-shell--yon .yon-mobile-menu__link,
.yon-shell.yon-shell--yon .yon-drawer__link {
    border-radius: 10px;
    min-height: 44px;
}

.yon-shell.yon-shell--yon .yon-mobile-menu__link:hover,
.yon-shell.yon-shell--yon .yon-drawer__link:hover {
    background: color-mix(in srgb, var(--h-blue) 10%, var(--h-bg-raised));
    color: var(--h-text-bright);
}

/* =================================================================
   v4 KAPSAMLI — mobile drawer glass (yon-shell-extras)
   yon-shell-v4-comprehensive
   deploy-marker: yon-shell-v4-kapsamli
   ================================================================= */

.yon-shell.yon-shell--yon .yon-mobile-menu,
.yon-shell.yon-shell--yon .yon-drawer {
    background: color-mix(in srgb, var(--h-bg-header) 86%, transparent) !important;
    backdrop-filter: blur(24px) saturate(175%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(175%) !important;
    border: 1px solid color-mix(in srgb, var(--h-blue) 24%, var(--h-border)) !important;
    box-shadow:
        0 28px 72px rgba(0, 0, 0, 0.52),
        inset 0 1px 0 color-mix(in srgb, var(--h-text-bright) 8%, transparent) !important;
}

.yon-shell.yon-shell--yon .yon-mobile-menu__head,
.yon-shell.yon-shell--yon .yon-drawer__head {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--h-bg-page) 78%, transparent) 0%,
        color-mix(in srgb, var(--h-bg-header) 65%, transparent) 100%
    ) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--h-blue) 20%, var(--h-border)) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
}

.yon-shell.yon-shell--yon .yon-mobile-menu__body,
.yon-shell.yon-shell--yon .yon-drawer__body {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

.yon-shell.yon-shell--yon .yon-mobile-menu__link,
.yon-shell.yon-shell--yon .yon-drawer__link {
    min-height: 48px !important;
    border-radius: 12px !important;
    padding-inline: 14px !important;
    font-weight: 600 !important;
    border: 1px solid transparent !important;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease !important;
}

.yon-shell.yon-shell--yon .yon-mobile-menu__link:hover,
.yon-shell.yon-shell--yon .yon-drawer__link:hover,
.yon-shell.yon-shell--yon .yon-mobile-menu__link.is-active,
.yon-shell.yon-shell--yon .yon-drawer__link.is-active {
    background: color-mix(in srgb, var(--h-blue) 12%, var(--h-bg-raised)) !important;
    border-color: color-mix(in srgb, var(--h-blue) 28%, var(--h-border)) !important;
    color: var(--h-text-bright) !important;
}

.yon-shell.yon-shell--yon .yon-mobile-menu__close,
.yon-shell.yon-shell--yon .yon-drawer__close {
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    border: 1px solid color-mix(in srgb, var(--h-blue) 24%, var(--h-border)) !important;
    background: color-mix(in srgb, var(--h-bg-card) 72%, transparent) !important;
}

.yon-shell.yon-shell--yon .yon-mobile-menu__cta,
.yon-shell.yon-shell--yon .yon-drawer__cta {
    min-height: 48px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--h-blue) 0%, var(--h-blue-dark) 100%) !important;
    font-weight: 800 !important;
    box-shadow: var(--h-shadow-blue) !important;
}

@media (hover: none) {
    .yon-shell.yon-shell--yon .yon-mobile-menu__link,
    .yon-shell.yon-shell--yon .yon-drawer__link,
    .yon-shell.yon-shell--yon .yon-mobile-menu__close,
    .yon-shell.yon-shell--yon .yon-drawer__close,
    .yon-shell.yon-shell--yon .yon-mobile-menu__cta,
    .yon-shell.yon-shell--yon .yon-drawer__cta {
        min-height: 44px !important;
    }
}

/* =================================================================
   yon-shell v6 — temel shell kurumsal cila (yon-shell + yon-shell--yon)
   deploy-marker: yon-shell-extras-v6
   ================================================================= */

.yon-shell {
    font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.01em;
}

.yon-shell .yon-shell__core {
    transition: background 0.22s ease, box-shadow 0.22s ease, backdrop-filter 0.22s ease;
}

.yon-shell.is-scrolled .yon-shell__core,
.yon-shell .yon-shell__core.is-scrolled {
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 color-mix(in srgb, var(--h-text-bright) 5%, transparent);
}

.yon-shell .yon-site-topbar {
    background: color-mix(in srgb, var(--h-bg-page) 92%, var(--h-bg-header));
    border-bottom: 1px solid var(--h-border-soft);
}

.yon-shell .yon-site-header {
    background: transparent;
    border-bottom: 1px solid var(--h-border-soft);
}

.yon-shell .yon-search {
    border-radius: var(--h-radius-lg) !important;
    border: 1px solid var(--h-border-soft) !important;
    background: var(--h-bg-raised) !important;
    transition: border-color 0.14s ease, box-shadow 0.14s ease !important;
}

.yon-shell .yon-search:focus-within {
    border-color: var(--h-blue) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--h-blue) 20%, transparent) !important;
}

.yon-shell .yon-site-nav {
    background: color-mix(in srgb, var(--h-bg-header) 94%, var(--h-bg-page));
    border-bottom: 1px solid var(--h-border-soft);
}

.yon-shell .yon-site-nav__link {
    font-weight: 600;
    border-radius: var(--h-radius-sm);
    transition: background 0.14s ease, color 0.14s ease;
}

.yon-shell .yon-site-nav__link:hover {
    background: var(--h-blue-soft);
    color: var(--h-text-bright);
}

.yon-shell .yon-site-nav__link.is-active {
    color: var(--h-text-bright);
    background: color-mix(in srgb, var(--h-orange) 10%, transparent);
}

.yon-shell .yon-site-balance {
    border-radius: var(--h-radius-lg);
    font-weight: 700;
}

.yon-shell .yon-site-balance__amount {
    color: var(--h-green);
    font-weight: 800;
}

.yon-shell .yon-cart-drop,
.yon-shell .yon-auth-drop {
    border-radius: var(--h-radius) !important;
    border: 1px solid var(--h-border-soft) !important;
    box-shadow: var(--h-shadow-elevated) !important;
    overflow: hidden;
}

.yon-shell .yon-cart-drop__cta {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.yon-shell.yon-shell--yon .yon-cart-drop,
.yon-shell.yon-shell--yon .yon-auth-drop {
    border: 1px solid color-mix(in srgb, var(--h-blue) 22%, var(--h-border)) !important;
    background: color-mix(in srgb, var(--h-bg-card) 88%, transparent) !important;
    backdrop-filter: blur(18px) saturate(168%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(168%) !important;
    box-shadow:
        0 20px 56px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 color-mix(in srgb, var(--h-text-bright) 6%, transparent) !important;
}

.yon-shell.yon-shell--yon .yon-cart-drop__cta {
    background: var(--h-gradient-green) !important;
    color: var(--h-green-text-on) !important;
    box-shadow: var(--h-shadow-green) !important;
    border-radius: var(--h-radius-sm) !important;
    font-weight: 800 !important;
}