/* ============================================
   REDESIGN - Modern Dark Gaming Marketplace
   ============================================ */

/* === GLOBAL OVERRIDES === */
body {
    background: #0b0f14 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
    font-family: inherit;
}

/* === WIDER CONTAINER === */
.container {
    max-width: 1320px !important;
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px !important;
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1400px !important;
    }
}

/* === TOP UTILITY BAR === */
.top-utility-bar {
    background: #141414;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 0;
    font-size: 13px;
    position: relative;
    z-index: 1001;
}

.topbar-link-pill,
.topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    background: none;
    opacity: 0.8;
}

.topbar-link-pill:hover,
.topbar-link:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.05);
    color: #fff !important;
    transform: translateY(-1px);
}

.topbar-link-pill i,
.topbar-link i {
    font-size: 16px;
    color: #8b5cf6;
}

/* === MAIN HEADER === */
header.redesigned-header {
    background: #1a1a1a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 16px 0 !important;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.header-main-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
}

/* LOGO AREA */
.header-logo-area {
    display: flex;
    align-items: center;
    gap: 0;
}

.header-logo {
    flex-shrink: 0;
}

.header-logo a {
    display: flex;
    align-items: center;
    height: 84px;
    transition: all 0.3s ease;
}

.header-logo a:hover {
    transform: scale(1.05);
}

.header-logo img {
    height: 100%;
    width: auto;
    max-height: 84px;
}

/* SEARCH BAR */
.header-search-wrap {
    flex: 1;
    position: relative;
}

.header-search-wrap .input-group {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    height: 55px;
    backdrop-filter: blur(10px);
}

.header-search-wrap .input-group:focus-within {
    border-color: #7c3aed;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1);
    transform: translateY(-2px);
}

.header-search-wrap .form-control {
    background: transparent !important;
    border: none;
    color: #fff;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 400;
    height: 55px;
}

.header-search-wrap .form-control::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
}

.header-search-btn {
    background: transparent !important;
    color: #a3a3a3 !important;
    border: none !important;
    padding: 0 20px !important;
    font-size: 18px !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-search-btn:hover {
    color: #fff !important;
}

/* ACTION BUTTONS */
.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.header-actions .btn-action-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
    position: relative;
    text-decoration: none !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-actions .btn-action-icon:hover {
    background: rgba(124, 58, 237, 0.1);
    border-color: #7c3aed;
    color: #7c3aed !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.2);
}

.header-actions .btn-action-icon:hover i {
    transform: scale(1.15);
}

.header-actions .btn-action-icon .badge-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #dc3545, #b02a37);
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    padding: 0 4px;
    border: 2px solid #1a1a1a;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
    animation: badgePulse 2s infinite;
}

.header-actions .btn-action-icon .badge-count.badge-cart {
    background: linear-gradient(135deg, #198754, #146c43);
    box-shadow: 0 2px 8px rgba(25, 135, 84, 0.3);
}

.header-actions .btn-action-icon .badge-count.badge-notify {
    background: linear-gradient(135deg, #dc3545, #b02a37);
}

@keyframes badgePulse {
    0% {
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
    }

    50% {
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.5);
    }

    100% {
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
    }
}

/* AUTH BUTTONS */
.btn-header-login {
    background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 5px 20px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    height: 55px;
    transition: all 0.3s ease !important;
    white-space: nowrap;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.btn-header-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.3) !important;
}

.btn-header-login i {
    font-size: 20px;
}

.btn-header-register {
    background: linear-gradient(135deg, #198754, #146c43) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 5px 20px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    height: 55px;
    transition: all 0.3s ease !important;
    white-space: nowrap;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.btn-header-register:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(25, 135, 84, 0.3) !important;
}

.btn-header-register i {
    font-size: 20px;
}

/* === CATEGORY BAR === */
.category-bar {
    background: #1e1e1e;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 4px 0;
    position: relative;
    z-index: 989;
}

.category-bar-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    overflow: visible;
    flex-wrap: nowrap;
}

.category-divider {
    display: none;
}

.category-item {
    height: 50px;
    padding: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f2f2f2;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none !important;
    transition: 0.2s;
    white-space: nowrap;
    position: relative;
}

button.category-item {
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
}

.category-item-wrap {
    position: relative;
    flex-shrink: 0;
}

/* Category Icon Area */
.cat-icon-glow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    width: 34px;
    min-width: 34px;
    border-radius: 6px;
    padding: 6px;
    background-color: rgba(139, 92, 246, 0.15);
    flex-shrink: 0;
}

.cat-icon-glow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cat-icon-glow i {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
}

.category-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: rgba(139, 92, 246, 0.1);
    color: rgba(255, 255, 255, 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

.category-item .cat-arrow {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-left: 2px;
    transition: all 0.2s;
}

.category-item:hover {
    opacity: 0.7;
}

.category-item:hover .cat-arrow {
    color: rgba(255, 255, 255, 0.6);
}

/* Per-game icon colors */
.cat-glow-valorant {
    background-color: rgba(255, 70, 85, 0.2);
}

.cat-glow-pubg-mobile {
    background-color: rgba(242, 169, 0, 0.2);
}

.cat-glow-league-of-legends {
    background-color: rgba(200, 155, 60, 0.2);
}

.cat-glow-mobile-legends {
    background-color: rgba(91, 142, 245, 0.2);
}

/* Kategoriler butonu */
.category-item.category-all {
    background: transparent;
    color: #f2f2f2 !important;
    font-weight: 500;
    padding: 4px;
    margin: 0;
    border-radius: 0;
    gap: 2px;
    font-size: 15px;
    box-shadow: none;
    transition: 0.2s;
    height: 50px;
}

.category-item.category-all i:first-child {
    color: #f2f2f2;
    font-size: 24px;
    margin-right: 2px;
}

.category-item.category-all .cat-arrow {
    color: rgba(255, 255, 255, 0.5);
}

.category-item.category-all:hover {
    background: transparent;
    box-shadow: none;
    transform: none;
    opacity: 0.7;
}

.category-submenu {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    min-width: 240px;
    background: #181818;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: none;
    z-index: 30;
}

.category-item-wrap:hover>.category-submenu {
    display: block;
}

.category-item-wrap.is-open>.category-submenu {
    display: block;
}

.category-submenu-link,
.category-submenu-title {
    display: flex;
    align-items: center;
    width: 100%;
    text-decoration: none !important;
    border-radius: 10px;
}

.category-submenu-link {
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 500;
}

.category-submenu-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.category-submenu-all {
    min-width: 720px;
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
}

.category-item-wrap-all:hover>.category-submenu-all {
    display: grid;
}

.category-submenu-group {
    min-width: 0;
}

.category-submenu-title {
    padding: 10px 12px 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.category-submenu-title:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

/* === SITE MAIN === */
.site-main {
    padding: 0;
}

/* === HERO SECTION === */
.hero-section {
    padding: 24px 0 0;
}

.hero-banner-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    transition: all 0.4s ease;
    cursor: pointer;
}

.hero-banner-wrapper:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.hero-banner-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    min-height: 300px;
    max-height: 480px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.hero-banner-wrapper:hover img {
    transform: scale(1.02);
}

.hero-banner-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
    z-index: 3;
}

.hero-banner-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
}

.hero-badge {
    background: linear-gradient(135deg, #dc3545, #b02a37);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.35);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    animation: heroBadgePulse 2.5s infinite;
}

@keyframes heroBadgePulse {

    0%,
    100% {
        box-shadow: 0 4px 16px rgba(220, 53, 69, 0.35);
    }

    50% {
        box-shadow: 0 4px 20px rgba(220, 53, 69, 0.6);
    }
}

/* === SOCIAL CAMPAIGN BANNER === */
.social-campaign-section {
    padding: 24px 0 0;
}

.social-campaign-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 24px;
    background: linear-gradient(135deg, #1e2530, #161c25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    flex-wrap: wrap;
}

.social-campaign-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.social-campaign-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(253, 29, 29, 0.25);
}

.social-campaign-text {
    min-width: 0;
    flex: 1;
}

.social-campaign-title {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
}

.social-campaign-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.social-campaign-handle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    font-weight: 500;
}

.social-campaign-handle i {
    color: #e1306c;
    font-size: 15px;
}

.social-campaign-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    color: #fff !important;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
    white-space: nowrap;
}

.social-campaign-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
    color: #fff !important;
}

@media (max-width: 768px) {
    .social-campaign-banner {
        padding: 14px 16px;
        gap: 14px;
    }

    .social-campaign-title {
        font-size: 13px;
    }

    .social-campaign-handle {
        display: none;
    }

    .social-campaign-icon {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }
}

/* === QUICK CATEGORIES === */
.quick-categories-section {
    padding: 24px 0 0;
}

.quick-categories {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.quick-cat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: linear-gradient(135deg, #1e2530, #161c25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.quick-cat-item:hover {
    background: linear-gradient(135deg, #232b38, #1a2130);
    border-color: rgba(124, 58, 237, 0.3);
    color: #fff !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.15);
}

.quick-cat-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.quick-cat-item:hover .quick-cat-icon {
    transform: scale(1.1);
}

.quick-cat-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
}

.quick-cat-icon i {
    font-size: 20px;
    color: #a855f7;
}

.quick-cat-all {
    border-color: rgba(124, 58, 237, 0.35);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(124, 58, 237, 0.08));
}

.quick-cat-all:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(124, 58, 237, 0.14));
    border-color: rgba(168, 85, 247, 0.55);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
}

/* === SECTION BLOCKS === */
.section-block {
    padding: 32px 0 0;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.section-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.section-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.2), rgba(220, 53, 69, 0.1));
    border: 1px solid rgba(220, 53, 69, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #dc3545;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.15);
}

.section-icon-blue {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(124, 58, 237, 0.1));
    border-color: rgba(124, 58, 237, 0.2);
    color: #7c3aed;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
}

.section-icon-green {
    background: linear-gradient(135deg, rgba(25, 135, 84, 0.2), rgba(25, 135, 84, 0.1));
    border-color: rgba(25, 135, 84, 0.2);
    color: #198754;
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.15);
}

.section-icon-purple {
    background: linear-gradient(135deg, rgba(148, 87, 235, 0.2), rgba(148, 87, 235, 0.1));
    border-color: rgba(148, 87, 235, 0.2);
    color: #9457eb;
    box-shadow: 0 4px 12px rgba(148, 87, 235, 0.15);
}

.section-header h2 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.3px;
}

.section-view-all {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.25s ease;
    padding: 9px 18px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.section-view-all:hover {
    background: rgba(124, 58, 237, 0.1);
    border-color: #7c3aed;
    color: #fff !important;
    transform: translateX(2px);
}

.section-subtitle {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    margin: -12px 0 20px;
    line-height: 1.6;
}

/* === PRODUCT CARDS === */
.product-card {
    display: block;
    background: linear-gradient(180deg, #1e2530 0%, #161c25 100%);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;
    height: 100%;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(124, 58, 237, 0.15);
}

.product-card-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 2/3;
    background:
        radial-gradient(circle at top, rgba(124, 58, 237, 0.26), transparent 48%),
        linear-gradient(180deg, #151126 0%, #0c0a16 100%);
}

.product-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    transition: transform 0.5s ease;
}

.curated-category-block-pubg-mobile-uc-id-yukleme-tr .product-card-img img,
.curated-category-block-mobile-legends .product-card-img img {
    object-position: center top;
}

.product-card:hover .product-card-img img {
    transform: scale(1.08);
}

.product-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    z-index: 2;
    pointer-events: none;
}

.product-badges-left,
.product-badges-right {
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: auto;
}

.product-badges-right {
    align-items: flex-end;
}

.pbadge {
    font-size: 10.5px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 8px;
    color: #fff;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pbadge-sale {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 2px 10px rgba(34, 197, 94, 0.35);
}

.pbadge-special {
    background: linear-gradient(135deg, #dc3545, #b02a37);
    box-shadow: 0 2px 10px rgba(220, 53, 69, 0.35);
}

.pbadge-featured {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 2px 10px rgba(34, 197, 94, 0.35);
}

.pbadge-new {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.35);
}

.pbadge-hot {
    background: linear-gradient(135deg, #f97316, #ea580c);
    box-shadow: 0 2px 10px rgba(249, 115, 22, 0.35);
}

.product-card-hover {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.product-card:hover .product-card-hover {
    opacity: 1;
}

.hover-btn {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    color: #fff;
    padding: 11px 26px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    transform: translateY(10px);
    transition: transform 0.3s;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35);
    display: inline-flex;
    align-items: center;
}

.product-card:hover .hover-btn {
    transform: translateY(0);
}

.product-card-body {
    padding: 16px;
}

.curated-category-block {
    padding-top: 28px;
}

.curated-category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 14px 18px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(30, 37, 48, 0.96) 0%, rgba(22, 28, 37, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.curated-category-title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.curated-category-title-wrap h2 {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.02em;
}

.curated-category-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.curated-category-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
}

.curated-category-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 108px;
    padding: 10px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(124, 58, 237, 0.08));
    border: 1px solid rgba(124, 58, 237, 0.25);
    color: #c4b5fd !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.25s ease;
}

.curated-category-view:hover {
    color: #fff !important;
    transform: translateX(2px);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(124, 58, 237, 0.16));
    border-color: rgba(124, 58, 237, 0.42);
}

.product-card-cat {
    color: rgba(124, 58, 237, 0.9);
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.product-card-title {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    min-height: 39px;
}

.product-card-price {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-card-buy {
    width: 100%;
    min-height: 40px;
    margin-top: 14px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #07120b;
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 10px 20px rgba(34, 197, 94, 0.24);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    cursor: pointer;
}

.product-card-buy:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 14px 28px rgba(34, 197, 94, 0.32);
}

.product-card-buy i {
    font-size: 14px;
}

.price-current {
    color: #22c55e;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.payment-hub {
    --payment-accent: #ff2d70;
    --payment-accent-soft: rgba(255, 45, 112, 0.18);
    --payment-accent-2: #37b8ff;
    --payment-accent-3: #2ad28b;
    --payment-panel: #131c28;
    --payment-panel-2: #182433;
    --payment-border: rgba(255, 255, 255, 0.08);
    --payment-muted: rgba(220, 232, 248, 0.72);
    padding: 34px 0 72px;
}

.payment-shell .container {
    max-width: 1220px;
}

.payment-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.9fr);
    gap: 22px;
    margin-bottom: 24px;
    padding: 30px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(55, 184, 255, 0.14), transparent 30%),
        radial-gradient(circle at bottom left, rgba(255, 45, 112, 0.18), transparent 32%),
        linear-gradient(180deg, rgba(22, 30, 42, 0.98), rgba(14, 21, 31, 0.98));
    border: 1px solid var(--payment-border);
    box-shadow: 0 28px 52px rgba(0, 0, 0, 0.28);
}

.payment-eyebrow,
.payment-panel-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #9bd9ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.payment-hero-copy h1 {
    margin: 16px 0 12px;
    color: #fff;
    font-size: clamp(30px, 3vw, 44px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.04em;
    max-width: 11ch;
}

.payment-hero-copy p,
.payment-panel-head p {
    margin: 0;
    color: var(--payment-muted);
    font-size: 15px;
    line-height: 1.8;
}

.payment-hero-stats {
    display: grid;
    gap: 14px;
}

.payment-hero-stat {
    padding: 18px 18px 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.025));
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.payment-hero-stat strong,
.payment-panel-head h2 {
    display: block;
    color: #fff;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: -0.03em;
}

.payment-hero-stat span {
    display: block;
    color: rgba(228, 236, 246, 0.78);
    font-size: 14px;
    line-height: 1.65;
}

.payment-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.payment-rail,
.payment-panel {
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(22, 30, 42, 0.98), rgba(14, 20, 28, 0.98));
    border: 1px solid var(--payment-border);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22);
}

.payment-rail {
    padding: 18px;
    display: grid;
    gap: 12px;
    position: sticky;
    top: 22px;
}

.payment-tab-button {
    width: 100%;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.03);
    color: #dbe8fb;
    text-align: left;
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.payment-tab-button:hover,
.payment-tab-button.is-active {
    transform: translateY(-2px);
    border-color: rgba(255, 45, 112, 0.35);
    background: linear-gradient(180deg, rgba(255, 45, 112, 0.12), rgba(55, 184, 255, 0.08));
    box-shadow: 0 18px 28px rgba(0, 0, 0, 0.18);
}

.payment-tab-step {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 45, 112, 0.22), rgba(55, 184, 255, 0.22));
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.payment-tab-copy strong,
.payment-inline-copy strong {
    display: block;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.payment-tab-copy small,
.payment-inline-copy span {
    display: block;
    color: rgba(220, 232, 248, 0.7);
    font-size: 13px;
    line-height: 1.6;
}

.payment-panel {
    display: none;
    padding: 28px;
}

.payment-panel.is-active {
    display: block;
}

.payment-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.payment-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.payment-form-grid-online {
    grid-template-columns: minmax(0, 1fr);
}

.payment-field {
    display: grid;
    gap: 9px;
}

.payment-field-full {
    grid-column: 1 / -1;
}

.payment-field span {
    color: rgba(226, 236, 248, 0.92);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.payment-input,
.payment-select {
    width: 100%;
    min-height: 58px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.03));
    color: #fff;
    font-size: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.payment-input:focus,
.payment-select:focus {
    border-color: rgba(55, 184, 255, 0.35);
    box-shadow: 0 0 0 4px rgba(55, 184, 255, 0.08);
    transform: translateY(-1px);
    outline: none;
}

.payment-select option {
    color: #10171f;
}

.payment-submit,
.payment-link-btn,
.bank-copy-btn {
    border: 0;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
}

.payment-submit {
    grid-column: 1 / -1;
    min-height: 58px;
    margin-top: 10px;
    background: linear-gradient(135deg, var(--payment-accent), #ff5a53);
    color: #fff;
    box-shadow: 0 16px 32px rgba(255, 45, 112, 0.24);
}

.payment-submit:hover,
.payment-link-btn:hover,
.bank-copy-btn:hover {
    transform: translateY(-2px);
}

.bank-account-grid,
.payment-provider-grid {
    display: grid;
    gap: 16px;
}

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

.bank-account-card {
    padding: 20px;
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(55, 184, 255, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(28, 39, 56, 0.96), rgba(19, 27, 39, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.bank-account-head {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin-bottom: 16px;
}

.bank-account-badge {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 45, 112, 0.24), rgba(55, 184, 255, 0.26));
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.bank-account-copy strong,
.bank-meta-item strong {
    display: block;
    color: #fff;
}

.bank-account-copy span,
.bank-meta-item span {
    display: block;
    color: rgba(222, 232, 244, 0.7);
    font-size: 13px;
}

.bank-copy-btn {
    min-height: 44px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    white-space: nowrap;
}

.bank-account-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.bank-meta-item {
    padding: 13px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.bank-meta-item strong {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.55;
    word-break: break-word;
}

.bank-meta-item-full {
    grid-column: 1 / -1;
}

.payment-inline-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding: 18px 20px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.payment-link-btn {
    min-height: 48px;
    padding: 0 18px;
    background: rgba(55, 184, 255, 0.12);
    border: 1px solid rgba(55, 184, 255, 0.22);
    color: #8cd6ff !important;
    text-decoration: none !important;
}

.payment-provider-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px;
}

.payment-provider-card {
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    text-align: left;
    color: #fff;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.payment-provider-card:hover,
.payment-provider-card.is-active {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 28px rgba(0, 0, 0, 0.2);
}

.payment-provider-card-pink.is-active {
    border-color: rgba(255, 45, 112, 0.32);
    background: linear-gradient(180deg, rgba(255, 45, 112, 0.14), rgba(255, 45, 112, 0.05));
}

.payment-provider-card-blue.is-active {
    border-color: rgba(55, 184, 255, 0.34);
    background: linear-gradient(180deg, rgba(55, 184, 255, 0.14), rgba(55, 184, 255, 0.05));
}

.payment-provider-card-green.is-active {
    border-color: rgba(42, 210, 139, 0.34);
    background: linear-gradient(180deg, rgba(42, 210, 139, 0.14), rgba(42, 210, 139, 0.05));
}

.payment-provider-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: rgba(221, 233, 247, 0.66);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.payment-provider-card strong {
    display: block;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.payment-provider-card small {
    display: block;
    color: rgba(224, 234, 246, 0.74);
    font-size: 13px;
    line-height: 1.65;
}

.payment-provider-note {
    display: none;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(55, 184, 255, 0.08);
    border: 1px solid rgba(55, 184, 255, 0.14);
    color: #abdfff;
    font-size: 13px;
    line-height: 1.6;
}

.payment-provider-note.is-visible {
    display: flex;
}

.payment-provider-note i {
    font-size: 16px;
}

.payment-input-amount {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.payment-embed-shell {
    padding: 20px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.payment-embed-head {
    margin-bottom: 14px;
}

.payment-embed-head strong {
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 6px;
}

.payment-embed-head span {
    color: rgba(220, 232, 248, 0.72);
    font-size: 14px;
}

.payment-paytr-frame {
    width: 100%;
    min-height: 620px;
    border-radius: 18px;
    background: #fff;
}

.payment-empty-state {
    min-height: 220px;
    padding: 32px;
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    color: rgba(224, 234, 246, 0.74);
}

.payment-empty-state i {
    font-size: 28px;
    color: #9bd9ff;
}

@media (max-width: 1199px) {
    .payment-layout {
        grid-template-columns: 1fr;
    }

    .payment-rail {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .payment-hub {
        padding-top: 24px;
    }

    .payment-hero {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .payment-panel-head,
    .payment-inline-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .payment-provider-grid,
    .bank-account-grid,
    .payment-form-grid,
    .payment-rail {
        grid-template-columns: 1fr;
    }

    .payment-panel {
        padding: 22px;
    }
}

@media (max-width: 575px) {
    .payment-hero,
    .payment-panel,
    .payment-rail {
        border-radius: 22px;
    }

    .payment-hero-copy h1 {
        max-width: none;
        font-size: 28px;
    }

    .bank-account-head {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .bank-copy-btn {
        grid-column: 1 / -1;
    }

    .bank-account-meta {
        grid-template-columns: 1fr;
    }
}

.price-old {
    color: rgba(255, 255, 255, 0.3);
    font-size: 13px;
    text-decoration: line-through;
}

/* === GAME CARDS === */
.game-card {
    display: block;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;
    text-decoration: none !important;
}

.game-card:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(124, 58, 237, 0.15);
}

.game-card img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.game-card:hover img {
    transform: scale(1.08);
}

.game-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 16px 14px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.game-card-name {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.game-card-arrow {
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    transition: all 0.3s;
    opacity: 0;
    transform: translateX(-8px);
}

.game-card:hover .game-card-arrow {
    opacity: 1;
    transform: translateX(0);
    color: #7c3aed;
}

/* === PROMO BANNER === */
.promo-banner {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.promo-banner .carousel-inner img {
    border-radius: 16px;
}

/* === MINI BANNERS === */
.mini-banner {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s;
}

.mini-banner:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.mini-banner img {
    width: 100%;
    display: block;
    border-radius: 14px;
}

/* === BTN MORE === */
.btn-more {
    display: inline-flex;
    align-items: center;
    padding: 12px 32px;
    background: #141c27;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s;
}

.btn-more:hover {
    background: #1a2332;
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff !important;
    transform: translateY(-1px);
}

/* === SEO SECTION === */
.seo-section {
    padding-bottom: 40px !important;
}

.seo-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.seo-content h3 {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
}

.seo-content p {
    color: rgba(255, 255, 255, 0.45);
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
}

/* === FEATURES ROW === */
.features-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 28px 0;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: #141c27;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.25s;
}

.feature-item:hover {
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.feature-item .feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(124, 58, 237, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #7c3aed;
    flex-shrink: 0;
}

.feature-item .feature-text h4 {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px;
}

.feature-item .feature-text p {
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    margin: 0;
    line-height: 1.4;
}

/* === FOOTER === */
footer.site-footer {
    background: #0b0f14 !important;
    border-top: none;
    margin-top: 0;
    position: relative;
    overflow: hidden;
}

/* Footer Features */
.footer-features {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    padding: 60px 0;
    position: relative;
}

.footer-features::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.5), transparent);
}

.footer-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.footer-feature-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.015);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.footer-feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(124, 58, 237, 0.1), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s;
    z-index: -1;
}

.footer-feature-card:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(124, 58, 237, 0.2);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(124, 58, 237, 0.15);
}

.footer-feature-card:hover::before {
    opacity: 1;
}

.ff-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #e8eaed;
    flex-shrink: 0;
    transition: all 0.4s;
    box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.02);
}

.footer-feature-card:hover .ff-icon {
    background: rgba(124, 58, 237, 0.15);
    color: #7c3aed;
    border-color: rgba(124, 58, 237, 0.3);
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.4), inset 0 2px 10px rgba(255, 255, 255, 0.05);
    transform: scale(1.05) rotate(5deg);
}

.ff-icon-blue {
    color: #818cf8;
    background: rgba(99, 102, 241, 0.05);
    border-color: rgba(99, 102, 241, 0.1);
}

.ff-icon-green {
    color: #34d399;
    background: rgba(52, 211, 153, 0.05);
    border-color: rgba(52, 211, 153, 0.1);
}

.ff-icon-purple {
    color: #a855f7;
    background: rgba(168, 85, 247, 0.05);
    border-color: rgba(168, 85, 247, 0.1);
}

.footer-feature-card:hover .ff-icon-blue {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
}

.footer-feature-card:hover .ff-icon-green {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.3);
    box-shadow: 0 0 15px rgba(52, 211, 153, 0.4);
}

.footer-feature-card:hover .ff-icon-purple {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
    border-color: rgba(168, 85, 247, 0.3);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}

.ff-content h4 {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px;
    letter-spacing: 0.2px;
}

.ff-content p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
}

/* Footer Main Layout */
.footer-main {
    background: transparent;
    border-top: none;
    position: relative;
    overflow: hidden;
}

.footer-main::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.footer-main .footer-area {
    padding: 60px 0 40px !important;
    border: none !important;
    background: transparent !important;
    position: relative;
    z-index: 1;
}

.footer-shell-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 50px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.footer-brand-panel {
    flex: 1 1 400px;
    max-width: 500px;
    margin-bottom: 0;
}

.footer-brand-logo img {
    max-height: 62px;
    margin-bottom: 24px;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));
}

.footer-eyebrow {
    color: #7c3aed;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
    display: inline-block;
}

.footer-brand-copy h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
}

.footer-brand-copy p {
    color: rgba(255, 255, 255, 0.45);
    font-size: 14px;
    line-height: 1.6;
    max-width: 320px;
}

.footer-contact-panel {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 250px;
    margin-bottom: 0;
}

.footer-panel-kicker {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.footer-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 14px;
    transition: all 0.3s ease;
    text-decoration: none !important;
    padding: 6px 12px;
    margin-left: -12px;
    border-radius: 8px;
}

.footer-contact-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.03);
    transform: translateX(4px);
}

.footer-contact-mark {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: rgba(124, 58, 237, 0.12);
    border: 1px solid rgba(124, 58, 237, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.footer-contact-mark img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
    filter: brightness(0) saturate(100%) invert(39%) sepia(94%) saturate(2004%) hue-rotate(201deg) brightness(100%) contrast(99%);
}

.footer-contact-mark i {
    color: #7c3aed;
    font-size: 17px;
}

.footer-contact-mark-whatsapp {
    background: rgba(25, 135, 84, 0.12);
    border-color: rgba(25, 135, 84, 0.25);
}

.footer-contact-mark-whatsapp i {
    color: #22c55e;
}

.footer-contact-mark-mail {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.24);
}

.footer-contact-mark-mail img {
    filter: brightness(0) saturate(100%) invert(53%) sepia(98%) saturate(1210%) hue-rotate(229deg) brightness(99%) contrast(95%);
}

@media (max-width: 991.98px) {
    header.redesigned-header {
        padding: 0 !important;
    }

    .mobile-header {
        top: 0;
        margin-top: 0;
    }
}

.footer-shell-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
}

.footer-nav-col h4,
.footer-social-col h4 {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 12px;
}

.footer-nav-col h4::after,
.footer-social-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: #7c3aed;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.5);
}

.footer-nav-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav-col ul li {
    margin-bottom: 12px;
}

.footer-nav-col ul li a {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 14px !important;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    position: relative;
    padding-bottom: 0px !important;
}

.footer-nav-col ul li a::before {
    content: '\f105';
    font-family: 'Font Awesome 5 Pro', 'FontAwesome';
    font-weight: 300;
    color: #7c3aed;
    font-size: 12px;
    position: absolute;
    left: 0;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s;
}

.footer-nav-col ul li a:hover {
    color: #fff !important;
    padding-left: 16px !important;
}

.footer-nav-col ul li a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.footer-social-col p {
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.footer-social-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-social-list li a {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 16px !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-social-list li a:hover {
    background: #7c3aed !important;
    color: #fff !important;
    border-color: #7c3aed !important;
    box-shadow: 0 5px 15px rgba(124, 58, 237, 0.4) !important;
    transform: translateY(-5px);
}

.footer-social-list li a:hover i {
    transform: scale(1.1);
}

.footer-newsletter-shell {
    margin-top: 20px;
}

.footer-newsletter-label {
    display: none;
}

.footer-newsletter-shell .newsletter .form-control {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px 0 0 12px !important;
    color: #fff !important;
    font-size: 14px !important;
    padding: 14px 20px !important;
    backdrop-filter: blur(5px);
    transition: all 0.3s;
}

.footer-newsletter-shell .newsletter .form-control::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.footer-newsletter-shell .newsletter .form-control:focus {
    border-color: rgba(124, 58, 237, 0.5) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: none !important;
}

.footer-newsletter-shell .newsletter .input-group-text {
    background: #7c3aed !important;
    border: 1px solid #7c3aed !important;
    border-radius: 0 12px 12px 0 !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 14px 24px !important;
    cursor: pointer;
    transition: all 0.3s;
}

.footer-newsletter-shell .newsletter .input-group-text:hover {
    background: #6d28d9 !important;
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.4);
}

/* Footer Bottom Layout */
.footer-bottom {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    padding: 24px 0;
    position: relative;
    z-index: 2;
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.3);
    font-size: 13px;
    letter-spacing: 0.3px;
}

.footer-payments {
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer-payments img {
    max-height: 28px;
    opacity: 0.4;
    transition: all 0.3s ease;
    filter: grayscale(100%) opacity(0.7);
}

.footer-payments img:hover {
    opacity: 1;
    filter: grayscale(0%) opacity(1);
    transform: scale(1.05);
}

/* Responsive Footer adjustments */
@media (max-width: 1199px) {
    .footer-shell-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-shell-grid>*:nth-child(1) {
        grid-column: 1 / 4;
        margin-bottom: 20px;
    }
}

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

    .footer-shell-top {
        flex-direction: column;
        gap: 24px;
        align-items: flex-start;
    }

    .footer-brand-panel,
    .footer-contact-panel {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
    }

    .footer-bottom-inner {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .footer-shell-grid>*:nth-child(1) {
        grid-column: auto;
    }

    .footer-shell-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {

    .footer-features-grid,
    .footer-shell-grid {
        grid-template-columns: 1fr;
    }

    .footer-features {
        padding: 40px 0;
    }

    .footer-feature-card {
        padding: 20px;
    }

    .footer-shell-top {
        margin-bottom: 30px;
        align-items: center;
        text-align: center;
    }

    .footer-brand-panel {
        align-items: center;
        text-align: center;
    }

    .footer-brand-copy p {
        margin: 0 auto;
    }

    .footer-contact-panel {
        align-items: center;
    }

    .footer-nav-col {
        margin-bottom: 10px;
        text-align: center;
    }

    .footer-social-col {
        text-align: center;
    }

    .footer-social-list {
        justify-content: center;
    }
}

/* === THEME CARD BOX === */
.theme-card-box {
    background: #141c27 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    overflow: hidden;
    transition: all 0.3s ease !important;
}

.theme-card-box:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.theme-card-box img {
    border-radius: 14px 14px 0 0 !important;
}

/* === GENERAL === */
.bg-dark-light {
    background: #111820 !important;
}

.bg-dark-light-2,
.bg-dark-light-2:focus {
    background: #1a2332 !important;
}

.bg-dark {
    background: #0b0f14 !important;
}

main.py-2 {
    padding-top: 0 !important;
}

/* === RESPONSIVE === */
@media (max-width: 991px) {
    .features-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-categories {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .quick-categories::-webkit-scrollbar {
        display: none;
    }

    .header-actions .btn-header-login,
    .header-actions .btn-header-register {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    .section-header h2 {
        font-size: 18px;
    }
}

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

    .hero-banner-wrapper img {
        min-height: 160px;
        max-height: 220px;
    }

    .hero-section {
        padding: 12px 0 0;
    }

    .section-block {
        padding: 24px 0 0;
    }

    .section-header h2 {
        font-size: 17px;
    }

    .quick-cat-item {
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* === MODALS === */
.popup-form .form-control,
.popup-form .input-group-text {
    background: #1a2332 !important;
}

.modal-content.bg-transparent .modal-body {
    background: #141c27;
    border-radius: 14px;
}

.modal-content.bg-transparent .modal-header {
    padding-bottom: 0;
}

/* === LIGHT/DARK SWITCH === */
.light-dark-switch .form-check-input:checked {
    background-color: #7c3aed;
    border-color: #7c3aed;
}

/* === DROPDOWN === */
.theme-dropdown {
    position: relative;
}

.theme-dropdown .login-menu-popup,
.theme-dropdown .login-menu {
    background: #1a2332 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

/* === SEARCH === */
#headerSearchBox {
    font-size: 14px !important;
}

/* === BLOG CARD === */
.owl-blog .item,
.owl-blog .blog-card {
    background: #141c27 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* === OWL NEXT BUTTON === */
.circle-55 {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a2332 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    cursor: pointer;
    transition: all 0.2s;
}

.circle-55:hover {
    background: #243042 !important;
    color: #fff !important;
}

/* === BANNER CAROUSEL === */
.banner_1 {
    border-radius: 16px;
    overflow: hidden;
}

.banner_1 .carousel-inner img {
    border-radius: 16px;
}

/* ============================================================
   PRODUCT DETAIL PAGE (oyun_detay.php)
   ============================================================ */

/* Breadcrumb */
.pd-breadcrumb {
    padding: 24px 0 0;
}

.pd-breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pd-breadcrumb-nav a {
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.2s;
}

.pd-breadcrumb-nav a:hover {
    color: #7c3aed;
}

.pd-breadcrumb-nav i {
    color: rgba(255, 255, 255, 0.2);
    font-size: 10px;
}

.pd-breadcrumb-nav span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 500;
}

/* Product Detail Section */
.pd-section {
    padding: 24px 0 0;
}

.pd-wrapper {
    background: #141c27;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 28px;
    overflow: hidden;
}

/* Product Image */
.pd-image-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #0e1319;
}

.pd-image-wrap img {
    width: 100%;
    display: block;
    border-radius: 16px;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.pd-discount-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: linear-gradient(135deg, #dc3545, #b02a37);
    color: #fff;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    z-index: 2;
    letter-spacing: 0.3px;
}

/* Product Info */
.pd-info {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 4px 0;
}

.pd-category-tag {
    display: inline-flex;
    align-items: center;
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    width: fit-content;
    margin-bottom: 16px;
}

.pd-title {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 16px;
    line-height: 1.3;
}

.pd-description {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
    max-height: 96px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.25s ease;
}

.pd-description p {
    margin: 0;
}

.pd-description:not(.is-expanded)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42px;
    background: linear-gradient(180deg, rgba(20, 28, 39, 0), #141c27 82%);
    pointer-events: none;
}

.pd-description.is-expanded {
    max-height: none;
    overflow: visible;
}

.pd-description.is-expanded::after,
.pd-description.is-short::after {
    display: none;
}

.pd-description-toggle {
    align-self: flex-start;
    border: 1px solid rgba(139, 92, 246, 0.34);
    background: rgba(139, 92, 246, 0.12);
    color: #c4b5fd;
    border-radius: 12px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    margin: -4px 0 18px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pd-description-toggle:hover {
    background: rgba(139, 92, 246, 0.22);
    border-color: rgba(139, 92, 246, 0.58);
    color: #fff;
}

.pd-description-toggle.is-hidden {
    display: none;
}

/* Meta Row */
.pd-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pd-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

.pd-meta-item i {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.35);
}

/* Price */
.pd-price-row {
    margin-bottom: 24px;
}

.pd-price-block {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.pd-price-current {
    color: #22c55e;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.pd-price-old {
    color: rgba(255, 255, 255, 0.3);
    font-size: 20px;
    text-decoration: line-through;
}

/* Actions */
.pd-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.pd-qty {
    display: flex;
    align-items: center;
    background: #1a2332;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    height: 50px;
}

.pd-qty .btn {
    width: 44px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6) !important;
    background: transparent !important;
    border: none !important;
    font-size: 12px;
    transition: all 0.15s;
    padding: 0;
}

.pd-qty .btn:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.pd-qty input {
    width: 50px;
    text-align: center;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 18px;
    font-weight: 600;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.pd-qty input::-webkit-outer-spin-button,
.pd-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pd-btn-cart {
    flex: 1;
    min-width: 200px;
    height: 50px;
    min-height: 50px;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: #fff !important;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.3px;
    line-height: 1;
    padding: 0 22px;
}

.pd-btn-cart:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.35);
}

.pd-btn-cart:active {
    transform: translateY(0);
}

.pd-btn-disabled {
    background: #2a3444 !important;
    color: rgba(255, 255, 255, 0.35) !important;
    cursor: not-allowed;
}

.pd-btn-disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Trust */
.pd-trust {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 13px;
    margin-top: auto;
}

.pd-trust i {
    color: #28a745;
    font-size: 16px;
}

/* SEO Box */
.pd-seo-box {
    background: #141c27;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 32px;
}

.pd-seo-box h3 {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px;
}

.pd-seo-box p {
    color: rgba(255, 255, 255, 0.45);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* ============================================================
   PRODUCT LIST PAGE — ENHANCED (oyun_urun.php)
   ============================================================ */

/* Hero Banner */
.pl-hero {
    position: relative;
    padding: 28px 0 32px;
    overflow: hidden;
}

.pl-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, transparent 50%, rgba(34, 197, 94, 0.06) 100%);
    pointer-events: none;
}

.pl-hero-content {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 18px;
}

.pl-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.3);
    overflow: hidden;
}

.pl-hero-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pl-hero-icon-fallback {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}

.pl-hero-icon-fallback span {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.pl-hero-title {
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 6px;
    line-height: 1.2;
}

.pl-hero-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pl-hero-count {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    font-weight: 500;
}

.pl-hero-divider {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.pl-hero-badge {
    color: #7c3aed;
    font-size: 13px;
    font-weight: 600;
}

/* List Section */
.pl-list-section {
    padding: 0 0 40px;
}

.pl-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Product Card */
.pl-card {
    position: relative;
}

.pl-card-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #141c27;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 14px 18px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.pl-card-inner::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    border-radius: 0 3px 3px 0;
    transition: background 0.3s;
}

.pl-card:hover .pl-card-inner {
    border-color: rgba(124, 58, 237, 0.25);
    background: #161f2c;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(124, 58, 237, 0.1);
    transform: translateX(4px);
}

.pl-card:hover .pl-card-inner::before {
    background: linear-gradient(180deg, #7c3aed 0%, #5b21b6 100%);
}

/* Card Number */
.pl-card-num {
    width: 32px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.12);
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.pl-card:hover .pl-card-num {
    color: rgba(124, 58, 237, 0.4);
}

/* Card Image */
.pl-card-image {
    flex-shrink: 0;
    width: 90px;
    height: 132px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: block;
    background:
        radial-gradient(circle at top, rgba(124, 58, 237, 0.24), transparent 48%),
        linear-gradient(180deg, #151126 0%, #0b0914 100%);
    border: 1px solid rgba(144, 92, 255, 0.18);
}

.pl-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pl-card:hover .pl-card-image img {
    transform: scale(1.04);
}

.pl-card-image-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(124, 58, 237, 0.18) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.pl-card:hover .pl-card-image-glow {
    opacity: 1;
}

/* Card Info */
.pl-card-info {
    flex: 1;
    min-width: 0;
}

.pl-card-name {
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    display: block;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}

.pl-card-name:hover {
    color: #7c3aed !important;
}

.pl-card-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pl-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.pl-tag-green {
    background: rgba(40, 167, 69, 0.1);
    color: #34d058;
}

.pl-tag-red {
    background: rgba(220, 53, 69, 0.1);
    color: #f85149;
}

.pl-tag-pink {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

/* Card Price */
.pl-card-price {
    flex-shrink: 0;
    text-align: right;
    min-width: 100px;
    padding: 0 4px;
}

.pl-card-price-main {
    display: block;
    color: #22c55e;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.pl-card-price-old {
    display: block;
    color: rgba(255, 255, 255, 0.25);
    font-size: 12px;
    text-decoration: line-through;
    margin-top: 2px;
}

/* Card Qty */
.pl-card-qty {
    flex-shrink: 0;
}

/* Card Actions */
.pl-card-actions {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    min-width: 130px;
}

.pl-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    text-decoration: none !important;
    white-space: nowrap;
}

.pl-action-btn i {
    font-size: 14px;
}

.pl-action-detail {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.65) !important;
}

.pl-action-detail:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.pl-action-cart {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: #fff !important;
}

.pl-action-cart:hover {
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
    transform: translateY(-1px);
}

.pl-action-disabled {
    background: #1e2836 !important;
    color: rgba(255, 255, 255, 0.25) !important;
    cursor: not-allowed;
}

.pl-action-disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Empty State */
.pl-empty-state {
    text-align: center;
    padding: 80px 20px;
    background: #141c27;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
}

.pl-empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pl-empty-icon i {
    font-size: 36px;
    color: rgba(255, 255, 255, 0.15);
}

.pl-empty-state h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
}

.pl-empty-state p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    margin: 0 0 24px;
}

.pl-empty-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    background: rgba(124, 58, 237, 0.12);
    color: #7c3aed !important;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s;
}

.pl-empty-btn:hover {
    background: rgba(124, 58, 237, 0.2);
}

/* ============================================================
   GAME CURRENCY PAGE (oyun_parasi_urun.php)
   ============================================================ */

.pl-tag-blue {
    background: rgba(99, 102, 241, 0.1);
    color: #818cf8;
}

/* Dual Pricing */
.gm-prices {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 140px !important;
}

.gm-price-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.gm-price-label {
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.gm-price-val {
    font-size: 16px;
    font-weight: 700;
}

.gm-price-buy {
    color: #34d058;
}

.gm-price-sell {
    color: #22c55e;
}

/* Info Header */
.gm-info-header {
    text-align: center;
    margin-bottom: 24px;
}

.gm-info-header h2 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
}

.gm-info-header p {
    color: rgba(255, 255, 255, 0.45);
    font-size: 14px;
    margin: 0;
}

/* Price Table */
.gm-table-wrap {
    background: #141c27;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
}

.gm-table {
    width: 100%;
    border-collapse: collapse;
}

.gm-table thead th {
    background: #1a2332;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 600;
    padding: 14px 20px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gm-table thead th:last-child {
    text-align: right;
}

.gm-table tbody tr {
    transition: background 0.2s;
}

.gm-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.gm-table tbody td {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

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

.gm-table-server {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
}

.gm-table-price {
    color: #22c55e;
    font-size: 15px;
    font-weight: 700;
    text-align: right !important;
}

/* ============================================================
   PRODUCT PAGE RESPONSIVE
   ============================================================ */

@media (max-width: 991px) {
    .pd-wrapper {
        padding: 20px;
    }

    .pd-title {
        font-size: 22px;
    }

    .pd-price-current {
        font-size: 28px;
    }

    .pl-hero-title {
        font-size: 22px;
    }

    .pl-card-inner {
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px;
    }

    .pl-card-num {
        display: none;
    }

    .pl-card-image {
        width: 78px;
        height: 114px;
    }

    .pl-card-info {
        min-width: 180px;
    }

    .pl-card-price {
        min-width: auto;
    }

    .pl-card-qty {
        order: 5;
    }

    .pl-card-actions {
        order: 6;
        width: 100%;
        min-width: auto;
    }

    .pl-action-btn {
        flex: 1;
    }
}

@media (max-width: 575px) {
    .pd-wrapper {
        padding: 16px;
    }

    .pd-image-wrap {
        background: #101824;
    }

    .pd-image-wrap img {
        aspect-ratio: auto;
        height: auto;
        max-height: none;
        object-fit: contain;
        object-position: center top;
    }

    .pd-title {
        font-size: 20px;
    }

    .pd-price-current {
        font-size: 24px;
    }

    .pd-actions {
        flex-direction: column;
    }

    .pd-btn-cart {
        width: 100%;
        min-width: auto;
    }

    .pd-qty {
        width: 100%;
        justify-content: center;
    }

    .pl-hero {
        padding: 20px 0 24px;
    }

    .pl-hero-title {
        font-size: 20px;
    }

    .pl-hero-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .pl-card-inner {
        padding: 12px;
        gap: 10px;
    }

    .pl-card-image {
        width: 68px;
        height: 100px;
        border-radius: 10px;
    }

    .pl-card-name {
        font-size: 14px;
    }

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

    .pl-card-qty {
        width: 100%;
    }

    .pl-card-qty .pd-qty {
        width: 100%;
        justify-content: center;
    }

    .pl-action-btn span {
        display: none;
    }

    .pl-action-btn {
        padding: 10px;
        min-width: 44px;
    }

    .pl-action-btn i {
        font-size: 16px;
    }
}

/* ============================================================
   AUTH MODALS (Login, Register, Forgot, Support)
   ============================================================ */

.am-modal {
    background: #111820 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 20px !important;
    padding: 0 !important;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5) !important;
    position: relative;
}

.am-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #7c3aed, #5b21b6, #7c3aed);
    opacity: 0.6;
}

.am-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.am-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.12);
}

/* Header */
.am-header {
    text-align: center;
    padding: 32px 32px 0;
}

.am-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(124, 58, 237, 0.12);
    color: #7c3aed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 16px;
}

.am-icon-green {
    background: rgba(52, 211, 153, 0.1);
    color: #34d399;
}

.am-icon-amber {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

.am-icon-blue {
    background: rgba(99, 102, 241, 0.1);
    color: #818cf8;
}

.am-title {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}

.am-subtitle {
    color: rgba(255, 255, 255, 0.35);
    font-size: 13px;
    margin: 0;
}

/* Body */
.am-body {
    padding: 24px 32px 32px;
}

/* Fields */
.am-field {
    margin-bottom: 16px;
}

.am-label {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.am-label-hint {
    text-transform: none;
    color: rgba(255, 255, 255, 0.25);
    font-size: 11px;
    font-weight: 400;
}

.am-input-wrap {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
}

.am-input-wrap:focus-within {
    border-color: rgba(124, 58, 237, 0.4);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.am-input-wrap>i {
    padding: 0 0 0 16px;
    color: rgba(255, 255, 255, 0.2);
    font-size: 14px;
    flex-shrink: 0;
}

.am-input-wrap:focus-within>i {
    color: rgba(124, 58, 237, 0.6);
}

.am-input-wrap input,
.am-input-wrap select {
    flex: 1;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 14px;
    padding: 13px 16px;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    font-family: inherit;
}

.am-input-wrap input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.am-input-wrap select {
    cursor: pointer;
}

.am-input-wrap select option {
    background: #1a2332;
    color: #fff;
}

/* Textarea */
.am-textarea-wrap {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
}

.am-textarea-wrap:focus-within {
    border-color: rgba(124, 58, 237, 0.4);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.am-textarea-wrap textarea {
    width: 100%;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 14px;
    padding: 14px 16px;
    outline: none !important;
    box-shadow: none !important;
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}

.am-textarea-wrap textarea::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

/* Captcha */
.am-captcha {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
}

/* Terms */
.am-terms {
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    text-align: center;
    margin-bottom: 18px;
    line-height: 1.5;
}

/* ===================================== */
/* === MOBILE HEADER === */
/* ===================================== */
.mobile-header {
    background: #1a1a1a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.mobile-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    min-height: 68px;
}

.mobile-btn-menu {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.25s ease;
    flex-shrink: 0;
    padding: 0;
    cursor: pointer;
}

.mobile-btn-menu:hover,
.mobile-btn-menu:active {
    background: rgba(124, 58, 237, 0.15);
    border-color: #7c3aed;
    color: #7c3aed;
}

.mobile-header-logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 68px;
    transition: transform 0.25s ease;
}

.mobile-header-logo:active {
    transform: scale(0.97);
}

.mobile-header-logo img {
    max-height: 64px;
    width: auto;
    object-fit: contain;
}

.mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mobile-btn-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.25s ease;
    text-decoration: none !important;
    position: relative;
    padding: 0;
    cursor: pointer;
}

.mobile-btn-icon:hover,
.mobile-btn-icon:active {
    background: rgba(124, 58, 237, 0.15);
    border-color: #7c3aed;
    color: #7c3aed !important;
}

/* Mobile Search Bar */
.mobile-search-form {
    margin: 0;
    padding: 0;
}

.mobile-search-wrap {
    position: relative;
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    transition: all 0.25s ease;
    height: 46px;
    display: flex;
    align-items: center;
}

.mobile-search-wrap:focus-within {
    border-color: #7c3aed;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.mobile-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: 15px;
    pointer-events: none;
}

.mobile-search-input {
    width: 100%;
    height: 46px;
    background: transparent;
    border: none;
    color: #fff;
    padding: 0 16px 0 44px;
    font-size: 14px;
    font-weight: 400;
    outline: none !important;
}

.mobile-search-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* ===================================== */
/* === FP MOBILE BOTTOM NAV BAR === */
/* ===================================== */
.fp-mobile-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: rgba(18, 18, 18, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    z-index: 998;
    padding: 0 4px;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.fp-mobile-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none !important;
    transition: all 0.25s ease;
    position: relative;
    min-width: 0;
}

.fp-mobile-bar-item span {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.fp-mobile-bar-icon {
    position: relative;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: all 0.25s ease;
}

.fp-mobile-bar-icon i {
    font-size: 20px;
    line-height: 1;
}

.fp-mobile-bar-item:hover,
.fp-mobile-bar-item:focus {
    color: #fff;
}

.fp-mobile-bar-item.active {
    color: #7c3aed;
}

.fp-mobile-bar-item.active .fp-mobile-bar-icon {
    background: rgba(124, 58, 237, 0.15);
}

.fp-mobile-bar-item:active .fp-mobile-bar-icon {
    transform: scale(0.9);
}

/* Center highlighted item (Cart) */
.fp-mobile-bar-item-center {
    position: relative;
}

.fp-mobile-bar-item-center .fp-mobile-bar-icon-big {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45);
    margin-top: -26px;
    margin-bottom: 2px;
    border: 4px solid rgba(18, 18, 18, 0.92);
}

.fp-mobile-bar-item-center .fp-mobile-bar-icon-big i {
    font-size: 22px;
    color: #fff;
}

.fp-mobile-bar-item-center {
    color: #fff;
}

.fp-mobile-bar-item-center:active .fp-mobile-bar-icon-big {
    transform: scale(0.93);
}

/* Badge on mobile bar icons */
.fp-mobile-bar-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #dc3545, #b02a37);
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #121212;
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.4);
}

.fp-mobile-bar-item-center .fp-mobile-bar-badge {
    top: -2px;
    right: 2px;
    border-color: #5b21b6;
}

/* Add bottom padding to body on mobile so content isn't hidden */
@media (max-width: 991.98px) {
    body {
        padding-bottom: 64px;
    }

    /* Ensure sticky headers still work */
    .category-bar {
        display: none !important;
    }
}

/* Small screen tweaks */
@media (max-width: 374px) {
    .fp-mobile-bar-item span {
        font-size: 9px;
    }

    .fp-mobile-bar-icon i {
        font-size: 18px;
    }

    .mobile-header-logo img {
        max-height: 54px;
    }
}

/* ===================================== */
/* === SCROLL TO TOP BUTTON === */
/* ===================================== */
.to-up {
    position: fixed !important;
    bottom: 90px !important;
    right: 20px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
    border: none !important;
    color: #fff !important;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    z-index: 997;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45), 0 0 0 4px rgba(124, 58, 237, 0.12) !important;
    transition: all 0.3s ease !important;
    animation: toUpFloat 2.5s ease-in-out infinite;
}

.to-up.active,
.to-up.visible,
.to-up[style*="display: flex"],
.to-up[style*="display:flex"],
.to-up[style*="display: block"],
.to-up[style*="display:block"] {
    display: flex !important;
}

.to-up:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 28px rgba(124, 58, 237, 0.55), 0 0 0 6px rgba(124, 58, 237, 0.15) !important;
}

.to-up:active {
    transform: translateY(-2px) scale(0.95) !important;
}

.to-up i {
    line-height: 1;
}

@keyframes toUpFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@media (max-width: 991.98px) {
    .to-up {
        bottom: 76px !important;
        right: 14px !important;
        width: 42px !important;
        height: 42px !important;
        font-size: 16px;
    }
}

/* ===================================== */
/* === HERO CAROUSEL === */
/* ===================================== */
.hero-carousel {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.hero-carousel .carousel-inner,
.hero-carousel .carousel-item {
    border-radius: 20px;
}

.hero-carousel .carousel-item a {
    display: block;
    line-height: 0;
}

.hero-carousel .carousel-item .theme-card,
.hero-carousel .carousel-item img {
    border-radius: 20px;
    overflow: hidden;
}

.hero-carousel .carousel-item img {
    width: 100%;
    height: auto;
    min-height: 280px;
    max-height: 480px;
    object-fit: cover;
    display: block;
}

/* Carousel Indicators */
.hero-carousel-indicators {
    bottom: 18px;
    margin: 0;
    gap: 6px;
    justify-content: center;
    z-index: 4;
}

.hero-carousel-indicators button {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.4) !important;
    border: none !important;
    margin: 0 !important;
    opacity: 1 !important;
    transition: all 0.3s ease !important;
    flex: none !important;
}

.hero-carousel-indicators button.active {
    width: 28px !important;
    border-radius: 4px !important;
    background: linear-gradient(90deg, #7c3aed, #5b21b6) !important;
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.6) !important;
}

/* Carousel Controls */
.hero-carousel-ctrl {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    opacity: 0;
    transition: all 0.3s ease;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
}

.hero-carousel-ctrl.carousel-control-prev {
    left: 16px;
}

.hero-carousel-ctrl.carousel-control-next {
    right: 16px;
}

.hero-banner-wrapper:hover .hero-carousel-ctrl {
    opacity: 1;
}

.hero-carousel-ctrl:hover {
    background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-50%) scale(1.08);
}

@media (max-width: 768px) {
    .hero-carousel-ctrl {
        display: none !important;
    }

    .hero-carousel-indicators {
        bottom: 10px;
    }

    .hero-carousel-indicators button {
        width: 6px !important;
        height: 6px !important;
    }

    .hero-carousel-indicators button.active {
        width: 20px !important;
    }
}

/* ===================================== */
/* === MODAL POLISH === */
/* ===================================== */
.modal-content {
    background: linear-gradient(180deg, #1a2330 0%, #141c27 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    color: #fff;
}

.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 18px 24px !important;
}

.modal-title {
    color: #fff;
    font-weight: 600;
    font-size: 17px;
}

.modal-body {
    color: rgba(255, 255, 255, 0.85);
    padding: 20px 24px !important;
}

.modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 16px 24px !important;
}

html,
body {
    background: #0b1016;
}

body.dark-mode .top-utility-bar,
body .top-utility-bar {
    margin-top: -1px;
    padding-top: 9px;
}

.top-utility-bar {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.category-item.category-all {
    gap: 10px;
    padding: 0 6px 0 0;
}

.category-all-mark,
.quick-cat-all-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.category-all-mark {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background:
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.2), transparent 55%),
        linear-gradient(135deg, rgba(24, 124, 255, 0.26), rgba(255, 49, 93, 0.2));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.category-all-mark-grid,
.quick-cat-all-mark-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
}

.category-all-mark-grid span,
.quick-cat-all-mark-grid span {
    display: block;
    border-radius: 3px;
    background: #f6f8fb;
}

.category-all-mark-grid span {
    width: 5px;
    height: 5px;
}

.category-all-mark-grid span:nth-child(1),
.quick-cat-all-mark-grid span:nth-child(1) {
    opacity: 1;
}

.category-all-mark-grid span:nth-child(2),
.quick-cat-all-mark-grid span:nth-child(2) {
    opacity: 0.75;
}

.category-all-mark-grid span:nth-child(3),
.quick-cat-all-mark-grid span:nth-child(3) {
    opacity: 0.7;
}

.category-all-mark-grid span:nth-child(4),
.quick-cat-all-mark-grid span:nth-child(4) {
    opacity: 0.95;
}

.category-item.category-all i:first-child {
    display: none;
}

.category-item.category-all:hover .category-all-mark {
    transform: translateY(-1px) scale(1.03);
    border-color: rgba(255, 255, 255, 0.16);
}

.quick-cat-all {
    gap: 12px;
}

.quick-cat-all .quick-cat-icon {
    width: 36px;
    height: 36px;
}

.quick-cat-all-mark {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background:
        radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.24), transparent 58%),
        linear-gradient(145deg, rgba(255, 66, 103, 0.88), rgba(101, 23, 255, 0.72));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 24px rgba(126, 32, 96, 0.32);
}

.quick-cat-all-mark-grid span {
    width: 6px;
    height: 6px;
}

.quick-cat-all:hover .quick-cat-all-mark {
    transform: translateY(-2px) scale(1.06);
}



.btn-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: all 0.25s ease;
    padding: 0;
    cursor: pointer;
}

.btn-modal-close:hover {
    background: rgba(220, 53, 69, 0.15);
    border-color: #dc3545;
    color: #dc3545;
    transform: rotate(90deg);
}

.modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(2);
    opacity: 0.7;
}

.modal .btn-close:hover {
    opacity: 1;
}

.modal-backdrop.show {
    opacity: 0.75;
    backdrop-filter: blur(4px);
}

/* ===================================== */
/* === GLOBAL FORM INPUTS === */
/* ===================================== */
.form-control,
.form-select {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    transition: all 0.25s ease !important;
}

.form-control:focus,
.form-select:focus {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
    color: #fff !important;
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

.form-label {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
}

.input-group-text {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Checkbox & Radio */
.form-check-input {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: #7c3aed !important;
    border-color: #7c3aed !important;
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
    border-color: #7c3aed !important;
}

.form-check-label {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    cursor: pointer;
}

/* ===================================== */
/* === BUTTON POLISH === */
/* ===================================== */
.btn {
    border-radius: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px;
    transition: all 0.25s ease !important;
    font-size: 14px;
    padding: 10px 20px;
}

.btn-primary {
    background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #6d28d9, #4c1d95) !important;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4) !important;
    transform: translateY(-2px);
    color: #fff !important;
}

.btn-success {
    background: linear-gradient(135deg, #198754, #146c43) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(25, 135, 84, 0.25);
}

.btn-success:hover {
    box-shadow: 0 6px 20px rgba(25, 135, 84, 0.4) !important;
    transform: translateY(-2px);
}

.btn-danger {
    background: linear-gradient(135deg, #dc3545, #b02a37) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(220, 53, 69, 0.25);
}

.btn-outline-light {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    background: transparent !important;
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
}

/* ===================================== */
/* === SECTION SPACING CONSISTENCY === */
/* ===================================== */
.site-main {
    min-height: 60vh;
}

/* Better text selection */
::selection {
    background: rgba(124, 58, 237, 0.35);
    color: #fff;
}

::-moz-selection {
    background: rgba(124, 58, 237, 0.35);
    color: #fff;
}

/* Refined Scrollbar */
::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
    background-color: transparent !important;
}

::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-radius: 0 !important;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #7c3aed, #5b21b6) !important;
    border-radius: 6px !important;
    border: 2px solid rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #6d28d9, #4c1d95) !important;
}

/* SweetAlert Dark Theme */
.swal2-popup {
    background: linear-gradient(180deg, #1a2330 0%, #141c27 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    color: #fff !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

.swal2-title {
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 600 !important;
}

.swal2-html-container {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 14px !important;
}

.swal2-confirm.swal2-styled {
    background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25) !important;
}

.swal2-cancel.swal2-styled {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    padding: 10px 24px !important;
}

.swal2-icon.swal2-success {
    border-color: #22c55e !important;
    color: #22c55e !important;
}

.swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: #22c55e !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(34, 197, 94, 0.3) !important;
}

.swal2-icon.swal2-error {
    border-color: #dc3545 !important;
    color: #dc3545 !important;
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line] {
    background-color: #dc3545 !important;
}

.swal2-icon.swal2-warning {
    border-color: #f59e0b !important;
    color: #f59e0b !important;
}

.swal2-icon.swal2-info {
    border-color: #7c3aed !important;
    color: #7c3aed !important;
}

.swal2-icon.swal2-question {
    border-color: #7c3aed !important;
    color: #7c3aed !important;
}

/* Toast notifications */
.swal2-toast {
    background: rgba(26, 35, 48, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px) !important;
}

/* Pagination */
.pagination .page-link {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 8px !important;
    margin: 0 3px;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

.pagination .page-link:hover {
    background: rgba(124, 58, 237, 0.1) !important;
    border-color: #7c3aed !important;
    color: #fff !important;
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
    border-color: #7c3aed !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.pagination .page-item.disabled .page-link {
    background: rgba(255, 255, 255, 0.02) !important;
    color: rgba(255, 255, 255, 0.25) !important;
}

/* Offcanvas backdrop blur */
.offcanvas-backdrop.show {
    opacity: 0.6;
    backdrop-filter: blur(4px);
}

/* Badge base */
.badge {
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 5px 10px;
    border-radius: 6px;
}

/* Better focus visible for accessibility */
a:focus-visible,
button:focus-visible {
    outline: 2px solid rgba(124, 58, 237, 0.5);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Disable tap highlight on mobile */
a,
button,
.btn {
    -webkit-tap-highlight-color: transparent;
}

.am-terms a {
    color: rgba(255, 255, 255, 0.55) !important;
    text-decoration: underline !important;
    transition: color 0.2s;
}

.am-terms a:hover {
    color: #fff !important;
}

/* Buttons */
.am-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: #fff !important;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
    letter-spacing: 0.2px;
    font-family: inherit;
}

.am-btn-primary:hover {
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
    transform: translateY(-1px);
}

.am-btn-green {
    background: linear-gradient(135deg, #34d399 0%, #059669 100%);
}

.am-btn-green:hover {
    box-shadow: 0 8px 24px rgba(52, 211, 153, 0.25);
}

.am-btn-amber {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #000 !important;
}

.am-btn-amber:hover {
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.25);
}

.am-btn-blue {
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
}

.am-btn-blue:hover {
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.25);
}

.am-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px 20px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.am-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.12);
}

/* Forgot link */
.am-forgot {
    display: block;
    text-align: center;
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 13px;
    text-decoration: none !important;
    margin: 12px 0;
    transition: color 0.2s;
}

.am-forgot:hover {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Divider */
.am-divider {
    display: flex;
    align-items: center;
    margin: 16px 0;
}

.am-divider::before,
.am-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
}

.am-divider span {
    padding: 0 14px;
    color: rgba(255, 255, 255, 0.2);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Modal backdrop */
#login-modal .modal-dialog,
#register-modal .modal-dialog,
#forgot-modal .modal-dialog,
#support-modal .modal-dialog {
    max-width: 420px;
}

/* Modal responsive */
@media (max-width: 575px) {
    .am-header {
        padding: 28px 20px 0;
    }

    .am-body {
        padding: 20px 20px 28px;
    }

    .am-title {
        font-size: 20px;
    }

    .am-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
}

/* ============================================================
   CART PAGE (sepet.php)
   ============================================================ */

main.py-5 .bg-dark-light {
    background: #111820 !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px !important;
}

main.py-5 .bg-dark-light .r25 {
    border-radius: 12px !important;
}

/* Steps bar */
main.py-5 .steps {
    max-width: 300px;
}

main.py-5 .steps li {
    text-align: center;
}

main.py-5 .step {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 16px !important;
}

main.py-5 .bg-red,
main.py-5 a.bg-red,
main.py-5 button.bg-red {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
    border: none;
}

main.py-5 .step-notactive {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.25) !important;
}

/* Cart items */
main.py-5 .basket-max {
    padding: 0 16px;
}

main.py-5 .basket-max .row {
    padding: 16px 0;
}

main.py-5 .basket-max img.r25 {
    width: 80px !important;
    height: 80px !important;
    border-radius: 12px !important;
    object-fit: cover;
}

main.py-5 .basket-max hr {
    border-color: rgba(255, 255, 255, 0.05) !important;
    opacity: 1;
    margin: 4px 0;
}

main.py-5 .basket-max .counter {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow: hidden;
}

main.py-5 .basket-max .counter .form-control {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600;
    padding: 8px 4px !important;
    text-align: center;
    width: 50px;
    border-radius: 0 !important;
}

main.py-5 .basket-max .counter .btn {
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 12px;
}

main.py-5 .basket-max .counter .btn:hover {
    color: #fff !important;
}

/* Delete button */
main.py-5 .basket-max [onclick="satir_sil(this)"] .btn {
    opacity: 0.3;
    transition: all 0.2s;
}

main.py-5 .basket-max [onclick="satir_sil(this)"] .btn:hover {
    opacity: 1;
}

main.py-5 .basket-max [onclick="satir_sil(this)"] .btn img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
    opacity: 0.6;
}

/* Price display in cart */
main.py-5 .basket-max .text-22 {
    color: #22c55e !important;
    font-weight: 700 !important;
}

/* Sidebar summary */
main.py-5 .col-lg-3 .bg-dark-light {
    position: sticky;
    top: 100px;
}

main.py-5 .col-lg-3 .text-25 {
    color: #fff;
    font-size: 18px !important;
    font-weight: 700 !important;
}

main.py-5 .col-lg-3 .text-warning {
    color: rgba(251, 191, 36, 0.7) !important;
    font-size: 12px !important;
    font-weight: 400;
    background: rgba(251, 191, 36, 0.06);
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(251, 191, 36, 0.1);
    margin-bottom: 20px !important;
}

/* Discount code input */
main.py-5 .col-lg-3 .input-group {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 20px !important;
}

main.py-5 .col-lg-3 .input-group .input-group-text {
    background: rgba(255, 255, 255, 0.03) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 8px 12px !important;
}

main.py-5 .col-lg-3 .input-group .input-group-text img {
    width: 22px;
    height: 22px;
    opacity: 0.4;
}

main.py-5 .col-lg-3 .input-group .form-control {
    background: rgba(255, 255, 255, 0.03) !important;
    border: none !important;
    color: #fff !important;
    font-size: 13px !important;
    padding: 12px !important;
    border-radius: 0 !important;
}

main.py-5 .col-lg-3 .input-group .form-control::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

main.py-5 .col-lg-3 .input-group .btn.bg-red {
    border-radius: 0 !important;
    font-size: 12px !important;
    font-weight: 600;
    padding: 12px 16px !important;
    letter-spacing: 0.5px;
}

/* Summary rows */
main.py-5 .col-lg-3 .text-15 {
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px !important;
}

main.py-5 .col-lg-3 hr {
    border-color: rgba(255, 255, 255, 0.05) !important;
    opacity: 1;
}

/* Final price */
main.py-5 .col-lg-3 .text-18 {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px !important;
}

main.py-5 .col-lg-3 .text-32 {
    color: #22c55e !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px;
}

/* Checkout button */
main.py-5 .col-lg-3 a.btn.bg-red {
    font-size: 15px !important;
    font-weight: 600;
    padding: 14px !important;
    border-radius: 12px !important;
    letter-spacing: 0.2px;
    transition: all 0.25s;
}

main.py-5 .col-lg-3 a.btn.bg-red:hover {
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
    transform: translateY(-1px);
}

/* Empty cart */
main.py-5 .alert-warning {
    background: rgba(251, 191, 36, 0.06) !important;
    border: 1px solid rgba(251, 191, 36, 0.12) !important;
    color: rgba(251, 191, 36, 0.8) !important;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    padding: 16px 20px;
}

/* ============================================================
   OFFCANVAS CART SIDEBAR
   ============================================================ */

.offcanvas.bg-dark-light {
    background: #111820 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.offcanvas .offcanvas-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.offcanvas .offcanvas-header .text-20 {
    font-size: 16px !important;
    font-weight: 700;
}

.offcanvas .offcanvas-header .btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s;
}

.offcanvas .offcanvas-header .btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* === OFFCANVAS / MOBILE MENU === */
.offcanvas {
    background: rgba(11, 15, 20, 0.95) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.offcanvas.offcanvas-end {
    border-left: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-right: none !important;
}

.offcanvas-header {
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.offcanvas-header span {
    font-size: 16px !important;
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: 0.1em;
    color: #fff;
    text-transform: uppercase;
}

.offcanvas-header .btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    padding: 0;
    transition: all 0.3s ease;
}

.offcanvas-header .btn:hover {
    background: rgba(255, 56, 92, 0.1);
    color: #ff385c;
    border-color: rgba(255, 56, 92, 0.3);
    transform: rotate(90deg);
}

.offcanvas-body {
    padding: 24px 16px;
}

.theme-mob-menu .offcanvas-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Base styles for the list items inside the mobile menu */
.theme-mob-menu .offcanvas-body ul>li {
    margin-bottom: 8px;
}

.theme-mob-menu .offcanvas-body ul li a,
.theme-mob-menu .offcanvas-body ul li .bg-dark-light-2 {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 14px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Hover effect */
.theme-mob-menu .offcanvas-body ul li a:hover,
.theme-mob-menu .offcanvas-body ul li .bg-dark-light-2:hover {
    background: rgba(124, 58, 237, 0.08) !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
    color: #7c3aed !important;
    transform: translateX(4px);
}

/* Submenu items slight indentation */
.theme-mob-menu .offcanvas-body ul li ul {
    padding-left: 20px;
    margin-top: 8px;
}

.theme-mob-menu .offcanvas-body ul li ul li a {
    padding: 12px 20px;
    background: transparent !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-left: 2px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 0 !important;
}

.theme-mob-menu .offcanvas-body ul li ul li a:hover {
    border-left-color: #7c3aed !important;
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.05), transparent) !important;
    transform: none;
}

/* =====================================================
   BRAND POLISH – Violet ambient glow & accents (2026)
   ===================================================== */

/* Warmer dark-violet page backdrop matching the logo */
body {
    background:
        radial-gradient(1200px 600px at 85% -200px, rgba(124, 58, 237, 0.10), transparent 60%),
        radial-gradient(900px 500px at -10% 20%, rgba(91, 33, 182, 0.08), transparent 55%),
        #0a0711 !important;
    background-attachment: fixed;
}

/* Subtle violet inner glow ring on hero banner */
.hero-banner-wrapper {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(124, 58, 237, 0.12);
}

.hero-banner-wrapper:hover {
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(124, 58, 237, 0.28),
                0 0 40px rgba(124, 58, 237, 0.15);
}

/* Header bottom subtle violet accent line */
header.redesigned-header {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(124, 58, 237, 0.18);
}

/* Category bar — thin violet top highlight */
.category-bar {
    background: linear-gradient(180deg, #1e1b2e 0%, #1a1825 100%);
    border-top: 1px solid rgba(124, 58, 237, 0.18);
}

/* Section titles get a soft violet left-accent */
.section-header-simple .section-title,
.section-title {
    position: relative;
}

/* Product / game cards — refined violet resting glow */
.product-card,
.game-card {
    background: linear-gradient(180deg, #1a1629 0%, #130f20 100%);
}

/* Register button – violet outline style to pair with filled login (brand-cohesive) */
.btn-header-register {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(91, 33, 182, 0.12)) !important;
    border: 1px solid rgba(168, 85, 247, 0.45) !important;
    color: #ddd6fe !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.18) !important;
}

.btn-header-register:hover {
    background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45) !important;
}

/* Search bar — violet focus ring + subtle inner tone */
.header-search-wrap .input-group {
    background: rgba(30, 22, 50, 0.55);
    border: 2px solid rgba(124, 58, 237, 0.14);
}

.header-search-wrap .input-group:focus-within {
    border-color: #7c3aed;
    background: rgba(30, 22, 50, 0.75);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18);
}

/* Mobile search wrap echoing the same accent */
.mobile-search-wrap {
    background: rgba(30, 22, 50, 0.55) !important;
    border-color: rgba(124, 58, 237, 0.14) !important;
}

/* Bottom nav — subtle violet glow on the highlighted cart bubble */
.fp-mobile-bar-item-center .fp-mobile-bar-icon-big {
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.5), 0 0 0 4px rgba(124, 58, 237, 0.08);
}

/* Promo / social campaign banner — tinted violet gradient */
.social-campaign-banner {
    background: linear-gradient(135deg, #1b1530 0%, #150f25 100%);
    border: 1px solid rgba(124, 58, 237, 0.18);
}

/* Footer main — nebula brand texture + violet ambient corner */
.footer-main {
    background:
        linear-gradient(180deg, rgba(10, 7, 17, 0.85), rgba(10, 7, 17, 0.95)),
        url('../img/brand/bg-nebula.png') center center / cover no-repeat !important;
    background-attachment: local, fixed;
    position: relative;
}

.footer-main::after {
    background: radial-gradient(circle, rgba(124, 58, 237, 0.14) 0%, transparent 70%);
}

/* Pagination active pop */
.pagination .page-item.active .page-link {
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.45), 0 0 0 1px rgba(124, 58, 237, 0.4);
}

/* Auth-modal top shimmer line – violet */
.am-modal::before {
    background: linear-gradient(90deg, #a855f7, #7c3aed, #5b21b6, #7c3aed, #a855f7);
    opacity: 0.75;
}

/* Category bar active / hover text tint */
.category-item:hover {
    color: #c4b5fd !important;
    opacity: 1;
}

/* Mobile side menu header accent */
.theme-mob-menu .offcanvas-header {
    border-bottom: 1px solid rgba(124, 58, 237, 0.18) !important;
}

/* =====================================================
   ACCOUNT PANEL & RED→VIOLET OVERRIDES
   custom.css kırmızı-pembe (#FF195F) tonlarını marka moruna çekiyor
   ===================================================== */

/* Global utility overrides */
.bg-red {
    background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
    color: #fff !important;
}

.text-red,
.a-hover-red a:hover {
    color: #a855f7 !important;
}

.hover-red:hover {
    color: #7c3aed !important;
    background: #fff !important;
}

.border-red-3 {
    border: 3px solid #7c3aed !important;
}

.bg-pink {
    background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
}

/* text-primary pembesi (19b5ce aslında cyan'dı ama bazı yerlerde kullanılıyor) */
.text-primary {
    color: #a855f7 !important;
}

/* Fas fa-badge-check iç beyaz daire rengi — OK, kalsın ama etrafı mor olsun */
i.fas.fa-badge-check.ms-2.text-red {
    color: #7c3aed !important;
}

/* ---- Hesabım paneli (left sidebar) ---- */

/* Panel arka planı — koyu mor tona çek */
.panel.bg-dark-light {
    background: linear-gradient(180deg, #1a1529 0%, #13102a 100%) !important;
    border: 1px solid rgba(124, 58, 237, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* Avatar hexagon wrapper — kırmızı ışımadan mor ışımaya */
.profile-polygon {
    position: relative;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    background: linear-gradient(135deg, #a855f7, #7c3aed 50%, #5b21b6) !important;
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    filter: drop-shadow(0 10px 25px rgba(124, 58, 237, 0.45));
    padding: 5px;
}

.profile-polygon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    border-radius: 0 !important;
    background: #0a0711;
}

/* Sol panel menü liste */
.panel-left {
    list-style: none;
    padding: 0 10px 10px;
    margin: 0;
}

.panel-left li {
    margin: 6px 0;
    padding: 10px 0;
    border-radius: 12px;
    background: transparent;
    transition: all 0.25s ease;
    cursor: pointer;
    position: relative;
}

.panel-left li img {
    width: 22px;
    height: 22px;
    opacity: 0.6;
    transition: all 0.25s ease;
    filter: brightness(1.2);
}

.panel-left li:hover {
    background: rgba(124, 58, 237, 0.08);
}

.panel-left li:hover img {
    opacity: 0.9;
    transform: scale(1.05);
}

.panel-left li.active,
.panel-left li.active.bg-red {
    background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.panel-left li.active img {
    opacity: 1;
    filter: brightness(0) invert(1);
}

/* Son (çıkış) liste elemanı — yumuşatılmış kırmızı tonu */
.panel-left li:last-child {
    margin-top: 16px;
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.panel-left li:last-child:hover {
    background: linear-gradient(135deg, #dc2626, #991b1b) !important;
    border-color: transparent;
}

.panel-left li:last-child:hover img {
    filter: brightness(0) invert(1);
    opacity: 1;
}

/* Hesabım sayfa form başlıkları */
.account-section-title,
.hesabim-panel h4,
.hesabim-panel .fp.w6 {
    color: #e9d5ff !important;
}

/* Badge / etiket kırmızıları mora */
.pbadge-special {
    background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.4) !important;
}

.pbadge-new,
.badge-new {
    background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.35) !important;
}

/* Hero badge kırmızı → mor */
.hero-badge {
    background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35) !important;
}

/* Instagram handle ikon rengi — mor kalsın ama hover'da pembe kalabilir */
.social-campaign-handle i {
    color: #a855f7 !important;
}

/* Header'da notify badge kırmızı kalsın (bildirim için uyarıcı) ama ton yumuşatılmış */
.header-actions .btn-action-icon .badge-count {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.45);
}

/* ===== PRODUCT DETAY SAYFASI – VIOLET ACCENTS ===== */

/* Fiyat (büyük yeşil sayı) — marka moru */
.pd-price-big,
.pd-price-wrap .pd-price-big,
.pd-current-price {
    color: #a855f7 !important;
    text-shadow: 0 0 30px rgba(168, 85, 247, 0.35);
}

/* Breadcrumb current item hafif mor tint */
.pd-breadcrumb-nav span,
.pd-breadcrumb-nav .current {
    color: #c4b5fd !important;
}

/* Ürün gallery image çerçevesi */
.pd-main-image,
.product-gallery-main {
    border: 1px solid rgba(124, 58, 237, 0.18);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(124, 58, 237, 0.1);
}

/* ===== TOP UTILITY BAR POLISH ===== */
.top-utility-bar,
.topbar {
    background: linear-gradient(180deg, #0f0a1e 0%, #0a0711 100%) !important;
    border-bottom: 1px solid rgba(124, 58, 237, 0.12);
}

.top-utility-bar a,
.topbar a {
    opacity: 0.75;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.top-utility-bar a:hover,
.topbar a:hover {
    opacity: 1;
    color: #c4b5fd !important;
}

/* ===== CART ICON DELETE/CLOSE X — mora yumuşat ===== */
.btn-modal-close {
    background: rgba(124, 58, 237, 0.1) !important;
    border: 1px solid rgba(124, 58, 237, 0.25) !important;
    color: #c4b5fd !important;
}

.btn-modal-close:hover {
    background: rgba(124, 58, 237, 0.2) !important;
    border-color: #7c3aed !important;
    color: #fff !important;
}

/* ===== SWAL (Alert) butonları marka rengi ===== */
.swal2-icon.swal2-success {
    border-color: #10b981 !important;
    color: #10b981 !important;
}

.swal2-icon.swal2-info,
.swal2-icon.swal2-question {
    border-color: #7c3aed !important;
    color: #7c3aed !important;
}

.swal2-styled.swal2-confirm {
    background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line],
.swal2-icon.swal2-success .swal2-success-fix {
    display: none !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(16, 185, 129, 0.32) !important;
}

.swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: #10b981 !important;
}

.swal2-icon.swal2-success .swal2-success-line-tip {
    top: 2.75em !important;
    left: 1.05em !important;
    width: 1.55em !important;
}

.swal2-icon.swal2-success .swal2-success-line-long {
    top: 2.38em !important;
    right: 0.72em !important;
    width: 2.9em !important;
}

/* ===== PRODUCT CARD HOVER — daha belirgin mor glow ===== */
.product-card:hover,
.pl-card:hover {
    border-color: rgba(168, 85, 247, 0.4);
    box-shadow: 0 15px 35px rgba(124, 58, 237, 0.25), 0 0 0 1px rgba(168, 85, 247, 0.3);
}

/* ===== PL-CARD (oyun parası kartları) violet tags ===== */
.pl-tag-blue {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(91, 33, 182, 0.12)) !important;
    color: #c4b5fd !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
}

/* =====================================================
   OFL PRO THEME PASS
   Unified gaming marketplace skin for header, dropdowns,
   product surfaces, account panels, mobile and footer.
   ===================================================== */

:root {
    --ofl-bg: #070911;
    --ofl-bg-2: #0b1019;
    --ofl-panel: rgba(19, 27, 39, 0.92);
    --ofl-panel-2: rgba(24, 34, 49, 0.9);
    --ofl-panel-solid: #121b27;
    --ofl-line: rgba(158, 184, 255, 0.12);
    --ofl-line-strong: rgba(147, 106, 255, 0.34);
    --ofl-text: #f7f8ff;
    --ofl-muted: #96a3b8;
    --ofl-accent: #8b5cf6;
    --ofl-accent-2: #22d3ee;
    --ofl-good: #24e084;
    --ofl-warn: #ffcc66;
    --ofl-danger: #ff4d6d;
    --ofl-radius: 18px;
    --ofl-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
    --ofl-glow: 0 0 0 1px rgba(139, 92, 246, 0.22), 0 20px 48px rgba(139, 92, 246, 0.18);
}

html {
    scrollbar-color: var(--ofl-accent) #0b1019;
}

body {
    color: var(--ofl-text);
    background:
        radial-gradient(900px 420px at 18% -120px, rgba(34, 211, 238, 0.1), transparent 62%),
        radial-gradient(880px 520px at 88% 4%, rgba(139, 92, 246, 0.18), transparent 60%),
        linear-gradient(180deg, #080711 0%, #070911 42%, #0a0f16 100%) !important;
}

.container {
    width: calc(100% - 28px) !important;
    max-width: 1400px !important;
}

.top-utility-bar {
    background: rgba(7, 9, 17, 0.86) !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.16) !important;
    backdrop-filter: blur(18px);
}

header.redesigned-header {
    background:
        linear-gradient(180deg, rgba(21, 24, 29, 0.96), rgba(13, 17, 25, 0.94)) !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.22) !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.38) !important;
}

.header-main-row {
    gap: 26px;
}

.header-logo a {
    height: 72px;
}

.header-logo img {
    max-height: 72px;
    filter: drop-shadow(0 10px 24px rgba(139, 92, 246, 0.18));
}

.header-search-wrap .input-group,
.mobile-search-wrap {
    background:
        linear-gradient(180deg, rgba(23, 24, 38, 0.86), rgba(12, 15, 25, 0.86)) !important;
    border: 1px solid rgba(139, 92, 246, 0.35) !important;
    border-radius: 17px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 40px rgba(0, 0, 0, 0.18);
}

.header-search-wrap .input-group:focus-within,
.mobile-search-wrap:focus-within {
    border-color: rgba(34, 211, 238, 0.5) !important;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.08), 0 18px 46px rgba(139, 92, 246, 0.18) !important;
}

.header-actions .btn-action-icon,
.mobile-btn-menu,
.mobile-btn-icon {
    background: rgba(10, 13, 20, 0.78) !important;
    border: 1px solid rgba(158, 184, 255, 0.16) !important;
    color: #f4f6ff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 22px rgba(0, 0, 0, 0.28) !important;
}

.header-actions .btn-action-icon:hover,
.mobile-btn-menu:hover,
.mobile-btn-icon:hover {
    background: rgba(139, 92, 246, 0.14) !important;
    border-color: rgba(139, 92, 246, 0.55) !important;
    color: #fff !important;
    box-shadow: var(--ofl-glow) !important;
}

.header-actions .btn-action-icon .badge-count,
.fp-mobile-bar-badge {
    background: linear-gradient(135deg, var(--ofl-danger), #d61f4b) !important;
    border-color: #111827 !important;
}

.header-actions .btn-action-icon .badge-cart {
    background: linear-gradient(135deg, var(--ofl-good), #11a761) !important;
}

.category-bar {
    background: linear-gradient(180deg, rgba(26, 24, 42, 0.96), rgba(18, 17, 31, 0.96)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.24) !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
}

.category-item {
    border-radius: 13px;
    padding: 7px 10px;
    color: rgba(247, 248, 255, 0.9) !important;
}

.category-item:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.045);
    color: #fff !important;
}

.cat-icon-glow,
.category-all-mark,
.category-item-icon {
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.category-submenu {
    background: rgba(14, 19, 29, 0.98) !important;
    border: 1px solid rgba(139, 92, 246, 0.26) !important;
    border-radius: 18px !important;
    padding: 14px !important;
    box-shadow: var(--ofl-shadow) !important;
}

.category-submenu-link:hover,
.category-submenu-title:hover {
    background: rgba(139, 92, 246, 0.12) !important;
}

.theme-dropdown-menu {
    margin-top: 14px !important;
    min-width: 310px !important;
    padding: 10px !important;
    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(20, 29, 43, 0.98), rgba(10, 14, 22, 0.98)) !important;
    border: 1px solid rgba(139, 92, 246, 0.34) !important;
    border-top: 1px solid rgba(139, 92, 246, 0.52) !important;
    border-radius: 20px !important;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(255, 255, 255, 0.03) !important;
    overflow: hidden;
}

.theme-dropdown-menu::before {
    top: -18px !important;
    height: 18px !important;
}

.theme-dropdown-menu li {
    list-style: none;
}

.theme-dropdown-menu li a {
    display: flex !important;
    align-items: center;
    gap: 11px;
    padding: 12px 13px !important;
    border-radius: 13px;
    color: rgba(245, 247, 255, 0.82) !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none !important;
}

.theme-dropdown-menu li a i {
    width: 19px;
    text-align: center;
    color: #a78bfa;
    font-size: 16px;
}

.theme-dropdown-menu li a:hover {
    background: rgba(139, 92, 246, 0.13) !important;
    color: #fff !important;
    transform: translateX(2px);
}

.theme-dropdown-menu li a:active {
    background: rgba(34, 211, 238, 0.15) !important;
}

.epin-user-menu-head {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 16px;
    background:
        radial-gradient(circle at top right, rgba(139, 92, 246, 0.28), transparent 50%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.epin-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--ofl-accent), #5b21b6);
    box-shadow: 0 12px 28px rgba(139, 92, 246, 0.32);
}

.epin-user-avatar img,
.btn-action-avatar img,
.mobile-btn-avatar img,
.mobile-menu-user-icon img,
.fp-mobile-bar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.btn-action-avatar,
.mobile-btn-avatar {
    overflow: hidden;
    padding: 3px !important;
}

.btn-action-avatar img,
.mobile-btn-avatar img {
    border-radius: 13px;
}

.epin-user-copy span {
    display: block;
    color: var(--ofl-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.epin-user-copy strong {
    display: block;
    color: #fff;
    font-size: 16px;
    line-height: 1.25;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.epin-user-balance a {
    justify-content: space-between;
    background: rgba(36, 224, 132, 0.09) !important;
    border: 1px solid rgba(36, 224, 132, 0.18);
    color: #d7ffe9 !important;
}

.epin-user-balance a span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.epin-user-balance strong {
    color: var(--ofl-good);
    font-size: 15px;
    font-weight: 900;
}

.epin-user-menu-divider hr {
    margin: 8px 4px;
    border-color: rgba(255, 255, 255, 0.08);
    opacity: 1;
}

.epin-user-logout {
    color: #ffd6dd !important;
    background: rgba(255, 77, 109, 0.08) !important;
}

.epin-user-logout i {
    color: var(--ofl-danger) !important;
}

.hero-banner-wrapper,
.social-campaign-banner,
.curated-category-head,
.product-card,
.pl-card-inner,
.pd-wrapper,
.footer-feature-card,
.panel.bg-dark-light,
.footer-area {
    background:
        radial-gradient(circle at top right, rgba(139, 92, 246, 0.13), transparent 36%),
        linear-gradient(180deg, var(--ofl-panel), rgba(13, 19, 30, 0.94)) !important;
    border: 1px solid var(--ofl-line) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}

.hero-banner-wrapper,
.product-card,
.pl-card-inner,
.curated-category-head {
    border-color: rgba(139, 92, 246, 0.2) !important;
}

.hero-banner-wrapper:hover,
.product-card:hover,
.pl-card:hover .pl-card-inner {
    border-color: rgba(34, 211, 238, 0.32) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.36), 0 0 34px rgba(139, 92, 246, 0.18) !important;
}

.social-campaign-banner {
    border-radius: 18px;
}

.social-campaign-icon {
    border-radius: 15px;
    box-shadow: 0 14px 30px rgba(255, 77, 109, 0.26);
}

.social-campaign-btn,
.curated-category-view,
.section-view-all,
.btn-header-login,
.btn-header-register,
.pd-btn-cart,
.pl-action-cart,
.bg-red {
    background: linear-gradient(135deg, var(--ofl-accent), #6d28d9 58%, #5b21b6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 14px 30px rgba(139, 92, 246, 0.26) !important;
}

.social-campaign-btn:hover,
.curated-category-view:hover,
.section-view-all:hover,
.pd-btn-cart:hover,
.pl-action-cart:hover,
.bg-red:hover {
    box-shadow: 0 18px 40px rgba(139, 92, 246, 0.38) !important;
}

.quick-cat-item {
    background: linear-gradient(180deg, rgba(25, 34, 48, 0.96), rgba(14, 20, 31, 0.96)) !important;
    border: 1px solid rgba(158, 184, 255, 0.13) !important;
    border-radius: 15px;
}

.quick-cat-item:hover {
    border-color: rgba(34, 211, 238, 0.28) !important;
    box-shadow: 0 18px 38px rgba(34, 211, 238, 0.08), 0 12px 34px rgba(139, 92, 246, 0.16) !important;
}

.curated-category-title-wrap h2,
.section-header h2 {
    letter-spacing: -0.04em;
}

.product-card {
    border-radius: 18px;
}

.product-card-img {
    background:
        radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.18), transparent 42%),
        radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.26), transparent 45%),
        #090c14 !important;
}

.product-card-body {
    background: linear-gradient(180deg, rgba(21, 17, 33, 0.92), rgba(13, 13, 23, 0.96));
}

.product-card-cat {
    color: #a78bfa !important;
    letter-spacing: 0.12em;
}

.product-card-title,
.pl-card-name {
    font-weight: 800 !important;
}

.price-current,
.pl-card-price-main,
.pd-price-current,
.pd-price-big,
.pd-current-price {
    color: var(--ofl-good) !important;
    text-shadow: 0 0 26px rgba(36, 224, 132, 0.24);
}

.pbadge-featured,
.pbadge-sale,
.pl-tag-green {
    background: linear-gradient(135deg, var(--ofl-good), #12a867) !important;
    color: #062016 !important;
    box-shadow: 0 8px 18px rgba(36, 224, 132, 0.25) !important;
}

.pl-list-section {
    padding-top: 10px;
}

.pl-card-inner {
    min-height: 154px;
    padding: 16px 18px;
}

.pl-card-num {
    color: rgba(151, 164, 190, 0.26);
    font-size: 15px;
}

.pl-card-image {
    border-radius: 14px;
    border-color: rgba(139, 92, 246, 0.26);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

.pd-qty {
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(158, 184, 255, 0.16) !important;
    border-radius: 14px !important;
}

.pd-qty .btn,
.pd-qty input {
    color: #f7f8ff !important;
}

.pd-actions .pd-btn-cart {
    min-height: 54px !important;
    height: 54px !important;
    padding: 0 24px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.pd-actions .pd-btn-cart i {
    font-size: 18px;
}

.pl-action-detail {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(158, 184, 255, 0.14) !important;
}

.pl-action-disabled,
.pd-btn-disabled {
    background: rgba(107, 119, 140, 0.14) !important;
    border: 1px solid rgba(158, 184, 255, 0.08) !important;
}

.footer-features {
    background:
        radial-gradient(720px 260px at 50% 0%, rgba(34, 211, 238, 0.08), transparent 64%),
        #090e15 !important;
}

.footer-main {
    background: linear-gradient(180deg, #090711, #090e15) !important;
}

.footer-brand-copy h3,
.footer-panel-kicker,
.footer-menu-title {
    color: #fff !important;
}

.footer-brand-copy p,
.footer-menu a,
.footer-contact-item span,
.ff-content p {
    color: rgba(220, 228, 243, 0.62) !important;
}

.panel-left-open {
    filter: drop-shadow(30px 0 70px rgba(0, 0, 0, 0.5)) !important;
}

.panel-left-open-content {
    background: rgba(14, 21, 31, 0.96);
    border: 1px solid rgba(139, 92, 246, 0.18);
}

.panel-left-open-content li > a {
    background: transparent !important;
    color: rgba(247, 248, 255, 0.88) !important;
}

.panel-left-open-content li.active,
.panel-left-open-content li:hover {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.18), rgba(34, 211, 238, 0.04)) !important;
    border-left-color: var(--ofl-accent) !important;
}

.profile-polygon .bg-red-linear {
    background: linear-gradient(135deg, var(--ofl-danger), #9f1239) !important;
}

.offcanvas {
    background:
        radial-gradient(circle at top left, rgba(139, 92, 246, 0.16), transparent 42%),
        rgba(12, 18, 28, 0.97) !important;
    border-color: rgba(139, 92, 246, 0.24) !important;
}

.theme-mob-menu .offcanvas-body ul li a,
.theme-mob-menu .offcanvas-body ul li .bg-dark-light-2 {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: rgba(158, 184, 255, 0.1) !important;
    border-radius: 14px !important;
}

.theme-mob-menu .offcanvas-body ul li a:hover,
.theme-mob-menu .offcanvas-body ul li .bg-dark-light-2:hover {
    color: #fff !important;
    border-color: rgba(34, 211, 238, 0.24) !important;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.18), rgba(34, 211, 238, 0.06)) !important;
}

.fp-mobile-bar {
    height: 70px;
    background: rgba(10, 12, 16, 0.88) !important;
    border-top: 1px solid rgba(139, 92, 246, 0.28) !important;
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.42) !important;
}

.fp-mobile-bar-item.active,
.fp-mobile-bar-item:hover {
    color: #c4b5fd !important;
}

.fp-mobile-bar-item-center .fp-mobile-bar-icon-big {
    background: linear-gradient(135deg, var(--ofl-accent), #6d28d9) !important;
    border-color: rgba(10, 12, 16, 0.94) !important;
    box-shadow: 0 12px 30px rgba(139, 92, 246, 0.5), 0 0 0 6px rgba(139, 92, 246, 0.12) !important;
}

.to-up {
    background: linear-gradient(135deg, var(--ofl-accent), #6d28d9) !important;
    box-shadow: 0 12px 32px rgba(139, 92, 246, 0.42) !important;
}

@media (max-width: 991.98px) {
    body {
        padding-bottom: 76px;
    }

    header.redesigned-header {
        padding: 10px 0 12px !important;
    }

    .mobile-header-logo img {
        max-height: 52px;
    }

    .hero-section {
        padding-top: 12px;
    }

    .hero-banner-wrapper {
        border-radius: 18px;
    }

    .social-campaign-banner,
    .curated-category-head {
        border-radius: 16px;
    }

    .quick-categories {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .quick-categories::-webkit-scrollbar {
        display: none;
    }

    .quick-cat-item {
        flex: 0 0 auto;
        min-width: 124px;
        justify-content: center;
        padding: 12px 14px;
    }

    .product-card {
        border-radius: 16px;
    }

    .product-card-body {
        padding: 14px;
    }

    .product-card-title {
        font-size: 13px;
        min-height: 38px;
    }

    .pl-card-inner {
        display: grid;
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 14px;
        min-height: auto;
    }

    .pl-card-num {
        display: none;
    }

    .pl-card-image {
        width: 84px;
        height: 116px;
        grid-row: span 4;
    }

    .pl-card-price,
    .pl-card-qty,
    .pl-card-actions {
        min-width: 0;
        width: 100%;
        text-align: left;
    }

    .pl-card-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .theme-dropdown-menu {
        right: 0;
        min-width: 0 !important;
        width: calc(100vw - 28px) !important;
        max-width: 310px !important;
    }
}

@media (max-width: 575.98px) {
    .container {
        width: calc(100% - 24px) !important;
    }

    .social-campaign-banner {
        align-items: stretch;
    }

    .social-campaign-left {
        min-width: 0;
    }

    .social-campaign-btn {
        padding-inline: 16px;
    }

    .curated-category-title-wrap h2 {
        font-size: 16px;
    }

    .curated-category-view {
        min-width: 94px;
        padding: 9px 12px;
    }
}

/* =====================================================
   Dropdown stability and premium mobile menu
   ===================================================== */

.header-actions .theme-dropdown {
    position: relative;
    padding-bottom: 18px;
    margin-bottom: -18px;
}

.header-actions .theme-dropdown::after {
    content: '';
    position: absolute;
    left: -14px;
    right: -14px;
    top: 42px;
    height: 30px;
    pointer-events: auto;
}

.header-actions .theme-dropdown > .btn-action-icon {
    position: relative;
    z-index: 2;
}

.header-actions .theme-dropdown .theme-dropdown-menu {
    top: calc(100% - 2px) !important;
    margin-top: 0 !important;
    right: 0;
    z-index: 1200;
}

.theme-dropdown:hover .theme-dropdown-menu,
.theme-dropdown .theme-dropdown-menu:hover,
.theme-dropdown:focus-within .theme-dropdown-menu {
    display: block !important;
}

.theme-mob-menu.offcanvas {
    width: 84vw;
    max-width: 410px;
    background:
        radial-gradient(320px 220px at 12% 0%, rgba(34, 211, 238, 0.18), transparent 68%),
        radial-gradient(420px 260px at 100% 18%, rgba(139, 92, 246, 0.22), transparent 72%),
        linear-gradient(180deg, rgba(14, 24, 38, 0.98), rgba(9, 14, 22, 0.99)) !important;
    border-right: 1px solid rgba(34, 211, 238, 0.22) !important;
    box-shadow: 30px 0 80px rgba(0, 0, 0, 0.56);
}

.theme-mob-menu .offcanvas-header {
    padding: 22px 22px 18px;
    border-bottom: 1px solid rgba(158, 184, 255, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
}

.theme-mob-menu .offcanvas-header span {
    font-size: 18px !important;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.theme-mob-menu .offcanvas-header small {
    display: block;
    margin-top: 5px;
    color: rgba(220, 228, 243, 0.58);
    font-size: 12px;
    font-weight: 600;
}

.theme-mob-menu .offcanvas-header .btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(158, 184, 255, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.theme-mob-menu .offcanvas-header .btn:hover {
    color: #fff !important;
    background: rgba(255, 77, 109, 0.16) !important;
    border-color: rgba(255, 77, 109, 0.3) !important;
}

.theme-mob-menu .offcanvas-body {
    padding: 18px 16px 28px;
}

.mobile-menu-brand {
    display: grid;
    gap: 14px;
    margin-bottom: 16px;
}

.mobile-menu-logo {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 190px;
    min-height: 54px;
}

.mobile-menu-logo img {
    max-width: 190px;
    max-height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 12px 26px rgba(139, 92, 246, 0.22));
}

.mobile-menu-user {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border-radius: 18px;
    color: #fff !important;
    text-decoration: none !important;
    background:
        radial-gradient(circle at top right, rgba(36, 224, 132, 0.14), transparent 48%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
    border: 1px solid rgba(158, 184, 255, 0.14);
}

.mobile-menu-user-icon {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ofl-accent), #5b21b6);
    box-shadow: 0 12px 26px rgba(139, 92, 246, 0.28);
}

.mobile-menu-user-icon img {
    border-radius: 14px;
}

.fp-mobile-bar-avatar {
    overflow: hidden;
    padding: 2px;
}

.fp-mobile-bar-avatar img {
    border-radius: 10px;
}

.mobile-menu-user-copy {
    min-width: 0;
}

.mobile-menu-user-copy small,
.mobile-menu-section-title {
    display: block;
    color: rgba(220, 228, 243, 0.58);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mobile-menu-user-copy strong {
    display: block;
    margin-top: 2px;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-menu-user-balance {
    padding: 7px 9px;
    border-radius: 999px;
    color: #0b1d14;
    background: linear-gradient(135deg, var(--ofl-good), #11b86d);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.mobile-menu-auth,
.mobile-menu-quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mobile-menu-auth a,
.mobile-menu-quick a {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 15px;
    color: #fff !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(158, 184, 255, 0.12);
    font-size: 13px;
    font-weight: 900;
}

.mobile-menu-auth a:first-child,
.mobile-menu-quick a:first-child {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(34, 211, 238, 0.08));
    border-color: rgba(139, 92, 246, 0.3);
}

.mobile-menu-quick {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 18px;
}

.mobile-menu-quick a {
    min-height: 66px;
    flex-direction: column;
    gap: 7px;
}

.mobile-menu-quick i {
    font-size: 18px;
    color: #a78bfa;
}

.mobile-menu-quick span {
    font-size: 11px;
}

.mobile-menu-section-title {
    margin: 4px 4px 10px;
}

.theme-mob-menu .mobile-menu-list {
    display: grid !important;
    gap: 9px;
}

.theme-mob-menu .mobile-menu-list > li {
    margin: 0 !important;
}

.theme-mob-menu .mobile-menu-list > li > a,
.theme-mob-menu .mobile-menu-list > li > .bg-dark-light-2 {
    position: relative;
    min-height: 52px;
    padding: 0 44px 0 16px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.028)) !important;
    border: 1px solid rgba(158, 184, 255, 0.13) !important;
    border-radius: 16px !important;
    color: rgba(247, 248, 255, 0.92) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.theme-mob-menu .mobile-menu-list > li > a::before,
.theme-mob-menu .mobile-menu-list > li > .bg-dark-light-2::before {
    content: '';
    width: 7px;
    height: 7px;
    margin-right: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ofl-accent), var(--ofl-accent-2));
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.6);
}

.theme-mob-menu .mobile-menu-list > li > a::after,
.theme-mob-menu .mobile-menu-list > li > .bg-dark-light-2::after {
    content: '\f054';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    position: absolute;
    right: 17px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(220, 228, 243, 0.38);
    font-size: 12px;
}

.theme-mob-menu .mobile-menu-list > li > a:hover,
.theme-mob-menu .mobile-menu-list > li > .bg-dark-light-2:hover {
    transform: translateX(3px);
    border-color: rgba(34, 211, 238, 0.28) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22), 0 0 28px rgba(139, 92, 246, 0.13);
}

@media (max-width: 575.98px) {
    .theme-mob-menu.offcanvas {
        width: 78vw;
        max-width: 400px;
    }

    .theme-mob-menu .offcanvas-header {
        padding: 20px 18px 16px;
    }

    .theme-mob-menu .offcanvas-body {
        padding: 16px 14px 24px;
    }

    .mobile-menu-quick {
        gap: 8px;
    }

    .mobile-menu-quick a {
        min-height: 62px;
    }
}

/* =====================================================
   Account dashboard pages
   Applies to every /hesabim section through sidebar marker.
   ===================================================== */

.account-sidebar-col {
    position: relative;
    z-index: 8;
}

.account-sidebar-col ~ [class*="col-"] {
    min-width: 0;
}

.account-sidebar-col ~ [class*="col-"] > .bg-dark-light,
.account-sidebar-col ~ [class*="col-"] > form > .bg-dark-light,
.account-sidebar-col ~ [class*="col-"] .bg-dark-light.r25,
.account-sidebar-col ~ [class*="col-"] .bg-dark-light.r12 {
    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(18, 27, 40, 0.96), rgba(12, 18, 28, 0.97)) !important;
    border: 1px solid rgba(158, 184, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}

.account-sidebar-col ~ [class*="col-"] > .bg-dark-light.px-3.py-4,
.account-sidebar-col ~ [class*="col-"] > .bg-dark-light.p-3 {
    position: relative;
    overflow: hidden;
}

.account-sidebar-col ~ [class*="col-"] > .bg-dark-light.px-3.py-4 {
    background:
        linear-gradient(90deg, rgba(139, 92, 246, 0.18), rgba(34, 211, 238, 0.07)),
        rgba(16, 24, 36, 0.96) !important;
    border-color: rgba(139, 92, 246, 0.24) !important;
    margin-bottom: 12px !important;
}

.account-sidebar-col ~ [class*="col-"] > .bg-dark-light.px-3.py-4 span {
    color: rgba(232, 238, 252, 0.78) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.account-sidebar-col ~ [class*="col-"] > .bg-dark-light.p-3 {
    margin-bottom: 12px !important;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.account-sidebar-col ~ [class*="col-"] > .bg-dark-light.p-3:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 211, 238, 0.24) !important;
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.32), 0 0 28px rgba(139, 92, 246, 0.12);
}

.account-sidebar-col ~ [class*="col-"] .row.align-items-center {
    min-height: 64px;
}

.account-sidebar-col ~ [class*="col-"] .row.align-items-center [class*="col-"] > span {
    min-height: 38px;
    color: rgba(246, 248, 255, 0.88);
    line-height: 1.45;
}

.account-sidebar-col ~ [class*="col-"] .row.align-items-center .d-xl-none {
    color: #a78bfa !important;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.account-sidebar-col ~ [class*="col-"] .bg-dark-light-2 {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(158, 184, 255, 0.1);
    color: #fff !important;
}

.account-sidebar-col ~ [class*="col-"] .btn.bg-red,
.account-sidebar-col ~ [class*="col-"] button.bg-red,
.account-sidebar-col ~ [class*="col-"] a.bg-red {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px !important;
    padding-inline: 16px !important;
    font-weight: 800 !important;
}

.account-sidebar-col ~ [class*="col-"] .alert {
    margin: 0 !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 11px;
    font-weight: 800;
}

.account-sidebar-col ~ [class*="col-"] .alert-warning {
    background: rgba(255, 204, 102, 0.12) !important;
    color: #ffd98a !important;
}

.account-sidebar-col ~ [class*="col-"] .alert-success,
.account-sidebar-col ~ [class*="col-"] .alert-primary {
    background: rgba(36, 224, 132, 0.12) !important;
    color: #74f5b2 !important;
}

.account-sidebar-col ~ [class*="col-"] .alert-danger {
    background: rgba(255, 77, 109, 0.12) !important;
    color: #ff9aac !important;
}

.account-sidebar-col ~ [class*="col-"] .form-control,
.account-sidebar-col ~ [class*="col-"] .form-select,
.account-sidebar-col ~ [class*="col-"] textarea,
.account-sidebar-col ~ [class*="col-"] select {
    min-height: 50px;
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(158, 184, 255, 0.12) !important;
    border-radius: 14px !important;
    color: #fff !important;
    letter-spacing: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.account-sidebar-col ~ [class*="col-"] textarea {
    min-height: 128px;
}

.account-sidebar-col ~ [class*="col-"] .form-control:focus,
.account-sidebar-col ~ [class*="col-"] .form-select:focus,
.account-sidebar-col ~ [class*="col-"] textarea:focus {
    border-color: rgba(34, 211, 238, 0.38) !important;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.08) !important;
}

.account-sidebar-col ~ [class*="col-"] ::placeholder {
    color: rgba(220, 228, 243, 0.42) !important;
}

.account-sidebar-col ~ [class*="col-"] .text-secondary {
    color: rgba(220, 228, 243, 0.52) !important;
}

.account-sidebar-col ~ [class*="col-"] .check-true,
.account-sidebar-col ~ [class*="col-"] .check-false {
    width: 38px;
    height: 38px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
}

.account-sidebar-col ~ [class*="col-"] .check-true {
    background: linear-gradient(135deg, var(--ofl-good), #12a867) !important;
}

.account-sidebar-col ~ [class*="col-"] .check-false {
    background: linear-gradient(135deg, var(--ofl-danger), #d61f4b) !important;
}

.account-sidebar-col ~ [class*="col-"] u {
    text-decoration: none;
    font-weight: 800;
}

.account-sidebar-col ~ [class*="col-"] > ul.d-flex,
.account-sidebar-col ~ [class*="col-"] ul.d-flex.align-items-center.py-4 {
    gap: 7px;
}

.account-sidebar-col ~ [class*="col-"] ul.d-flex.align-items-center.py-4 i.fa-circle {
    width: 10px;
    height: 10px;
    margin: 0 !important;
    border-radius: 50%;
    color: rgba(158, 184, 255, 0.18) !important;
}

.account-sidebar-col ~ [class*="col-"] ul.d-flex.align-items-center.py-4 i.text-red {
    color: var(--ofl-accent) !important;
    filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.7));
}

.account-sidebar-col .panel.bg-dark-light {
    width: 88px;
    max-width: 88px;
    padding: 18px 0 14px !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at top, rgba(139, 92, 246, 0.22), transparent 46%),
        linear-gradient(180deg, rgba(16, 24, 36, 0.96), rgba(10, 15, 23, 0.98)) !important;
    border: 1px solid rgba(158, 184, 255, 0.14);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}

.account-sidebar-col .panel.bg-dark-light > .profile-polygon {
    width: 62px !important;
    height: 62px !important;
    margin-bottom: 18px !important;
}

.account-sidebar-col .profile-polygon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

.account-sidebar-col .panel-left {
    padding: 0 9px 10px;
}

.account-sidebar-col .panel-left li {
    width: 52px;
    height: 52px;
    margin-bottom: 8px;
    border-radius: 16px;
    border: 1px solid transparent;
}

.account-sidebar-col .panel-left li:hover {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.22);
}

.account-sidebar-col .panel-left li.active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.95), rgba(91, 33, 182, 0.95)) !important;
    border-color: rgba(255, 255, 255, 0.14);
}

.account-sidebar-col .panel-left li:last-child {
    background: rgba(255, 77, 109, 0.1) !important;
    border-color: rgba(255, 77, 109, 0.2);
}

.account-sidebar-col .panel-left img,
.account-sidebar-col .panel-left-open-content img,
.account-sidebar-col .navbar-nav img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.82;
}

.account-sidebar-col .panel-left-open {
    min-width: 326px;
    padding: 22px 0 0;
    border-radius: 24px !important;
    overflow: hidden;
    background:
        radial-gradient(360px 220px at 20% 0%, rgba(34, 211, 238, 0.14), transparent 66%),
        linear-gradient(180deg, rgba(16, 24, 36, 0.98), rgba(8, 13, 21, 0.99)) !important;
    border: 1px solid rgba(139, 92, 246, 0.22);
    box-shadow: 34px 0 78px rgba(0, 0, 0, 0.5), 0 0 34px rgba(139, 92, 246, 0.13);
}

.account-sidebar-col .panel-left-open .profile-polygon {
    width: 118px !important;
    height: 118px !important;
    margin-bottom: 16px !important;
}

.account-sidebar-col .panel-left-open > span {
    color: #fff !important;
}

.account-sidebar-col .panel-left-open > span:nth-of-type(2),
.account-sidebar-col .panel-left-open > span:nth-of-type(3) {
    color: rgba(220, 228, 243, 0.62) !important;
}

.account-sidebar-col .panel-left-open-content {
    display: grid;
    gap: 4px;
    padding: 12px;
    margin-top: 16px;
    background: rgba(4, 8, 14, 0.28);
    border-top: 1px solid rgba(158, 184, 255, 0.1);
}

.account-sidebar-col .panel-left-open-content li,
.account-sidebar-col .panel-left-open-content li:last-child {
    margin: 0 !important;
    height: auto !important;
    border-radius: 14px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
}

.account-sidebar-col .panel-left-open-content li > a {
    min-width: 0 !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 14px !important;
    color: rgba(247, 248, 255, 0.84) !important;
    font-weight: 800 !important;
}

.account-sidebar-col .panel-left-open-content li.active > a,
.account-sidebar-col .panel-left-open-content li:hover > a {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.28), rgba(34, 211, 238, 0.08)) !important;
}

.account-sidebar-col .panel-left-open-content li:last-child > a {
    color: #ffd6dd !important;
    background: rgba(255, 77, 109, 0.1) !important;
}

.account-sidebar-col .navbar {
    padding: 12px !important;
    border: 1px solid rgba(158, 184, 255, 0.12);
    background:
        radial-gradient(circle at top right, rgba(139, 92, 246, 0.18), transparent 48%),
        rgba(14, 22, 34, 0.96) !important;
}

.account-sidebar-col .navbar .container-fluid {
    gap: 12px;
}

.account-sidebar-col .navbar-brand {
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 900 !important;
}

.mobile-panel-profile-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 12px;
    padding: 10px;
    border-radius: 18px;
    color: #fff !important;
    text-decoration: none !important;
    background:
        radial-gradient(circle at top right, rgba(139, 92, 246, 0.28), transparent 48%),
        linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035));
    border: 1px solid rgba(139, 92, 246, 0.22);
}

.mobile-panel-profile-avatar {
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: 16px;
    background: #0b1220;
    border: 2px solid rgba(139, 92, 246, 0.42);
}

.mobile-panel-profile-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.mobile-panel-profile-copy {
    min-width: 0;
}

.mobile-panel-profile-copy small,
.mobile-panel-profile-copy strong {
    display: block;
}

.mobile-panel-profile-copy small {
    color: rgba(220, 228, 243, 0.58);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mobile-panel-profile-copy strong {
    margin-top: 2px;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-panel-profile-balance {
    padding: 7px 9px;
    border-radius: 999px;
    color: #25f08f;
    background: rgba(36, 224, 132, 0.1);
    border: 1px solid rgba(36, 224, 132, 0.18);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.account-sidebar-col .navbar-collapse {
    padding-top: 12px !important;
}

.account-sidebar-col .navbar-nav {
    display: grid;
    gap: 8px;
    width: 100%;
}

.account-sidebar-col .navbar-nav .nav-link {
    min-height: 48px;
    padding: 0 14px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(158, 184, 255, 0.1);
    color: rgba(247, 248, 255, 0.84) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.account-sidebar-col .navbar-nav .nav-link.active,
.account-sidebar-col .navbar-nav .nav-item.active .nav-link {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.28), rgba(34, 211, 238, 0.08)) !important;
    color: #fff !important;
    border-color: rgba(139, 92, 246, 0.28);
}

.message-list {
    padding: 0 12px 78px;
}

.message-list li {
    border: 1px solid rgba(158, 184, 255, 0.1) !important;
    border-radius: 16px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.035);
}

.message-list li.bg-dark-light-2 {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.18), rgba(34, 211, 238, 0.06)) !important;
    border-color: rgba(139, 92, 246, 0.28) !important;
}

.messages .me div > div {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.85), rgba(91, 33, 182, 0.9)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.messages .you div > div {
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(158, 184, 255, 0.12) !important;
}

.message-write {
    border-color: rgba(158, 184, 255, 0.12) !important;
}

.message-write form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.message-write .message-input {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

.message-write button.send-button {
    width: 48px !important;
    min-width: 48px;
    height: 48px !important;
}

@media (max-width: 1199.98px) {
    .account-sidebar-col ~ [class*="col-"] > .bg-dark-light.p-3 .row.align-items-center,
    .account-sidebar-col ~ [class*="col-"] > .bg-dark-light.p-3.r12 .row.align-items-center {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        text-align: left !important;
    }

    .account-sidebar-col ~ [class*="col-"] > .bg-dark-light.p-3 .row.align-items-center > [class*="col-"] {
        width: 100%;
        margin-bottom: 0 !important;
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(158, 184, 255, 0.08);
    }
}

@media (max-width: 991.98px) {
    .account-sidebar-col {
        margin-bottom: 16px;
    }
}

@media (max-width: 575.98px) {
    .account-sidebar-col ~ [class*="col-"] > .bg-dark-light.p-3 .row.align-items-center,
    .account-sidebar-col ~ [class*="col-"] > .bg-dark-light.p-3.r12 .row.align-items-center {
        grid-template-columns: 1fr;
    }

    .account-sidebar-col ~ [class*="col-"] .row.align-items-center [class*="col-"] > span {
        font-size: 13px !important;
    }

    .account-sidebar-col ~ [class*="col-"] .bg-dark-light.r25,
    .account-sidebar-col ~ [class*="col-"] .bg-dark-light.r12 {
        border-radius: 16px !important;
    }

    .message-write .d-flex {
        padding-inline: 0 !important;
    }
}

/* Mobile category drawer text fix */
.theme-mob-menu .mobile-menu-list > li > a,
.theme-mob-menu .mobile-menu-list > li > .bg-dark-light-2 {
    height: auto !important;
    min-height: 56px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: anywhere;
    text-align: left;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.theme-mob-menu .mobile-menu-list > li > a::before,
.theme-mob-menu .mobile-menu-list > li > .bg-dark-light-2::before {
    flex: 0 0 7px;
}

/* Typography alignment polish */
.fp,
.fr,
.fn,
.account-sidebar-col,
.theme-mob-menu,
.theme-mob-menu .offcanvas-title,
.theme-mob-menu .mobile-menu-section-title,
.theme-mob-menu .mobile-menu-list > li > a,
.theme-mob-menu .mobile-menu-list > li > .bg-dark-light-2,
.account-sidebar-col .panel-left-open-content li > a,
.account-sidebar-col .theme-user-panel .user-name,
.account-sidebar-col .theme-user-panel .user-balance {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-synthesis: none;
}

.account-sidebar-col .fal,
.account-sidebar-col .far,
.account-sidebar-col .fas,
.account-sidebar-col .fab,
.theme-mob-menu .fal,
.theme-mob-menu .far,
.theme-mob-menu .fas,
.theme-mob-menu .fab {
    font-family: "Font Awesome 5 Pro" !important;
}

.account-sidebar-col .fas,
.theme-mob-menu .fas {
    font-weight: 900 !important;
}

.account-sidebar-col .far,
.theme-mob-menu .far {
    font-weight: 400 !important;
}

.account-sidebar-col .fal,
.theme-mob-menu .fal {
    font-weight: 300 !important;
}

@media (min-width: 992px) {
    .account-sidebar-col .theme-left-menu {
        padding: 12px 0 !important;
        overflow: hidden;
    }

    .account-sidebar-col .panel-left-open-content ul {
        display: flex !important;
        flex-direction: column;
        gap: 5px;
        padding: 8px 12px 14px !important;
    }

    .account-sidebar-col .panel-left-open-content li {
        margin: 0 !important;
    }

    .account-sidebar-col .panel-left-open-content li > a {
        position: relative;
        display: flex !important;
        align-items: center !important;
        gap: 14px;
        width: 100%;
        min-height: 54px;
        padding: 0 16px !important;
        border: 1px solid transparent;
        border-radius: 13px;
        color: rgba(245, 247, 255, 0.82) !important;
        font-size: 15px !important;
        font-weight: 720 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        text-rendering: geometricPrecision;
        background: transparent !important;
        transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }

    .account-sidebar-col .panel-left-open-content li > a img {
        flex: 0 0 22px;
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
        opacity: 0.9;
        filter: brightness(1.18);
    }

    .account-sidebar-col .panel-left-open-content li > a:hover {
        transform: translateX(2px);
        color: #ffffff !important;
        border-color: rgba(139, 92, 246, 0.32);
        background: linear-gradient(90deg, rgba(124, 58, 237, 0.22), rgba(14, 165, 233, 0.1)) !important;
    }

    .account-sidebar-col .panel-left-open-content li.active > a,
    .account-sidebar-col .panel-left-open-content li > a.active,
    .account-sidebar-col .panel-left-open-content li > a[aria-current="page"] {
        color: #ffffff !important;
        border-color: rgba(139, 92, 246, 0.46);
        background: linear-gradient(90deg, rgba(124, 58, 237, 0.52), rgba(8, 47, 73, 0.42)) !important;
        box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.9), 0 12px 28px rgba(76, 29, 149, 0.18);
    }

    .account-sidebar-col .panel-left-open-content li:last-child {
        margin-top: 10px !important;
    }

    .account-sidebar-col .panel-left-open-content li:last-child > a {
        color: rgba(255, 230, 235, 0.92) !important;
        border-color: rgba(244, 63, 94, 0.18);
        background: linear-gradient(90deg, rgba(244, 63, 94, 0.16), rgba(124, 58, 237, 0.08)) !important;
    }
}

.theme-mob-menu .mobile-menu-list > li > a,
.theme-mob-menu .mobile-menu-list > li > .bg-dark-light-2 {
    display: grid !important;
    grid-template-columns: 8px minmax(0, 1fr) 16px;
    column-gap: 13px;
    align-items: center !important;
    min-height: 58px !important;
    padding: 0 17px !important;
    color: rgba(248, 250, 252, 0.88) !important;
    font-size: 13.5px !important;
    font-weight: 780 !important;
    line-height: 1.18 !important;
    letter-spacing: 0.01em !important;
    text-transform: uppercase;
}

.theme-mob-menu .mobile-menu-list > li > a::before,
.theme-mob-menu .mobile-menu-list > li > .bg-dark-light-2::before {
    grid-column: 1;
    align-self: center;
    margin: 0 !important;
}

.theme-mob-menu .mobile-menu-list > li > a::after,
.theme-mob-menu .mobile-menu-list > li > .bg-dark-light-2::after {
    position: static !important;
    grid-column: 3;
    justify-self: end;
    align-self: center;
    transform: none !important;
}

.theme-mob-menu .mobile-menu-list > li > a:hover,
.theme-mob-menu .mobile-menu-list > li > .bg-dark-light-2:hover {
    color: #ffffff !important;
    border-color: rgba(139, 92, 246, 0.45) !important;
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.28), rgba(14, 165, 233, 0.1)) !important;
}

.account-sidebar-col ~ [class*="col-"] .bg-dark-light > .d-block,
.account-sidebar-col ~ [class*="col-"] label,
.account-sidebar-col ~ [class*="col-"] .form-control,
.account-sidebar-col ~ [class*="col-"] .btn {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 0 !important;
}

.account-sidebar-col ~ [class*="col-"] .bg-dark-light > span.d-block:first-child,
.account-sidebar-col ~ [class*="col-"] .bg-dark-light > h1,
.account-sidebar-col ~ [class*="col-"] .bg-dark-light > h2,
.account-sidebar-col ~ [class*="col-"] .bg-dark-light > h3 {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-rendering: geometricPrecision;
}

/* Product image fill polish */
.curated-category-block-pubg-mobile-uc-id-yukleme-tr .product-card-img,
.curated-category-block-mobile-legends .product-card-img {
    aspect-ratio: 2 / 3 !important;
    min-height: 0 !important;
    line-height: 0;
    background: #05040c;
}

.curated-category-block-pubg-mobile-uc-id-yukleme-tr .product-card-img img,
.curated-category-block-mobile-legends .product-card-img img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.curated-category-block-pubg-mobile-uc-id-yukleme-tr .product-card-hover,
.curated-category-block-mobile-legends .product-card-hover {
    inset: 0 !important;
}

@media (max-width: 575.98px) {
    .curated-category-block-pubg-mobile-uc-id-yukleme-tr .product-badges,
    .curated-category-block-mobile-legends .product-badges {
        top: 7px;
        left: 7px;
        right: 7px;
        gap: 4px;
        align-items: center;
        pointer-events: none;
    }

    .curated-category-block-pubg-mobile-uc-id-yukleme-tr .product-badges-left,
    .curated-category-block-pubg-mobile-uc-id-yukleme-tr .product-badges-right,
    .curated-category-block-mobile-legends .product-badges-left,
    .curated-category-block-mobile-legends .product-badges-right {
        min-width: 0;
        max-width: calc(50% - 2px);
    }

    .curated-category-block-pubg-mobile-uc-id-yukleme-tr .pbadge,
    .curated-category-block-mobile-legends .pbadge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        max-width: 100%;
        min-height: 18px;
        padding: 3px 7px;
        border-radius: 999px;
        font-size: 8.5px;
        line-height: 1;
        letter-spacing: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-shadow: 0 4px 10px rgba(36, 224, 132, 0.18) !important;
    }

    .curated-category-block-pubg-mobile-uc-id-yukleme-tr .discount-word,
    .curated-category-block-mobile-legends .discount-word {
        display: none;
    }

    .curated-category-block-pubg-mobile-uc-id-yukleme-tr .product-card-hover,
    .curated-category-block-mobile-legends .product-card-hover {
        display: none !important;
    }
}

/* Payment page premium polish */
.payment-hub {
    --payment-accent: #7c3aed;
    --payment-accent-soft: rgba(124, 58, 237, 0.18);
    --payment-cyan: #22d3ee;
    --payment-green: #20e68b;
    --payment-ink: #071019;
    --payment-panel: #101923;
    --payment-panel-2: #152231;
    --payment-border: rgba(157, 178, 255, 0.14);
    --payment-muted: rgba(219, 229, 243, 0.72);
    position: relative;
    overflow: hidden;
    padding: 42px 0 82px;
    background:
        radial-gradient(circle at 12% 8%, rgba(34, 211, 238, 0.1), transparent 28%),
        radial-gradient(circle at 88% 0%, rgba(124, 58, 237, 0.16), transparent 30%),
        linear-gradient(180deg, rgba(6, 9, 17, 0), rgba(6, 13, 22, 0.46) 45%, rgba(5, 10, 18, 0.78));
}

.payment-shell .container {
    max-width: 1280px;
}

.payment-hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    gap: 26px;
    padding: 32px;
    border-radius: 24px;
    background:
        linear-gradient(115deg, rgba(10, 18, 29, 0.98), rgba(17, 21, 39, 0.96) 52%, rgba(12, 31, 41, 0.95)),
        radial-gradient(circle at 85% 16%, rgba(34, 211, 238, 0.2), transparent 34%);
    border: 1px solid rgba(139, 92, 246, 0.24);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.payment-eyebrow,
.payment-panel-kicker {
    border-radius: 12px;
    background: rgba(34, 211, 238, 0.08);
    border-color: rgba(34, 211, 238, 0.16);
    color: #9af0ff;
    letter-spacing: 0.08em;
}

.payment-hero-copy h1 {
    max-width: 13ch;
    margin: 18px 0 14px;
    font-size: clamp(34px, 4vw, 58px);
    line-height: 0.98;
    font-weight: 850;
    letter-spacing: 0;
}

.payment-hero-copy p {
    max-width: 690px;
    color: rgba(236, 244, 255, 0.76);
    font-size: 16px;
    line-height: 1.75;
}

.payment-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.payment-hero-action {
    min-height: 50px;
    padding: 0 18px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(157, 178, 255, 0.18);
    background: rgba(255, 255, 255, 0.055);
    color: #ffffff;
    font-weight: 760;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.payment-hero-action-primary {
    background: linear-gradient(135deg, #7c3aed, #0ea5e9);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 18px 32px rgba(79, 70, 229, 0.24);
}

.payment-hero-action:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 211, 238, 0.34);
}

.payment-hero-card {
    display: grid;
    gap: 14px;
}

.payment-balance-card {
    min-height: 168px;
    padding: 22px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background:
        radial-gradient(circle at top right, rgba(32, 230, 139, 0.28), transparent 36%),
        linear-gradient(150deg, rgba(124, 58, 237, 0.26), rgba(16, 25, 35, 0.86) 48%, rgba(8, 16, 25, 0.94));
    border: 1px solid rgba(32, 230, 139, 0.22);
}

.payment-balance-card span,
.payment-balance-card small {
    color: rgba(231, 239, 250, 0.72);
    font-size: 13px;
    font-weight: 700;
}

.payment-balance-card strong {
    margin: 8px 0 6px;
    color: #ffffff;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 850;
    letter-spacing: 0;
}

.payment-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.payment-hero-stat {
    padding: 15px;
    border-radius: 16px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(157, 178, 255, 0.1);
}

.payment-hero-stat i {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #98f7ff;
    background: rgba(34, 211, 238, 0.09);
    border: 1px solid rgba(34, 211, 238, 0.12);
}

.payment-hero-stat strong {
    margin: 0 0 4px;
    font-size: 14px;
    letter-spacing: 0;
}

.payment-hero-stat small {
    display: block;
    color: rgba(223, 234, 248, 0.68);
    font-size: 12px;
    line-height: 1.45;
}

.payment-layout {
    grid-template-columns: 318px minmax(0, 1fr);
    gap: 24px;
}

.payment-rail,
.payment-panel {
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(15, 24, 34, 0.98), rgba(9, 17, 25, 0.98));
    border-color: rgba(157, 178, 255, 0.12);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.28);
}

.payment-tab-button {
    grid-template-columns: 46px minmax(0, 1fr);
    padding: 15px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
}

.payment-tab-button:hover,
.payment-tab-button.is-active {
    border-color: rgba(34, 211, 238, 0.26);
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.26), rgba(14, 165, 233, 0.12));
}

.payment-tab-step {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.48), rgba(34, 211, 238, 0.18));
    letter-spacing: 0.08em;
}

.payment-panel {
    padding: 30px;
}

.payment-panel-head {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(157, 178, 255, 0.08);
}

.payment-panel-head h2 {
    margin-top: 12px;
    font-size: 26px;
    letter-spacing: 0;
}

.payment-input,
.payment-select {
    min-height: 56px;
    border-radius: 14px;
    border-color: rgba(157, 178, 255, 0.13);
    background: rgba(255, 255, 255, 0.045);
}

.payment-amount-presets {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.payment-amount-presets button {
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(157, 178, 255, 0.13);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(241, 246, 255, 0.88);
    font-weight: 800;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.payment-amount-presets button:hover,
.payment-amount-presets button.is-active {
    transform: translateY(-1px);
    border-color: rgba(32, 230, 139, 0.38);
    background: rgba(32, 230, 139, 0.12);
    color: #ffffff;
}

.payment-submit {
    border-radius: 14px;
    background: linear-gradient(135deg, #7c3aed, #22c55e);
    box-shadow: 0 18px 34px rgba(34, 197, 94, 0.18);
}

.bank-account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.bank-account-card {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border-radius: 18px;
    background:
        linear-gradient(150deg, rgba(18, 31, 46, 0.98), rgba(10, 18, 27, 0.98)),
        radial-gradient(circle at 82% 12%, rgba(32, 230, 139, 0.18), transparent 32%);
    border-color: rgba(157, 178, 255, 0.14);
}

.bank-card-glow {
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #7c3aed, #22d3ee, #20e68b);
    opacity: 0.88;
}

.bank-account-head {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 13px;
}

.bank-account-badge {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.62), rgba(34, 211, 238, 0.2));
}

.bank-account-status {
    width: fit-content;
    margin-bottom: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    color: #6ff2ad !important;
    background: rgba(32, 230, 139, 0.1);
    border: 1px solid rgba(32, 230, 139, 0.16);
    font-size: 11px !important;
    font-weight: 800;
}

.bank-copy-btn {
    gap: 8px;
    border-radius: 13px;
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.18);
    color: #b7f4ff;
}

.bank-copy-btn.is-copied {
    background: rgba(32, 230, 139, 0.14);
    border-color: rgba(32, 230, 139, 0.28);
    color: #b8ffd9;
}

.bank-meta-item {
    border-radius: 14px;
    border-color: rgba(157, 178, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.bank-meta-item strong {
    font-size: 14px;
    letter-spacing: 0;
}

.bank-meta-item-full:first-child strong {
    color: #ffffff;
    font-size: 15px;
    letter-spacing: 0.02em;
}

.payment-flow-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.payment-flow-step {
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(157, 178, 255, 0.09);
}

.payment-flow-step span {
    display: inline-flex;
    margin-bottom: 10px;
    color: #20e68b;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.1em;
}

.payment-flow-step strong {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 820;
    margin-bottom: 5px;
}

.payment-flow-step small {
    color: rgba(223, 234, 248, 0.68);
    line-height: 1.5;
}

.payment-inline-cta {
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.14), rgba(34, 211, 238, 0.06));
}

.payment-link-btn {
    border-radius: 13px;
    color: #ffffff !important;
    background: rgba(124, 58, 237, 0.28);
    border-color: rgba(139, 92, 246, 0.34);
}

.payment-provider-grid {
    gap: 14px;
}

.payment-provider-card {
    min-height: 154px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(157, 178, 255, 0.12);
}

.payment-provider-card.is-active {
    outline: 1px solid rgba(255, 255, 255, 0.08);
}

.payment-provider-note {
    border-radius: 14px;
}

@media (max-width: 1199px) {
    .payment-hero-stats {
        grid-template-columns: 1fr;
    }

    .payment-layout {
        grid-template-columns: 1fr;
    }

    .payment-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .payment-hub {
        padding: 22px 0 54px;
    }

    .payment-hero {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .payment-hero-copy h1 {
        max-width: 100%;
        font-size: 38px;
    }

    .payment-hero-stats,
    .payment-rail,
    .payment-provider-grid,
    .bank-account-grid,
    .payment-flow-strip {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .payment-shell .container {
        padding-inline: 12px;
    }

    .payment-hero,
    .payment-panel,
    .payment-rail {
        border-radius: 18px;
    }

    .payment-hero {
        padding: 20px;
    }

    .payment-hero-copy h1 {
        font-size: 30px;
        line-height: 1.05;
    }

    .payment-hero-actions,
    .payment-panel-head,
    .payment-inline-cta {
        align-items: stretch;
    }

    .payment-hero-action,
    .payment-link-btn {
        width: 100%;
    }

    .payment-panel {
        padding: 18px;
    }

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

    .bank-account-head {
        grid-template-columns: 50px minmax(0, 1fr);
    }

    .bank-copy-btn {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* Payment transfer-only step flow */
.payment-hub-transfer-only {
    padding-top: 34px;
}

.payment-transfer-hero {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: stretch;
    margin-bottom: 24px;
}

.payment-transfer-hero .payment-hero-copy h1 {
    max-width: 640px;
    font-size: clamp(34px, 4.2vw, 54px);
    line-height: 1.03;
}

.payment-transfer-hero .payment-hero-copy p {
    max-width: 760px;
}

.payment-step-shell {
    display: grid;
    grid-template-columns: 318px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.payment-step-nav {
    position: sticky;
    top: 22px;
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(15, 24, 34, 0.98), rgba(9, 17, 25, 0.98));
    border: 1px solid rgba(157, 178, 255, 0.12);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.28);
}

.payment-step-nav-item {
    width: 100%;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 15px;
    border-radius: 16px;
    border: 1px solid rgba(157, 178, 255, 0.09);
    background: rgba(255, 255, 255, 0.035);
    color: rgba(240, 246, 255, 0.78);
    text-align: left;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.payment-step-nav-item:hover,
.payment-step-nav-item.is-active {
    transform: translateY(-1px);
    border-color: rgba(34, 211, 238, 0.28);
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.26), rgba(14, 165, 233, 0.12));
    color: #ffffff;
}

.payment-step-nav-item.is-complete {
    border-color: rgba(32, 230, 139, 0.22);
}

.payment-step-nav-item > span {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.5), rgba(34, 211, 238, 0.16));
    color: #ffffff;
    font-size: 13px;
    font-weight: 850;
}

.payment-step-nav-item.is-complete > span {
    background: linear-gradient(135deg, rgba(32, 230, 139, 0.32), rgba(34, 211, 238, 0.16));
}

.payment-step-nav-item strong,
.payment-step-nav-item small {
    grid-column: 2;
}

.payment-step-nav-item strong {
    display: block;
    font-size: 15px;
    font-weight: 820;
    line-height: 1.15;
}

.payment-step-nav-item small {
    display: block;
    margin-top: -6px;
    color: rgba(222, 233, 248, 0.64);
    font-size: 12px;
    line-height: 1.45;
}

.payment-step-panels {
    min-width: 0;
}

.payment-step-panel {
    display: none;
    min-height: 486px;
    padding: 30px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(15, 24, 34, 0.98), rgba(9, 17, 25, 0.98));
    border: 1px solid rgba(157, 178, 255, 0.12);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.28);
}

.payment-step-panel.is-active {
    display: block;
}

.payment-step-panel .payment-panel-head {
    margin-bottom: 22px;
}

.payment-step-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 22px;
}

.payment-next-btn,
.payment-back-btn {
    min-height: 52px;
    padding: 0 18px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-weight: 820;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.payment-next-btn {
    border: 0;
    color: #ffffff;
    background: linear-gradient(135deg, #7c3aed, #0ea5e9);
    box-shadow: 0 18px 32px rgba(79, 70, 229, 0.22);
}

.payment-back-btn {
    border: 1px solid rgba(157, 178, 255, 0.14);
    color: rgba(240, 246, 255, 0.88);
    background: rgba(255, 255, 255, 0.045);
}

.payment-next-btn:hover,
.payment-back-btn:hover {
    transform: translateY(-1px);
}

.payment-bank-choice {
    cursor: default;
}

.payment-bank-choice-grid {
    margin-bottom: 0;
}

.payment-reference-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    margin-bottom: 16px;
    border-radius: 18px;
    background: rgba(233, 75, 67, 0.08);
    border: 1px solid rgba(233, 75, 67, 0.22);
}

.payment-reference-card span,
.payment-reference-card small {
    display: block;
}

.payment-reference-card span {
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.payment-reference-card strong {
    display: block;
    margin: 6px 0;
    color: #ffffff;
    font-size: 24px;
    font-weight: 860;
    letter-spacing: 0.08em;
}

.payment-reference-card small {
    color: rgba(222, 233, 248, 0.72);
    font-size: 13px;
    line-height: 1.5;
}

.payment-confirm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.payment-confirm-card {
    padding: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(157, 178, 255, 0.1);
}

.payment-confirm-card-wide {
    grid-column: 1 / -1;
}

.payment-confirm-card span {
    display: block;
    margin-bottom: 8px;
    color: rgba(222, 233, 248, 0.66);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.payment-confirm-card strong {
    display: block;
    color: #ffffff;
    font-size: 17px;
    font-weight: 820;
    line-height: 1.35;
}

.payment-hub-transfer-only .payment-form-grid {
    margin-top: 0;
}

.payment-hub-transfer-only .payment-submit {
    grid-column: auto;
    min-width: 190px;
    margin-top: 0;
}

.payment-hub-transfer-only .payment-amount-presets {
    margin-top: 10px;
}

.payment-locked-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.15);
    color: rgba(224, 244, 255, 0.88);
    font-size: 13px;
    font-weight: 700;
}

.payment-locked-note i {
    color: #9af0ff;
}

.order-success-summary {
    max-width: 760px;
    padding: 20px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(16, 25, 36, 0.96), rgba(10, 17, 25, 0.96));
    border: 1px solid rgba(157, 178, 255, 0.12);
}

.order-success-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.order-success-grid > div,
.order-success-customer,
.order-success-item {
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(157, 178, 255, 0.09);
}

.order-success-grid > div {
    padding: 14px;
}

.order-success-grid span,
.order-success-customer small,
.order-success-item small {
    display: block;
    color: rgba(222, 233, 248, 0.66);
    font-size: 12px;
    font-weight: 750;
}

.order-success-grid strong,
.order-success-item strong {
    display: block;
    margin-top: 7px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 840;
}

.order-success-customer {
    margin-top: 10px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.order-success-customer span {
    color: #ffffff;
    font-weight: 840;
}

.order-success-items {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.order-success-item {
    padding: 13px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    text-align: left;
}

.order-success-item span {
    color: rgba(245, 248, 255, 0.94);
    font-weight: 760;
}

.order-success-item strong {
    margin-top: 0;
    color: #20e68b;
}

@media (max-width: 767px) {
    .order-success-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .order-success-customer,
    .order-success-item {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }
}

@media (max-width: 1199px) {
    .payment-transfer-hero,
    .payment-step-shell {
        grid-template-columns: 1fr;
    }

    .payment-step-nav {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .payment-transfer-hero {
        padding: 22px;
    }

    .payment-step-nav,
    .payment-step-panel,
    .payment-bank-choice-grid,
    .payment-confirm-grid {
        grid-template-columns: 1fr;
    }

    .payment-reference-card {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 575px) {
    .payment-step-shell {
        gap: 14px;
    }

    .payment-step-nav,
    .payment-step-panel {
        border-radius: 18px;
    }

    .payment-step-nav {
        padding: 12px;
    }

    .payment-step-panel {
        min-height: 0;
        padding: 18px;
    }

    .payment-step-actions {
        flex-direction: column-reverse;
    }

    .payment-next-btn,
    .payment-back-btn,
    .payment-hub-transfer-only .payment-submit {
        width: 100%;
    }
}

/* Mobile header sits flush with the viewport edge on hosted pages. */
@media (max-width: 991.98px) {
    html,
    body {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    header.redesigned-header {
        margin-top: 0 !important;
        padding-top: 0 !important;
        top: 0 !important;
    }

    header.redesigned-header .mobile-header {
        margin-top: 0 !important;
        padding-top: 8px !important;
    }
}

/* Font-independent UI icons for mobile webviews that fail to load icon fonts. */
.ui-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    flex: 0 0 auto;
    background-color: currentColor;
    vertical-align: -0.12em;
    -webkit-mask: var(--ui-icon) no-repeat center / contain;
    mask: var(--ui-icon) no-repeat center / contain;
}

.ui-icon-menu {
    --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
}

.ui-icon-login {
    --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M10 17l5-5-5-5M15 12H3'/%3E%3C/svg%3E");
}

.ui-icon-user {
    --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.ui-icon-user-plus {
    --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21a6 6 0 0 0-12 0'/%3E%3Ccircle cx='10' cy='7' r='4'/%3E%3Cpath d='M19 8v6M22 11h-6'/%3E%3C/svg%3E");
}

.ui-icon-search {
    --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
}

.ui-icon-home {
    --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5 10.5V20h14v-9.5'/%3E%3Cpath d='M9.5 20v-5h5v5'/%3E%3C/svg%3E");
}

.ui-icon-grid {
    --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6'/%3E%3Crect x='14' y='4' width='6' height='6'/%3E%3Crect x='4' y='14' width='6' height='6'/%3E%3Crect x='14' y='14' width='6' height='6'/%3E%3C/svg%3E");
}

.ui-icon-bag {
    --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 13H7L6 8Z'/%3E%3Cpath d='M9 8a3 3 0 0 1 6 0'/%3E%3C/svg%3E");
}

.ui-icon-bell {
    --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M10 21h4'/%3E%3C/svg%3E");
}

.ui-icon-instagram {
    --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='5'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M17.5 6.8v.01'/%3E%3C/svg%3E");
}

.ui-icon-send {
    --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 10 14'/%3E%3Cpath d='m21 3-7 18-4-7-7-4 18-7Z'/%3E%3C/svg%3E");
}

.ui-icon-chevron-right {
    --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}

.ui-icon-close {
    --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}

.ui-icon-wallet {
    --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16v12H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h14'/%3E%3Cpath d='M16 13h4'/%3E%3C/svg%3E");
}

.ui-icon-headset {
    --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13a8 8 0 0 1 16 0'/%3E%3Cpath d='M5 13h3v6H5a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2ZM19 13h-3v6h3a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2Z'/%3E%3Cpath d='M16 19c0 1.2-1.8 2-4 2'/%3E%3C/svg%3E");
}

.mobile-btn-menu .ui-icon,
.mobile-btn-icon .ui-icon {
    font-size: 21px;
}

.mobile-search-icon.ui-icon {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.45);
}

.fp-mobile-bar-icon .ui-icon {
    font-size: 22px;
}

.fp-mobile-bar-icon-big .ui-icon {
    font-size: 27px;
}

.social-campaign-icon .ui-icon {
    font-size: 24px;
}

.social-campaign-handle .ui-icon,
.social-campaign-btn .ui-icon,
.curated-category-view .ui-icon {
    font-size: 0.95em;
}

.mobile-menu-auth .ui-icon,
.mobile-menu-quick .ui-icon,
.mobile-menu-user-icon .ui-icon {
    font-size: 20px;
}

@media (max-width: 991.98px) {
    .hero-banner-wrapper,
    .hero-banner-wrapper #heroCarousel,
    .hero-banner-wrapper .carousel-inner,
    .hero-banner-wrapper .carousel-item,
    .hero-carousel,
    .hero-carousel .carousel-inner,
    .hero-carousel .carousel-item {
        width: 100% !important;
        aspect-ratio: 2.5 / 1 !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .hero-banner-wrapper .carousel-item,
    .hero-carousel .carousel-item {
        align-items: center !important;
        justify-content: center !important;
    }

    .hero-banner-wrapper img,
    .hero-banner-wrapper .carousel-item img,
    .hero-banner-wrapper .carousel-item .theme-card img,
    .hero-carousel .carousel-item img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center center !important;
        transform: none !important;
    }
}

/* Contact page */
.contact-page-shell {
    padding-bottom: 1.5rem;
}
.contact-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.5rem;
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(15, 23, 42, 0.85) 58%),
        radial-gradient(circle at top right, rgba(124, 58, 237, 0.18), transparent 42%);
    box-shadow: 0 24px 80px rgba(2, 6, 23, 0.28);
}
.contact-kicker {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.8rem;
    margin-bottom: 0.8rem;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.16);
    color: #d8c7ff;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
}
.contact-hero h1 {
    margin: 0;
    font-size: clamp(2rem, 2.8vw, 3rem);
    line-height: 1;
}
.contact-hero p {
    max-width: 52rem;
    margin: 0.75rem 0 0;
    color: rgba(226, 232, 240, 0.78);
    font-size: 1rem;
}
.contact-hero-note {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 18rem;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.42);
}
.contact-hero-note .ui-icon {
    width: 1.35rem;
    height: 1.35rem;
    color: #8b5cf6;
    flex: 0 0 auto;
}
.contact-hero-note strong,
.contact-aside-title,
.contact-aside-title-sm {
    display: block;
    color: #f8fafc;
    font-weight: 800;
    letter-spacing: 0;
}
.contact-hero-note p,
.contact-aside-text {
    margin: 0.25rem 0 0;
    color: rgba(226, 232, 240, 0.68);
    font-size: 0.94rem;
    line-height: 1.55;
}
.contact-panel {
    padding: 1.5rem;
    border: 1px solid rgba(139, 92, 246, 0.16);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.9), rgba(15, 23, 42, 0.96));
    box-shadow: 0 24px 80px rgba(2, 6, 23, 0.3);
}
.contact-form-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.contact-field,
.contact-textarea {
    display: flex;
    align-items: stretch;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.75);
}
.contact-field-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.15rem;
    min-width: 3.15rem;
    border-right: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(30, 41, 59, 0.56);
}
.contact-field-icon img {
    width: 1.1rem;
    height: 1.1rem;
    opacity: 0.85;
}
.contact-field input,
.contact-textarea textarea {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #f8fafc;
    padding: 0.95rem 1rem;
    font-size: 0.98rem;
}
.contact-textarea textarea {
    min-height: 14rem;
    resize: vertical;
}
.contact-field input::placeholder,
.contact-textarea textarea::placeholder {
    color: rgba(148, 163, 184, 0.84);
}
.contact-field:focus-within,
.contact-textarea:focus-within {
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}
.contact-consent {
    color: rgba(226, 232, 240, 0.78);
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: center;
}
.contact-consent a {
    color: #d8c7ff;
    text-decoration: underline;
}
.contact-aside {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(15, 23, 42, 0.92));
}
.contact-info-list {
    display: grid;
    gap: 0.75rem;
}
.contact-info-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(15, 23, 42, 0.6);
    color: #e2e8f0;
}
.contact-info-item:hover {
    border-color: rgba(139, 92, 246, 0.45);
    color: #ffffff;
}
.contact-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 12px;
    background: rgba(139, 92, 246, 0.12);
    flex: 0 0 auto;
}
.contact-info-icon img,
.contact-info-icon i {
    width: 1.05rem;
    height: 1.05rem;
    color: #c4b5fd;
}
.contact-social-shell {
    margin-top: auto;
    padding-top: 0.4rem;
}
.contact-aside-title-sm {
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
}
.contact-social-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.contact-social-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(15, 23, 42, 0.6);
    color: #e2e8f0;
}
.contact-social-list a:hover {
    border-color: rgba(139, 92, 246, 0.48);
    color: #fff;
}
.pasif-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.9fr);
    gap: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(139, 92, 246, 0.16);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(15, 23, 42, 0.92));
    box-shadow: 0 24px 80px rgba(2, 6, 23, 0.3);
}
.pasif-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.8rem;
    margin-bottom: 0.9rem;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.14);
    color: #fecaca;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}
.pasif-shell-copy h1 {
    margin: 0;
    font-size: clamp(2rem, 2.8vw, 3rem);
    line-height: 1.05;
}
.pasif-shell-copy p {
    max-width: 42rem;
    margin: 0.8rem 0 0;
    color: rgba(226, 232, 240, 0.78);
}
.pasif-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.4rem;
}
.pasif-shell-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(15, 23, 42, 0.6);
}
.pasif-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    background: rgba(139, 92, 246, 0.14);
    color: #d8c7ff;
    flex: 0 0 auto;
}
.pasif-icon .ui-icon {
    width: 1.2rem;
    height: 1.2rem;
}
.pasif-card-text strong,
.pasif-card-text span {
    display: block;
}
.pasif-card-text span {
    margin-top: 0.25rem;
    color: rgba(226, 232, 240, 0.72);
}
@media (max-width: 991.98px) {
    .contact-hero,
    .pasif-shell {
        grid-template-columns: 1fr;
    }
    .contact-hero {
        align-items: flex-start;
        flex-direction: column;
    }
    .contact-hero-note {
        width: 100%;
        min-width: 0;
    }
}
@media (max-width: 575.98px) {
    .contact-panel,
    .contact-hero,
    .pasif-shell {
        padding: 1rem;
        border-radius: 18px;
    }
    .contact-field input,
    .contact-textarea textarea {
        padding: 0.85rem 0.9rem;
    }
    .contact-field-icon {
        width: 2.8rem;
        min-width: 2.8rem;
    }
    .contact-info-item {
        padding: 0.85rem 0.9rem;
    }
}

@media (max-width: 575.98px) {
    .account-orders-page {
        padding-top: 16px !important;
        padding-bottom: 96px !important;
    }

    .account-orders-page .container {
        width: calc(100% - 28px) !important;
        margin-inline: auto;
    }

    .account-orders-list {
        display: grid;
        gap: 12px;
        margin-top: 14px;
    }

    .account-orders-page .account-order-card {
        margin: 0 !important;
        padding: 14px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(139, 92, 246, 0.2);
        background: linear-gradient(145deg, rgba(17, 27, 39, 0.98), rgba(9, 14, 23, 0.98)) !important;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
    }

    .account-orders-page .account-order-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
        margin: 0 !important;
        text-align: left !important;
    }

    .account-orders-page .account-order-row > [class*="col-"] {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .account-orders-page .account-order-row > [class*="col-"]:nth-child(2),
    .account-orders-page .account-order-row > [class*="col-"]:nth-child(8) {
        grid-column: 1 / -1;
    }

    .account-orders-page .account-order-row > [class*="col-"] > span {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 8px;
        min-height: 62px;
        height: 100%;
        padding: 11px 12px;
        border-radius: 14px;
        border: 1px solid rgba(157, 178, 255, 0.1);
        background: rgba(255, 255, 255, 0.035);
        color: #fff;
        font-size: 13px !important;
        line-height: 1.25;
        font-weight: 700;
    }

    .account-orders-page .account-order-row > [class*="col-"] > span > .d-xl-none {
        margin: 0 !important;
        color: #9b7cff !important;
        font-size: 10px !important;
        line-height: 1;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .account-orders-page .account-order-row > [class*="col-"] > span > div {
        max-width: 100%;
        color: rgba(241, 245, 249, 0.96);
        font-size: 13px !important;
        line-height: 1.25;
        font-weight: 800;
        overflow-wrap: anywhere;
    }

    .account-orders-page .account-order-row > [class*="col-"]:nth-child(2) > span > div {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
    }

    .account-orders-page .account-order-row > [class*="col-"]:nth-child(2) img {
        width: 20px;
        height: 20px;
        margin: 0 !important;
        object-fit: contain;
    }

    .account-orders-page .account-order-row .check-true,
    .account-orders-page .account-order-row .check-false {
        width: 34px;
        height: 34px;
        box-shadow: none;
    }

    .account-orders-page .account-order-row .check-true img,
    .account-orders-page .account-order-row .check-false img {
        width: 18px;
        height: 18px;
        object-fit: contain;
    }

    .account-orders-page .account-order-detail-btn {
        width: 100%;
        min-height: 44px;
        border: 0 !important;
        border-radius: 13px !important;
        background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
        color: #fff !important;
        font-size: 14px;
        font-weight: 800;
        box-shadow: 0 10px 22px rgba(124, 58, 237, 0.25);
    }

    .account-orders-page .modal-dialog {
        max-width: calc(100% - 24px) !important;
        margin-inline: auto;
    }
}

.live-search-form {
    position: relative;
}

.live-search-results {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 1045;
    display: none;
    padding: 8px;
    border: 1px solid rgba(139, 92, 246, 0.28);
    border-radius: 16px;
    background: rgba(9, 13, 23, 0.98);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    backdrop-filter: blur(14px);
}

.live-search-results.is-open {
    display: grid;
    gap: 6px;
}

.live-search-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px;
    border-radius: 12px;
    color: #fff !important;
    text-decoration: none !important;
    transition: background 0.16s ease, transform 0.16s ease;
}

.live-search-item:hover {
    background: rgba(139, 92, 246, 0.12);
    transform: translateY(-1px);
}

.live-search-item img {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.05);
}

.live-search-copy {
    min-width: 0;
}

.live-search-copy strong,
.live-search-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-search-copy strong {
    color: #f8fafc;
    font-size: 13px;
    font-weight: 800;
}

.live-search-copy small {
    margin-top: 3px;
    color: rgba(203, 213, 225, 0.64);
    font-size: 11px;
}

.live-search-item b {
    color: #2df59b;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.live-search-empty {
    padding: 14px;
    color: rgba(226, 232, 240, 0.72);
    font-size: 13px;
    text-align: center;
}

.mobile-search-form {
    position: relative;
}

.live-search-results-mobile {
    top: calc(100% + 8px);
    left: 0;
    right: 0;
}

@media (max-width: 575.98px) {
    .live-search-results {
        border-radius: 15px;
        max-height: 58vh;
        overflow: auto;
    }

    .live-search-item {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        padding: 8px;
    }

    .live-search-item img {
        width: 44px;
        height: 44px;
    }
}

/* ============================================================
   Single-screen IBAN payment layout (banks + notification)
   Tema: violet (#8b5cf6) + cyan (#22d3ee) + green (#20e68b)
   ============================================================ */

/* HERO ince ayarlar — site temasıyla uyumlu */
.payment-hub-transfer-only .payment-transfer-hero {
    position: relative;
    overflow: hidden;
    padding: 34px 38px;
    border-radius: 26px;
    background:
        radial-gradient(720px 320px at 88% -20%, rgba(139, 92, 246, 0.28), transparent 60%),
        radial-gradient(540px 280px at 8% 110%, rgba(34, 211, 238, 0.18), transparent 60%),
        linear-gradient(180deg, rgba(20, 16, 38, 0.96), rgba(11, 14, 26, 0.96));
    border: 1px solid rgba(139, 92, 246, 0.22);
    box-shadow: 0 26px 64px rgba(8, 6, 22, 0.45);
}

.payment-hub-transfer-only .payment-transfer-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 32%);
}

.payment-hub-transfer-only .payment-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.22), rgba(34, 211, 238, 0.16));
    border: 1px solid rgba(139, 92, 246, 0.4);
    color: #d3c4ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.payment-hub-transfer-only .payment-eyebrow i {
    color: #c4b3ff;
}

.payment-hub-transfer-only .payment-balance-card {
    background:
        radial-gradient(circle at top right, rgba(32, 230, 139, 0.18), transparent 50%),
        linear-gradient(180deg, rgba(15, 35, 28, 0.96), rgba(8, 18, 16, 0.96));
    border: 1px solid rgba(32, 230, 139, 0.26);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}

.payment-hub-transfer-only .payment-balance-card strong {
    background: linear-gradient(135deg, #20e68b, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Kampanya banner — "Bir Alana Bir Bedava" */
.payment-campaign-banner {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    margin-bottom: 18px;
    padding: 22px 26px;
    border-radius: 22px;
    background:
        linear-gradient(90deg, rgba(255, 196, 102, 0.95), rgba(255, 77, 109, 0.95) 50%, rgba(139, 92, 246, 0.95)) top / 100% 2px no-repeat,
        radial-gradient(520px 260px at 0% 0%, rgba(255, 196, 102, 0.16), transparent 60%),
        radial-gradient(560px 280px at 100% 110%, rgba(255, 77, 109, 0.18), transparent 60%),
        linear-gradient(135deg, rgba(40, 22, 24, 0.96), rgba(22, 14, 26, 0.96));
    border: 1px solid rgba(255, 196, 102, 0.28);
    box-shadow:
        0 24px 56px rgba(8, 6, 22, 0.45),
        0 0 0 1px rgba(255, 196, 102, 0.06) inset,
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.payment-campaign-banner::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 196, 102, 0.16), transparent 70%);
    z-index: 0;
}

.payment-campaign-banner > * {
    position: relative;
    z-index: 1;
}

.payment-campaign-icon {
    width: 84px;
    height: 84px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18), transparent 60%),
        linear-gradient(135deg, #ffc466 0%, #ff7a92 50%, #c4b3ff 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        0 16px 32px rgba(255, 122, 146, 0.36),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    color: #ffffff;
    font-size: 34px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
    animation: campaignPulse 3.6s ease-in-out infinite;
}

@keyframes campaignPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 16px 32px rgba(255, 122, 146, 0.36), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 18px 40px rgba(255, 122, 146, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
    }
}

.payment-campaign-body {
    display: grid;
    gap: 6px;
}

.payment-campaign-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    padding: 5px 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 196, 102, 0.22), rgba(255, 77, 109, 0.18));
    border: 1px solid rgba(255, 196, 102, 0.34);
    color: #ffd9a0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.payment-campaign-tag i {
    color: #ffd9a0;
    font-size: 12px;
}

.payment-campaign-body h3 {
    margin: 4px 0 6px;
    color: #ffffff;
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 850;
    letter-spacing: -0.01em;
    line-height: 1.15;
    background: linear-gradient(90deg, #ffd9a0, #ffb3c9 60%, #c4b3ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.payment-campaign-body p {
    margin: 0;
    color: rgba(232, 232, 248, 0.78);
    font-size: 13.5px;
    line-height: 1.6;
}

.payment-campaign-body p strong {
    color: #ffd9a0;
    font-weight: 800;
}

@media (max-width: 767px) {
    .payment-campaign-banner {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 14px;
        padding: 18px;
        border-radius: 18px;
    }

    .payment-campaign-icon {
        width: 64px;
        height: 64px;
        border-radius: 18px;
        font-size: 26px;
    }

    .payment-campaign-body h3 {
        font-size: 18px;
    }

    .payment-campaign-body p {
        font-size: 12.5px;
        line-height: 1.55;
    }
}

@media (max-width: 480px) {
    .payment-campaign-banner {
        grid-template-columns: 1fr;
        text-align: left;
        padding: 16px;
    }

    .payment-campaign-icon {
        width: 52px;
        height: 52px;
        font-size: 22px;
        border-radius: 14px;
    }
}

/* SHELL grid */
.payment-single-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.95fr);
    gap: 22px;
    align-items: start;
    margin-top: 4px;
}

.payment-single-card {
    position: relative;
    overflow: hidden;
    padding: 30px;
    border-radius: 24px;
    background:
        linear-gradient(90deg, rgba(139, 92, 246, 0.85), rgba(34, 211, 238, 0.85) 50%, rgba(32, 230, 139, 0.85)) top / 100% 2px no-repeat,
        radial-gradient(620px 320px at 100% -10%, rgba(139, 92, 246, 0.22), transparent 60%),
        radial-gradient(420px 260px at -10% 110%, rgba(34, 211, 238, 0.14), transparent 60%),
        linear-gradient(180deg, rgba(22, 30, 44, 0.97), rgba(11, 16, 26, 0.97));
    border: 1px solid rgba(158, 184, 255, 0.14);
    box-shadow:
        0 28px 68px rgba(5, 8, 18, 0.5),
        0 0 0 1px rgba(139, 92, 246, 0.06) inset,
        0 1px 0 rgba(255, 255, 255, 0.04) inset;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.payment-single-card::after {
    content: "";
    position: absolute;
    bottom: -120px;
    right: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.10), transparent 70%);
    z-index: 0;
}

.payment-single-card > * {
    position: relative;
    z-index: 1;
}

.payment-single-form-card {
    position: sticky;
    top: 22px;
    background:
        linear-gradient(90deg, rgba(34, 211, 238, 0.85), rgba(139, 92, 246, 0.85) 50%, rgba(255, 77, 109, 0.85)) top / 100% 2px no-repeat,
        radial-gradient(560px 300px at 0% 0%, rgba(34, 211, 238, 0.22), transparent 60%),
        radial-gradient(560px 320px at 100% 100%, rgba(139, 92, 246, 0.22), transparent 60%),
        linear-gradient(180deg, rgba(18, 26, 42, 0.97), rgba(10, 14, 24, 0.97));
    border-color: rgba(139, 92, 246, 0.32);
    box-shadow:
        0 30px 72px rgba(8, 6, 22, 0.55),
        0 0 0 1px rgba(139, 92, 246, 0.1) inset,
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.payment-single-form-card::after {
    background: radial-gradient(circle, rgba(34, 211, 238, 0.14), transparent 70%);
    bottom: auto;
    right: auto;
    top: -120px;
    left: -120px;
}

.payment-single-head {
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}

.payment-single-head .payment-panel-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.16);
    border: 1px solid rgba(139, 92, 246, 0.32);
    color: #c4b3ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.payment-single-head .payment-panel-kicker i {
    color: #c4b3ff;
}

.payment-single-head .payment-panel-kicker-accent {
    background: rgba(34, 211, 238, 0.12);
    border-color: rgba(34, 211, 238, 0.32);
    color: #a8eaff;
}

.payment-single-head .payment-panel-kicker-accent i {
    color: #a8eaff;
}

.payment-single-head h2 {
    margin: 12px 0 8px;
    color: #ffffff;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 850;
    letter-spacing: -0.01em;
    line-height: 1.18;
}

.payment-single-head p {
    margin: 0;
    color: rgba(225, 234, 248, 0.7);
    font-size: 14px;
    line-height: 1.7;
}

.payment-single-head p strong {
    color: #c4b3ff;
    font-weight: 800;
}

/* Reference / açıklama kodu kartı */
.payment-single-banks .payment-reference-card {
    position: relative;
    z-index: 1;
    margin-bottom: 18px;
    padding: 18px 20px;
    border-radius: 16px;
    background:
        radial-gradient(circle at right, rgba(139, 92, 246, 0.18), transparent 60%),
        linear-gradient(90deg, rgba(34, 211, 238, 0.08), rgba(139, 92, 246, 0.08));
    border: 1px dashed rgba(139, 92, 246, 0.4);
}

.payment-single-banks .payment-reference-card span {
    color: #a8eaff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.payment-single-banks .payment-reference-card strong {
    margin: 6px 0 4px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 850;
    letter-spacing: 0.08em;
    background: linear-gradient(90deg, #c4b3ff, #a8eaff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.payment-single-banks .payment-reference-card small {
    color: rgba(220, 232, 248, 0.66);
    font-size: 12.5px;
    line-height: 1.55;
}

.payment-single-banks .payment-reference-card .bank-copy-btn {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.36), rgba(34, 211, 238, 0.22));
    border: 1px solid rgba(139, 92, 246, 0.42);
    color: #ffffff;
}

.payment-single-banks .bank-account-grid {
    position: relative;
    z-index: 1;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

/* Banka kartları — tema uyumu, daha canlı */
.payment-single-banks .bank-account-card {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border-radius: 18px;
    background:
        radial-gradient(280px 180px at 100% 0%, rgba(34, 211, 238, 0.16), transparent 60%),
        radial-gradient(220px 160px at 0% 100%, rgba(139, 92, 246, 0.14), transparent 60%),
        linear-gradient(180deg, rgba(22, 30, 44, 0.98), rgba(12, 18, 28, 0.98));
    border: 1px solid rgba(158, 184, 255, 0.14);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.payment-single-banks .bank-account-card .bank-card-glow {
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #8b5cf6, #22d3ee, #20e68b);
    opacity: 0.85;
    z-index: 1;
}

.payment-single-banks .bank-account-card:hover {
    transform: translateY(-4px);
    border-color: rgba(34, 211, 238, 0.42);
    box-shadow:
        0 24px 50px rgba(0, 0, 0, 0.4),
        0 0 32px rgba(139, 92, 246, 0.22);
}

.payment-single-banks .bank-account-card .bank-account-badge {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.7), rgba(34, 211, 238, 0.45));
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        0 10px 22px rgba(139, 92, 246, 0.32),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    color: #ffffff;
    font-size: 18px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}

.payment-single-banks .bank-account-card .bank-account-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin-bottom: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(32, 230, 139, 0.12);
    border: 1px solid rgba(32, 230, 139, 0.26);
    color: #6ff2ad !important;
    font-size: 10.5px !important;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.payment-single-banks .bank-account-card .bank-account-copy strong {
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
}

.payment-single-banks .bank-account-card .bank-account-copy span {
    color: rgba(220, 232, 248, 0.7);
    font-size: 12.5px;
}

.payment-single-banks .bank-account-card .bank-copy-btn {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(139, 92, 246, 0.18));
    border: 1px solid rgba(34, 211, 238, 0.32);
    color: #b7eaff;
    font-size: 12.5px;
    font-weight: 800;
}

.payment-single-banks .bank-account-card .bank-copy-btn:hover {
    border-color: rgba(34, 211, 238, 0.55);
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.28), rgba(139, 92, 246, 0.28));
    color: #ffffff;
}

.payment-single-banks .bank-account-meta {
    display: grid;
    gap: 10px;
}

.payment-single-banks .bank-account-card .bank-meta-item {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(139, 92, 246, 0.2);
    background:
        radial-gradient(circle at right, rgba(139, 92, 246, 0.08), transparent 60%),
        rgba(255, 255, 255, 0.03);
}

.payment-single-banks .bank-account-card .bank-meta-item > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #c4b3ff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.payment-single-banks .bank-account-card .bank-meta-item > span i {
    color: #c4b3ff;
    font-size: 11px;
}

.payment-single-banks .bank-account-card .bank-meta-item > strong {
    display: block;
    margin-top: 6px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
}

/* IBAN — büyük & dikkat çekici */
.payment-single-banks .bank-account-card .bank-meta-iban {
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(34, 211, 238, 0.32);
    background:
        radial-gradient(circle at right, rgba(34, 211, 238, 0.12), transparent 60%),
        radial-gradient(circle at left, rgba(139, 92, 246, 0.08), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.06) inset;
}

.payment-single-banks .bank-account-card .bank-meta-iban > span {
    color: #a8eaff;
    font-size: 11px;
}

.payment-single-banks .bank-account-card .bank-meta-iban > span i {
    color: #a8eaff;
}

.payment-single-banks .bank-account-card .bank-meta-iban > strong {
    margin-top: 8px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.3;
    background: linear-gradient(90deg, #ffffff 0%, #a8eaff 50%, #c4b3ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    word-break: break-all;
}

/* Açıklama kodu — IBAN'ın altında, vurgulu */
.payment-single-banks .bank-account-card .bank-meta-reference {
    padding: 14px 16px 12px;
    border-radius: 16px;
    border: 1px dashed rgba(255, 196, 102, 0.4);
    background:
        radial-gradient(circle at right, rgba(255, 122, 146, 0.1), transparent 60%),
        radial-gradient(circle at left, rgba(255, 196, 102, 0.08), transparent 60%),
        linear-gradient(180deg, rgba(255, 196, 102, 0.04), rgba(255, 77, 109, 0.03));
}

.payment-single-banks .bank-account-card .bank-meta-reference > span {
    color: #ffd9a0;
    font-size: 10.5px;
}

.payment-single-banks .bank-account-card .bank-meta-reference > span i {
    color: #ffd9a0;
}

.bank-meta-reference-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 6px 0 6px;
}

.bank-meta-reference-row strong {
    flex: 1;
    color: #ffffff;
    font-size: 18px;
    font-weight: 850;
    letter-spacing: 0.12em;
    line-height: 1.15;
    background: linear-gradient(90deg, #ffd9a0, #ffb3c9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
    word-break: break-all;
}

.bank-meta-copy {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 196, 102, 0.34);
    background: linear-gradient(135deg, rgba(255, 196, 102, 0.18), rgba(255, 122, 146, 0.16));
    color: #ffd9a0;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.bank-meta-copy:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 196, 102, 0.6);
    background: linear-gradient(135deg, rgba(255, 196, 102, 0.32), rgba(255, 122, 146, 0.26));
    color: #ffffff;
}

.bank-meta-copy.is-copied {
    border-color: rgba(32, 230, 139, 0.45) !important;
    background: rgba(32, 230, 139, 0.22) !important;
    color: #b8f7d4 !important;
}

.payment-single-banks .bank-account-card .bank-meta-reference small {
    display: block;
    color: rgba(255, 217, 184, 0.7);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
}

/* Alıcı — sade, kompakt */
.payment-single-banks .bank-account-card .bank-meta-holder {
    padding: 12px 14px;
    border-radius: 13px;
    border: 1px solid rgba(158, 184, 255, 0.14);
    background: rgba(255, 255, 255, 0.025);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.payment-single-banks .bank-account-card .bank-meta-holder > span {
    margin: 0;
    color: rgba(196, 179, 255, 0.78);
}

.payment-single-banks .bank-account-card .bank-meta-holder > strong {
    margin: 0;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0;
    font-family: inherit;
    text-align: right;
}

/* Form */
.payment-single-form {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
}

.payment-single-form .payment-field span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #c4b3ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.payment-single-form .payment-input {
    border: 1px solid rgba(139, 92, 246, 0.26);
    background:
        radial-gradient(circle at right, rgba(139, 92, 246, 0.08), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.payment-single-form .payment-input:focus {
    border-color: rgba(34, 211, 238, 0.5);
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.1), 0 8px 28px rgba(139, 92, 246, 0.18);
}

.payment-single-form .payment-input[readonly] {
    cursor: not-allowed;
    opacity: 0.94;
    background:
        repeating-linear-gradient(135deg, rgba(34, 211, 238, 0.04) 0 12px, transparent 12px 24px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    border-color: rgba(34, 211, 238, 0.26);
    color: #a8eaff;
}

.payment-single-form .payment-amount-presets {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.payment-single-form .payment-amount-presets button {
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(139, 92, 246, 0.22);
    background: rgba(139, 92, 246, 0.08);
    color: #d6caff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.payment-single-form .payment-amount-presets button:hover,
.payment-single-form .payment-amount-presets button.is-active {
    transform: translateY(-1px);
    border-color: rgba(34, 211, 238, 0.45);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.24), rgba(34, 211, 238, 0.18));
    color: #ffffff;
}

.payment-single-form .payment-locked-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.18);
    color: #b7eaff;
    font-size: 13px;
    font-weight: 700;
}

.payment-single-form .payment-locked-note i {
    color: #6ee7ff;
}

.payment-single-form .payment-confirm-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 4px;
}

.payment-single-form .payment-confirm-card {
    padding: 13px 14px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(158, 184, 255, 0.1);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.payment-single-form .payment-confirm-card:hover {
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.06);
}

.payment-single-form .payment-confirm-card span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: rgba(222, 233, 248, 0.6);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.payment-single-form .payment-confirm-card span i {
    color: #a4b4ff;
    font-size: 12px;
}

.payment-single-form .payment-confirm-card strong {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    word-break: break-word;
}

/* Submit — site geneli "bg-red" temasıyla aynı (violet→cyan→green) */
.payment-submit-full {
    width: 100%;
    min-height: 58px;
    margin-top: 6px;
    border-radius: 14px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 50%, #22d3ee 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    gap: 10px;
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.payment-submit-full:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 50px rgba(139, 92, 246, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    filter: brightness(1.06);
}

.payment-submit-full:active {
    transform: translateY(0);
}

.payment-submit-full i {
    font-size: 16px;
}

.payment-single-foot {
    margin: 6px 0 0;
    padding: 11px 14px;
    border-radius: 12px;
    background: rgba(32, 230, 139, 0.06);
    border: 1px solid rgba(32, 230, 139, 0.18);
    color: rgba(206, 246, 222, 0.84);
    font-size: 12.5px;
    line-height: 1.55;
    display: flex;
    align-items: center;
    gap: 8px;
}

.payment-single-foot i {
    color: #6ff2ad;
    font-size: 14px;
}

.bank-copy-btn.is-copied {
    background: rgba(32, 230, 139, 0.18) !important;
    border-color: rgba(32, 230, 139, 0.34) !important;
    color: #b8f7d4 !important;
}

/* Empty state */
.payment-single-banks .payment-empty-state {
    background: rgba(255, 77, 109, 0.06);
    border: 1px dashed rgba(255, 77, 109, 0.28);
    color: rgba(255, 215, 222, 0.86);
}

.payment-single-banks .payment-empty-state i {
    color: #ff7a92;
}

/* Responsive */
@media (max-width: 1199px) {
    .payment-single-shell {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .payment-single-form-card {
        position: static;
    }
}

@media (max-width: 991px) {
    .payment-hub-transfer-only {
        padding-top: 20px;
    }

    .payment-hub-transfer-only .payment-transfer-hero {
        padding: 24px 20px;
        margin-bottom: 16px;
        border-radius: 20px;
        gap: 16px;
    }

    .payment-hub-transfer-only .payment-transfer-hero .payment-hero-copy h1 {
        font-size: clamp(24px, 6vw, 32px) !important;
        line-height: 1.1;
        margin: 12px 0 10px;
        max-width: 100% !important;
    }

    .payment-hub-transfer-only .payment-transfer-hero .payment-hero-copy p {
        font-size: 14px;
        line-height: 1.55;
    }

    .payment-hub-transfer-only .payment-eyebrow {
        font-size: 10px;
        padding: 5px 12px;
        letter-spacing: 0.14em;
    }

    .payment-hub-transfer-only .payment-balance-card {
        min-height: auto;
        padding: 18px 20px;
        border-radius: 16px;
    }

    .payment-hub-transfer-only .payment-balance-card span,
    .payment-hub-transfer-only .payment-balance-card small {
        font-size: 12px;
    }

    .payment-hub-transfer-only .payment-balance-card strong {
        margin: 4px 0;
        font-size: clamp(26px, 7vw, 36px);
    }

    .payment-single-head {
        margin-bottom: 16px;
    }

    .payment-single-head h2 {
        margin: 10px 0 6px;
        font-size: clamp(19px, 4.4vw, 24px);
    }

    .payment-single-head p {
        font-size: 13px;
        line-height: 1.55;
    }
}

@media (max-width: 767px) {
    .payment-single-card {
        padding: 20px;
        border-radius: 20px;
    }

    .payment-single-form .payment-confirm-grid-compact {
        grid-template-columns: 1fr;
    }

    .payment-single-form .payment-amount-presets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .payment-single-banks .bank-account-card {
        padding: 18px;
    }

    .payment-single-banks .bank-account-head {
        grid-template-columns: 50px minmax(0, 1fr);
        row-gap: 10px;
    }

    .payment-single-banks .bank-account-card .bank-copy-btn {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 575px) {
    .payment-hub-transfer-only .payment-transfer-hero {
        padding: 20px 16px;
        border-radius: 18px;
    }

    .payment-hub-transfer-only .payment-transfer-hero .payment-hero-copy h1 {
        font-size: 24px !important;
    }

    .payment-hub-transfer-only .payment-balance-card {
        padding: 16px 18px;
    }

    .payment-single-card {
        padding: 18px 16px;
        border-radius: 18px;
    }

    .payment-single-banks .bank-account-grid {
        grid-template-columns: 1fr;
    }

    .payment-single-banks .payment-reference-card {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 12px;
        padding: 16px;
    }

    .payment-single-banks .payment-reference-card strong {
        font-size: 18px;
    }

    .payment-single-banks .payment-reference-card .bank-copy-btn {
        width: 100%;
    }

    .payment-single-banks .bank-account-card .bank-meta-item > strong {
        font-size: 12.5px;
        letter-spacing: 0.02em;
    }

    .payment-single-banks .bank-account-card .bank-meta-iban > strong {
        font-size: 16px;
        letter-spacing: 0.06em;
    }

    .bank-meta-reference-row strong {
        font-size: 16px;
        letter-spacing: 0.08em;
    }

    .bank-meta-copy {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }

    .payment-submit-full {
        min-height: 52px;
        font-size: 14px;
    }

    .payment-single-form .payment-input {
        font-size: 16px;
    }

    .payment-single-foot {
        font-size: 11.5px;
        padding: 10px 12px;
    }
}

/* =====================================================================
   WELCOME POPUP — "1 ALANA 1 BEDAVA" KAMPANYASI
   Premium animated popup, homepage only, once-per-day via localStorage.
   Class prefix: .wpop-  (Welcome POPup)
   ===================================================================== */

html.wpop-locked,
html.wpop-locked body {
    overflow: hidden !important;
}

.wpop-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
}

.wpop-overlay.is-open,
.wpop-overlay.is-closing {
    display: flex;
    pointer-events: auto;
}

.wpop-overlay.is-open {
    animation: wpopOverlayIn 0.42s cubic-bezier(.2,.7,.25,1) forwards;
}

.wpop-overlay.is-closing {
    animation: wpopOverlayOut 0.4s ease forwards;
}

@keyframes wpopOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes wpopOverlayOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.wpop-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(124, 58, 237, 0.45) 0%, rgba(11, 15, 20, 0.86) 55%, rgba(5, 7, 12, 0.94) 100%);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    cursor: pointer;
}

/* Drifting particles */
.wpop-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.wpop-p {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, rgba(168, 85, 247, 0.7) 60%, transparent 70%);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.7), 0 0 24px rgba(124, 58, 237, 0.45);
    opacity: 0;
    animation: wpopFloat 9s linear infinite;
}

.wpop-p1  { left: 8%;  bottom: -10px; animation-delay: 0s;   animation-duration: 11s; }
.wpop-p2  { left: 16%; bottom: -10px; animation-delay: 1.2s; animation-duration: 9s;  width: 4px; height: 4px; }
.wpop-p3  { left: 24%; bottom: -10px; animation-delay: 0.6s; animation-duration: 12s; width: 8px; height: 8px; }
.wpop-p4  { left: 34%; bottom: -10px; animation-delay: 2.4s; animation-duration: 10s; }
.wpop-p5  { left: 42%; bottom: -10px; animation-delay: 3.6s; animation-duration: 13s; width: 5px; height: 5px; }
.wpop-p6  { left: 52%; bottom: -10px; animation-delay: 1.8s; animation-duration: 9.5s; }
.wpop-p7  { left: 62%; bottom: -10px; animation-delay: 0.3s; animation-duration: 11.5s; width: 7px; height: 7px; }
.wpop-p8  { left: 70%; bottom: -10px; animation-delay: 2.1s; animation-duration: 10.5s; width: 4px; height: 4px; }
.wpop-p9  { left: 78%; bottom: -10px; animation-delay: 4.0s; animation-duration: 12.5s; }
.wpop-p10 { left: 86%; bottom: -10px; animation-delay: 1.4s; animation-duration: 9s;  width: 6px; height: 6px; }
.wpop-p11 { left: 92%; bottom: -10px; animation-delay: 2.8s; animation-duration: 11s; width: 5px; height: 5px; }
.wpop-p12 { left: 4%;  bottom: -10px; animation-delay: 3.2s; animation-duration: 13s; width: 7px; height: 7px; }

@keyframes wpopFloat {
    0%   { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
    10%  { opacity: 1; }
    50%  { transform: translateY(-55vh) translateX(20px) scale(1); opacity: 0.95; }
    90%  { opacity: 0.5; }
    100% { transform: translateY(-110vh) translateX(-30px) scale(0.5); opacity: 0; }
}

/* Card */
.wpop-overlay { perspective: 1400px; }

.wpop-card {
    position: relative;
    width: min(560px, 100%);
    max-height: calc(100vh - 48px);
    border-radius: 28px;
    padding: 44px 32px 28px;
    text-align: center;
    color: #fff;
    background:
        linear-gradient(155deg, rgba(36, 19, 70, 0.92) 0%, rgba(20, 14, 38, 0.96) 55%, rgba(13, 9, 26, 0.98) 100%);
    border: 1px solid rgba(168, 85, 247, 0.28);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(168, 85, 247, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    transform: rotateX(-30deg) translateY(120px) scale(0.55);
    opacity: 0;
    filter: blur(14px);
    will-change: transform, opacity, filter;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 85, 247, 0.5) transparent;
    transform-style: preserve-3d;
}

.wpop-card::-webkit-scrollbar { width: 6px; }
.wpop-card::-webkit-scrollbar-thumb { background: rgba(168, 85, 247, 0.5); border-radius: 3px; }

/* Diagonal ışık süpürmesi (kart açılırken bir kez geçer) */
.wpop-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 35%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(168, 85, 247, 0.35) 58%,
        rgba(255, 255, 255, 0) 70%,
        transparent 100%
    );
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: 8;
    opacity: 0;
    mix-blend-mode: overlay;
}

.wpop-overlay.is-open .wpop-card::after {
    animation: wpopCardSweep 1.4s cubic-bezier(.2,.7,.4,1) 0.45s forwards;
}

@keyframes wpopCardSweep {
    0%   { left: -60%; opacity: 0; }
    20%  { opacity: 1; }
    100% { left: 130%; opacity: 0; }
}

.wpop-overlay.is-open .wpop-card {
    animation: wpopCardIn 1.05s cubic-bezier(.2,1.25,.3,1) 0.05s forwards;
}

.wpop-overlay.is-closing .wpop-card {
    animation: wpopCardOut 0.35s ease forwards;
}

@keyframes wpopCardIn {
    0%   { transform: rotateX(-30deg) translateY(120px) scale(0.55); opacity: 0; filter: blur(14px); }
    35%  { opacity: 1; filter: blur(2px); }
    55%  { transform: rotateX(8deg) translateY(-14px) scale(1.05); filter: blur(0); }
    72%  { transform: rotateX(-3deg) translateY(4px) scale(0.99); }
    88%  { transform: rotateX(1deg) translateY(-1px) scale(1.005); }
    100% { transform: rotateX(0) translateY(0) scale(1); opacity: 1; filter: blur(0); }
}

@keyframes wpopCardOut {
    from { transform: rotateX(0) scale(1); opacity: 1; }
    to   { transform: rotateX(15deg) scale(0.9) translateY(30px); opacity: 0; }
}

/* Aurora glows inside card */
.wpop-aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 28px;
}

.wpop-aurora span {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.6;
    mix-blend-mode: screen;
    animation: wpopAuroraDrift 12s ease-in-out infinite alternate;
}

.wpop-aurora-1 {
    width: 320px; height: 320px;
    top: -90px; left: -80px;
    background: radial-gradient(circle, #a855f7, transparent 70%);
}

.wpop-aurora-2 {
    width: 280px; height: 280px;
    top: -60px; right: -60px;
    background: radial-gradient(circle, #22d3ee, transparent 70%);
    animation-delay: -4s;
}

.wpop-aurora-3 {
    width: 360px; height: 360px;
    bottom: -120px; left: 20%;
    background: radial-gradient(circle, #ec4899, transparent 70%);
    animation-delay: -7s;
    opacity: 0.4;
}

@keyframes wpopAuroraDrift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(20px, 30px) scale(1.1); }
    100% { transform: translate(-20px, -10px) scale(0.95); }
}

/* Açılış flash patlaması — beyaz/mor radial flash kart açılırken parlar */
.wpop-flash {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    margin-top: -300px;
    margin-left: -300px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(168, 85, 247, 0.65) 28%, rgba(124, 58, 237, 0.25) 50%, transparent 70%);
    mix-blend-mode: screen;
    opacity: 0;
    transform: scale(0.2);
    will-change: transform, opacity;
}

.wpop-overlay.is-open .wpop-flash {
    animation: wpopFlash 1.2s cubic-bezier(.2,.7,.4,1) 0.05s forwards;
}

@keyframes wpopFlash {
    0%   { opacity: 0; transform: scale(0.2); }
    25%  { opacity: 1; transform: scale(1.0); }
    60%  { opacity: 0.55; transform: scale(1.4); }
    100% { opacity: 0; transform: scale(1.9); }
}

/* God rays — hediyenin arkasında dönen ışık huzmeleri */
.wpop-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280px;
    height: 280px;
    margin-top: -140px;
    margin-left: -140px;
    pointer-events: none;
    z-index: 0;
    background: repeating-conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(253, 230, 138, 0.18) 3deg,
        rgba(168, 85, 247, 0.22) 6deg,
        transparent 9deg,
        transparent 30deg
    );
    border-radius: 50%;
    -webkit-mask: radial-gradient(circle, black 8%, rgba(0,0,0,0.7) 30%, transparent 65%);
    mask: radial-gradient(circle, black 8%, rgba(0,0,0,0.7) 30%, transparent 65%);
    filter: blur(1px);
    opacity: 0;
    animation: wpopRaysSpin 14s linear infinite;
    transition: opacity 0.7s ease 0.55s;
    mix-blend-mode: screen;
}

.wpop-overlay.is-open .wpop-rays {
    opacity: 1;
}

@keyframes wpopRaysSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Impact halkaları — hediye yere düştüğünde dalga */
.wpop-impact {
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid rgba(168, 85, 247, 0.7);
    box-shadow: 0 0 18px rgba(168, 85, 247, 0.6);
    transform: translate(-50%, 0) scale(0);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.wpop-overlay.is-open .wpop-impact {
    animation: wpopImpactRing 1.4s ease-out 0.95s 1 forwards;
}

.wpop-overlay.is-open .wpop-impact-2 {
    animation: wpopImpactRing 1.4s ease-out 1.15s 1 forwards;
    border-color: rgba(253, 230, 138, 0.7);
    box-shadow: 0 0 18px rgba(253, 230, 138, 0.5);
}

@keyframes wpopImpactRing {
    0%   { transform: translate(-50%, 0) scale(0.2); opacity: 1; }
    100% { transform: translate(-50%, 0) scale(3.6); opacity: 0; }
}

/* Confetti burst on open */
.wpop-confetti {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
    pointer-events: none;
    z-index: 5;
}

.wpop-confetti i {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 14px;
    background: var(--c, #fff);
    border-radius: 2px;
    transform: translate(-50%, -50%) scale(0) rotate(0);
    opacity: 0;
}

.wpop-overlay.is-open .wpop-confetti i {
    animation: wpopConfetti 1.4s cubic-bezier(.2,.7,.4,1) 0.45s forwards;
}

@keyframes wpopConfetti {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--x, 0)), calc(-50% + var(--y, 0))) scale(1) rotate(var(--r, 0)); opacity: 0; }
}

/* Floating game logo orbit */
.wpop-orbit {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.wpop-orbit-item {
    position: absolute;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(168, 85, 247, 0.35);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(168, 85, 247, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
}

.wpop-orbit-item img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.wpop-overlay.is-open .wpop-orbit-item {
    animation: wpopOrbitIn 0.6s ease forwards, wpopOrbitFloat 5s ease-in-out infinite;
}

.wpop-orbit-1 { top: 18px;  left: 18px;  animation-delay: 0.55s, 0.9s; }
.wpop-orbit-2 { top: 18px;  right: 18px; animation-delay: 0.65s, 1.1s; }
.wpop-orbit-3 { bottom: 90px; left: 14px; animation-delay: 0.75s, 1.3s; }
.wpop-orbit-4 { bottom: 90px; right: 14px; animation-delay: 0.85s, 1.5s; }

@keyframes wpopOrbitIn {
    from { opacity: 0; transform: scale(0.5) rotate(-25deg); }
    to   { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes wpopOrbitFloat {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-8px) rotate(3deg); }
}

/* Close button */
.wpop-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 0;
}

.wpop-close:hover {
    transform: rotate(90deg) scale(1.08);
    background: rgba(168, 85, 247, 0.5);
    border-color: rgba(255, 255, 255, 0.35);
}

/* Content stack */
.wpop-content {
    position: relative;
    z-index: 4;
}

.wpop-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #f0abfc;
    background: rgba(168, 85, 247, 0.14);
    border: 1px solid rgba(168, 85, 247, 0.35);
    padding: 7px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
    opacity: 0;
}

.wpop-overlay.is-open .wpop-eyebrow {
    animation: wpopFadeUp 0.5s ease 0.3s forwards;
}

.wpop-eyebrow-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f472b6;
    box-shadow: 0 0 0 0 rgba(244, 114, 182, 0.7);
    animation: wpopPulse 1.6s ease-in-out infinite;
}

@keyframes wpopPulse {
    0%   { box-shadow: 0 0 0 0 rgba(244, 114, 182, 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(244, 114, 182, 0); }
    100% { box-shadow: 0 0 0 0 rgba(244, 114, 182, 0); }
}

@keyframes wpopFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Animated gift box */
.wpop-gift {
    position: relative;
    width: 110px;
    height: 110px;
    margin: 0 auto 14px;
    opacity: 0;
}

.wpop-overlay.is-open .wpop-gift {
    animation: wpopGiftIn 0.7s cubic-bezier(.2,1.5,.3,1) 0.4s forwards;
}

@keyframes wpopGiftIn {
    0%   { opacity: 0; transform: translateY(-30px) scale(0.4) rotate(-12deg); }
    55%  { opacity: 1; transform: translateY(8px) scale(1.12) rotate(4deg); }
    78%  { transform: translateY(-3px) scale(0.96) rotate(-1deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

.wpop-gift-glow {
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.55) 0%, rgba(124, 58, 237, 0) 65%);
    filter: blur(8px);
    border-radius: 50%;
    animation: wpopGiftGlow 2.4s ease-in-out infinite;
}

@keyframes wpopGiftGlow {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

.wpop-gift-shadow {
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 80px;
    height: 12px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.5), transparent 70%);
    transform: translateX(-50%);
    filter: blur(4px);
}

.wpop-gift-box {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: center bottom;
    animation: wpopGiftWiggle 2.6s ease-in-out infinite;
}

@keyframes wpopGiftWiggle {
    0%, 100% { transform: rotate(-3deg); }
    50%      { transform: rotate(3deg); }
}

.wpop-gift-base {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 86px;
    height: 64px;
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #5b21b6 100%);
    border-radius: 6px;
    box-shadow:
        inset 0 -6px 12px rgba(0, 0, 0, 0.25),
        inset 0 4px 8px rgba(255, 255, 255, 0.18),
        0 6px 18px rgba(124, 58, 237, 0.5);
}

.wpop-gift-lid {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 22px;
    background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #7c3aed 100%);
    border-radius: 6px;
    box-shadow:
        inset 0 -3px 6px rgba(0, 0, 0, 0.2),
        inset 0 3px 6px rgba(255, 255, 255, 0.25),
        0 4px 12px rgba(168, 85, 247, 0.45);
    transform-origin: center bottom;
    animation: wpopLidLift 2.6s ease-in-out infinite;
}

@keyframes wpopLidLift {
    0%, 75%, 100% { transform: translateX(-50%) translateY(0) rotate(0); }
    85%           { transform: translateX(-50%) translateY(-8px) rotate(-6deg); }
}

.wpop-gift-ribbon-v {
    position: absolute;
    top: 0;
    left: 50%;
    width: 12px;
    height: 100%;
    background: linear-gradient(180deg, #fde68a, #fbbf24);
    transform: translateX(-50%);
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
}

.wpop-gift-bow {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 30px;
    height: 14px;
    transform: translateX(-50%);
    z-index: 3;
}

.wpop-bow-l, .wpop-bow-r {
    position: absolute;
    top: 0;
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 30% 30%, #fde68a, #f59e0b);
    border-radius: 50% 50% 0 50%;
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.2);
}

.wpop-bow-l { left: 0; transform: rotate(-25deg); }
.wpop-bow-r { right: 0; transform: rotate(25deg) scaleX(-1); }

.wpop-bow-c {
    position: absolute;
    top: 4px;
    left: 50%;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #fbbf24, #d97706);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 4px rgba(251, 191, 36, 0.8);
}

/* burst sparks shooting out of the gift periodically */
.wpop-gift-burst {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.wpop-gift-burst span {
    position: absolute;
    top: 18px;
    left: 50%;
    width: 4px;
    height: 4px;
    background: #fde68a;
    border-radius: 50%;
    box-shadow: 0 0 6px #facc15;
    transform: translate(-50%, 0) scale(0);
    opacity: 0;
    animation: wpopBurst 2.6s ease-out infinite;
}

.wpop-gift-burst span:nth-child(1) { --bx: -55px; --by: -50px; animation-delay: 0s; }
.wpop-gift-burst span:nth-child(2) { --bx:   0px; --by: -75px; animation-delay: 0.05s; }
.wpop-gift-burst span:nth-child(3) { --bx:  55px; --by: -50px; animation-delay: 0.1s; }
.wpop-gift-burst span:nth-child(4) { --bx: -70px; --by: -10px; animation-delay: 0.15s; }
.wpop-gift-burst span:nth-child(5) { --bx:  70px; --by: -10px; animation-delay: 0.2s; }
.wpop-gift-burst span:nth-child(6) { --bx: -30px; --by: -85px; animation-delay: 0.25s; }
.wpop-gift-burst span:nth-child(7) { --bx:  30px; --by: -85px; animation-delay: 0.3s; }
.wpop-gift-burst span:nth-child(8) { --bx:   0px; --by: -95px; animation-delay: 0.35s; }

@keyframes wpopBurst {
    0%, 70%, 100% { transform: translate(-50%, 0) scale(0); opacity: 0; }
    78%           { transform: translate(calc(-50% + var(--bx, 0)), var(--by, -60px)) scale(1.2); opacity: 1; }
    95%           { transform: translate(calc(-50% + var(--bx, 0) * 1.4), calc(var(--by, -60px) * 1.2)) scale(0.6); opacity: 0; }
}

/* Title */
.wpop-title {
    margin: 0 0 12px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.5px;
}

.wpop-title-row1 {
    display: block;
    font-size: 28px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    margin-bottom: 4px;
    perspective: 600px;
}

/* "1 ALANA" — harf cascade (her harf zıplayarak iner) */
.wpop-l {
    display: inline-block;
    opacity: 0;
    transform: translateY(-40px) rotateZ(-14deg) scale(0.4);
    will-change: transform, opacity;
}

.wpop-overlay.is-open .wpop-l {
    animation: wpopLetterDrop 0.6s cubic-bezier(.2,1.6,.35,1) calc(0.55s + var(--i, 0) * 0.06s) forwards;
}

@keyframes wpopLetterDrop {
    0%   { opacity: 0; transform: translateY(-40px) rotateZ(-14deg) scale(0.4); }
    55%  { opacity: 1; transform: translateY(6px) rotateZ(3deg) scale(1.12); }
    78%  { transform: translateY(-2px) rotateZ(-1deg) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) rotateZ(0) scale(1); }
}

.wpop-title-row2 {
    display: block;
    font-size: 56px;
    line-height: 1;
    opacity: 0;
    transform-origin: center;
    transform-style: preserve-3d;
    will-change: transform, opacity, filter;
}

.wpop-overlay.is-open .wpop-title-row2 {
    animation: wpopBigDrop 0.85s cubic-bezier(.2,1.5,.3,1) 0.92s forwards;
}

@keyframes wpopBigDrop {
    0%   { opacity: 0; transform: scale(0.4) rotateX(-65deg); filter: blur(12px); }
    50%  { opacity: 1; transform: scale(1.18) rotateX(10deg); filter: blur(0); }
    72%  { transform: scale(0.96) rotateX(-3deg); }
    88%  { transform: scale(1.02) rotateX(1deg); }
    100% { opacity: 1; transform: scale(1) rotateX(0); filter: blur(0); }
}

.wpop-shine {
    background: linear-gradient(
        90deg,
        #f0abfc 0%,
        #c4b5fd 18%,
        #ffffff 32%,
        #fde68a 48%,
        #ffffff 64%,
        #c4b5fd 82%,
        #f0abfc 100%
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 18px rgba(168, 85, 247, 0.55));
    animation: wpopShine 3.2s linear infinite;
}

@keyframes wpopShine {
    0%   { background-position: 0% 50%; }
    100% { background-position: 250% 50%; }
}

/* Subtitle */
.wpop-subtitle {
    margin: 0 auto 22px;
    max-width: 420px;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(229, 218, 255, 0.86);
    opacity: 0;
}

.wpop-subtitle b {
    color: #fff;
    font-weight: 700;
}

.wpop-overlay.is-open .wpop-subtitle {
    animation: wpopFadeUp 0.5s ease 1.45s forwards;
}

/* Countdown */
.wpop-countdown {
    display: inline-flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 18px;
    margin-bottom: 22px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(168, 85, 247, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    opacity: 0;
}

.wpop-overlay.is-open .wpop-countdown {
    animation: wpopCountdownIn 0.7s cubic-bezier(.2,1.4,.3,1) 1.55s forwards;
}

@keyframes wpopCountdownIn {
    0%   { opacity: 0; transform: translateY(20px) scale(0.85); }
    60%  { opacity: 1; transform: translateY(-3px) scale(1.05); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.wpop-cd-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 52px;
}

.wpop-cd-num {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, #ffffff 0%, #c4b5fd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.wpop-cd-lbl {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(196, 181, 253, 0.75);
    margin-top: 6px;
    font-weight: 600;
}

.wpop-cd-sep {
    font-size: 26px;
    font-weight: 800;
    color: rgba(168, 85, 247, 0.6);
    margin: 0 -2px;
    padding-bottom: 22px;
    animation: wpopBlink 1s ease-in-out infinite;
}

@keyframes wpopBlink {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

/* CTA */
.wpop-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 340px;
    padding: 16px 28px;
    border: 0;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #fff;
    background:
        linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #5b21b6 100%);
    box-shadow:
        0 12px 28px rgba(124, 58, 237, 0.5),
        0 0 0 1px rgba(168, 85, 247, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    opacity: 0;
}

.wpop-overlay.is-open .wpop-cta {
    animation: wpopCtaIn 0.7s cubic-bezier(.2,1.5,.3,1) 1.7s forwards, wpopCtaPulse 2.4s ease-in-out 2.5s infinite;
}

@keyframes wpopCtaIn {
    0%   { opacity: 0; transform: translateY(28px) scale(0.7); }
    55%  { opacity: 1; transform: translateY(-4px) scale(1.06); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes wpopCtaPulse {
    0%, 100% { box-shadow: 0 12px 28px rgba(124, 58, 237, 0.5), 0 0 0 1px rgba(168, 85, 247, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
    50%      { box-shadow: 0 16px 36px rgba(124, 58, 237, 0.65), 0 0 0 4px rgba(168, 85, 247, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
}

.wpop-cta:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 18px 40px rgba(124, 58, 237, 0.6),
        0 0 0 1px rgba(168, 85, 247, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.wpop-cta:active {
    transform: translateY(0) scale(0.99);
}

.wpop-cta-shine {
    position: absolute;
    top: 0;
    left: -75%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 70%,
        transparent 100%
    );
    transform: skewX(-22deg);
    animation: wpopCtaShine 3.2s ease-in-out infinite;
}

@keyframes wpopCtaShine {
    0%, 60% { left: -75%; }
    100%    { left: 130%; }
}

.wpop-cta-arrow {
    display: inline-flex;
    align-items: center;
    transition: transform 0.25s ease;
}

.wpop-cta:hover .wpop-cta-arrow {
    transform: translateX(4px);
}

.wpop-cta-label {
    position: relative;
    z-index: 1;
}

/* Dismiss link */
.wpop-dismiss {
    display: inline-block;
    margin-top: 14px;
    background: transparent;
    border: 0;
    color: rgba(196, 181, 253, 0.55);
    font-size: 12.5px;
    text-decoration: underline;
    text-decoration-color: rgba(196, 181, 253, 0.25);
    text-underline-offset: 3px;
    cursor: pointer;
    padding: 6px 10px;
    transition: color 0.2s ease;
    opacity: 0;
}

.wpop-dismiss:hover {
    color: #fff;
}

.wpop-overlay.is-open .wpop-dismiss {
    animation: wpopFadeUp 0.5s ease 2s forwards;
}

/* Responsive — Mobile */
@media (max-width: 600px) {
    .wpop-overlay { padding: 12px; }
    .wpop-card {
        padding: 30px 18px 20px;
        border-radius: 22px;
    }
    /* Mobilde sadece sol üstteki tek logo kalsın; diğerleri içerikle çakışıyordu */
    .wpop-orbit-item { width: 36px; height: 36px; border-radius: 11px; }
    .wpop-orbit-1 { top: 14px; left: 14px; }
    .wpop-orbit-2,
    .wpop-orbit-3,
    .wpop-orbit-4 { display: none !important; }

    .wpop-close { top: 10px; right: 10px; width: 32px; height: 32px; }

    .wpop-eyebrow   { font-size: 10.5px; padding: 6px 12px; letter-spacing: 1.1px; margin-top: 6px; }
    .wpop-title-row1 { font-size: 22px; }
    .wpop-title-row2 { font-size: 42px; }
    .wpop-subtitle   { font-size: 13.5px; padding: 0 4px; }
    .wpop-cd-num     { font-size: 22px; }
    .wpop-cd-item    { min-width: 44px; }
    .wpop-cd-sep     { font-size: 22px; padding-bottom: 18px; }
    .wpop-cta        { font-size: 13px; padding: 14px 22px; letter-spacing: 1px; }
    .wpop-gift       { width: 96px; height: 96px; }
    .wpop-gift-base  { width: 76px; height: 56px; }
    .wpop-gift-lid   { width: 86px; height: 20px; top: 16px; }
}

@media (max-width: 380px) {
    .wpop-title-row2 { font-size: 34px; }
    .wpop-title-row1 { font-size: 20px; }
    .wpop-orbit-item { width: 32px; height: 32px; }
    .wpop-cd-item    { min-width: 38px; }
    .wpop-cd-num     { font-size: 20px; }
    .wpop-cd-lbl     { font-size: 9px; letter-spacing: 1.1px; }
    .wpop-countdown  { padding: 10px 14px; gap: 6px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .wpop-overlay,
    .wpop-overlay * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .wpop-overlay.is-open .wpop-card { transform: scale(1) translateY(0); opacity: 1; }
}

/* ==========================================================================
   PREMIUM REDESIGN V2 - GLASSMORPHISM & MICRO-ANIMATIONS
   ========================================================================== */

/* Owl Streamer Fade Overrides to match new dark background */
.owl-streamer .owl-stage-outer::before {
    background: linear-gradient(to left, rgba(11, 15, 20, 0) 0%, rgba(11, 15, 20, 0) 26.2%, #0b0f14 100%) !important;
}
.owl-streamer .owl-stage-outer::after {
    background: linear-gradient(to right, rgba(11, 15, 20, 0) 0%, rgba(11, 15, 20, 0) 26.2%, #0b0f14 100%) !important;
}

/* Premium Brand/Sponsor Logo Cards */
.owl-streamer .item {
    padding: 12px 6px;
}
.owl-streamer .item .profile {
    width: 100% !important;
    max-width: 140px;
    height: 68px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 14px !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
.owl-streamer .item .profile::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.owl-streamer .item .profile:hover {
    background: rgba(124, 58, 237, 0.04) !important;
    border-color: rgba(124, 58, 237, 0.35) !important;
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 25px rgba(124, 58, 237, 0.12), 0 0 15px rgba(124, 58, 237, 0.08);
}
.owl-streamer .item .profile img {
    max-width: 85% !important;
    max-height: 38px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Style for JPEGs with white backgrounds (Playstation, Steam, Xbox, etc.) */
.owl-streamer .item .profile img[src*="platform-"],
.owl-streamer .item .profile img[src$=".jpeg"],
.owl-streamer .item .profile img[src$=".jpg"] {
    filter: invert(1) contrast(1.2) brightness(1.2) opacity(0.65) !important;
    mix-blend-mode: screen !important;
}
.owl-streamer .item .profile:hover img[src*="platform-"],
.owl-streamer .item .profile:hover img[src$=".jpeg"],
.owl-streamer .item .profile:hover img[src$=".jpg"] {
    filter: invert(1) contrast(1.2) brightness(1.2) opacity(1) !important;
}

/* Style for transparent PNGs (Clubhouse, Instagram, Spotify, etc.) */
.owl-streamer .item .profile img:not([src*="platform-"]):not([src$=".jpeg"]):not([src$=".jpg"]) {
    filter: opacity(0.6) !important;
}
.owl-streamer .item .profile:hover img:not([src*="platform-"]):not([src$=".jpeg"]):not([src$=".jpg"]) {
    filter: opacity(1) !important;
}

/* Hero Slider & Quick Categories Refinements */
.hero-slider-wrap {
    border-radius: 20px !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35), 0 0 30px rgba(124, 58, 237, 0.08);
}
.hero-slider-wrap .theme-card {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-slider-wrap:hover .theme-card {
    transform: scale(1.015);
}

.quick-cat-item {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}
.quick-cat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.08),
        transparent
    );
    transition: 0.5s;
    pointer-events: none;
}
.quick-cat-item:hover::before {
    left: 100%;
}
.quick-cat-item:hover {
    transform: translateY(-3px);
    border-color: rgba(168, 85, 247, 0.3) !important;
    background: rgba(124, 58, 237, 0.15) !important;
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.18), 0 0 10px rgba(124, 58, 237, 0.08) !important;
}

/* Product Cards Sweep Shine & Radial Glow */
.product-card {
    position: relative;
    overflow: hidden;
}
.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.13) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    z-index: 3;
    pointer-events: none;
}
.product-card:hover::before {
    animation: prodShine 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes prodShine {
    0% { left: -150%; }
    100% { left: 150%; }
}

.product-card-img {
    position: relative;
    background: radial-gradient(circle at center, rgba(139, 92, 246, 0.15) 0%, transparent 70%), #0c0a16 !important;
}
.product-card:hover .product-card-img img {
    transform: scale(1.06) rotate(1deg);
}

.pbadge {
    text-transform: uppercase;
    font-size: 9px !important;
    letter-spacing: 0.8px !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Navigation Search Bar & Controls */
.header-search-wrap {
    position: relative;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}
.header-search-wrap:focus-within {
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.15), inset 0 0 10px rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.35);
}

.btn-header-login {
    position: relative;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-header-login:hover {
    border-color: rgba(139, 92, 246, 0.4) !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.12);
    transform: translateY(-1px);
}

.btn-header-register {
    background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
    border: none !important;
    color: #fff !important;
    position: relative;
    z-index: 1;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-header-register::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.btn-header-register:hover::before {
    opacity: 1;
}
.btn-header-register:hover {
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.35), 0 0 15px rgba(124, 58, 237, 0.2);
    transform: translateY(-1px);
}

/* Trust/Benefits Cards Redesign */
.col-md-3.col-sm-6 .bg-dark-light-2 {
    background: rgba(30, 37, 48, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.col-md-3.col-sm-6 .bg-dark-light-2:hover {
    background: rgba(30, 37, 48, 0.8) !important;
    border-color: rgba(139, 92, 246, 0.35);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 15px rgba(139, 92, 246, 0.06);
}
.col-md-3.col-sm-6 .bg-dark-light-2 img {
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.col-md-3.col-sm-6 .bg-dark-light-2:hover img {
    transform: scale(1.15) rotate(5deg);
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.4));
}

/* Payoup POS */
.payoup-pos-card {
    margin: 18px 0 22px;
    border-color: rgba(34, 197, 94, 0.2);
    background:
        radial-gradient(circle at 12% 8%, rgba(34, 197, 94, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(30, 37, 48, 0.98), rgba(15, 20, 29, 0.98));
}

.payoup-pos-grid {
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr auto;
    gap: 14px;
    align-items: end;
}

.payoup-presets {
    align-self: end;
}

.payoup-pos-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-self: center;
}

.payoup-pos-summary span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.075);
    font-size: 12px;
    font-weight: 700;
}

.payoup-currency-note {
    margin-top: 8px !important;
    color: #fbbf24 !important;
    font-size: 12px !important;
}

.payoup-pay-button {
    min-width: 180px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #07120b !important;
}

.payoup-pay-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 991px) {
    .payoup-pos-grid {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .payoup-pay-button {
        min-width: 0;
    }
}

/* ============================================================
   ODEME PAGE - Dark Theme (Site Uyumlu)
   ============================================================ */

:root {
    --odeme-bg: #0b1120;
    --odeme-card-bg: #111b2e;
    --odeme-card-bg-alt: #152031;
    --odeme-primary: #6366f1;
    --odeme-primary-hover: #818cf8;
    --odeme-primary-glow: rgba(99,102,241,0.2);
    --odeme-text: #e2e8f0;
    --odeme-text-secondary: #94a3b8;
    --odeme-border: #1e293b;
    --odeme-border-light: #263348;
    --odeme-radius: 14px;
    --odeme-radius-sm: 10px;
    --odeme-shadow: 0 2px 8px rgba(0,0,0,0.25);
    --odeme-shadow-md: 0 4px 16px rgba(0,0,0,0.35);
    --odeme-success: #10b981;
    --odeme-warning: #f59e0b;
    --odeme-error: #ef4444;
}

/* Hero */
.odeme-hero {
    background: #0b1120;
    padding: 40px 0;
    border-bottom: 1px solid var(--odeme-border);
    position: relative;
    overflow: hidden;
}

.odeme-hero::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.odeme-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.odeme-hero-content { flex: 1; }

.odeme-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(99,102,241,0.12);
    color: #a5b4fc;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 14px;
    border: 1px solid rgba(99,102,241,0.2);
}

.odeme-eyebrow i { font-size: 14px; color: #818cf8; }

.odeme-hero-content h1 {
    color: #f1f5f9;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

.odeme-hero-content p {
    color: #94a3b8;
    font-size: 15px;
    margin: 0;
    line-height: 1.6;
    max-width: 500px;
}

.odeme-balance-badge {
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: var(--odeme-radius);
    padding: 18px 26px;
    text-align: center;
    min-width: 150px;
    flex-shrink: 0;
}

.odeme-balance-badge span {
    display: block;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.odeme-balance-badge strong {
    display: block;
    color: #f1f5f9;
    font-size: 24px;
    font-weight: 700;
}

/* Main */
.odeme-main {
    background: var(--odeme-bg);
    padding: 36px 0 60px;
    min-height: 60vh;
}

.odeme-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 36px;
}

/* Cards */
.odeme-card {
    background: var(--odeme-card-bg);
    border-radius: var(--odeme-radius);
    border: 1px solid var(--odeme-border);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.odeme-card:hover { border-color: var(--odeme-border-light); }

.odeme-card--primary { border-top: 2px solid var(--odeme-primary); }

.odeme-card--secondary { border-top: 2px solid #818cf8; }

.odeme-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px 0;
}

.odeme-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    background: rgba(99,102,241,0.12);
    color: #818cf8;
}

.odeme-card-icon--bank {
    background: rgba(129,140,248,0.1);
    color: #a5b4fc;
}

.odeme-card-title h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--odeme-text);
    margin: 0 0 2px;
}

.odeme-card-title p {
    font-size: 13px;
    color: var(--odeme-text-secondary);
    margin: 0;
}

.odeme-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 50px;
    margin-left: auto;
    flex-shrink: 0;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.odeme-badge--test {
    background: rgba(245,158,11,0.15);
    color: #fbbf24;
    border: 1px solid rgba(245,158,11,0.3);
}

.odeme-card-body { padding: 22px 24px 24px; }

/* Amount */
.odeme-amount-section { margin-bottom: 20px; }

.odeme-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--odeme-text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.odeme-amount-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.odeme-amount-input {
    width: 100%;
    height: 54px;
    border: 1px solid var(--odeme-border);
    border-radius: var(--odeme-radius-sm);
    padding: 0 54px 0 16px;
    font-size: 20px;
    font-weight: 700;
    color: var(--odeme-text);
    background: var(--odeme-card-bg-alt);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.odeme-amount-input:focus {
    border-color: var(--odeme-primary);
    box-shadow: 0 0 0 3px var(--odeme-primary-glow);
}

.odeme-amount-input[readonly] {
    background: #0f1a29;
    cursor: default;
    opacity: 0.7;
}

.odeme-amount-currency {
    position: absolute;
    right: 14px;
    font-size: 18px;
    font-weight: 700;
    color: var(--odeme-text-secondary);
    pointer-events: none;
}

/* Presets */
.odeme-presets {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.odeme-preset {
    padding: 7px 16px;
    border: 1px solid var(--odeme-border);
    border-radius: 50px;
    background: transparent;
    color: var(--odeme-text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.odeme-preset:hover {
    border-color: var(--odeme-primary);
    color: var(--odeme-text);
    background: rgba(99,102,241,0.08);
}

.odeme-preset.active {
    background: var(--odeme-primary);
    color: #fff;
    border-color: var(--odeme-primary);
}

/* Conversion */
.odeme-conversion {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.15);
    border-radius: 8px;
    font-size: 12px;
    color: #fbbf24;
}

.odeme-conversion i { font-size: 14px; color: #f59e0b; }

/* Buttons */
.odeme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 24px;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: var(--odeme-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    text-align: center;
}

.odeme-btn--pay {
    background: var(--odeme-primary);
    color: #fff;
    font-size: 16px;
    padding: 15px 24px;
}

.odeme-btn--pay:hover {
    background: var(--odeme-primary-hover);
    box-shadow: 0 0 20px rgba(99,102,241,0.3);
    transform: translateY(-1px);
}

.odeme-btn--pay:active { transform: translateY(0); }

.odeme-btn--pay:disabled {
    background: #334155;
    color: #64748b;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.odeme-btn--notify {
    background: #4f46e5;
    color: #fff;
    font-size: 14px;
    padding: 13px 22px;
    margin-top: 4px;
}

.odeme-btn--notify:hover {
    background: #6366f1;
    box-shadow: 0 0 16px rgba(99,102,241,0.25);
}

.odeme-btn--cancel {
    background: transparent;
    color: var(--odeme-text-secondary);
    border: 1px solid var(--odeme-border);
    margin-top: 12px;
    width: auto;
    font-size: 13px;
    padding: 9px 18px;
}

.odeme-btn--cancel:hover {
    border-color: #475569;
    color: var(--odeme-text);
    background: rgba(255,255,255,0.03);
}

/* Payoup Container */
.odeme-payoup-container {
    margin-top: 20px;
    border: 1px solid var(--odeme-border);
    border-radius: var(--odeme-radius);
    overflow: hidden;
    background: var(--odeme-card-bg-alt);
}

.odeme-payoup-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(16,185,129,0.06);
    border-bottom: 1px solid var(--odeme-border);
    font-size: 12px;
    font-weight: 600;
    color: #34d399;
}

.odeme-payoup-header i { font-size: 14px; }

#payment-container {
    padding: 8px;
    background: #fff;
}

/* Bank List */
.odeme-bank-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.odeme-bank-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--odeme-border);
    border-radius: var(--odeme-radius-sm);
    background: var(--odeme-card-bg-alt);
    transition: border-color 0.2s;
}

.odeme-bank-item:hover { border-color: var(--odeme-border-light); }

.odeme-bank-badge {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.odeme-bank-info { flex: 1; min-width: 0; }

.odeme-bank-info strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--odeme-text);
    margin-bottom: 2px;
}

.odeme-bank-info span {
    display: block;
    font-size: 11px;
    color: var(--odeme-text-secondary);
    margin-bottom: 3px;
}

.odeme-bank-iban {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--odeme-text-secondary);
    background: rgba(255,255,255,0.03);
    padding: 3px 8px;
    border-radius: 4px;
    font-family: 'SF Mono','Consolas','Monaco',monospace;
    letter-spacing: 0.03em;
    word-break: break-all;
}

.odeme-bank-copy {
    width: 36px;
    height: 36px;
    border: 1px solid var(--odeme-border);
    border-radius: 8px;
    background: transparent;
    color: var(--odeme-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: all 0.2s;
}

.odeme-bank-copy:hover {
    background: rgba(99,102,241,0.1);
    color: #818cf8;
    border-color: rgba(99,102,241,0.3);
}

.odeme-bank-copy.copied {
    background: rgba(16,185,129,0.1);
    color: #34d399;
    border-color: rgba(16,185,129,0.3);
}

/* Reference */
.odeme-reference {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    background: rgba(245,158,11,0.07);
    border: 1px solid rgba(245,158,11,0.15);
    border-radius: var(--odeme-radius-sm);
    margin-bottom: 8px;
}

.odeme-reference > i {
    font-size: 18px;
    color: #f59e0b;
    flex-shrink: 0;
}

.odeme-reference div { flex: 1; }

.odeme-reference div span {
    display: block;
    font-size: 11px;
    color: #fbbf24;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.odeme-reference div strong {
    font-size: 16px;
    color: #fde68a;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.odeme-reference-copy {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: 8px;
    background: transparent;
    color: #fbbf24;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: all 0.2s;
}

.odeme-reference-copy:hover {
    background: rgba(245,158,11,0.12);
}

.odeme-reference-copy.copied {
    background: rgba(16,185,129,0.1);
    color: #34d399;
    border-color: rgba(16,185,129,0.3);
}

.odeme-reference-note {
    font-size: 12px;
    color: #fbbf24;
    margin: 4px 0 16px;
    font-weight: 500;
}

/* Notify Form */
.odeme-notify-form {
    border-top: 1px solid var(--odeme-border);
    padding-top: 18px;
    margin-top: 4px;
}

.odeme-notify-form h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--odeme-text);
    margin: 0 0 3px;
}

.odeme-notify-form > p {
    font-size: 12px;
    color: var(--odeme-text-secondary);
    margin: 0 0 16px;
}

.odeme-locked-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 13px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--odeme-border);
    border-radius: 8px;
    font-size: 12px;
    color: var(--odeme-text-secondary);
}

.odeme-locked-note i { font-size: 13px; }

/* Alerts */
.odeme-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--odeme-border);
    border-radius: var(--odeme-radius-sm);
    font-size: 13px;
    color: var(--odeme-text-secondary);
    margin-top: 14px;
}

.odeme-alert i { font-size: 16px; }

.odeme-alert--warn {
    background: rgba(245,158,11,0.06);
    border-color: rgba(245,158,11,0.2);
    color: #fbbf24;
}

.odeme-alert--warn i { color: #f59e0b; }

/* Toast */
.odeme-toast {
    position: fixed;
    top: 24px;
    right: 24px;
    padding: 13px 22px;
    border-radius: var(--odeme-radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    z-index: 99999;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.odeme-toast.visible { opacity: 1; transform: translateY(0); }
.odeme-toast--error { background: var(--odeme-error); }
.odeme-toast--success { background: var(--odeme-success); }

/* Features */
.odeme-features {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}

.odeme-feature {
    text-align: center;
    padding: 26px 18px;
    background: var(--odeme-card-bg);
    border-radius: var(--odeme-radius);
    border: 1px solid var(--odeme-border);
}

.odeme-feature i {
    font-size: 26px;
    color: #818cf8;
    margin-bottom: 10px;
    display: block;
}

.odeme-feature strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--odeme-text);
    margin-bottom: 3px;
}

.odeme-feature span {
    font-size: 12px;
    color: var(--odeme-text-secondary);
    line-height: 1.5;
}

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

    .odeme-hero-inner {
        flex-direction: column;
        text-align: center;
    }

    .odeme-hero-content p { max-width: 100%; margin: 0 auto; }
    .odeme-hero-content h1 { font-size: 24px; }
    .odeme-balance-badge { min-width: auto; width: 100%; }
    .odeme-features { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .odeme-hero { padding: 28px 0; }
    .odeme-hero-content h1 { font-size: 20px; }
    .odeme-hero-content p { font-size: 13px; }
    .odeme-card-body { padding: 18px 16px 20px; }
    .odeme-card-header { padding: 18px 16px 0; }
    .odeme-amount-input { height: 48px; font-size: 18px; }
    .odeme-btn--pay { font-size: 15px; padding: 13px 20px; }
    .odeme-presets { gap: 6px; }
    .odeme-preset { padding: 6px 13px; font-size: 12px; }
    .odeme-bank-item { flex-wrap: wrap; }
    .odeme-bank-copy { margin-left: auto; }
}