:root {
    --tf-bg: #0b0d12;
    --tf-bg-2: #10131a;
    --tf-panel: #151923;
    --tf-panel-2: #1b2030;
    --tf-line: rgba(255, 255, 255, .08);
    --tf-line-soft: rgba(255, 255, 255, .05);
    --tf-text: #f4f7fb;
    --tf-text-2: #a4adbb;
    --tf-primary: #4d6bff;
    --tf-primary-2: #22c55e;
    --tf-danger: #ff4d6d;
    --tf-radius: 18px;
    --tf-shadow: 0 18px 45px rgba(0, 0, 0, .32);
}

body.theme-four-body {
    background:
        radial-gradient(circle at top left, rgba(77, 107, 255, .14), transparent 28%),
        radial-gradient(circle at top right, rgba(34, 197, 94, .08), transparent 22%),
        linear-gradient(180deg, #0b0d12 0%, #0e1117 100%);
    color: var(--tf-text);
}

.theme-four-body a {
    text-decoration: none;
}

.theme-four-topbar {
    background: rgba(7, 9, 13, .88);
    border-bottom: 1px solid var(--tf-line);
    backdrop-filter: blur(12px);
}

.theme-four-topbar__inner {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.theme-four-topbar__links,
.theme-four-topbar__actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.theme-four-topbar__links a,
.theme-four-topbar__actions a {
    color: var(--tf-text-2);
    font-size: 13px;
    font-weight: 500;
    transition: .2s ease;
}

.theme-four-topbar__links a:hover,
.theme-four-topbar__actions a:hover {
    color: #fff;
}

.theme-four-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgba(11, 13, 18, .94);
    border-bottom: 1px solid var(--tf-line);
    backdrop-filter: blur(14px);
}

.theme-four-header__row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 0;
}

.theme-four-logo img {
    max-height: 44px;
    width: auto;
    display: block;
}

.theme-four-search {
    flex: 1 1 auto;
}

.theme-four-search form {
    display: flex;
    align-items: center;
    border: 1px solid var(--tf-line);
    border-radius: 14px;
    overflow: hidden;
    background: #0f131a;
    box-shadow: var(--tf-shadow);
}

.theme-four-search input {
    width: 100%;
    height: 50px;
    border: none;
    outline: none;
    background: transparent;
    color: #fff;
    padding: 0 18px;
    font-size: 15px;
}

.theme-four-search button {
    width: 56px;
    height: 50px;
    border: none;
    background: transparent;
    color: #d9dfeb;
    font-size: 18px;
}

.theme-four-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tf-btn {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--tf-line);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    transition: .25s ease;
}

.tf-btn:hover {
    color: #fff;
    transform: translateY(-1px);
}

.tf-btn--green {
    background: linear-gradient(135deg, #1dd75f 0%, #16c172 100%);
    border-color: transparent;
    color: #07110a !important;
}

.tf-btn--blue {
    background: linear-gradient(135deg, #4066ff 0%, #5e83ff 100%);
    border-color: transparent;
}

.tf-btn--ghost {
    background: #141925;
}

.theme-four-nav {
    background: #0f131a;
    border-top: 1px solid rgba(255, 255, 255, .04);
    border-bottom: 1px solid var(--tf-line);
}

.theme-four-nav__inner {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    overflow: visible !important;
    position: relative;
}

.theme-four-nav__inner::-webkit-scrollbar {
    display: none;
}

.theme-four-nav__list {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.theme-four-nav__list a {
    min-height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    background: #141926;
    border: 1px solid var(--tf-line-soft);
    color: #d4dceb;
    font-size: 14px;
    font-weight: 600;
    transition: .2s ease;
}

.theme-four-nav__list a:hover,
.theme-four-nav__list a.active {
    background: #1b2232;
    color: #fff;
}

.theme-four-nav__list i {
    color: #8192ff;
    font-size: 13px;
}

.tf-section {
    padding: 28px 0;
}

.tf-panel {
    background: linear-gradient(180deg, rgba(22, 25, 34, .96) 0%, rgba(15, 18, 26, .98) 100%);
    border: 1px solid var(--tf-line);
    border-radius: var(--tf-radius);
    box-shadow: var(--tf-shadow);
}

.tf-panel--soft {
    background: linear-gradient(180deg, #121621 0%, #0f131c 100%);
}

.tf-hero {
    overflow: hidden;
}

.tf-hero__banner {
    min-height: 430px;
    padding: 38px;
    border-radius: var(--tf-radius);
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, .10), transparent 22%),
        linear-gradient(135deg, #0d1631 0%, #111a30 42%, #1b2947 100%);
}

.tf-badge {
    display: inline-flex;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 77, 109, .12);
    border: 1px solid rgba(255, 77, 109, .24);
    color: #ff8aa0;
    font-size: 12px;
    font-weight: 700;
}

.tf-hero__title {
    margin: 16px 0 0;
    font-size: 44px;
    line-height: 1.1;
    font-weight: 900;
    color: #fff;
    max-width: 580px;
}

.tf-hero__desc {
    margin-top: 16px;
    max-width: 580px;
    color: var(--tf-text-2);
    line-height: 1.8;
    font-size: 15px;
}

.tf-stats {
    margin-top: 26px;
}

.tf-stat {
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
}

.tf-stat strong {
    display: block;
    color: #fff;
    font-size: 22px;
    font-weight: 900;
}

.tf-stat span {
    display: block;
    color: var(--tf-text-2);
    font-size: 13px;
    margin-top: 4px;
}

.tf-side-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tf-side-link {
    padding: 14px 16px;
    border-radius: 14px;
    background: #111622;
    border: 1px solid rgba(255, 255, 255, .06);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: .2s ease;
}

.tf-side-link:hover {
    background: #171d2a;
    color: #fff;
}

.tf-mini-card {
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 114px;
}

.tf-mini-card__img {
    width: 82px;
    height: 82px;
    border-radius: 14px;
    overflow: hidden;
    flex: 0 0 82px;
    background: #0f131c;
}

.tf-mini-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tf-mini-card__cat {
    font-size: 12px;
    color: #8f9aad;
    margin-bottom: 6px;
}

.tf-mini-card__title {
    font-size: 15px;
    line-height: 1.45;
    color: #fff;
    font-weight: 700;
}

.tf-mini-card__price {
    margin-top: 8px;
    font-size: 15px;
    color: #22c55e;
    font-weight: 800;
}

.tf-strip-card {
    padding: 14px;
    height: 100%;
}

.tf-strip-card__media {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    overflow: hidden;
    background: #0f131c;
    flex: 0 0 64px;
}

.tf-strip-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.tf-section-head p {
    margin: 0;
    color: var(--tf-text-2);
    font-size: 14px;
}

.tf-section-head h2 {
    margin: 2px 0 0;
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.2;
}

.tf-product-card {
    position: relative;
    padding: 14px;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, rgba(24, 29, 41, .96) 0%, rgba(13, 17, 24, .98) 100%);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    overflow: hidden;
}

.tf-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

.tf-product-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0), rgba(255, 255, 255, .04));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.tf-product-card--featured {
    box-shadow: 0 0 0 1px rgba(255, 184, 77, .12), 0 10px 28px rgba(255, 184, 77, .10);
}

.tf-product-card--featured:hover {
    border-color: rgba(255, 184, 77, .35);
    box-shadow: 0 0 0 1px rgba(255, 184, 77, .22), 0 18px 42px rgba(255, 184, 77, .16);
}

.tf-product-card--popular {
    box-shadow: 0 0 0 1px rgba(99, 102, 241, .12), 0 10px 28px rgba(59, 130, 246, .10);
}

.tf-product-card--popular:hover {
    border-color: rgba(96, 165, 250, .35);
    box-shadow: 0 0 0 1px rgba(96, 165, 250, .22), 0 18px 42px rgba(59, 130, 246, .16);
}

.tf-product-card__badge {
    position: absolute;
    top: 12px;
    left: -34px;
    z-index: 3;
    min-width: 170px;
    padding: 8px 38px;
    text-align: center;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: #fff;
    transform: rotate(-16deg);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
}

.tf-product-card__badge--featured {
    background: linear-gradient(90deg, #ff7a18 0%, #ffb347 100%);
}

.tf-product-card__badge--popular {
    background: linear-gradient(90deg, #ec4899 0%, #8b5cf6 100%);
}

.tf-product-card__image {
    position: relative;
    height: 180px;
    overflow: hidden;
    border-radius: 16px;
    background: #0d1118;
    border: 1px solid rgba(255, 255, 255, .06);
}

.tf-product-card__image { height: 180px; }
.tf-product-card__title { font-size: 15px; min-height: 44px; }
.tf-product-card__price { font-size: 18px; }

.tf-product-card__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .18) 100%);
    pointer-events: none;
}

.tf-product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.tf-product-card:hover .tf-product-card__image img {
    transform: scale(1.045);
}


.tf-product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tf-product-card__cat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #aeb7c6;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
}

.tf-product-card__title {
    display: block;
    margin-top: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.45;
    min-height: 44px;
    letter-spacing: -.2px;
}

.tf-product-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
}

.tf-product-card__price {
    font-size: 18px;
    font-weight: 900;
    color: #22c55e;
    text-shadow: 0 0 18px rgba(34, 197, 94, .12);
}

.tf-product-card__rating {
    color: #ffc857;
    font-size: 13px;
    font-weight: 700;
}

.theme-four-footer {
    margin-top: 70px;
    padding-top: 70px;
    background: #0b0d12;
    border-top: 1px solid var(--tf-line);
}

.theme-four-footer__top {
    padding-bottom: 34px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.theme-four-footer__brand img {
    max-width: 210px;
    width: 100%;
    height: auto;
    margin-bottom: 14px;
}

.theme-four-footer__brand p {
    color: var(--tf-text-2);
    font-size: 14px;
    line-height: 1.8;
    max-width: 360px;
}

.theme-four-footer__title {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 16px;
}

.theme-four-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.theme-four-footer__links li {
    margin-bottom: 10px;
}

.theme-four-footer__links a {
    color: var(--tf-text-2);
    font-size: 14px;
    transition: .2s ease;
}

.theme-four-footer__links a:hover {
    color: #fff;
    padding-left: 4px;
}

.theme-four-footer__social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.theme-four-footer__social a {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #151a26;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .06);
}

.theme-four-footer__social a:hover {
    background: #1d2433;
    color: #fff;
}

.theme-four-footer__bottom {
    padding: 20px 0 28px;
}

.theme-four-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.theme-four-footer__bottom p {
    margin: 0;
    color: var(--tf-text-2);
    font-size: 13px;
}

.theme-four-footer__payment img {
    max-height: 32px;
    width: auto;
}

.theme-four-body .wsus__scroll_btn {
    background: transparent;
    border: 0;
}

.theme-four-body .wsus__scroll_btn_inner {
    filter:
        drop-shadow(0 0 18px rgba(130, 84, 255, .34))
        drop-shadow(0 8px 24px rgba(8, 10, 22, .35));
}

.theme-four-body .wsus__scroll_btn_glow {
    background:
        radial-gradient(circle,
            rgba(172, 112, 255, .58) 0%,
            rgba(99, 56, 226, .28) 45%,
            rgba(20, 16, 36, 0) 76%);
}

.theme-four-body .wsus__scroll_btn_chevron {
    color: #f8f7ff;
}

@media (max-width: 991.98px) {
    .theme-four-header__row {
        flex-wrap: wrap;
    }

    .theme-four-logo {
        width: 100%;
        text-align: center;
    }

    .theme-four-logo a {
        display: inline-block;
    }

    .theme-four-search {
        width: 100%;
        order: 3;
    }

    .theme-four-actions {
        margin-left: auto;
    }

    .tf-hero__title {
        font-size: 34px;
    }
}

@media (max-width: 767.98px) {
    .theme-four-topbar__inner {
        padding: 10px 0;
        justify-content: center;
    }

    .theme-four-actions {
        width: 100%;
        justify-content: center;
    }

    .tf-btn {
        flex: 1 1 auto;
    }

    .tf-hero__banner {
        padding: 26px;
        min-height: auto;
    }

    .tf-hero__title {
        font-size: 28px;
    }

    .tf-section-head h2 {
        font-size: 22px;
    }
}


.tf-hero-slider-wrap {
    overflow: hidden;
    padding: 0;
    border-radius: 24px;
}

.tf-hero-slider {
    position: relative;
}

.tf-hero-slide {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    border-radius: 24px 24px 0 0;
}

.tf-hero-slide__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.tf-hero-slide__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tf-hero-slide__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(90deg, rgba(7, 10, 18, .92) 0%, rgba(7, 10, 18, .78) 36%, rgba(7, 10, 18, .34) 66%, rgba(7, 10, 18, .18) 100%);
}

.tf-hero-slide__content {
    position: relative;
    z-index: 3;
    padding: 56px 56px 40px;
}

.tf-hero-slide__name {
    margin-top: 14px;
    color: #ff5a7a;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tf-hero-slide__title {
    margin: 14px 0 0;
    font-size: 54px;
    line-height: 1.04;
    font-weight: 900;
    color: #fff;
    max-width: 520px;
}

.tf-hero-slide__desc {
    margin-top: 16px;
    max-width: 520px;
    color: #c7cfdd;
    line-height: 1.85;
    font-size: 15px;
}

.tf-hero-slide__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
}

.tf-hero-slide__btn:hover {
    color: #fff;
    transform: translateY(-1px);
}

.tf-hero-slide__image-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 400px;
}

.tf-hero-slide__image {
    max-width: 100%;
    max-height: 380px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .35));
}

.tf-hero-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, .06);
    background: #0b0f18;
    position: relative;
    z-index: 5;
}

.tf-hero-tab {
    min-height: 82px;
    padding: 14px 16px;
    background: transparent;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, .06);
    color: #d7ddea;
    font-size: 14px;
    font-weight: 800;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.tf-hero-tab:last-child {
    border-right: none;
}

.tf-hero-tab:hover,
.tf-hero-tab.is-active {
    background: #11182a;
    color: #fff;
    box-shadow: inset 0 3px 0 #ff4d6d;
}

.tf-hero-slider .slick-dots {
    display: none !important;
}

.tf-hero-slider .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(10, 14, 22, .72);
    color: #fff;
    font-size: 0;
}

.tf-hero-slider .slick-prev {
    left: 20px;
}

.tf-hero-slider .slick-next {
    right: 20px;
}

.tf-hero-slider .slick-prev::before,
.tf-hero-slider .slick-next::before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 16px;
    color: #fff;
}

.tf-hero-slider .slick-prev::before {
    content: "\f053";
}

.tf-hero-slider .slick-next::before {
    content: "\f054";
}

@media (max-width: 991.98px) {
    .tf-hero-slide {
        min-height: unset;
    }

    .tf-hero-slide__content {
        padding: 34px 24px 24px;
    }

    .tf-hero-slide__title {
        font-size: 34px;
        max-width: 100%;
    }

    .tf-hero-slide__image-wrap {
        justify-content: center;
        min-height: auto;
        margin-top: 24px;
    }

    .tf-hero-slide__image {
        max-height: 260px;
    }

    .tf-hero-tabs {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .tf-hero-tabs {
        grid-template-columns: 1fr;
    }

    .tf-hero-slide__title {
        font-size: 28px;
    }

    .tf-hero-slide__desc {
        font-size: 14px;
    }
}


.tf-main-menu-row {
    justify-content: space-between;
    overflow: visible !important;
}

.tf-main-menu-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    position: relative;
}

.tf-main-menu-links {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.tf-nav-mega {
    position: relative;
    flex: 0 0 auto;
}

.tf-nav-trigger {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .06);
    background: #141926;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    transition: .2s ease;
}

.tf-nav-trigger:hover {
    background: #1b2232;
}

.tf-nav-trigger__icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #1f4fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
}

.tf-nav-trigger__arrow {
    font-size: 12px;
    transition: transform .2s ease;
}

.tf-nav-mega.is-open .tf-nav-trigger__arrow {
    transform: rotate(180deg);
}

.tf-nav-mega__panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    width: min(1080px, calc(100vw - 40px));
    background: linear-gradient(180deg, #17181d 0%, #12141a 100%);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 22px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .35);
    padding: 26px;
    z-index: 9999;
    display: none;
}

.tf-nav-mega.is-open .tf-nav-mega__panel {
    display: block;
}

.tf-nav-mega__grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 24px;
    align-items: start;
}

.tf-nav-mega__head {
    margin-bottom: 14px;
}

.tf-nav-mega__head h4 {
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
}

.tf-nav-mega__category-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.tf-nav-category-card {
    min-height: 64px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .02) 100%);
    border: 1px solid rgba(255, 255, 255, .06);
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    transition: .2s ease;
}

.tf-nav-category-card:hover {
    transform: translateY(-1px);
    background: #1a2130;
    color: #fff;
}

.tf-nav-category-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 38px;
}

.tf-nav-category-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tf-nav-category-card__name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: #f4f7fb;
}

.tf-nav-mega__pages {
    padding-left: 8px;
}

.tf-nav-pages-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tf-nav-page-link {
    min-height: 48px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111722;
    border: 1px solid rgba(255, 255, 255, .06);
    display: flex;
    align-items: center;
    color: #d4dceb;
    font-size: 14px;
    font-weight: 600;
    transition: .2s ease;
}

.tf-nav-page-link:hover,
.tf-nav-page-link.active {
    background: #1b2232;
    color: #fff;
}

@media (max-width: 1199.98px) {
    .tf-nav-mega__category-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .tf-main-menu-left {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    .tf-main-menu-links {
        width: 100%;
        overflow: auto hidden;
        scrollbar-width: none;
    }

    .tf-main-menu-links::-webkit-scrollbar {
        display: none;
    }

    .tf-nav-mega__panel {
        width: min(920px, calc(100vw - 30px));
    }

    .tf-nav-mega__grid {
        grid-template-columns: 1fr;
    }

    .tf-nav-mega__pages {
        padding-left: 0;
    }
}

@media (max-width: 575.98px) {
    .tf-nav-mega__panel {
        left: 0;
        width: calc(100vw - 24px);
        padding: 18px;
    }

    .tf-nav-mega__category-list {
        grid-template-columns: 1fr;
    }

    .tf-nav-trigger {
        width: 100%;
        justify-content: space-between;
    }
}




.theme-four-topbar__left {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    min-width: 0;
}

.theme-four-topbar__offer-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, .08);
}

.theme-four-topbar__offer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 420px;
    text-decoration: none !important;
}

.theme-four-topbar__offer-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 77, 109, .14);
    border: 1px solid rgba(255, 77, 109, .24);
    color: #ff6b88;
    font-size: 11px;
    font-weight: 800;
    flex: 0 0 auto;
}

.theme-four-topbar__offer-discount {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    flex: 0 0 auto;
}

.theme-four-topbar__offer-text {
    color: #cfd7e6;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.theme-four-topbar__offer:hover .theme-four-topbar__offer-text {
    color: #fff;
}

.theme-four-topbar__countdown {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.theme-four-topbar__countdown .simply-section {
    margin: 0 3px !important;
    min-width: 44px;
    background: #121826 !important;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px;
    padding: 6px 6px;
}

.theme-four-topbar__countdown .simply-amount {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.theme-four-topbar__countdown .simply-word {
    color: #95a2b5 !important;
    font-size: 10px !important;
    text-transform: uppercase;
}

@media (max-width: 1199.98px) {
    .theme-four-topbar__offer-wrap {
        max-width: 100%;
    }

    .theme-four-topbar__countdown {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .theme-four-topbar__inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 0;
    }

    .theme-four-topbar__left {
        width: 100%;
    }

    .theme-four-topbar__actions {
        width: 100%;
    }

    .theme-four-topbar__offer-wrap {
        border-left: none;
        padding-left: 0;
    }
}

@media (max-width: 575.98px) {
    .theme-four-topbar__offer-wrap {
        display: none;
    }
}



/* =========================================================
   Layout 4 Topbar + Mega Menu polish
   File: public/frontend/css/theme-four.css
========================================================= */

.theme-four-topbar {
    position: relative;
    z-index: 1100;
    background:
        linear-gradient(180deg, rgba(7, 10, 18, .96) 0%, rgba(10, 14, 24, .92) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: visible !important;
}

.theme-four-topbar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at left center, rgba(77, 107, 255, .14), transparent 28%),
        radial-gradient(circle at right center, rgba(34, 197, 94, .08), transparent 24%);
}

.theme-four-topbar .container {
    position: relative;
    z-index: 2;
}

.theme-four-topbar__inner {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
}

.theme-four-topbar__left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1 1 auto;
}

.theme-four-topbar__links {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .025);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.theme-four-topbar__links a {
    min-height: 34px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    font-weight: 700;
    transition: all .22s ease;
    white-space: nowrap;
}

.theme-four-topbar__links a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.theme-four-topbar__offer-wrap {
    min-width: 0;
    flex: 0 1 700px;
    max-width: 700px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 10px;
    border-left: 0 !important;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, .018) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .03),
        0 10px 30px rgba(0, 0, 0, .18);
}

.theme-four-topbar__offer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    text-decoration: none !important;
    flex: 1 1 auto;
}

.theme-four-topbar__offer-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 77, 109, .18), rgba(255, 122, 24, .18));
    border: 1px solid rgba(255, 120, 120, .24);
    color: #ff8aa1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex: 0 0 auto;
}

.theme-four-topbar__offer-discount {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    flex: 0 0 auto;
}

.theme-four-topbar__offer-text {
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.theme-four-topbar__offer:hover .theme-four-topbar__offer-text {
    color: #fff;
}

.theme-four-topbar__countdown {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: auto;
}

.theme-four-topbar__countdown .simply-section {
    margin: 0 !important;
    min-width: 54px;
    padding: 7px 8px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(17, 24, 39, .96) 0%, rgba(11, 17, 29, .96) 100%) !important;
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
    text-align: center;
}

.theme-four-topbar__countdown .simply-section>div {
    width: 100%;
    display: block;
    line-height: 1.05;
    text-align: center;
}

.theme-four-topbar__countdown .simply-amount {
    display: block;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1;
    margin-bottom: 4px;
}

.theme-four-topbar__countdown .simply-word {
    display: block;
    color: #8fa0b8 !important;
    font-size: 9px !important;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.theme-four-topbar__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 20;
}

.theme-four-topbar__actions form {
    margin: 0;
}

.theme-four-topbar__actions .nice-select,
.theme-four-topbar__actions select {
    min-width: 110px;
    height: 40px;
    line-height: 38px;
    padding: 0 36px 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
}

.theme-four-topbar__actions .nice-select .current {
    color: #fff;
}

.theme-four-topbar__actions .nice-select:after {
    width: 7px;
    height: 7px;
    right: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, .72);
    border-right: 2px solid rgba(255, 255, 255, .72);
}

.theme-four-topbar__actions .nice-select .list {
    z-index: 99999 !important;
    width: 100%;
    background: #101722;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    overflow: hidden;
}

.theme-four-topbar__actions .nice-select .option {
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
}

.theme-four-topbar__actions .nice-select .option:hover,
.theme-four-topbar__actions .nice-select .option.focus,
.theme-four-topbar__actions .nice-select .option.selected.focus {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

/* dropdown panel hero altında kalmasın */
.theme-four-header,
.theme-four-nav,
.theme-four-nav__inner,
.tf-main-menu-row,
.tf-main-menu-left,
.tf-nav-mega {
    position: relative;
}

.theme-four-header {
    z-index: 1200;
}

.theme-four-nav {
    z-index: 1201;
    overflow: visible !important;
}

.theme-four-nav__inner,
.tf-main-menu-row,
.tf-main-menu-left,
.tf-nav-mega {
    overflow: visible !important;
}

.tf-nav-mega__panel {
    z-index: 99999 !important;
}

.tf-hero,
.tf-hero__slider,
.tf-hero__banner,
.tf-hero .slick-list,
.tf-hero .slick-track {
    position: relative;
    z-index: 1;
}

@media (max-width: 1199.98px) {
    .theme-four-topbar__countdown {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .theme-four-topbar__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .theme-four-topbar__left {
        width: 100%;
    }

    .theme-four-topbar__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .theme-four-topbar__offer-wrap {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .theme-four-topbar__links {
        width: 100%;
        justify-content: center;
        border-radius: 16px;
    }

    .theme-four-topbar__links a {
        flex: 1 1 auto;
        text-align: center;
    }

    .theme-four-topbar__actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .theme-four-topbar__actions form {
        width: 100%;
    }

    .theme-four-topbar__actions .nice-select,
    .theme-four-topbar__actions select {
        width: 100%;
        min-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .theme-four-topbar__offer-wrap {
        display: none;
    }

    .theme-four-topbar__links a {
        flex: 1 1 100%;
    }

    .tf-nav-mega__panel {
        left: 0;
        width: calc(100vw - 24px);
    }
}

/* ===============================
   Fix dropdown under hero slider
================================ */

.theme-four-header {
    position: relative;
    z-index: 5000;
}

.theme-four-nav {
    position: relative;
    z-index: 5001;
}

.theme-four-topbar {
    position: relative;
    z-index: 5002;
}

/* dropdown list */
.nice-select .list {
    z-index: 99999 !important;
}

/* hero slider altta kalsın */
.tf-hero,
.tf-hero-section,
.tf-banner,
.tf-slider,
.slick-slider,
.slick-list,
.slick-track {
    position: relative;
    z-index: 1;
}

/* countdown cleaner look */

.simply-countdown .simply-word {
    display: none;
}

.simply-countdown .simply-section {
    min-width: 52px;
    padding: 6px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.simply-countdown .simply-amount {
    font-size: 14px;
    font-weight: 700;
}

/* premium topbar */

.theme-four-topbar {
    background:
        linear-gradient(180deg,
            rgba(6, 9, 18, .95),
            rgba(10, 15, 25, .92));

    border-bottom: 1px solid rgba(255, 255, 255, .06);
    backdrop-filter: blur(12px);
}

.theme-four-topbar__offer-wrap {
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, .05),
            rgba(255, 255, 255, .02));

    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .06);
}


/* =========================================================
   Layout 4 Footer Refresh
   File: public/frontend/css/theme-four.css
========================================================= */

.theme-four-footer {
    margin-top: 20px;
    background:
        linear-gradient(180deg, #0a0e17 0%, #090d15 100%);
    border-top: 1px solid rgba(255, 255, 255, .06);
    position: relative;
    overflow: hidden;
}

.theme-four-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at left top, rgba(64, 95, 242, .10), transparent 28%),
        radial-gradient(circle at right center, rgba(34, 197, 94, .07), transparent 24%);
}

.theme-four-footer .container {
    position: relative;
    z-index: 2;
}

.theme-four-footer__topbar {
    display: grid;
    grid-template-columns: 220px 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.theme-four-footer__brand-logo {
    display: inline-flex;
    align-items: center;
}

.theme-four-footer__brand-logo img {
    max-width: 210px;
    width: 100%;
    height: auto;
}

.theme-four-footer__topbar-social {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.theme-four-footer__topbar-social a {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    color: #fff;
    transition: all .25s ease;
}

.theme-four-footer__topbar-social a:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .09);
    color: #fff;
}

.theme-four-footer__topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    color: #fff;
}

.theme-four-footer__cta {
    min-height: 48px;
    padding: 0 18px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 800;
    color: #fff !important;
    transition: all .25s ease;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}

.theme-four-footer__cta:hover {
    transform: translateY(-2px);
    color: #fff !important;
}

.theme-four-footer__cta--blue {
    background: linear-gradient(135deg, #4f46e5 0%, #405ff2 100%);
}

.theme-four-footer__cta--green {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.theme-four-footer__main {
    padding: 38px 0 30px;
}

.theme-four-footer__brand-card {
    padding-right: 24px;
    border-right: 1px solid rgba(255, 255, 255, .06);
    min-height: 100%;
}

.theme-four-footer__heading {
    color: #fff;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 900;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.theme-four-footer__desc {
    color: #b9c3d6;
    font-size: 14px;
    line-height: 1.9;
}

.theme-four-footer__desc p {
    margin-bottom: 10px;
}

.theme-four-footer__cards {
    margin-top: 24px;
}

.theme-four-footer__cards img {
    max-width: 100%;
    max-height: 34px;
    width: auto;
}

.theme-four-footer__link-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    padding-left: 12px;
}

.theme-four-footer__link-col {
    min-width: 0;
}

.theme-four-footer__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 1;
}

.theme-four-footer__menu li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 14px;
}

.theme-four-footer__menu--dots li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .65);
}

.theme-four-footer__menu a {
    color: #c6cfdf;
    font-size: 14px;
    line-height: 1.6;
    transition: all .22s ease;
}

.theme-four-footer__menu a:hover {
    color: #fff;
    padding-left: 4px;
}

.theme-four-footer__bottom {
    padding: 18px 0 24px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.theme-four-footer__bottom-left p {
    margin: 0;
    color: #d8e0ef;
    font-size: 13px;
    font-weight: 600;
}

.theme-four-footer__bottom-right {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.theme-four-footer__bottom-right a {
    color: #b5c0d3;
    font-size: 13px;
    font-weight: 600;
    transition: color .2s ease;
}

.theme-four-footer__bottom-right a:hover {
    color: #fff;
}

@media (max-width: 1199.98px) {
    .theme-four-footer__topbar {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .theme-four-footer__topbar-actions {
        justify-content: flex-start;
    }

    .theme-four-footer__brand-card {
        border-right: none;
        padding-right: 0;
    }

    .theme-four-footer__link-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-left: 0;
    }
}

@media (max-width: 767.98px) {
    .theme-four-footer {
        margin-top: 60px;
    }

    .theme-four-footer__topbar {
        padding: 22px 0;
    }

    .theme-four-footer__topbar-social {
        justify-content: flex-start;
    }

    .theme-four-footer__topbar-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .theme-four-footer__cta {
        justify-content: center;
    }

    .theme-four-footer__main {
        padding: 28px 0 24px;
    }

    .theme-four-footer__heading {
        font-size: 20px;
    }

    .theme-four-footer__link-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .theme-four-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .theme-four-footer__bottom-right {
        justify-content: flex-start;
        gap: 12px 16px;
    }
}

.theme-four-footer__cta,
.theme-four-footer__cta span,
.theme-four-footer__cta i {
    color: #fff;
    text-decoration: none;
}

.theme-four-footer__cta:hover {
    color: #fff;
    opacity: 0.9;
}


/* ==========================================
   Layout 4 nav responsive fix
========================================== */

.tf-main-menu-row {
    width: 100%;
}

.tf-main-menu-mobile-top {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.tf-main-menu-mobile-top__category {
    min-width: 0;
}

.tf-main-menu-mobile-top__menu {
    min-width: 0;
    width: 100%;
}

.tf-main-menu-mobile-top__cart {
    min-width: 0;
    justify-self: end;
}

.tf-main-menu-links {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.theme-four-nav__list--cart {
    margin-left: auto;
}

.theme-four-nav__list--cart a {
    min-width: auto;
    white-space: nowrap;
}

.theme-four-nav__list--cart a span {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(64, 95, 242, .18);
    color: #9db7ff;
    font-size: 11px;
    font-weight: 800;
}

/* desktop */
@media (min-width: 992px) {
    .tf-main-menu-mobile-top {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .tf-main-menu-mobile-top__menu {
        display: flex;
        justify-content: flex-start;
        min-width: 0;
    }

    .tf-main-menu-links {
        flex-wrap: wrap;
    }

    .tf-main-menu-mobile-top__cart {
        justify-self: end;
        margin-left: auto;
    }
}

/* tablet + mobile */
@media (max-width: 991.98px) {
    .theme-four-nav__inner.tf-main-menu-row {
        padding: 12px 0;
    }

    .tf-main-menu-mobile-top {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "category cart"
            "menu menu";
        gap: 12px;
    }

    .tf-main-menu-mobile-top__category {
        grid-area: category;
    }

    .tf-main-menu-mobile-top__menu {
        grid-area: menu;
        width: 100%;
        min-width: 0;
    }

    .tf-main-menu-mobile-top__cart {
        grid-area: cart;
        justify-self: end;
    }

    .tf-main-menu-mobile-top .tf-nav-trigger {
        width: 100%;
        justify-content: space-between;
    }

    .theme-four-nav__list--cart a {
        min-height: 44px;
        padding: 0 14px;
    }

    .tf-main-menu-links {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .tf-main-menu-links::-webkit-scrollbar {
        display: none;
    }

    .tf-main-menu-links a {
        flex: 0 0 auto;
    }
}

/* küçük mobil */
@media (max-width: 575.98px) {
    .theme-four-nav__list--cart a {
        min-height: 44px;
        padding: 0 12px;
        font-size: 0;
        gap: 0;
    }

    .theme-four-nav__list--cart a i {
        font-size: 14px;
        margin-right: 0;
    }

    .theme-four-nav__list--cart a span {
        margin-left: 8px;
        font-size: 11px;
    }

    .tf-main-menu-links a {
        min-height: 38px;
        padding: 0 12px;
        font-size: 12px;
    }
}



/* =========================================
   Product Detail Premium Marketplace UI
   ========================================= */

.wsus__product_details_text .nav.nav-pills {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.wsus__product_details_text .nav.nav-pills .nav-item {
    width: 100%;
    min-width: 0;
}

.wsus__product_details_text .nav.nav-pills .nav-item button {
    width: 100%;
    min-height: 56px;
    border: none;
    border-radius: 16px;
    background: #121a2b;
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 12px;
    transition: .25s ease;
    white-space: nowrap;
}

.wsus__product_details_text .nav.nav-pills .nav-item button.nav-link.active,
.wsus__product_details_text .nav.nav-pills .nav-item button:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    color: #fff;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .28);
}

@media (max-width: 1199.98px) {
    .wsus__product_details_text .nav.nav-pills {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .wsus__product_details_text .nav.nav-pills {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wsus__product_details_text .nav.nav-pills .nav-item button {
        font-size: 13px;
        min-height: 52px;
    }
}

.mpd-premium-meta {
    display: grid;
    grid-template-columns: 1.4fr .9fr;
    gap: 18px;
    margin: 22px 0 26px;
}

.mpd-seller-card,
.mpd-date-card,
.mpd-global-note {
    border: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, #111827 0%, #0b1220 100%);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
}

.mpd-seller-card {
    border-radius: 22px;
    padding: 22px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.mpd-seller-card__avatar {
    width: 84px;
    min-width: 84px;
    height: 84px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .10);
    background: #0f172a;
}

.mpd-seller-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mpd-seller-card__content {
    flex: 1 1 auto;
    min-width: 0;
}

.mpd-seller-card__top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.mpd-seller-card__label {
    display: inline-block;
    margin-bottom: 8px;
    color: #60a5fa;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mpd-seller-card__top h3 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
}

.mpd-seller-card__top p {
    margin: 0;
    color: rgba(255, 255, 255, .65);
    font-size: 14px;
    font-weight: 600;
}

.mpd-seller-card__profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 14px;
    background: rgba(37, 99, 235, .16);
    border: 1px solid rgba(96, 165, 250, .20);
    color: #dbeafe !important;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.mpd-seller-card__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.mpd-seller-card__stat {
    border-radius: 16px;
    padding: 14px 12px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    text-align: center;
}

.mpd-seller-card__stat strong {
    display: block;
    margin-bottom: 6px;
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

.mpd-seller-card__stat span {
    display: block;
    color: rgba(255, 255, 255, .66);
    font-size: 12px;
    font-weight: 700;
}

.mpd-premium-meta__dates {
    display: grid;
    gap: 18px;
}

.mpd-date-card {
    border-radius: 20px;
    padding: 20px 22px;
}

.mpd-date-card span {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, .60);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mpd-date-card strong {
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
}

.mpd-global-note {
    border-radius: 20px;
    padding: 18px 20px;
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
    line-height: 1.75;
}

.mpd-purchase-warning {
    display: flex;
    gap: 12px;
    margin: 18px 0 0;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(245, 158, 11, .12) 0%, rgba(234, 88, 12, .10) 100%);
    border: 1px solid rgba(251, 191, 36, .22);
}

.mpd-purchase-warning__icon {
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .10);
    color: #fbbf24;
    font-size: 18px;
}

.mpd-purchase-warning__content h6 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.mpd-purchase-warning__content,
.mpd-purchase-warning__content * {
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    line-height: 1.7;
}

@media (max-width: 1199.98px) {
    .mpd-premium-meta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .mpd-seller-card {
        flex-direction: column;
    }

    .mpd-seller-card__top {
        flex-direction: column;
    }

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

.mp-buy-card {
    position: sticky;
    top: 110px;
    background: linear-gradient(180deg, #18284f, #0f172a);
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 25px 70px rgba(0, 0, 0, .5);
}

.mpv-side-card {
    margin-top: 18px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, #121d37 0%, #0f172a 100%);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}

.mpv-side-card__head {
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.mpv-side-card__title {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
}

.mpv-side-card__body {
    padding: 16px 18px 18px;
}

.mpv-side-list li {
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
}

.mpv-side-list span {
    color: rgba(255, 255, 255, .62);
}

.mpv-side-list strong {
    color: #fff;
}

/* SELLER CARD */

.mpd-seller-card {
    background: linear-gradient(180deg, #0f172a, #0b1220);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding: 20px;
    display: flex;
    gap: 16px;
    align-items: center;
}

.mpd-seller-card__avatar {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    overflow: hidden;
}

.mpd-seller-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mpd-seller-card__stats {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.mpd-seller-card__stat {
    background: #111827;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 12px;
}

.wsus__product_details_text .nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.wsus__product_details_text .nav button {
    border-radius: 12px;
    padding: 10px 16px;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: 13px;
    font-weight: 600;
}

.wsus__product_details_text .nav button.active {
    background: #2563eb;
    color: white;
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}


/* =========================================
   Product Detail Premium Upgrade
   ========================================= */

.mpd-hero-media {
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
    background: #0f172a;
}

.mpd-top-activity-bar {
    margin-top: 18px;
    margin-bottom: 14px;
}

.mpd-top-activity-bar__left {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mpd-activity-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    font-weight: 700;
}

.mpd-activity-chip strong {
    color: #fff;
    font-weight: 800;
}

.mpd-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.mpd-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, #10192d 0%, #0c1425 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}

.mpd-trust-badge i {
    color: #60a5fa;
}

.wsus__product_details_text .nav.nav-pills {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.wsus__product_details_text .nav.nav-pills .nav-item {
    width: 100%;
    min-width: 0;
}

.wsus__product_details_text .nav.nav-pills .nav-item button {
    width: 100%;
    min-height: 54px;
    border: none;
    border-radius: 16px;
    background: #111b31;
    border: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    white-space: nowrap;
    transition: .22s ease;
}

.wsus__product_details_text .nav.nav-pills .nav-item button.nav-link.active,
.wsus__product_details_text .nav.nav-pills .nav-item button:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    color: #fff;
    box-shadow: 0 14px 30px rgba(37, 99, 235, .28);
}

.mpd-premium-meta {
    display: grid;
    grid-template-columns: 1.45fr .85fr;
    gap: 18px;
    margin-top: 22px;
}

.mpd-premium-meta__dates {
    display: grid;
    gap: 14px;
}

.mpd-seller-card {
    border-radius: 22px;
    padding: 22px;
    background: linear-gradient(180deg, #101827 0%, #0b1220 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .18);
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.mpd-seller-card__avatar {
    width: 82px;
    min-width: 82px;
    height: 82px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .10);
    background: #0f172a;
}

.mpd-seller-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mpd-seller-card__content {
    flex: 1 1 auto;
    min-width: 0;
}

.mpd-seller-card__top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.mpd-seller-card__label {
    display: inline-block;
    margin-bottom: 8px;
    color: #60a5fa;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mpd-seller-card__top h3 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
}

.mpd-seller-card__top p {
    margin: 0;
    color: rgba(255, 255, 255, .62);
    font-size: 14px;
    font-weight: 600;
}

.mpd-seller-card__profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 14px;
    background: rgba(37, 99, 235, .14);
    border: 1px solid rgba(96, 165, 250, .18);
    color: #dbeafe !important;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.mpd-seller-card__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.mpd-seller-card__stat {
    border-radius: 16px;
    padding: 14px 12px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    text-align: center;
}

.mpd-seller-card__stat strong {
    display: block;
    margin-bottom: 6px;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

.mpd-seller-card__stat span {
    display: block;
    color: rgba(255, 255, 255, .62);
    font-size: 12px;
    font-weight: 700;
}

.mpd-date-card {
    border-radius: 20px;
    padding: 18px 20px;
    background: linear-gradient(180deg, #101827 0%, #0c1425 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .15);
}

.mpd-date-card span {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, .60);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mpd-date-card strong {
    display: block;
    color: #fff;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 800;
}

.mpd-full-note {
    margin-top: 18px;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(180deg, #101827 0%, #0b1220 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
}

.mpd-full-note__head {
    padding: 16px 20px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.mpd-full-note__head span {
    color: #60a5fa;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mpd-full-note__body {
    padding: 18px 20px 20px;
    color: rgba(255, 255, 255, .80);
    font-size: 14px;
    line-height: 1.8;
}

.mpd-full-note__body * {
    color: inherit;
}

.mpd-side-trust-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.mpd-side-trust-card {
    border-radius: 14px;
    padding: 12px 12px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    text-align: center;
}

.mpd-side-trust-card span {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .62);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.mpd-side-trust-card strong {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.mpd-recent-sales-popup {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 9999;
    width: 330px;
    max-width: calc(100vw - 32px);
    display: none;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, #101827 0%, #0b1220 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

.mpd-recent-sales-popup.show {
    display: flex;
}

.mpd-recent-sales-popup__icon {
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, .14);
    color: #60a5fa;
    font-size: 18px;
}

.mpd-recent-sales-popup__content {
    flex: 1 1 auto;
    color: #fff;
    font-size: 13px;
    line-height: 1.55;
}

.mpd-recent-sales-popup__content strong {
    color: #fff;
    font-weight: 800;
}

.mpd-recent-sales-popup__close {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, .62);
    font-size: 14px;
    padding: 0;
    margin: 0;
    line-height: 1;
}

@media (max-width: 1199.98px) {
    .wsus__product_details_text .nav.nav-pills {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mpd-premium-meta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .wsus__product_details_text .nav.nav-pills {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mpd-top-activity-bar__left,
    .mpd-trust-badges {
        gap: 8px;
    }

    .mpd-seller-card {
        flex-direction: column;
    }

    .mpd-seller-card__top {
        flex-direction: column;
    }

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

    .mpd-side-trust-grid {
        grid-template-columns: 1fr;
    }
}



/* =========================================
   Theme Four Cart View
   ========================================= */

.mp-cart-breadcrumb {
    padding: 56px 0 52px !important;
    min-height: auto !important;
    background-position: center center !important;
    background-size: cover !important;
}

.mp-cart-breadcrumb .wsus__breadcrumb_text {
    padding: 0 !important;
}

.mp-cart-breadcrumb .wsus__breadcrumb_text h1 {
    font-size: 42px !important;
    line-height: 1.12;
    margin-bottom: 10px !important;
    color: #fff;
}

.mp-cart-breadcrumb .wsus__breadcrumb_text ul {
    margin-bottom: 0 !important;
}

.mp-cart-view {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .10), transparent 28%),
        radial-gradient(circle at right center, rgba(59, 130, 246, .06), transparent 24%),
        linear-gradient(180deg, #050b16 0%, #040914 100%);
}

.mp-cart-table-wrap {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(180deg, #0e1728 0%, #0a1222 100%);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .22);
}

.mp-cart-table-wrap .table {
    margin-bottom: 0;
    color: #fff;
    background: transparent;
}

.mp-cart-table-wrap .table thead th {
    background: rgba(255, 255, 255, .03);
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    border: none;
    padding: 20px 20px;
}

.mp-cart-table-wrap .table tbody tr {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.mp-cart-table-wrap .table tbody td {
    vertical-align: middle;
    border: none;
    padding: 18px 20px;
    color: rgba(255, 255, 255, .88);
    background: transparent !important;
}

.mp-cart-table-wrap .table tbody td a {
    color: #dbeafe;
}

.mp-cart-table-wrap .table tbody td .description a,
.mp-cart-table-wrap .table tbody td .name,
.mp-cart-table-wrap .table tbody td h3,
.mp-cart-table-wrap .table tbody td h4 {
    color: #fff;
}

.mp-cart-table-wrap img {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .08);
}

.mp-cart-coupon {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, #0e1728 0%, #0a1222 100%);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

.mp-cart-coupon input {
    height: 58px !important;
    border: none !important;
    background: transparent !important;
    color: #fff !important;
    padding: 0 18px !important;
}

.mp-cart-coupon input::placeholder {
    color: rgba(255, 255, 255, .42);
}

.mp-cart-coupon .common_btn {
    min-width: 120px;
    border-radius: 0 !important;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 800;
}

.mp-cart-summary {
    border-radius: 22px;
    padding: 22px;
    background: linear-gradient(180deg, #0e1728 0%, #0a1222 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .22);
}

.mp-cart-summary ul {
    margin-bottom: 18px;
}

.mp-cart-secondary-btn {
    background: rgba(37, 99, 235, .12) !important;
    border: 1px solid rgba(96, 165, 250, .18) !important;
    color: #dbeafe !important;
}

.mp-cart-secondary-btn:hover {
    background: rgba(37, 99, 235, .20) !important;
    color: #fff !important;
}

.mp-cart-summary .list_item {
    border-radius: 18px;
    padding: 18px 18px 16px;
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .08);
}

.mp-cart-summary .list_item ul,
.mp-cart-summary .list_item li {
    color: rgba(255, 255, 255, .82);
}

.mp-cart-summary .list_item li span,
.mp-cart-summary .list_item li strong {
    color: #fff;
}

.mp-cart-summary .common_btn {
    width: 100%;
    min-height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f5c84c 0%, #eab308 100%) !important;
    color: #111827 !important;
    font-weight: 900;
    border: none !important;
    box-shadow: 0 14px 30px rgba(234, 179, 8, .18);
}

.wsus__cart_empty_text {
    border-radius: 24px;
    padding: 28px;
    background: linear-gradient(180deg, #0e1728 0%, #0a1222 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .18);
}

.wsus__cart_empty_text h3 {
    color: #fff;
}

.wsus__cart_empty_text .common_btn {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
    border: none !important;
    color: #fff !important;
}

@media (max-width: 991.98px) {
    .mp-cart-breadcrumb {
        padding: 42px 0 38px !important;
    }

    .mp-cart-breadcrumb .wsus__breadcrumb_text h1 {
        font-size: 30px !important;
    }

    .mp-cart-summary {
        margin-top: 22px;
    }
}

@media (max-width: 767.98px) {
    .mp-cart-coupon {
        display: block;
    }

    .mp-cart-coupon input {
        width: 100%;
    }

    .mp-cart-coupon .common_btn {
        width: 100%;
        border-radius: 0 0 18px 18px !important;
    }
}




/* =========================================
   Cart Premium Extras
   ========================================= */

.mp-cart-trust-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.mp-cart-trust-bar__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    border-radius: 16px;
    background: linear-gradient(180deg, #0e1728 0%, #0a1222 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .16);
    text-align: center;
    padding: 10px 14px;
}

.mp-cart-trust-bar__item i {
    color: #60a5fa;
}

.mp-cart-summary-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    min-height: 48px;
    padding: 10px 14px;
    /* düzeltildi */
    border-radius: 14px;
    background: rgba(37, 99, 235, .10);
    border: 1px solid rgba(96, 165, 250, .16);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 800;
}

.table.table-striped {
    color: #000;
    /* tüm yazılar siyah olur */
}

/* Başlıkları ayrıca siyah yapmak istersen */
.table.table-striped thead th {
    color: #000;
}

/* Gövde satırları */
.table.table-striped tbody td {
    color: #000;
}

.mp-cart-summary-badge i {
    color: #60a5fa;
}

.mp-cart-seller-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, .12);
    border: 1px solid rgba(96, 165, 250, .16);
    color: #dbeafe;
    font-size: 11px;
    font-weight: 800;
    margin-top: 6px;
}

.mp-cart-empty-box {
    border-radius: 24px;
    padding: 32px;
    background: linear-gradient(180deg, #0e1728 0%, #0a1222 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .20);
}

.mp-cart-empty-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 18px 0 22px;
}

.mp-cart-empty-features span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
}

.mp-cart-empty-features i {
    color: #60a5fa;
}

.mp-cart-empty-btn {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
    border: none !important;
    color: #fff !important;
}

@media (max-width: 991.98px) {
    .mp-cart-trust-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .mp-cart-trust-bar {
        grid-template-columns: 1fr;
    }

    .mp-cart-trust-bar__item {
        justify-content: flex-start;
    }
}

.mp-cart-trust-bar__item,
.mp-cart-summary-badge,
.mp-cart-summary-badge span,
.mp-cart-seller-badge,
.mp-cart-empty-features span {
    color: #fff;
}


/* =========================================================
   THEME FOUR — INNER PAGES DARK OVERRIDES
   Pages:
   - Blog
   - About Us
   - Select Product Type
   - Upload Product / Edit Product
========================================================= */

/* ---------- Shared breadcrumb ---------- */
.theme-four-body .wsus__breadcrumb:not(.mp-cart-breadcrumb):not(.mp-product-breadcrumb) {
    background:
        radial-gradient(circle at top left, rgba(79, 70, 229, .28), transparent 28%),
        radial-gradient(circle at top right, rgba(64, 95, 242, .18), transparent 24%),
        linear-gradient(135deg, #1b2cff 0%, #1844ff 45%, #1c54ff 100%) !important;
    padding: 58px 0 60px !important;
    position: relative;
    overflow: hidden;
}

.theme-four-body .wsus__breadcrumb:not(.mp-cart-breadcrumb):not(.mp-product-breadcrumb)::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0)),
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .08), transparent 18%);
    pointer-events: none;
}

.theme-four-body .wsus__breadcrumb_text {
    position: relative;
    z-index: 2;
    text-align: center;
}

.theme-four-body .wsus__breadcrumb_text h1 {
    color: #fff !important;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 800;
    margin-bottom: 10px;
    text-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}

.theme-four-body .wsus__breadcrumb_text ul {
    justify-content: center;
    gap: 8px;
}

.theme-four-body .wsus__breadcrumb_text ul li a {
    color: rgba(255, 255, 255, .86) !important;
    font-weight: 600;
}

.theme-four-body .wsus__breadcrumb_text ul li:last-child a {
    color: #fff !important;
}

/* ---------- Generic dark sections ---------- */
.theme-four-body .wsus__blog_leftbar,
.theme-four-body .wsus__blog_rightbar,
.theme-four-body .wsus__blog,
.theme-four-body .wsus__about_us,
.theme-four-body .upload_product,
.theme-four-body .upload_product_info {
    background: transparent !important;
}

/* ---------- Blog page ---------- */
.theme-four-body .wsus__sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.theme-four-body .wsus__sidebar_item {
    background: linear-gradient(180deg, rgba(20, 25, 36, .96) 0%, rgba(13, 18, 28, .98) 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding: 22px 20px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}

.theme-four-body .wsus__sidebar_item h3 {
    color: #fff !important;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 18px;
}

.theme-four-body .wsus__sidebar_search form {
    position: relative;
}

.theme-four-body .wsus__sidebar_search input,
.theme-four-body .wsus__sidebar_subscribe input {
    width: 100%;
    height: 52px;
    background: #101521 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    color: #eef4ff !important;
    border-radius: 14px !important;
    padding: 0 16px !important;
    outline: none;
}

.theme-four-body .wsus__sidebar_search input::placeholder,
.theme-four-body .wsus__sidebar_subscribe input::placeholder {
    color: #8b97ab;
}

.theme-four-body .wsus__sidebar_search button {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #4f46e5 0%, #405ff2 100%);
    color: #fff;
}

.theme-four-body .wsus__sidebar_blog ul li {
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    padding-bottom: 14px;
    margin-bottom: 14px;
}

.theme-four-body .wsus__sidebar_blog ul li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.theme-four-body .wsus__sidebar_blog ul li .img {
    border-radius: 12px;
    overflow: hidden;
}

.theme-four-body .wsus__sidebar_blog ul li .text a {
    color: #eef4ff !important;
    font-weight: 700;
}

.theme-four-body .wsus__sidebar_blog ul li .text p,
.theme-four-body .wsus__sidebar_categories ul li a,
.theme-four-body .wsus__sidebar_categories ul li a span {
    color: #98a6ba !important;
}

.theme-four-body .wsus__sidebar_categories ul li {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.theme-four-body .wsus__sidebar_categories ul li:last-child {
    border-bottom: 0;
}

.theme-four-body .wsus__sidebar_categories ul li a:hover,
.theme-four-body .wsus__sidebar_blog ul li .text a:hover {
    color: #7ea2ff !important;
}

.theme-four-body .wsus__sidebar_tags ul {
    gap: 10px;
}

.theme-four-body .wsus__sidebar_tags ul li a {
    background: #141a27 !important;
    color: #dce6f8 !important;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    padding: 9px 14px;
    font-weight: 700;
    transition: .25s ease;
}

.theme-four-body .wsus__sidebar_tags ul li a:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #405ff2 100%) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.theme-four-body .wsus__sidebar_subscribe {
    border-radius: 18px;
    overflow: hidden;
    position: relative;
}

.theme-four-body .wsus__sidebar_subscribe_overlay {
    background: linear-gradient(180deg, rgba(10, 14, 24, .78) 0%, rgba(8, 10, 18, .92) 100%) !important;
    padding: 24px 20px !important;
}

.theme-four-body .wsus__sidebar_subscribe_overlay h3 {
    color: #fff !important;
}

.theme-four-body .wsus__sidebar_subscribe_overlay p {
    color: #b6c2d5 !important;
}

.theme-four-body .common_btn,
.theme-four-body button.common_btn {
    background: linear-gradient(135deg, #4f46e5 0%, #405ff2 100%) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 30px rgba(64, 95, 242, .24);
}

.theme-four-body .common_btn:hover,
.theme-four-body button.common_btn:hover {
    color: #fff !important;
    transform: translateY(-1px);
}

.theme-four-body .wsus__blog_3 {
    background: linear-gradient(180deg, rgba(21, 26, 37, .98) 0%, rgba(13, 18, 28, .98) 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
    transition: .25s ease;
    height: 100%;
}

.theme-four-body .wsus__blog_3:hover {
    transform: translateY(-4px);
    border-color: rgba(95, 127, 255, .35);
}

.theme-four-body .wsus__blog_3_img {
    overflow: hidden;
}

.theme-four-body .wsus__blog_3_img img {
    height: 220px;
    object-fit: cover;
}

.theme-four-body .wsus__blog_3_text {
    background: transparent !important;
}

.theme-four-body .wsus__blog_3_text .categori {
    background: linear-gradient(135deg, #f7c948 0%, #f59e0b 100%) !important;
    color: #111827 !important;
    border-radius: 10px;
    font-weight: 800;
}

.theme-four-body .wsus__blog_3_text .title {
    color: #fff !important;
    font-weight: 800;
}

.theme-four-body .wsus__blog_3_text .title:hover {
    color: #8da7ff !important;
}

.theme-four-body .wsus__blog_3_text .description,
.theme-four-body .wsus__blog_3_text ul li p {
    color: #9fb0c7 !important;
}

.theme-four-body .wsus__blog_3_text ul {
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.theme-four-body .wsus__blog_3_text ul li a {
    color: #dfe8fa !important;
    font-weight: 700;
}

.theme-four-body .wsus__blog_3_text ul li a:hover {
    color: #7ea2ff !important;
}

/* ---------- Pagination ---------- */
.theme-four-body .wsus__pagination .page-link,
.theme-four-body .pagination .page-link {
    background: #141a27 !important;
    color: #dce6f8 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 12px !important;
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-weight: 800;
}

.theme-four-body .wsus__pagination .page-item.active .page-link,
.theme-four-body .pagination .page-item.active .page-link,
.theme-four-body .wsus__pagination .page-link:hover,
.theme-four-body .pagination .page-link:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #405ff2 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* ---------- About us ---------- */
.theme-four-body .wsus__about_us_text h5 {
    color: #7ea2ff !important;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.theme-four-body .wsus__about_us_text h2 {
    color: #f8fbff !important;
    font-weight: 900;
    line-height: 1.15;
}

.theme-four-body .wsus__about_us_text h2 b {
    color: #8aa5ff !important;
}

.theme-four-body .wsus__about_us_text p,
.theme-four-body .wsus__about_us_text li {
    color: #9eb0c7 !important;
}

.theme-four-body .wsus__about_text_img {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.theme-four-body .wsus__about_text_img .img img {
    border: 2px solid rgba(255, 255, 255, .12);
}

.theme-four-body .wsus__about_text_img .text h3 {
    color: #fff !important;
}

.theme-four-body .wsus__about_text_img .text p {
    color: #8fa2bb !important;
}

.theme-four-body .wsus__about_us_img {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .24);
    background: linear-gradient(180deg, rgba(19, 24, 35, .96), rgba(11, 14, 22, .98));
    padding: 14px;
}

.theme-four-body .wsus__about_us_img img {
    border-radius: 18px;
}

/* ---------- Start selling / select product type ---------- */
.theme-four-body .upload_product {
    padding-top: 90px;
    padding-bottom: 30px;
}

.theme-four-body .upload_product .upload_product_text {
    background: linear-gradient(180deg, rgba(21, 26, 37, .98) 0%, rgba(13, 18, 28, .98) 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    padding: 34px 30px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}

.theme-four-body .upload_product_text h3 {
    color: #fff !important;
    font-size: 38px;
    line-height: 1.18;
    font-weight: 900;
    margin-bottom: 6px;
}

.theme-four-body .upload_product_text h6 {
    color: #7ea2ff !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.theme-four-body .upload_product_text h5 {
    color: #eef4ff !important;
    font-size: 18px;
    font-weight: 800;
    margin-top: 8px;
}

.theme-four-body .upload_product_text p {
    color: #99abc3 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    margin-bottom: 28px;
    padding-bottom: 22px;
}

.theme-four-body .upload_product_text ul {
    gap: 14px;
}

.theme-four-body .upload_product_text ul li .cancel {
    min-height: 46px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 77, 109, .12);
    border: 1px solid rgba(255, 77, 109, .22);
    color: #ff8aa0 !important;
    font-size: 14px;
    font-weight: 800;
    margin-right: 0;
}

.theme-four-body .upload_product_text ul li .cancel:hover {
    background: rgba(255, 77, 109, .18);
    color: #fff !important;
}

.theme-four-body .upload_product_text .common_btn {
    min-height: 46px;
    padding: 0 22px !important;
    border-radius: 12px !important;
    font-weight: 800;
}

.theme-four-body .upload_product_img {
    width: 100% !important;
    background: radial-gradient(circle at top left, rgba(79, 70, 229, .20), transparent 30%), linear-gradient(180deg, rgba(21, 26, 37, .98) 0%, rgba(13, 18, 28, .98) 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 28px;
    padding: 18px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}

.theme-four-body .upload_product_img img {
    border-radius: 20px;
    object-fit: cover;
}

/* ---------- Upload / edit product forms ---------- */
.theme-four-body .upload_product_info {
    padding-top: 90px;
}

.theme-four-body .upload_product_info h3 {
    background: linear-gradient(135deg, #191f2c 0%, #121722 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px !important;
    padding: 22px 26px !important;
    margin-bottom: 18px !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
}

.theme-four-body .upload_product_form {
    background: linear-gradient(180deg, rgba(21, 26, 37, .98) 0%, rgba(13, 18, 28, .98) 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    padding: 28px 26px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}

.theme-four-body .upload_form_input label,
.theme-four-body .upload_product_form label,
.theme-four-body .upload_product_form legend,
.theme-four-body .upload_product_form .form-group>label {
    color: #dfe8fa !important;
    font-weight: 700;
}

.theme-four-body .upload_box {
    background: #101521 !important;
    border: 1px dashed rgba(130, 150, 255, .35) !important;
    border-radius: 18px !important;
    padding: 42px 24px !important;
}

.theme-four-body .upload_box label {
    color: #9fb0c7 !important;
}

.theme-four-body .upload_box label span {
    color: #8aa5ff !important;
    font-weight: 800;
}

.theme-four-body .upload_product_form input[type="text"],
.theme-four-body .upload_product_form input[type="number"],
.theme-four-body .upload_product_form input[type="email"],
.theme-four-body .upload_product_form input[type="file"],
.theme-four-body .upload_product_form textarea,
.theme-four-body .upload_form_input input,
.theme-four-body .upload_form_input textarea,
.theme-four-body .upload_product_form .form-control,
.theme-four-body .upload_product_form .form-control-file {
    background: #101521 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    color: #eef4ff !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

.theme-four-body .upload_product_form input::placeholder,
.theme-four-body .upload_product_form textarea::placeholder {
    color: #8795aa !important;
}

.theme-four-body .upload_product_form input:focus,
.theme-four-body .upload_product_form textarea:focus,
.theme-four-body .upload_product_form .form-control:focus {
    border-color: rgba(96, 123, 255, .55) !important;
    box-shadow: 0 0 0 4px rgba(64, 95, 242, .12) !important;
}

.theme-four-body .upload_product_form fieldset {
    border: 0 !important;
    margin: 0;
    padding: 0;
}

.theme-four-body .upload_product_form .nice-select,
.theme-four-body .upload_product_form .select2-container .select2-selection--single {
    background: #101521 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    color: #eef4ff !important;
    border-radius: 14px !important;
    height: 54px !important;
    line-height: 54px !important;
}

.theme-four-body .upload_product_form .nice-select .current,
.theme-four-body .upload_product_form .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #eef4ff !important;
    line-height: 54px !important;
}

.theme-four-body .upload_product_form .nice-select:after {
    border-bottom-color: #a9b8d0 !important;
    border-right-color: #a9b8d0 !important;
}

.theme-four-body .select2-dropdown,
.theme-four-body .select2-container--default .select2-results>.select2-results__options {
    background: #141a27 !important;
    color: #eef4ff !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
}

.theme-four-body .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #405ff2 !important;
    color: #fff !important;
}

.theme-four-body .bootstrap-tagsinput {
    width: 100%;
    min-height: 54px;
    background: #101521 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.theme-four-body .bootstrap-tagsinput input {
    background: transparent !important;
    color: #eef4ff !important;
    border: 0 !important;
    box-shadow: none !important;
}

.theme-four-body .bootstrap-tagsinput .tag {
    background: linear-gradient(135deg, #4f46e5 0%, #405ff2 100%);
    color: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
}

.theme-four-body .upload_product_form .note-editor.note-frame {
    background: #101521 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 16px !important;
    overflow: hidden;
}

.theme-four-body .upload_product_form .note-toolbar {
    background: #161d2b !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}

.theme-four-body .upload_product_form .note-btn {
    background: #1d2535 !important;
    border-color: rgba(255, 255, 255, .08) !important;
    color: #dfe8fa !important;
}

.theme-four-body .upload_product_form .note-editing-area,
.theme-four-body .upload_product_form .note-editable {
    background: #101521 !important;
    color: #eef4ff !important;
}

.theme-four-body .upload_product_form .note-statusbar {
    background: #161d2b !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
}

.theme-four-body .upload_product_info .wsus__comment_single_input h4 {
    color: #fff !important;
    font-weight: 800;
    margin-bottom: 10px;
}

.theme-four-body .upload_product_info input[type="checkbox"] {
    accent-color: #405ff2;
}

.theme-four-body .upload_product_form .upload {
    min-height: 48px;
    padding: 0 24px !important;
    font-weight: 800;
    border-radius: 12px !important;
    margin-top: 8px;
}

/* ---------- Mobile ---------- */
@media (max-width: 991.98px) {
    .theme-four-body .upload_product {
        padding-top: 70px;
    }

    .theme-four-body .upload_product_info {
        padding-top: 70px;
    }

    .theme-four-body .upload_product_text h3,
    .theme-four-body .wsus__breadcrumb_text h1 {
        font-size: 28px !important;
    }

    .theme-four-body .upload_product_form {
        padding: 20px 16px;
    }

    .theme-four-body .upload_product .upload_product_text {
        padding: 24px 18px;
        margin-bottom: 22px;
    }
}

/* =========================================================
   THEME FOUR — DARK INNER PAGE FIX PACK
   Fixed pages:
   - Start Selling / Select Product Type
   - Upload Product / Edit Product
   - Privacy Policy
   - Terms And Conditions
   - Blog Details
========================================================= */

/* ---------- shared page surfaces ---------- */
.theme-four-body .upload_product,
.theme-four-body .upload_product_info,
.theme-four-body .wsus__privacy_policy,
.theme-four-body .wsus__terms_condition,
.theme-four-body .wsus__blog_details {
    background:
        radial-gradient(circle at top left, rgba(77, 107, 255, .08), transparent 24%),
        linear-gradient(180deg, #0b0d12 0%, #0e1117 100%) !important;
    color: var(--tf-text) !important;
}

/* =========================================================
   START SELLING / SELECT PRODUCT TYPE
========================================================= */

.theme-four-body .upload_product {
    padding-top: 90px;
    padding-bottom: 70px;
}

.theme-four-body .upload_product .upload_product_text {
    background: linear-gradient(180deg, rgba(22, 25, 34, .96) 0%, rgba(15, 18, 26, .98) 100%) !important;
    border: 1px solid var(--tf-line) !important;
    border-radius: 24px;
    padding: 34px 30px;
    box-shadow: var(--tf-shadow);
}

.theme-four-body .upload_product_text h3 {
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 40px !important;
    line-height: 1.15 !important;
    margin-bottom: 6px;
}

.theme-four-body .upload_product_text h6 {
    color: #7ea2ff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    margin: 8px 0 24px 0 !important;
    letter-spacing: .02em;
}

.theme-four-body .upload_product_text h5 {
    color: #eef4ff !important;
    font-weight: 700 !important;
}

.theme-four-body .upload_product_text p {
    color: #9fb0c7 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    margin: 15px 0 28px 0 !important;
    padding-bottom: 22px !important;
    line-height: 1.75;
}

.theme-four-body .upload_product_text p a {
    color: #86a6ff !important;
}

.theme-four-body .upload_product_text p a:hover {
    color: #fff !important;
}

.theme-four-body .upload_product_img {
    width: 100% !important;
    background: linear-gradient(180deg, rgba(22, 25, 34, .96) 0%, rgba(15, 18, 26, .98) 100%) !important;
    border: 1px solid var(--tf-line) !important;
    border-radius: 28px;
    padding: 18px;
    box-shadow: var(--tf-shadow);
}

.theme-four-body .upload_product_img img {
    border-radius: 18px;
    display: block;
}

/* start selling select */
.theme-four-body .upload_product_text .nice-select,
.theme-four-body .upload_form_input .nice-select {
    width: 100%;
    height: 56px;
    line-height: 56px;
    background: #101521 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 14px !important;
    color: #eef4ff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 24px !important;
    box-shadow: none !important;
}

.theme-four-body .upload_product_text .nice-select .current,
.theme-four-body .upload_form_input .nice-select .current {
    color: #eef4ff !important;
}

.theme-four-body .upload_product_text .nice-select:after,
.theme-four-body .upload_form_input .nice-select:after {
    border-bottom-color: #b7c4d9 !important;
    border-right-color: #b7c4d9 !important;
}

.theme-four-body .upload_product_text .nice-select .list,
.theme-four-body .upload_form_input .nice-select .list {
    width: 100%;
    background: #141a27 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35) !important;
    overflow: hidden;
}

.theme-four-body .upload_product_text .nice-select .option,
.theme-four-body .upload_form_input .nice-select .option {
    color: #e5eefc !important;
    background: transparent !important;
}

.theme-four-body .upload_product_text .nice-select .option:hover,
.theme-four-body .upload_product_text .nice-select .option.focus,
.theme-four-body .upload_product_text .nice-select .option.selected.focus,
.theme-four-body .upload_form_input .nice-select .option:hover,
.theme-four-body .upload_form_input .nice-select .option.focus,
.theme-four-body .upload_form_input .nice-select .option.selected.focus {
    background: rgba(64, 95, 242, .18) !important;
    color: #fff !important;
}

.theme-four-body .upload_product_text ul li .cancel {
    min-height: 46px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 77, 109, .10);
    border: 1px solid rgba(255, 77, 109, .18);
    color: #ff94a7 !important;
    font-weight: 700 !important;
    margin-right: 12px !important;
}

.theme-four-body .upload_product_text ul li .cancel:hover {
    background: rgba(255, 77, 109, .18);
    color: #fff !important;
}

.theme-four-body .upload_product_text .common_btn {
    min-height: 46px;
    padding: 0 22px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #4f46e5 0%, #405ff2 100%) !important;
    color: #fff !important;
    border: 0 !important;
    font-weight: 800 !important;
    box-shadow: 0 14px 30px rgba(64, 95, 242, .25);
}

/* =========================================================
   UPLOAD PRODUCT / EDIT PRODUCT
========================================================= */

.theme-four-body .upload_product_info {
    padding-top: 90px;
    padding-bottom: 90px;
}

.theme-four-body .upload_product_info h3 {
    background: linear-gradient(135deg, #191f2c 0%, #121722 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px !important;
    padding: 22px 26px !important;
    margin-bottom: 18px !important;
    box-shadow: var(--tf-shadow);
}

.theme-four-body .upload_product_form {
    background: linear-gradient(180deg, rgba(22, 25, 34, .96) 0%, rgba(15, 18, 26, .98) 100%) !important;
    border: 1px solid var(--tf-line) !important;
    border-radius: 24px;
    padding: 28px 26px;
    box-shadow: var(--tf-shadow);
}

.theme-four-body .upload_product_form label,
.theme-four-body .upload_product_form legend,
.theme-four-body .upload_form_input label,
.theme-four-body .upload_product_info .wsus__comment_single_input h4 {
    color: #e8effc !important;
    font-weight: 700 !important;
}

.theme-four-body .upload_box {
    background: #101521 !important;
    border: 1px dashed rgba(130, 150, 255, .35) !important;
    border-radius: 18px !important;
    padding: 42px 24px !important;
}

.theme-four-body .upload_box label {
    color: #9fb0c7 !important;
}

.theme-four-body .upload_box label span {
    color: #8aa5ff !important;
    font-weight: 800 !important;
}

.theme-four-body .upload_product_form input[type="text"],
.theme-four-body .upload_product_form input[type="number"],
.theme-four-body .upload_product_form input[type="email"],
.theme-four-body .upload_product_form input[type="file"],
.theme-four-body .upload_product_form textarea,
.theme-four-body .upload_product_form .form-control,
.theme-four-body .upload_product_form .form-control-file {
    background: #101521 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    color: #eef4ff !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

.theme-four-body .upload_product_form input::placeholder,
.theme-four-body .upload_product_form textarea::placeholder {
    color: #8795aa !important;
}

.theme-four-body .upload_product_form input:focus,
.theme-four-body .upload_product_form textarea:focus,
.theme-four-body .upload_product_form .form-control:focus {
    border-color: rgba(96, 123, 255, .55) !important;
    box-shadow: 0 0 0 4px rgba(64, 95, 242, .12) !important;
}

.theme-four-body .upload_product_form fieldset {
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 14px !important;
    background: #101521 !important;
}

.theme-four-body .upload_product_form fieldset legend {
    background: transparent !important;
}

.theme-four-body .upload_product_form .select2-container .select2-selection--single {
    height: 54px !important;
    background: #101521 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 14px !important;
}

.theme-four-body .upload_product_form .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #eef4ff !important;
    line-height: 54px !important;
}

.theme-four-body .upload_product_form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 54px !important;
}

.theme-four-body .select2-dropdown {
    background: #141a27 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
}

.theme-four-body .select2-results__option {
    color: #eaf2ff !important;
}

.theme-four-body .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #405ff2 !important;
    color: #fff !important;
}

.theme-four-body .bootstrap-tagsinput {
    width: 100%;
    min-height: 54px;
    background: #101521 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
}

.theme-four-body .bootstrap-tagsinput input {
    background: transparent !important;
    color: #eef4ff !important;
    border: 0 !important;
}

.theme-four-body .bootstrap-tagsinput .tag {
    background: linear-gradient(135deg, #4f46e5 0%, #405ff2 100%);
    color: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
}

.theme-four-body .upload_product_form .note-editor.note-frame {
    background: #101521 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 16px !important;
    overflow: hidden;
}

.theme-four-body .upload_product_form .note-toolbar {
    background: #161d2b !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}

.theme-four-body .upload_product_form .note-btn {
    background: #1d2535 !important;
    border-color: rgba(255, 255, 255, .08) !important;
    color: #dfe8fa !important;
}

.theme-four-body .upload_product_form .note-editing-area,
.theme-four-body .upload_product_form .note-editable,
.theme-four-body .upload_product_form textarea#editor {
    background: #101521 !important;
    color: #eef4ff !important;
}

.theme-four-body .upload_product_form .note-statusbar {
    background: #161d2b !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
}

.theme-four-body .upload_product_form .upload,
.theme-four-body .upload_product_form .common_btn {
    background: linear-gradient(135deg, #4f46e5 0%, #405ff2 100%) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
}

/* =========================================================
   PRIVACY POLICY + TERMS
========================================================= */

.theme-four-body .wsus__privacy_policy,
.theme-four-body .wsus__terms_condition {
    position: relative;
}

.theme-four-body .wsus__terms_condition_text {
    background: linear-gradient(180deg, rgba(22, 25, 34, .92) 0%, rgba(14, 17, 23, .96) 100%);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 24px;
    padding: 34px 32px;
    box-shadow: 0 20px 46px rgba(0, 0, 0, .20);
}

.theme-four-body .wsus__terms_condition_text h1,
.theme-four-body .wsus__terms_condition_text h2,
.theme-four-body .wsus__terms_condition_text h3,
.theme-four-body .wsus__terms_condition_text h4,
.theme-four-body .wsus__terms_condition_text h5,
.theme-four-body .wsus__terms_condition_text h6 {
    color: #f8fbff !important;
    font-weight: 800 !important;
}

.theme-four-body .wsus__terms_condition_text p,
.theme-four-body .wsus__terms_condition_text li,
.theme-four-body .wsus__terms_condition_text span {
    color: #a7b6ca !important;
}

.theme-four-body .wsus__terms_condition_text strong,
.theme-four-body .wsus__terms_condition_text b {
    color: #eef4ff !important;
}

.theme-four-body .wsus__terms_condition_text a {
    color: #8aa5ff !important;
}

.theme-four-body .wsus__terms_condition_text a:hover {
    color: #fff !important;
}

.theme-four-body .wsus__terms_condition_text ul li::after,
.theme-four-body .wsus__terms_condition_text ol li::after {
    background: #4f6bff !important;
}

/* =========================================================
   BLOG DETAILS
========================================================= */

.theme-four-body .wsus__blog_details_area {
    background: linear-gradient(180deg, rgba(22, 25, 34, .92) 0%, rgba(14, 17, 23, .96) 100%);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 24px;
    padding: 26px;
    box-shadow: 0 20px 46px rgba(0, 0, 0, .20);
}

.theme-four-body .wsus__blog_details_img {
    border-radius: 20px;
    overflow: hidden;
}

.theme-four-body .wsus__blog_details_img img {
    width: 100%;
    display: block;
}

.theme-four-body .wsus__blog_details_header {
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    padding-bottom: 16px;
    margin-bottom: 22px;
}

.theme-four-body .wsus__blog_details_header li {
    color: #98abc5 !important;
}

.theme-four-body .wsus__blog_details_header li i {
    color: #7ea2ff !important;
}

.theme-four-body .wsus__blog_details_text h1,
.theme-four-body .wsus__blog_details_text h2,
.theme-four-body .wsus__blog_details_text h3,
.theme-four-body .wsus__blog_details_text h4,
.theme-four-body .wsus__blog_details_text h5,
.theme-four-body .wsus__blog_details_text h6 {
    color: #fff !important;
    font-weight: 800 !important;
}

.theme-four-body .wsus__blog_details_text p,
.theme-four-body .wsus__blog_details_text li,
.theme-four-body .wsus__blog_details_text span {
    color: #a4b4c8 !important;
}

.theme-four-body .wsus__blog_details_text a {
    color: #8aa5ff !important;
}

.theme-four-body .wsus__blog_details_text a:hover {
    color: #fff !important;
}

.theme-four-body .wsus__blog_details_text ul li::after,
.theme-four-body .wsus__blog_details_text ol li::after {
    background: #4f6bff !important;
}

.theme-four-body .wsus__blog_tags_and_share {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.theme-four-body .wsus__blog_tags_and_share .tags li span,
.theme-four-body .wsus__blog_tags_and_share .share li span {
    color: #eef4ff !important;
    font-weight: 700 !important;
}

.theme-four-body .wsus__blog_tags_and_share .tags li a,
.theme-four-body .wsus__blog_tags_and_share .share li a {
    background: #141a27 !important;
    color: #dce6f8 !important;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
}

.theme-four-body .wsus__blog_tags_and_share .tags li a:hover,
.theme-four-body .wsus__blog_tags_and_share .share li a:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #405ff2 100%) !important;
    color: #fff !important;
}

.theme-four-body .wsus__comment_single_input legend {
    color: #e8effc !important;
    font-weight: 700 !important;
}

.theme-four-body .wsus__comment_single_input input,
.theme-four-body .wsus__comment_single_input textarea {
    background: transparent !important;
    color: #eef4ff !important;
}

.theme-four-body .wsus__comment_single_input input::placeholder,
.theme-four-body .wsus__comment_single_input textarea::placeholder {
    color: #8795aa !important;
}

/* sidebar */
.theme-four-body .wsus__sidebar_item {
    background: linear-gradient(180deg, rgba(20, 25, 36, .96) 0%, rgba(13, 18, 28, .98) 100%) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}

.theme-four-body .wsus__sidebar_item h3 {
    color: #fff !important;
}

.theme-four-body .wsus__sidebar_search input {
    background: #101521 !important;
    color: #eef4ff !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
}

.theme-four-body .wsus__sidebar_search input::placeholder {
    color: #8795aa !important;
}

.theme-four-body .wsus__sidebar_blog ul li .text a,
.theme-four-body .wsus__sidebar_categories ul li a {
    color: #e5eefc !important;
}

.theme-four-body .wsus__sidebar_blog ul li .text p,
.theme-four-body .wsus__sidebar_categories ul li a span {
    color: #93a7c2 !important;
}

.theme-four-body .wsus__sidebar_tags ul li a {
    background: #141a27 !important;
    color: #dce6f8 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
}

/* pagination */
.theme-four-body .wsus__pagination .page-link,
.theme-four-body .pagination .page-link {
    background: #141a27 !important;
    color: #dce6f8 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 12px !important;
}

.theme-four-body .wsus__pagination .page-item.active .page-link,
.theme-four-body .pagination .page-item.active .page-link,
.theme-four-body .wsus__pagination .page-link:hover,
.theme-four-body .pagination .page-link:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #405ff2 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 991.98px) {
    .theme-four-body .upload_product {
        padding-top: 70px;
        padding-bottom: 50px;
    }

    .theme-four-body .upload_product .upload_product_text,
    .theme-four-body .upload_product_form,
    .theme-four-body .wsus__terms_condition_text,
    .theme-four-body .wsus__blog_details_area,
    .theme-four-body .wsus__comment_input_area {
        padding: 20px 16px !important;
    }

    .theme-four-body .upload_product_text h3 {
        font-size: 30px !important;
    }
}


/* =========================================================
   Theme Four - Home professional marketplace sections
   ========================================================= */

.tf-stats-wrap {
    padding: 32px;
    border-radius: 28px;
}

.tf-stat-card {
    height: 100%;
    padding: 26px 22px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .06);
    text-align: center;
}

.tf-stat-card__icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(64, 95, 242, .12), rgba(34, 197, 94, .12));
}

.tf-stat-card__icon img {
    max-width: 34px;
    max-height: 34px;
    object-fit: contain;
}

.tf-stat-card h3 {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 800;
    color: #0f172a;
}

.tf-stat-card p {
    margin: 0;
    color: #64748b;
    font-size: 15px;
}


.tf-blog-card__image {
    display: block;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}

.tf-blog-card__image img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform .35s ease;
}

.tf-blog-card:hover .tf-blog-card__image img {
    transform: scale(1.04);
}

.tf-blog-card__content {
    padding: 22px;
}

.tf-blog-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

.tf-blog-card__title {
    display: block;
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1.45;
    font-weight: 800;
    color: #0f172a;
}

.tf-blog-card__desc {
    color: #64748b;
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 18px;
}

.tf-blog-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.tf-blog-card__author {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tf-blog-card__author img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.tf-blog-card__author span {
    color: #334155;
    font-size: 14px;
    font-weight: 700;
}

.tf-blog-card__link {
    color: #405ff2;
    font-weight: 700;
    white-space: nowrap;
}

.tf-home-subscribe {
    position: relative;
    z-index: 20;
    padding: 0 0 40px;
    margin-bottom: 0;
}

.tf-home-subscribe__wrap {
    min-height: 150px;
    padding: 48px 40px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top left, rgba(64, 95, 242, .16), transparent 30%),
        radial-gradient(circle at bottom right, rgba(34, 197, 94, .15), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.tf-home-subscribe__content h2 {
    margin: 12px 0 10px;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 800;
    color: #0f172a;
}

.tf-home-subscribe__content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: #64748b;
}

.tf-home-subscribe__form {
    width: 100%;
    max-width: 520px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.tf-home-subscribe__form input {
    flex: 1 1 auto;
    height: 58px;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: #fff;
    padding: 0 18px;
    color: #0f172a;
    outline: none;
}

@media (max-width: 991.98px) {
    .tf-section {
        padding: 70px 0;
    }

    .tf-section-head,
    .tf-home-subscribe__wrap,
    .tf-offer-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .tf-home-subscribe__form {
        max-width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .tf-home-subscribe__form .tf-btn {
        width: 100%;
    }

    .tf-section-head h2,
    .tf-home-subscribe__content h2,
    .tf-app-banner__content h2 {
        font-size: 28px;
    }
}

@media (max-width: 767.98px) {

    .tf-feature-block,
    .tf-brand-block,
    .tf-app-banner,
    .tf-home-subscribe__wrap,
    .tf-stats-wrap {
        padding: 22px;
        border-radius: 22px;
    }

    .tf-blog-card__image img {
        height: 210px;
    }
}


/* =========================================================
   MEDPOV / User Panel Fix Pack
   Scope: Dashboard + Withdraw
========================================================= */

/* Genel panel alanı */
.mp-user-panel-section {
    background:
        radial-gradient(circle at top left, rgba(64, 95, 242, .12), transparent 24%),
        radial-gradient(circle at top right, rgba(0, 212, 255, .08), transparent 20%),
        linear-gradient(180deg, #060b17 0%, #09111f 100%);
    padding: 34px 0 70px !important;
    position: relative;
    overflow: hidden;
}

.mp-user-panel-section .container {
    position: relative;
    z-index: 2;
}

/* İç blok spacing */
.mp-user-panel-section .row {
    --bs-gutter-y: 24px;
}

/* =========================================================
   OVERVIEW / CONTENT CARD
========================================================= */
.mp-user-panel-section .wsus__profile_overview,
.mp-user-panel-section .wsus__user_information,
.mp-user-panel-section .wsus__payout_table,
.mp-user-panel-section .wsus__profile_det {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .22) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px !important;
    color: #e5ecff !important;
}

/* Overview alanı */
.mp-user-panel-section .wsus__profile_overview {
    padding: 28px !important;
}

.mp-user-panel-section .wsus__profile_overview h2 {
    color: #ffffff !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
    margin-bottom: 18px !important;
    font-weight: 700 !important;
}

.mp-user-panel-section .wsus__profile_overview h2:not(:first-child) {
    margin-top: 28px !important;
}

.mp-user-panel-section .wsus__profile_overview,
.mp-user-panel-section .wsus__profile_overview p,
.mp-user-panel-section .wsus__profile_overview li,
.mp-user-panel-section .wsus__profile_overview span,
.mp-user-panel-section .wsus__profile_overview div {
    color: #c8d4f0 !important;
    line-height: 1.8 !important;
    font-size: 15px !important;
}

.mp-user-panel-section .wsus__profile_overview ul {
    margin: 18px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.mp-user-panel-section .wsus__profile_overview ul li {
    position: relative;
    padding-left: 28px !important;
    margin-bottom: 12px !important;
}

.mp-user-panel-section .wsus__profile_overview ul li::before {
    content: "\f058";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #4da3ff;
    position: absolute;
    left: 0;
    top: 1px;
}

/* =========================================================
   RIGHT SIDEBAR INFO BOXES
========================================================= */
.mp-user-panel-section .wsus__user_information,
.mp-user-panel-section .wsus__profile_det {
    padding: 22px 22px !important;
}

.mp-user-panel-section .wsus__user_information h2,
.mp-user-panel-section .wsus__profile_det h2,
.mp-user-panel-section .wsus__seller_info h2 {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 18px !important;
}

.mp-user-panel-section .wsus__user_information ul,
.mp-user-panel-section .wsus__profile_det ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.mp-user-panel-section .wsus__user_information ul li,
.mp-user-panel-section .wsus__profile_det ul li {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    color: #d8e2ff !important;
    font-size: 14px !important;
}

.mp-user-panel-section .wsus__user_information ul li:last-child,
.mp-user-panel-section .wsus__profile_det ul li:last-child {
    border-bottom: none !important;
}

.mp-user-panel-section .wsus__user_information ul li b,
.mp-user-panel-section .wsus__profile_det ul li b,
.mp-user-panel-section .wsus__user_information ul li strong,
.mp-user-panel-section .wsus__profile_det ul li strong {
    color: #ffffff !important;
}



/* =========================================================
   WITHDRAW TABLE
========================================================= */
.mp-withdraw-page .wsus__payout_table {
    margin-top: 10px;
    padding: 24px !important;
}

.mp-withdraw-page .wsus__payout_table h2 {
    color: #ffffff !important;
    font-size: 40px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    margin-bottom: 24px !important;
    letter-spacing: -.02em;
}

.mp-withdraw-page .wsus__payout_table .table-responsive {
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
}

.mp-withdraw-page .wsus__payout_table table {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
}

.mp-withdraw-page .wsus__payout_table table thead,
.mp-withdraw-page .wsus__payout_table table tbody,
.mp-withdraw-page .wsus__payout_table table tr,
.mp-withdraw-page .wsus__payout_table table td,
.mp-withdraw-page .wsus__payout_table table th {
    border-color: rgba(255, 255, 255, .08) !important;
}

.mp-withdraw-page .wsus__payout_table table .header_row th,
.mp-withdraw-page .wsus__payout_table table thead th {
    background: rgba(255, 255, 255, .08) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 18px 16px !important;
    border: none !important;
    white-space: nowrap;
}

.mp-withdraw-page .wsus__payout_table table tbody tr {
    background: rgba(8, 14, 28, .78) !important;
    transition: .2s ease;
}

.mp-withdraw-page .wsus__payout_table table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, .035) !important;
}

.mp-withdraw-page .wsus__payout_table table tbody tr:hover {
    background: rgba(77, 163, 255, .10) !important;
}

.mp-withdraw-page .wsus__payout_table table tbody td {
    color: #e6edff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 18px 16px !important;
    vertical-align: middle !important;
    border-top: 1px solid rgba(255, 255, 255, .07) !important;
    background: transparent !important;
}

.mp-withdraw-page .wsus__payout_table table tbody td.number {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.mp-withdraw-page .wsus__payout_table table tbody td.method,
.mp-withdraw-page .wsus__payout_table table tbody td.charge,
.mp-withdraw-page .wsus__payout_table table tbody td.amount,
.mp-withdraw-page .wsus__payout_table table tbody td.status {
    color: #dce7ff !important;
}

/* Status badge */
.mp-withdraw-page .wsus__payout_table table tbody td.status span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 92px;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border: none !important;
}

.mp-withdraw-page .wsus__payout_table table tbody td.status span.success {
    background: rgba(34, 197, 94, .16) !important;
    color: #98f5b2 !important;
    border: 1px solid rgba(34, 197, 94, .20) !important;
}

.mp-withdraw-page .wsus__payout_table table tbody td.status span.pending {
    background: rgba(251, 191, 36, .16) !important;
    color: #ffd978 !important;
    border: 1px solid rgba(251, 191, 36, .18) !important;
}

/* table-striped override */
.mp-withdraw-page .table-striped>tbody>tr:nth-of-type(odd)>* {
    color: #e6edff !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.mp-withdraw-page .table-striped>tbody>tr:nth-of-type(even)>* {
    color: #e6edff !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* =========================================================
   MODAL
========================================================= */
.mp-withdraw-page .variant_modal .modal-content {
    background: #0c1322 !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 20px !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .36) !important;
    color: #dbe7ff !important;
}

.mp-withdraw-page .variant_modal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    padding: 18px 22px !important;
}

.mp-withdraw-page .variant_modal .modal-title {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

.mp-withdraw-page .variant_modal .btn-close {
    opacity: 1 !important;
    filter: invert(1) grayscale(100%);
}

.mp-withdraw-page .variant_modal .modal-body {
    padding: 22px !important;
}

.mp-withdraw-page .wsus__comment_single_input fieldset {
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 16px !important;
    padding: 10px 14px 14px !important;
    background: rgba(255, 255, 255, .04) !important;
    margin-bottom: 16px !important;
}

.mp-withdraw-page .wsus__comment_single_input legend {
    color: #9fb5df !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    width: auto !important;
    padding: 0 8px !important;
    margin-bottom: 0 !important;
}

.mp-withdraw-page .wsus__comment_single_input input,
.mp-withdraw-page .wsus__comment_single_input textarea,
.mp-withdraw-page .wsus__comment_single_input select,
.mp-withdraw-page .select2-container--default .select2-selection--single {
    background: transparent !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.mp-withdraw-page .wsus__comment_single_input input::placeholder,
.mp-withdraw-page .wsus__comment_single_input textarea::placeholder {
    color: #8da2c8 !important;
}

.mp-withdraw-page .common_btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 50px;
    padding: 12px 22px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    font-weight: 700 !important;
    box-shadow: 0 14px 28px rgba(37, 99, 235, .22);
}

.mp-withdraw-page .common_btn:hover {
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* =========================================================
   TABS FIX
========================================================= */
.mp-user-panel-section .wsus__dashboard_tab ul,
.mp-user-panel-section .wsus__profile_menu ul {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 18px !important;
    padding: 8px !important;
}

.mp-user-panel-section .wsus__dashboard_tab ul li a,
.mp-user-panel-section .wsus__profile_menu ul li a {
    color: #c9d6f3 !important;
    border-radius: 12px !important;
    transition: .2s ease;
}

.mp-user-panel-section .wsus__dashboard_tab ul li a.active,
.mp-user-panel-section .wsus__dashboard_tab ul li a:hover,
.mp-user-panel-section .wsus__profile_menu ul li a.active,
.mp-user-panel-section .wsus__profile_menu ul li a:hover {
    background: rgba(37, 99, 235, .16) !important;
    color: #ffffff !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 991.98px) {
    .mp-withdraw-page .wsus__payout_table h2 {
        font-size: 30px !important;
    }

    .mp-user-panel-section .wsus__profile_overview {
        padding: 22px !important;
    }

    .mp-withdraw-page .wsus__payout_overview_item h2 {
        font-size: 32px !important;
    }
}

@media (max-width: 767.98px) {
    .mp-user-panel-section {
        padding: 24px 0 50px !important;
    }

    .mp-withdraw-page .wsus__payout_table {
        padding: 16px !important;
    }

    .mp-withdraw-page .wsus__payout_table h2 {
        font-size: 24px !important;
        margin-bottom: 16px !important;
    }

    .mp-withdraw-page .wsus__payout_table table .header_row th,
    .mp-withdraw-page .wsus__payout_table table tbody td {
        padding: 14px 12px !important;
        font-size: 13px !important;
    }
}


.tf-user-menu {
    position: relative;
    z-index: 9999;
}

.tf-user-menu__trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    padding: 10px 14px;
    color: #fff;
    min-height: 54px;
    cursor: pointer;
    transition: .25s ease;
}

.tf-user-menu__trigger:hover {
    border-color: rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .12);
}

.tf-user-menu__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #405ff2, #6ea8fe);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    flex: 0 0 38px;
}

.tf-user-menu__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tf-user-menu__content {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-align: left;
}

.tf-user-menu__content small {
    font-size: 11px;
    color: rgba(255, 255, 255, .68);
}

.tf-user-menu__content strong {
    font-size: 14px;
    color: #fff;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tf-user-menu__dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 250px;
    background: #111827;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: .25s ease;
    z-index: 999;
}

.tf-user-menu.is-open .tf-user-menu__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tf-user-menu__dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e5e7eb;
    padding: 11px 12px;
    border-radius: 12px;
    font-size: 14px;
    text-decoration: none;
    transition: .2s ease;
}

.tf-user-menu__dropdown a:hover {
    background: rgba(64, 95, 242, .16);
    color: #fff;
}

@media (max-width: 991.98px) {
    .tf-user-menu__content {
        display: none;
    }

    .tf-user-menu__trigger {
        padding: 10px;
    }

    .tf-user-menu__dropdown {
        left: auto;
        right: 0;
        min-width: 220px;
        max-width: calc(100vw - 24px);
    }
}

/* ==========================================
   Theme Four - Become Seller / Become Author
========================================== */
.tf-seller-page {
    position: relative;
    padding: 0 0 90px;
    background:
        radial-gradient(circle at top left, rgba(77, 107, 255, .10), transparent 28%),
        radial-gradient(circle at bottom right, rgba(34, 197, 94, .06), transparent 24%);
}

.tf-seller-hero {
    padding: 28px 0 30px;
}

.tf-seller-hero__inner {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 28px;
    padding: 48px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
}

.tf-seller-hero__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .16), transparent 20%),
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, .06), transparent 22%);
    pointer-events: none;
}

.tf-seller-hero__content {
    position: relative;
    z-index: 2;
}

.tf-seller-eyebrow,
.tf-seller-section-label {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .10);
    color: #c8d5ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tf-seller-hero h1 {
    margin: 18px 0 14px;
    font-size: 48px;
    line-height: 1.08;
    font-weight: 900;
    color: #fff;
    max-width: 640px;
}

.tf-seller-hero__desc {
    max-width: 560px;
    font-size: 17px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .82);
    margin: 0 0 28px;
}

.tf-seller-hero__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.tf-seller-hero__visual {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(22, 25, 34, .92) 0%, rgba(14, 18, 28, .98) 100%);
}

.tf-seller-hero__visual img {
    max-height: 320px;
    width: auto;
    object-fit: contain;
}

.tf-seller-features {
    padding: 18px 0 18px;
}

.tf-seller-feature-card {
    height: 100%;
    text-align: center;
    padding: 28px 20px;
    border-radius: 22px;
    background: linear-gradient(180deg, #151a25 0%, #10141d 100%);
    transition: .25s ease;
}

.tf-seller-feature-card:hover,
.tf-seller-team-card:hover,
.tf-seller-category-card:hover {
    transform: translateY(-4px);
    border-color: rgba(77, 107, 255, .28);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .34);
}

.tf-seller-feature-card__icon {
    width: 82px;
    height: 82px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.tf-seller-feature-card__icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tf-seller-feature-card h4 {
    margin: 0;
    color: #f7faff;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
}

.tf-seller-about {
    padding: 26px 0 20px;
}

.tf-seller-about__box {
    padding: 34px;
    border-radius: 28px;
    background: linear-gradient(180deg, #141925 0%, #0f131b 100%);
}

.tf-seller-about__content h2 {
    margin: 18px 0 16px;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 900;
    color: #fff;
}

.tf-seller-about__text,
.tf-seller-about__text p,
.tf-seller-about__text li {
    color: #aeb8c8;
    font-size: 15px;
    line-height: 1.9;
}

.tf-seller-about__text p:last-child {
    margin-bottom: 0;
}

.tf-seller-about__visual {
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, #111622 0%, #0d1118 100%);
    padding: 12px;
}

.tf-seller-about__visual img {
    width: 100%;
    border-radius: 18px;
    display: block;
}

.tf-seller-author-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.tf-seller-author-meta__avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
}

.tf-seller-author-meta__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tf-seller-author-meta__info h3 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
}

.tf-seller-author-meta__info p {
    margin: 0;
    color: #8f9db3;
    font-size: 14px;
}

.tf-seller-author-meta__signature {
    margin-left: auto;
    max-width: 140px;
    opacity: .9;
}

.tf-seller-team,
.tf-seller-categories {
    padding: 46px 0 10px;
}

.tf-seller-heading {
    margin-bottom: 28px;
}

.tf-seller-heading h2 {
    margin: 14px 0 0;
    color: #fff;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 900;
}

.tf-seller-team-card {
    height: 100%;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(180deg, #151a25 0%, #0f131d 100%);
}

.tf-seller-team-card__image {
    height: 220px;
    overflow: hidden;
}

.tf-seller-team-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tf-seller-team-card__body {
    position: relative;
    text-align: center;
    padding: 58px 18px 22px;
}

.tf-seller-team-card__avatar {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #131824;
    background: #131824;
}

.tf-seller-team-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tf-seller-team-card__body h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
}

.tf-seller-team-card__body p {
    margin: 0 0 16px;
    color: #91a0b6;
    font-size: 14px;
}

.tf-seller-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tf-seller-socials a {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d6def0;
    background: #141a26;
    border: 1px solid rgba(255, 255, 255, .06);
    transition: .2s ease;
}

.tf-seller-socials a:hover {
    color: #fff;
    background: #1c2440;
    border-color: rgba(77, 107, 255, .28);
}

.tf-seller-category-card {
    height: 100%;
    text-align: center;
    padding: 24px 16px;
    border-radius: 22px;
    background: linear-gradient(180deg, #151a25 0%, #10141d 100%);
}

.tf-seller-category-card__icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 16px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    padding: 12px;
}

.tf-seller-category-card__icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tf-seller-category-card h3 {
    margin: 0 0 8px;
}

.tf-seller-category-card h3 a {
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
}

.tf-seller-category-card p {
    margin: 0;
    color: #8f9db3;
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .tf-seller-hero__inner {
        padding: 32px 24px;
    }

    .tf-seller-hero h1 {
        font-size: 36px;
    }

    .tf-seller-about__box {
        padding: 24px;
    }

    .tf-seller-about__content h2,
    .tf-seller-heading h2 {
        font-size: 30px;
    }

    .tf-seller-author-meta__signature {
        margin-left: 0;
    }
}

@media (max-width: 767.98px) {
    .tf-seller-page {
        padding-bottom: 70px;
    }

    .tf-seller-hero {
        padding-top: 18px;
    }

    .tf-seller-hero__inner {
        padding: 24px 18px;
        border-radius: 22px;
    }

    .tf-seller-hero h1 {
        font-size: 28px;
    }

    .tf-seller-hero__desc {
        font-size: 15px;
    }

    .tf-seller-hero__visual {
        min-height: 240px;
        padding: 16px;
    }

    .tf-seller-hero__visual img {
        max-height: 210px;
    }

    .tf-seller-about__content h2,
    .tf-seller-heading h2 {
        font-size: 24px;
    }

    .tf-seller-team-card__image {
        height: 200px;
    }
}

/* ==========================================
   Theme Four - FAQ Page
========================================== */
.tf-faq-page {
    position: relative;
    padding: 0 0 90px;
    background:
        radial-gradient(circle at top left, rgba(77, 107, 255, .10), transparent 26%),
        radial-gradient(circle at bottom right, rgba(34, 197, 94, .05), transparent 24%);
}

.tf-faq-hero {
    padding: 26px 0 24px;
}

.tf-faq-hero__inner {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 44px;
    background:
        linear-gradient(135deg, rgba(9, 14, 28, .96) 0%, rgba(22, 40, 109, .94) 55%, rgba(49, 88, 255, .88) 100%),
        url("../images/breadcrumb_bg.jpg");
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .30);
}

.tf-faq-hero__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .14), transparent 22%),
        radial-gradient(circle at 15% 80%, rgba(255, 255, 255, .06), transparent 24%);
}

.tf-faq-hero__content {
    position: relative;
    z-index: 2;
}

.tf-faq-eyebrow,
.tf-faq-label {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .10);
    color: #c8d5ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tf-faq-hero__content h1 {
    margin: 18px 0 14px;
    color: #fff;
    font-size: 46px;
    line-height: 1.08;
    font-weight: 900;
}

.tf-faq-hero__content p {
    max-width: 620px;
    margin: 0 0 22px;
    color: rgba(255, 255, 255, .82);
    font-size: 16px;
    line-height: 1.8;
}

.tf-faq-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tf-faq-breadcrumb li {
    color: #d7e2ff;
    font-size: 14px;
    font-weight: 600;
}

.tf-faq-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 10px;
    color: rgba(255, 255, 255, .45);
}

.tf-faq-breadcrumb a {
    color: #fff;
}

.tf-faq-hero__stats {
    position: relative;
    z-index: 2;
    padding: 24px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(18, 24, 38, .88) 0%, rgba(13, 18, 29, .96) 100%);
    display: grid;
    gap: 14px;
}

.tf-faq-mini-card {
    padding: 18px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
}

.tf-faq-mini-card strong {
    display: block;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    font-weight: 900;
    margin-bottom: 8px;
}

.tf-faq-mini-card span {
    color: #aebcdf;
    font-size: 14px;
    font-weight: 600;
}

.tf-faq-section {
    padding: 20px 0 0;
}

.tf-panel {
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

.tf-faq-box,
.tf-faq-contact {
    height: 100%;
    border-radius: 28px;
    background: linear-gradient(180deg, #141925 0%, #0f131b 100%);
    padding: 30px;
}

.tf-section-heading {
    margin-bottom: 22px;
}

.tf-section-heading h2 {
    margin: 14px 0 10px;
    color: #fff;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 900;
}

.tf-section-heading p {
    margin: 0;
    color: #94a3b8;
    font-size: 15px;
    line-height: 1.8;
}

.tf-section-heading--sm h2 {
    font-size: 30px;
}

.tf-faq-accordion .accordion-item {
    overflow: hidden;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 20px !important;
    background: linear-gradient(180deg, #161c29 0%, #111722 100%);
}

.tf-faq-accordion .accordion-item:last-child {
    margin-bottom: 0;
}

.tf-faq-accordion .accordion-header {
    margin: 0;
}

.tf-faq-accordion .accordion-button {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    background: transparent;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    box-shadow: none;
    border: 0;
}

.tf-faq-accordion .accordion-button:not(.collapsed) {
    color: #fff;
    background: rgba(255, 255, 255, .02);
    box-shadow: none;
}

.tf-faq-accordion .accordion-button::after {
    filter: brightness(0) invert(1);
    opacity: .85;
}

.tf-faq-number {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(77, 107, 255, .18);
    border: 1px solid rgba(77, 107, 255, .28);
    color: #dce7ff;
    font-size: 13px;
    font-weight: 800;
}

.tf-faq-accordion .accordion-body {
    padding: 0 22px 22px 78px;
    color: #aeb8c8;
    font-size: 15px;
    line-height: 1.9;
}

.tf-faq-accordion .accordion-body p,
.tf-faq-accordion .accordion-body li {
    color: #aeb8c8;
}

.tf-faq-form {
    display: grid;
    gap: 14px;
}

.tf-faq-form__group input,
.tf-faq-form__group textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .08);
    background: #111722;
    color: #fff;
    border-radius: 18px;
    padding: 15px 18px;
    font-size: 15px;
    transition: .2s ease;
}

.tf-faq-form__group input::placeholder,
.tf-faq-form__group textarea::placeholder {
    color: #7f8ba1;
}

.tf-faq-form__group input:focus,
.tf-faq-form__group textarea:focus {
    outline: none;
    border-color: rgba(77, 107, 255, .40);
    box-shadow: 0 0 0 4px rgba(77, 107, 255, .10);
}

.tf-faq-form__group textarea {
    min-height: 140px;
    resize: vertical;
}

@media (max-width: 991.98px) {
    .tf-faq-hero__inner {
        padding: 32px 24px;
    }

    .tf-faq-hero__content h1 {
        font-size: 36px;
    }

    .tf-faq-box,
    .tf-faq-contact {
        padding: 24px;
    }

    .tf-section-heading h2,
    .tf-section-heading--sm h2 {
        font-size: 28px;
    }
}

@media (max-width: 767.98px) {
    .tf-faq-page {
        padding-bottom: 70px;
    }

    .tf-faq-hero {
        padding-top: 18px;
    }

    .tf-faq-hero__inner {
        padding: 24px 18px;
        border-radius: 22px;
    }

    .tf-faq-hero__content h1 {
        font-size: 28px;
    }

    .tf-faq-accordion .accordion-button {
        padding: 18px 16px;
        font-size: 15px;
    }

    .tf-faq-number {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

    .tf-faq-accordion .accordion-body {
        padding: 0 16px 18px 16px;
    }
}

/* ==========================================
   Theme Four - Contact Page
========================================== */
.tf-contact-page {
    position: relative;
    padding: 0 0 90px;
    background:
        radial-gradient(circle at top left, rgba(77, 107, 255, .10), transparent 28%),
        radial-gradient(circle at bottom right, rgba(34, 197, 94, .05), transparent 24%);
}

.tf-contact-hero {
    padding: 26px 0 24px;
}

.tf-contact-hero__inner {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 44px;
    background:
        linear-gradient(135deg, rgba(9, 14, 28, .96) 0%, rgba(22, 40, 109, .94) 55%, rgba(49, 88, 255, .88) 100%),
        url("../images/breadcrumb_bg.jpg");
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .30);
}

.tf-contact-hero__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .14), transparent 22%),
        radial-gradient(circle at 15% 80%, rgba(255, 255, 255, .06), transparent 24%);
}

.tf-contact-hero__content,
.tf-contact-hero__support {
    position: relative;
    z-index: 2;
}

.tf-contact-eyebrow,
.tf-contact-label {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .10);
    color: #c8d5ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tf-contact-hero__content h1 {
    margin: 18px 0 14px;
    color: #fff;
    font-size: 46px;
    line-height: 1.08;
    font-weight: 900;
}

.tf-contact-hero__content p {
    max-width: 620px;
    margin: 0 0 22px;
    color: rgba(255, 255, 255, .82);
    font-size: 16px;
    line-height: 1.8;
}

.tf-contact-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tf-contact-breadcrumb li {
    color: #d7e2ff;
    font-size: 14px;
    font-weight: 600;
}

.tf-contact-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 10px;
    color: rgba(255, 255, 255, .45);
}

.tf-contact-breadcrumb a {
    color: #fff;
}

.tf-contact-hero__support {
    padding: 26px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(18, 24, 38, .88) 0%, rgba(13, 18, 29, .96) 100%);
    display: flex;
    align-items: center;
    gap: 18px;
}

.tf-contact-hero__support-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(77, 107, 255, .18);
    border: 1px solid rgba(77, 107, 255, .28);
    color: #dce7ff;
    font-size: 24px;
}

.tf-contact-hero__support-text h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
}

.tf-contact-hero__support-text p {
    margin: 0;
    color: #9fb0cf;
    font-size: 14px;
    line-height: 1.8;
}

.tf-contact-hero__support-text p span {
    color: #fff;
    font-weight: 700;
}

.tf-contact-info {
    padding: 18px 0 16px;
}

.tf-contact-info-card,
.tf-contact-form-wrap,
.tf-contact-support,
.tf-contact-map {
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

.tf-contact-info-card {
    height: 100%;
    border-radius: 24px;
    padding: 26px 22px;
    text-align: center;
    background: linear-gradient(180deg, #151a25 0%, #10141d 100%);
    transition: .25s ease;
}

.tf-contact-info-card:hover,
.tf-contact-support:hover {
    transform: translateY(-4px);
    border-color: rgba(77, 107, 255, .28);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .34);
}

.tf-contact-info-card__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(77, 107, 255, .16);
    border: 1px solid rgba(77, 107, 255, .22);
    color: #dce7ff;
    font-size: 24px;
}

.tf-contact-info-card h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
}

.tf-contact-info-card__text,
.tf-contact-info-card__text a {
    color: #9fb0c8;
    font-size: 15px;
    line-height: 1.8;
    word-break: break-word;
}

.tf-contact-main {
    padding: 18px 0 18px;
}

.tf-contact-form-wrap,
.tf-contact-support {
    height: 100%;
    border-radius: 28px;
    background: linear-gradient(180deg, #141925 0%, #0f131b 100%);
    padding: 30px;
}

.tf-contact-heading {
    margin-bottom: 22px;
}

.tf-contact-heading h2 {
    margin: 14px 0 0;
    color: #fff;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 900;
}

.tf-contact-form__group label {
    display: block;
    margin-bottom: 8px;
    color: #d4dded;
    font-size: 14px;
    font-weight: 700;
}

.tf-contact-form__group input,
.tf-contact-form__group textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .08);
    background: #111722;
    color: #fff;
    border-radius: 18px;
    padding: 15px 18px;
    font-size: 15px;
    transition: .2s ease;
}

.tf-contact-form__group input::placeholder,
.tf-contact-form__group textarea::placeholder {
    color: #7f8ba1;
}

.tf-contact-form__group input:focus,
.tf-contact-form__group textarea:focus {
    outline: none;
    border-color: rgba(77, 107, 255, .40);
    box-shadow: 0 0 0 4px rgba(77, 107, 255, .10);
}

.tf-contact-form__group textarea {
    min-height: 150px;
    resize: vertical;
}

.tf-contact-support__top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.tf-contact-support__icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 197, 94, .14);
    border: 1px solid rgba(34, 197, 94, .24);
    color: #b9ffd2;
    font-size: 22px;
}

.tf-contact-support__top h3 {
    margin: 10px 0 0;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
}

.tf-contact-support__text {
    margin: 0 0 22px;
    color: #9fb0c8;
    font-size: 15px;
    line-height: 1.9;
}

.tf-contact-support__text span {
    color: #fff;
    font-weight: 700;
}

.tf-contact-support__image {
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: #111722;
    padding: 10px;
}

.tf-contact-support__image img {
    display: block;
    width: 100%;
    border-radius: 16px;
}

.tf-contact-map-section {
    padding-top: 10px;
}

.tf-contact-map {
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(180deg, #141925 0%, #0f131b 100%);
    padding: 10px;
}

.tf-contact-map iframe {
    display: block;
    width: 100% !important;
    min-height: 420px;
    border: 0;
    border-radius: 20px;
    filter: grayscale(.1) contrast(1.02);
}

@media (max-width: 991.98px) {
    .tf-contact-hero__inner {
        padding: 32px 24px;
    }

    .tf-contact-hero__content h1 {
        font-size: 36px;
    }

    .tf-contact-form-wrap,
    .tf-contact-support {
        padding: 24px;
    }

    .tf-contact-heading h2 {
        font-size: 28px;
    }
}

@media (max-width: 767.98px) {
    .tf-contact-page {
        padding-bottom: 70px;
    }

    .tf-contact-hero {
        padding-top: 18px;
    }

    .tf-contact-hero__inner {
        padding: 24px 18px;
        border-radius: 22px;
    }

    .tf-contact-hero__content h1 {
        font-size: 28px;
    }

    .tf-contact-hero__support {
        padding: 20px;
        border-radius: 20px;
    }

    .tf-contact-form-wrap,
    .tf-contact-support {
        padding: 20px;
        border-radius: 22px;
    }

    .tf-contact-heading h2 {
        font-size: 24px;
    }

    .tf-contact-map iframe {
        min-height: 320px;
    }
}



/* =========================================================
   HOME PAGE EXTRA BLOCKS - THEME FOUR
   Ana sayfaya eklenen ekstra alanlar
========================================================= */


/* =========================================================
   1) HERO ALANI
   Üst slider / hero bölümünün dış boşluğu
========================================================= */

.tf-section--hero {
    padding-top: 32px;
    /* Hero alanını üstten aşağı indirir */
}


/* =========================================================
   2) ORTAK BLOK KUTUSU
   Gradient, partner, template gibi büyük section kutularının
   ortak kart yapısı
========================================================= */

.tf-home-block {
    padding: 32px;
    /* İçerideki genel iç boşluk */
    border-radius: 24px;
    /* Köşeleri yumuşatır */
    border: 1px solid var(--tf-line);
    /* İnce dış çerçeve */
    background: linear-gradient(180deg, rgba(21, 25, 35, .95) 0%, rgba(14, 18, 26, .98) 100%);
    /* Koyu arka plan */
    box-shadow: var(--tf-shadow);
    /* Hafif kutu gölgesi */
}

.tf-home-block--soft {
    background: linear-gradient(180deg, rgba(17, 20, 29, .96) 0%, rgba(12, 15, 22, .99) 100%);
    /* Daha sade koyu kutu arka planı */
}

.tf-home-block--gradient {
    background:
        radial-gradient(circle at top left, rgba(90, 116, 255, .30), transparent 32%),
        /* Sol üst ışık efekti */
        radial-gradient(circle at bottom right, rgba(61, 208, 255, .14), transparent 26%),
        /* Sağ alt ışık efekti */
        linear-gradient(135deg, #5f42ff 0%, #2645d8 55%, #17308f 100%);
    /* Ana mor-mavi gradient */
}

.tf-home-block--partners {
    padding-bottom: 42px;
    /* Partner alanında alttan ekstra nefes bırakır */
}


/* =========================================================
   3) SECTION BAŞLIK ALANI
   Başlık + açıklama satırları
========================================================= */

.tf-section-head--center {
    justify-content: center;
    /* Başlığı yatay ortalar */
    text-align: center;
    /* Yazıları ortalar */
    margin-bottom: 24px;
    /* Başlık ile alt içerik arasına boşluk koyar */
}

.tf-section-head--light p,
.tf-section-head--light h2 {
    color: #fff;
    /* Gradient arka plandaki başlıkları beyaz yapar */
}


/* =========================================================
   4) TRENDING CARD
   Trending items kutuları
========================================================= */

.tf-trending-card {
    padding: 16px;
    /* Kart iç boşluğu */
    display: flex;
    /* Dikey hizalama için flex */
    flex-direction: column;
    /* İçeriği yukarıdan aşağı dizer */
    height: 100%;
    /* Tüm kartların eşit yükseklik almasını sağlar */
}

.tf-trending-card__thumb {
    display: block;
    border-radius: 16px;
    /* Görsel köşeleri */
    overflow: hidden;
    /* Taşan görseli keser */
    background: #0e1320;
    /* Görsel yüklenmezse koyu zemin */
    border: 1px solid var(--tf-line);
    /* Görsel çerçevesi */
    aspect-ratio: 1.4 / 1;
    /* Sabit kart görsel oranı */
}

.tf-trending-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Görsel alanı taşmadan doldurur */
    display: block;
}

.tf-trending-card__body {
    padding-top: 16px;
    /* Görsel ile metin arasındaki boşluk */
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Alt elemanlar arası boşluk */
    flex: 1 1 auto;
}

.tf-trending-card__title {
    color: #fff;
    /* Kart başlık rengi */
    font-size: 18px;
    /* Başlık boyutu */
    line-height: 1.5;
    /* Satır yüksekliği */
    font-weight: 700;
    /* Kalın başlık */
}

.tf-trending-card__title:hover {
    color: #9fb0ff;
    /* Hover olunca hafif açık mavi */
}

.tf-trending-card__meta {
    margin: 0;
    color: var(--tf-text-2);
    /* Açıklama/meta yazısı rengi */
    font-size: 14px;
}

.tf-trending-card__meta span {
    color: #dce4ff;
    /* Meta içindeki vurgu rengi */
}

.tf-trending-card__foot {
    margin-top: auto;
    /* Alt bilgi kısmını en alta iter */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Sol bilgi - sağ ikon ayrımı */
    gap: 12px;
    color: #cfd8ea;
    /* Alt bilgi yazısı */
    font-size: 14px;
}

.tf-trending-card__foot a {
    width: 40px;
    /* Sağdaki küçük buton genişliği */
    height: 40px;
    /* Sağdaki küçük buton yüksekliği */
    border-radius: 12px;
    /* Buton köşe yumuşaklığı */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #1f2840;
    /* Buton zemin rengi */
    border: 1px solid rgba(255, 255, 255, .10);
    /* İnce buton çizgisi */
}


/* =========================================================
   5) SAĞ TEKLİF KARTI
   Trending alanının sağındaki promo / offer kutusu
========================================================= */

.tf-trending-offer {
    padding: 18px;
    /* Offer kartının iç boşluğu */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* İçeriği yukarı ve aşağı dengeler */
    min-height: 100%;
}

.tf-trending-offer__image {
    border-radius: 18px;
    /* Üst görsel köşeleri */
    overflow: hidden;
    background: #101524;
    /* Yedek zemin */
    margin-bottom: 18px;
    /* Görsel ile metin arası */
}

.tf-trending-offer__image img {
    width: 100%;
    display: block;
}

.tf-trending-offer__content p {
    margin: 0 0 8px;
    color: #9db0ff;
    /* Küçük üst yazı rengi */
    font-size: 14px;
    font-weight: 600;
}

.tf-trending-offer__content h3 {
    margin: 0 0 18px;
    color: #fff;
    font-size: 28px;
    /* Offer başlık boyutu */
    line-height: 1.35;
    font-weight: 800;
}


/* =========================================================
   6) TEMPLATE / FEATURE GRID KUTULARI
   Template yerine script avantajlarını anlattığın kutular
========================================================= */

.tf-template-card {
    padding: 24px;
    /* Kart iç boşluğu */
    text-align: left;
    /* Metin sola hizalı */
}

.tf-template-card__icon {
    width: 72px;
    /* İkon kutu genişliği */
    height: 72px;
    /* İkon kutu yüksekliği */
    border-radius: 18px;
    /* İkon kutusunun köşesi */
    overflow: hidden;
    margin-bottom: 18px;
    /* İkon ile başlık arası */
    background: #101521;
    /* İkon zemin rengi */
    border: 1px solid var(--tf-line);
    /* İkon kutu çerçevesi */
    display: flex;
    align-items: center;
    justify-content: center;
}

.tf-template-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tf-template-card h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 20px;
    /* Kart başlık boyutu */
    font-weight: 700;
}

.tf-template-card p {
    margin: 0 0 16px;
    color: var(--tf-text-2);
    /* Açıklama yazısı */
    line-height: 1.7;
    min-height: 72px;
    /* Kart yüksekliklerini dengeler */
}

.tf-template-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Yazı ile ikon arası */
    color: #8ea2ff;
    /* Link rengi */
    font-weight: 700;
}

.tf-template-card__link:hover {
    color: #c8d2ff;
    /* Hover link rengi */
}


/* =========================================================
   7) MOBILE APP ALANI
   Telefon görseli + store butonlarının olduğu bölüm
========================================================= */

.tf-mobile-app {
    padding: 34px;
    /* Kutunun iç genişliği / iç boşluğu */
    overflow: hidden;
    /* Taşan efektleri keser */
    position: relative;
    /* Arka plan efekti için gerekli */
}

.tf-mobile-app::before {
    content: "";
    position: absolute;
    inset: auto -100px -120px auto;
    /* Sağ alt ışık efektinin konumu */
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(77, 107, 255, .24) 0%, rgba(77, 107, 255, 0) 72%);
    /* Mavi glow efekti */
    pointer-events: none;
}

.tf-mobile-app__image {
    text-align: center;
    /* Telefon görselini ortalar */
}

.tf-mobile-app__image img {
    max-width: 100%;
    /* Taşmayı engeller */
    max-height: 520px;
    /* Çok büyümesini sınırlar */
    object-fit: contain;
    /* Görseli bozmadan sığdırır */
}

.tf-mobile-app__content h2 {
    margin: 14px 0 14px;
    color: #fff;
    font-size: 42px;
    /* Mobile app başlık boyutu */
    line-height: 1.22;
    font-weight: 800;
}

.tf-mobile-app__content h2 span {
    color: #8ea3ff;
    /* Başlık içindeki vurgulu renk */
}

.tf-mobile-app__content p {
    margin: 0;
    color: var(--tf-text-2);
    /* Açıklama yazısı rengi */
    line-height: 1.8;
    max-width: 620px;
    /* Yazının çok geniş yayılmasını önler */
}

.tf-mobile-app__stores {
    margin-top: 24px;
    /* Metin ile store butonları arası */
    display: flex;
    align-items: center;
    gap: 14px;
    /* Butonlar arası boşluk */
    flex-wrap: wrap;
    /* Mobilde alta kırılabilsin */
}

.tf-mobile-app__stores a img {
    height: 46px;
    /* Google Play / App Store buton yüksekliği */
    width: auto;
    display: block;
    border-radius: 10px;
    /* Hafif yuvarlatılmış butonlar */
}


/* =========================================================
   8) PARTNER / CUSTOMER LOGO GRID
   Müşteri logolarının olduğu alan
========================================================= */

.tf-partner-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    /* Masaüstünde 5 kolon */
    gap: 18px;
    /* Logo kutuları arası boşluk */
    margin-top: 18px;
    /* Başlık ile grid arası boşluk */
}

.tf-partner-item {
    min-height: 88px;
    /* Her logo kutusunun minimum yüksekliği */
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .10);
    /* İnce şeffaf çizgi */
    background: rgba(255, 255, 255, .06);
    /* Hafif cam efekti */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* Logo etrafı boşluk */
    transition: .25s ease;
    /* Hover geçişi */
}

.tf-partner-item:hover {
    transform: translateY(-2px);
    /* Hover’da hafif yukarı çıkar */
    background: rgba(255, 255, 255, .10);
    /* Hover zemin parlaklığı */
}

.tf-partner-item img {
    max-width: 100%;
    max-height: 34px;
    /* Logo yüksekliği */
    object-fit: contain;
    filter: grayscale(100%);
    /* Logoyu sade gösterir */
    opacity: .92;
}


/* =========================================================
   9) MAVİ OFFER BANNER
   Partner alanı altındaki kampanya kutusu
========================================================= */

.tf-offer-banner {
    margin-top: 28px;
    /* Logo grid ile arasındaki boşluk */
    padding: 22px 24px;
    /* İç boşluk */
    border-radius: 20px;
    /* Banner köşeleri */
    background: linear-gradient(135deg, #1fb0ea 0%, #28a4e8 100%);
    /* Mavi geçişli arka plan */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    /* Sol metin ile sağ buton arası */
}

.tf-offer-banner h3 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 30px;
    /* Banner başlık boyutu */
    line-height: 1.3;
    font-weight: 800;
}

.tf-offer-banner h3 span {
    color: #fff;
    /* Başlık içinde varsa span rengi */
}

.tf-offer-banner p {
    margin: 0;
    color: rgba(255, 255, 255, .85);
    /* Alt açıklama yazısı */
    font-size: 14px;
}


/* =========================================================
   10) BLOG KARTLARI
   Latest from blog alanı
========================================================= */

.tf-blog-card {
    overflow: hidden;
    /* Görsel taşmalarını keser */
    padding: 0;
    /* Kartın default paddingini sıfırlar */
}

.tf-blog-card__thumb {
    display: block;
    aspect-ratio: 1.35 / 1;
    /* Blog görsel oranı */
    overflow: hidden;
    background: #111723;
    /* Görsel yoksa zemin */
}

.tf-blog-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Blog görseli alanı doldursun */
    display: block;
}

.tf-blog-card__body {
    padding: 22px;
    /* Blog içerik kutusu iç boşluğu */
}

.tf-blog-card__date {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    /* Tarih rozeti iç boşluğu */
    border-radius: 999px;
    /* Tam yuvarlak kapsül */
    background: #1a2334;
    /* Tarih rozeti arka planı */
    color: #9db1ff;
    /* Tarih yazı rengi */
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 14px;
}

.tf-blog-card__title {
    display: block;
    color: #fff;
    font-size: 20px;
    /* Blog başlık boyutu */
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 12px;
}

.tf-blog-card__title:hover {
    color: #9cb0ff;
    /* Hover başlık rengi */
}

.tf-blog-card__desc {
    color: var(--tf-text-2);
    /* Blog açıklama yazısı */
    line-height: 1.75;
    margin-bottom: 18px;
    min-height: 74px;
    /* Kart yüksekliklerini dengeler */
}

.tf-blog-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--tf-line);
    /* Üst ayırıcı çizgi */
    padding-top: 16px;
}

.tf-blog-card__author {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tf-blog-card__author img {
    width: 34px;
    /* Yazar avatar boyutu */
    height: 34px;
    border-radius: 50%;
    /* Yuvarlak avatar */
    object-fit: cover;
    flex: 0 0 auto;
}

.tf-blog-card__author span {
    color: #d3dcf0;
    /* Yazar adı rengi */
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Uzun isim taşarsa ... yap */
}

.tf-blog-card__footer a {
    color: #8ea2ff;
    /* Read more link rengi */
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}


/* =========================================================
   11) RESPONSIVE - TABLET
   1199px ve altı
========================================================= */

@media (max-width: 1199px) {
    .tf-partner-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        /* 5 kolon yerine 4 kolon */
    }
}


/* =========================================================
   12) RESPONSIVE - KÜÇÜK TABLET
   991px ve altı
========================================================= */

@media (max-width: 991px) {
    .tf-home-block {
        padding: 24px;
        /* Büyük section kutularını biraz sıkıştırır */
    }

    .tf-mobile-app__content h2 {
        font-size: 34px;
        /* Mobile app başlığını küçültür */
    }

    .tf-offer-banner {
        flex-direction: column;
        /* Banner içeriğini alt alta dizer */
        align-items: flex-start;
        /* Sola hizalar */
    }

    .tf-partner-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /* Logo grid 3 kolon olur */
    }
}


/* =========================================================
   13) RESPONSIVE - MOBİL
   767px ve altı
========================================================= */

@media (max-width: 767px) {
    .tf-home-block {
        padding: 18px;
        /* Mobilde büyük section kutuları daralır */
        border-radius: 18px;
        /* Köşeler biraz küçülür */
    }

    .tf-mobile-app {
        padding: 22px;
        /* Mobile app kutusunun iç boşluğu mobilde azalır */
    }

    .tf-mobile-app__content h2 {
        font-size: 28px;
        /* Mobile app başlığı mobilde küçülür */
    }

    .tf-offer-banner h3 {
        font-size: 24px;
        /* Mavi banner başlığı mobilde küçülür */
    }

    .tf-partner-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* Logo alanı mobilde 2 kolon */
    }

    .tf-blog-card__desc,
    .tf-template-card p {
        min-height: auto;
        /* Mobilde zorla yükseklik verme, doğal aksın */
    }

    .tf-blog-card__footer {
        flex-direction: column;
        /* Footer elemanlarını alt alta dizer */
        align-items: flex-start;
    }
}


/* ==========================================
   Theme Four - Auth / Login Page
========================================== */
.tf-auth-page {
    position: relative;
    padding: 26px 0 90px;
    background:
        radial-gradient(circle at top left, rgba(77, 107, 255, .10), transparent 28%),
        radial-gradient(circle at bottom right, rgba(34, 197, 94, .05), transparent 24%);
}

.tf-auth-hero__inner {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 46px;
    background:
        linear-gradient(135deg, rgba(9, 14, 28, .96) 0%, rgba(22, 40, 109, .94) 55%, rgba(49, 88, 255, .88) 100%),
        url("../images/breadcrumb_bg.jpg");
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .30);
}

.tf-auth-hero__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .14), transparent 22%),
        radial-gradient(circle at 15% 80%, rgba(255, 255, 255, .06), transparent 24%);
}

.tf-auth-hero__content,
.tf-auth-card {
    position: relative;
    z-index: 2;
}

.tf-auth-eyebrow,
.tf-auth-label {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .10);
    color: #c8d5ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tf-auth-hero__content h1 {
    margin: 18px 0 14px;
    color: #fff;
    font-size: 46px;
    line-height: 1.08;
    font-weight: 900;
}

.tf-auth-hero__content p {
    max-width: 620px;
    margin: 0 0 22px;
    color: rgba(255, 255, 255, .82);
    font-size: 16px;
    line-height: 1.8;
}

.tf-auth-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
}

.tf-auth-breadcrumb li {
    color: #d7e2ff;
    font-size: 14px;
    font-weight: 600;
}

.tf-auth-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 10px;
    color: rgba(255, 255, 255, .45);
}

.tf-auth-breadcrumb a {
    color: #fff;
}

.tf-auth-hero__points {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tf-auth-hero__point {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #eef4ff;
    font-size: 14px;
    font-weight: 700;
}

.tf-auth-hero__point i {
    color: #bcd0ff;
}

.tf-auth-card {
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
    border-radius: 28px;
    background: linear-gradient(180deg, #141925 0%, #0f131b 100%);
    padding: 30px;
}

.tf-auth-card__header {
    margin-bottom: 24px;
}

.tf-auth-card__header h2 {
    margin: 14px 0 10px;
    color: #fff;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 900;
}

.tf-auth-card__header p {
    margin: 0;
    color: #94a3b8;
    font-size: 15px;
    line-height: 1.8;
}

.tf-auth-form {
    display: grid;
    gap: 16px;
}

.tf-auth-form__group label {
    display: block;
    margin-bottom: 8px;
    color: #d4dded;
    font-size: 14px;
    font-weight: 700;
}

.tf-auth-form__group input {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .08);
    background: #111722;
    color: #fff;
    border-radius: 18px;
    padding: 15px 18px;
    font-size: 15px;
    transition: .2s ease;
}

.tf-auth-form__group input::placeholder {
    color: #7f8ba1;
}

.tf-auth-form__group input:focus {
    outline: none;
    border-color: rgba(77, 107, 255, .40);
    box-shadow: 0 0 0 4px rgba(77, 107, 255, .10);
}

.tf-auth-password-wrap {
    position: relative;
}

.tf-auth-password-wrap input {
    padding-right: 56px;
}

.tf-auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    color: #c7d2e5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: .2s ease;
}

.tf-auth-password-toggle:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.tf-auth-form__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.tf-auth-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 24px;
    margin: 0;
}

.tf-auth-check .form-check-input {
    margin-top: 0;
    background-color: #111722;
    border-color: rgba(255, 255, 255, .18);
}

.tf-auth-check .form-check-input:checked {
    background-color: #4d6bff;
    border-color: #4d6bff;
}

.tf-auth-check .form-check-label {
    color: #cfd9ea;
    font-size: 14px;
    font-weight: 600;
}

.tf-auth-link {
    color: #c8d5ff;
    font-size: 14px;
    font-weight: 700;
}

.tf-auth-link:hover {
    color: #fff;
}

.tf-auth-form__group--recaptcha {
    overflow-x: auto;
}

.tf-auth-submit {
    width: 100%;
    justify-content: center;
    min-height: 54px;
    border-radius: 18px;
}

.tf-auth-footer-text {
    margin: 22px 0 0;
    color: #94a3b8;
    font-size: 15px;
    text-align: center;
}

.tf-auth-footer-text a {
    color: #fff;
    font-weight: 700;
}

.tf-auth-social {
    margin-top: 18px;
}

.tf-auth-social__btn {
    width: 100%;
    min-height: 54px;
    padding: 12px 18px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #111722;
    border: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    transition: .2s ease;
}

.tf-auth-social__btn:hover {
    border-color: rgba(77, 107, 255, .28);
    background: #161d2a;
    color: #fff;
}

.tf-auth-social__btn span {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tf-auth-social__btn span img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 991.98px) {
    .tf-auth-hero__inner {
        padding: 32px 24px;
    }

    .tf-auth-hero__content h1 {
        font-size: 36px;
    }

    .tf-auth-card {
        padding: 24px;
    }

    .tf-auth-card__header h2 {
        font-size: 28px;
    }
}

@media (max-width: 767.98px) {
    .tf-auth-page {
        padding: 18px 0 70px;
    }

    .tf-auth-hero__inner {
        padding: 24px 18px;
        border-radius: 22px;
    }

    .tf-auth-hero__content h1 {
        font-size: 28px;
    }

    .tf-auth-card {
        padding: 20px;
        border-radius: 22px;
    }

    .tf-auth-card__header h2 {
        font-size: 24px;
    }

    .tf-auth-form__row {
        align-items: flex-start;
        flex-direction: column;
    }

    .tf-auth-hero__points {
        gap: 10px;
    }

    .tf-auth-hero__point {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ==========================================
   Theme Four - Register Page Fine Tune
========================================== */
.tf-auth-page--register .tf-auth-card {
    max-width: 100%;
}

.tf-auth-page--register .tf-auth-form {
    gap: 15px;
}


/* ==========================================
   Theme Four - Author Sidebar
========================================== */
.tf-author-sidebar {
    display: grid;
    gap: 24px;
}

.tf-author-sidebar__card {
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
    border-radius: 26px;
    background: linear-gradient(180deg, #141925 0%, #0f131b 100%);
    padding: 24px;
    transition: .25s ease;
}

.tf-author-sidebar__card:hover {
    transform: translateY(-4px);
    border-color: rgba(77, 107, 255, .24);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .34);
}

.tf-author-sidebar__head {
    margin-bottom: 18px;
}

.tf-author-sidebar__label {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .10);
    color: #c8d5ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tf-author-sidebar__head h3 {
    margin: 14px 0 0;
    color: #fff;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 900;
}

.tf-author-stats {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tf-author-stats li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
}

.tf-author-stats__icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(77, 107, 255, .16);
    border: 1px solid rgba(77, 107, 255, .22);
    color: #dce7ff;
    font-size: 18px;
}

.tf-author-stats__content {
    min-width: 0;
}

.tf-author-stats__content p {
    margin: 0 0 6px;
    color: #9fb0c8;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.tf-author-stats__content span {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}

.tf-author-stats__content span i {
    color: #ffcb45;
    margin-right: 4px;
}

.tf-author-meta {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.tf-author-meta li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
}

.tf-author-meta li span {
    color: #9fb0c8;
    font-size: 14px;
    font-weight: 600;
}

.tf-author-meta li strong {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-align: right;
}

.tf-author-contact-form {
    display: grid;
    gap: 14px;
}

.tf-author-contact-form__group label {
    display: block;
    margin-bottom: 8px;
    color: #d4dded;
    font-size: 14px;
    font-weight: 700;
}

.tf-author-contact-form__group textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .08);
    background: #111722;
    color: #fff;
    border-radius: 18px;
    padding: 15px 18px;
    font-size: 15px;
    transition: .2s ease;
    min-height: 120px;
    resize: vertical;
}

.tf-author-contact-form__group textarea::placeholder {
    color: #7f8ba1;
}

.tf-author-contact-form__group textarea:focus {
    outline: none;
    border-color: rgba(77, 107, 255, .40);
    box-shadow: 0 0 0 4px rgba(77, 107, 255, .10);
}

.tf-author-contact-form__group--recaptcha {
    overflow-x: auto;
}

.tf-author-contact-form__submit {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    border-radius: 18px;
}

.tf-author-socials {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tf-author-socials li {
    margin: 0;
}

.tf-author-socials a {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    transition: .2s ease;
    padding: 12px;
}

.tf-author-socials a:hover {
    transform: translateY(-2px);
    background: rgba(77, 107, 255, .12);
    border-color: rgba(77, 107, 255, .28);
}

.tf-author-socials img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 767.98px) {
    .tf-author-sidebar {
        gap: 18px;
    }

    .tf-author-sidebar__card {
        padding: 20px;
        border-radius: 22px;
    }

    .tf-author-sidebar__head h3 {
        font-size: 20px;
    }

    .tf-author-meta li {
        align-items: flex-start;
        flex-direction: column;
    }

    .tf-author-meta li strong {
        text-align: left;
    }
}

/* ==========================================
   Theme Four - Author Profile Header
========================================== */
.tf-author-header {
    position: relative;
    padding: 26px 0 24px;
    background:
        radial-gradient(circle at top left, rgba(77, 107, 255, .10), transparent 28%),
        radial-gradient(circle at bottom right, rgba(34, 197, 94, .05), transparent 24%);
}

.tf-author-header__inner {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 34px;
    background:
        linear-gradient(135deg, rgba(9, 14, 28, .96) 0%, rgba(22, 40, 109, .94) 55%, rgba(49, 88, 255, .88) 100%),
        url("../images/profile_header_bg.jpg");
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .30);
}

.tf-author-header__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 84% 18%, rgba(255, 255, 255, .14), transparent 22%),
        radial-gradient(circle at 14% 82%, rgba(255, 255, 255, .06), transparent 24%);
}

.tf-author-header__main,
.tf-author-header__stats,
.tf-author-header__nav-wrap {
    position: relative;
    z-index: 2;
}

.tf-author-header__main {
    display: flex;
    align-items: center;
    gap: 22px;
}

.tf-author-header__avatar {
    width: 124px;
    height: 124px;
    border-radius: 28px;
    overflow: hidden;
    flex: 0 0 auto;
    border: 3px solid rgba(255, 255, 255, .12);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
    background: rgba(255, 255, 255, .06);
}

.tf-author-header__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tf-author-header__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .10);
    color: #c8d5ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tf-author-header__content h1 {
    margin: 16px 0 10px;
    color: #fff;
    font-size: 42px;
    line-height: 1.08;
    font-weight: 900;
}

.tf-author-header__joined {
    margin: 0 0 8px;
    color: #d5def1;
    font-size: 14px;
    font-weight: 600;
}

.tf-author-header__joined span {
    color: #fff;
    font-weight: 800;
}

.tf-author-header__designation {
    margin: 0 0 14px;
    color: #aebcdf;
    font-size: 16px;
    line-height: 1.7;
}

.tf-author-header__rating {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.tf-author-header__stars {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #ffcb45;
    font-size: 15px;
}

.tf-author-header__rating p {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
    line-height: 1.7;
}

.tf-author-header__stats {
    display: grid;
    gap: 14px;
}

.tf-author-header__stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, rgba(18, 24, 38, .88) 0%, rgba(13, 18, 29, .96) 100%);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

.tf-author-header__stat-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(77, 107, 255, .16);
    border: 1px solid rgba(77, 107, 255, .24);
    color: #dce7ff;
    font-size: 22px;
}

.tf-author-header__stat-content h4 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    font-weight: 900;
}

.tf-author-header__stat-content p {
    margin: 0;
    color: #9fb0cf;
    font-size: 14px;
    font-weight: 600;
}

.tf-author-header__nav-wrap {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .10);
}

.tf-author-header__nav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tf-author-header__nav li {
    margin: 0;
}

.tf-author-header__nav a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #eef4ff;
    font-size: 14px;
    font-weight: 700;
    transition: .2s ease;
}

.tf-author-header__nav a:hover,
.tf-author-header__nav a.active {
    background: rgba(77, 107, 255, .16);
    border-color: rgba(77, 107, 255, .28);
    color: #fff;
}

@media (max-width: 991.98px) {
    .tf-author-header__inner {
        padding: 28px 24px;
    }

    .tf-author-header__content h1 {
        font-size: 34px;
    }

    .tf-author-header__main {
        align-items: flex-start;
    }
}

@media (max-width: 767.98px) {
    .tf-author-header {
        padding-top: 18px;
    }

    .tf-author-header__inner {
        padding: 22px 18px;
        border-radius: 22px;
    }

    .tf-author-header__main {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .tf-author-header__avatar {
        width: 96px;
        height: 96px;
        border-radius: 22px;
    }

    .tf-author-header__content h1 {
        font-size: 28px;
    }

    .tf-author-header__rating {
        gap: 10px;
    }

    .tf-author-header__nav {
        flex-direction: column;
        align-items: stretch;
    }

    .tf-author-header__nav a {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ==========================================
   Theme Four - Author Profile Content
========================================== */
.tf-author-page {
    position: relative;
}

.tf-author-content {
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
    border-radius: 26px;
    background: linear-gradient(180deg, #141925 0%, #0f131b 100%);
    padding: 28px;
    height: 100%;
}

.tf-author-content__section h2 {
    margin: 0 0 18px;
    color: #fff;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 900;
}

.tf-author-content__body,
.tf-author-content__body p,
.tf-author-content__body li,
.tf-author-content__body span,
.tf-author-content__body div {
    color: #aeb8c8;
    font-size: 15px;
    line-height: 1.95;
}

.tf-author-content__body p {
    margin-bottom: 14px;
}

.tf-author-content__body ul {
    margin: 16px 0 0;
    padding-left: 18px;
}

.tf-author-content__body li {
    margin-bottom: 10px;
}

.tf-author-content__body a {
    color: #d7e2ff;
}

.tf-author-content__body strong,
.tf-author-content__body b {
    color: #fff;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .tf-author-content {
        padding: 20px;
        border-radius: 22px;
    }

    .tf-author-content__section h2 {
        font-size: 22px;
    }
}



/* =========================================================
   PRODUCT CREATE PAGE
========================================================= */
.tf-product-create-page {
    padding-bottom: 80px;
}

.tf-product-create-wrap {
    padding-top: 0;
}

.tf-product-create-hero {
    border-radius: 28px;
    overflow: hidden;
    padding: 48px;
    margin-bottom: 30px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .18);
}

.tf-product-create-hero-card {
    padding: 30px;
    text-align: center;
    min-height: 100%;
}

.tf-product-create-hero-card__icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .08);
    padding: 14px;
}

.tf-product-create-hero-card h4 {
    margin-bottom: 10px;
    color: #fff;
}

.tf-product-create-hero-card p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, .78);
}

/* =========================================================
   FORM PANELS
========================================================= */
.tf-product-create-form .tf-panel,
.tf-product-create-form .tf-seller-about__box {
    padding: 32px;
    border-radius: 24px;
}

.tf-product-create-form .tf-seller-heading h2 {
    margin-bottom: 0;
}

/* =========================================================
   FIELD STYLES
========================================================= */
.tf-product-create-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tf-product-create-label {
    font-size: 14px;
    font-weight: 600;
    color: #dfe7ff;
    margin-bottom: 0;
}

.tf-product-input,
.tf-product-textarea,
.tf-product-select,
.tf-product-create-form .select2-container--default .select2-selection--single {
    width: 100%;
    min-height: 56px;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.tf-product-input,
.tf-product-textarea,
.tf-product-select {
    padding: 14px 18px;
}

.tf-product-textarea {
    min-height: 140px;
}

.tf-product-input::placeholder,
.tf-product-textarea::placeholder {
    color: rgba(255, 255, 255, .45);
}

.tf-product-create-form .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    padding: 0 14px;
}

.tf-product-create-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff !important;
    line-height: 56px !important;
}

.tf-product-create-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 56px !important;
}

/* =========================================================
   UPLOAD BOX
========================================================= */
.tf-product-upload-card {
    height: 100%;
}

.tf-product-upload-box {
    min-height: 230px;
    border-radius: 22px;
    border: 1px dashed rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .03);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 28px;
    transition: .25s ease;
}

.tf-product-upload-box:hover {
    border-color: rgba(113, 255, 160, .45);
    background: rgba(255, 255, 255, .05);
}

.tf-product-upload-box .img {
    width: 62px;
    margin-bottom: 14px;
    opacity: .9;
}

.tf-product-upload-box label {
    font-size: 15px;
    color: rgba(255, 255, 255, .72);
    cursor: pointer;
    margin: 0;
}

.tf-product-upload-box label span {
    color: #71ffa0;
    font-weight: 700;
}

/* =========================================================
   BUTTON
========================================================= */
.tf-product-create-submit {
    margin-top: 28px;
}

.tf-product-submit-btn {
    min-width: 240px;
    border-radius: 16px;
    padding: 16px 26px;
}

/* =========================================================
   BOOTSTRAP / LEGACY FIXES
========================================================= */
.tf-product-create-form .bootstrap-tagsinput {
    width: 100%;
    min-height: 56px;
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .10);
    color: #fff;
}

.tf-product-create-form .bootstrap-tagsinput input {
    color: #fff;
    background: transparent;
}

.tf-product-create-form .bootstrap-tagsinput .tag {
    display: inline-block;
    margin: 4px 6px 4px 0;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(64, 95, 242, .18);
    color: #cfe0ff;
    font-size: 13px;
}

/* =========================================================
   CKEDITOR / TEXTAREA AREA
========================================================= */
.tf-product-create-form .ck-editor__editable,
.tf-product-create-form .note-editor,
.tf-product-create-form .tox-tinymce {
    border-radius: 18px !important;
    overflow: hidden;
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 991px) {
    .tf-product-create-hero {
        padding: 30px;
    }

    .tf-product-create-form .tf-panel,
    .tf-product-create-form .tf-seller-about__box {
        padding: 22px;
    }
}

@media (max-width: 575px) {
    .tf-product-create-hero {
        padding: 22px;
        border-radius: 22px;
    }

    .tf-product-submit-btn {
        width: 100%;
    }
}


/* =========================================================
   EDIT PRODUCT PAGE
========================================================= */
.tf-product-edit-page .tf-product-lang-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.tf-product-edit-page .tf-product-lang-list li {
    margin: 0;
}

.tf-product-edit-page .tf-product-lang-list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #d7dee7;
    color: #1f2937;
    text-decoration: none;
    font-weight: 600;
    transition: .25s ease;
}

.tf-product-edit-page .tf-product-lang-list a:hover,
.tf-product-edit-page .tf-product-lang-list a.active {
    background: #e8efff;
    border-color: #9eb5ff;
    color: #2947a9;
}

.tf-product-edit-alert {
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 16px;
    background: #fff4e5;
    border: 1px solid #ffd8a8;
    color: #8a5a00;
}

.tf-product-current-preview {
    padding: 12px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #dde5ee;
    text-align: center;
}

.tf-product-current-preview img {
    max-height: 120px;
    width: auto;
    max-width: 100%;
    border-radius: 12px;
    object-fit: cover;
}


/* =========================================================
   THEME FOUR PRODUCT BADGE STATES
   index4.blade.php ile uyumlu gerçek classlar
========================================================= */

.tf-product-card {
    position: relative;
    overflow: visible;
}

.tf-product-card__top-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 30;
    pointer-events: none;
}

.tf-product-card__top-badge-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 0 12px rgba(255, 255, 255, .10);
    animation: tfBadgePulse 1.6s ease-in-out infinite;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@keyframes tfBadgePulse {
    0% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 255, 255, .12);
    }

    50% {
        opacity: .78;
        transform: scale(1.04);
        box-shadow: 0 0 18px rgba(255, 255, 255, .22);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 255, 255, .12);
    }
}

/* BEST SELLER */
.tf-product-card--bestseller {
    border: 5px solid rgba(255, 59, 59, .55) !important;
    box-shadow:
        0 0 0 1px rgba(255, 59, 59, .18),
        0 0 18px rgba(255, 59, 59, .22),
        0 0 42px rgba(255, 59, 59, .12);
}

.tf-product-card--bestseller:hover {
    border-color: rgba(255, 59, 59, .85) !important;
    box-shadow:
        0 0 0 1px rgba(255, 59, 59, .30),
        0 0 24px rgba(255, 59, 59, .34),
        0 0 60px rgba(255, 59, 59, .18);
}

.tf-product-card--bestseller .tf-product-card__top-badge-text {
    background: linear-gradient(135deg, #ff2d2d 0%, #ff6b6b 100%);
    color: #fff;
    box-shadow:
        0 0 10px rgba(255, 59, 59, .40),
        0 0 24px rgba(255, 59, 59, .24);
}

/* SHOWCASE */
.tf-product-card--showcase {
    border: 5px solid rgba(0, 170, 255, .55) !important;
    box-shadow:
        0 0 0 1px rgba(0, 170, 255, .18),
        0 0 18px rgba(0, 170, 255, .22),
        0 0 42px rgba(0, 170, 255, .12);
}

.tf-product-card--showcase:hover {
    border-color: rgba(0, 170, 255, .85) !important;
    box-shadow:
        0 0 0 1px rgba(0, 170, 255, .30),
        0 0 24px rgba(0, 170, 255, .34),
        0 0 60px rgba(0, 170, 255, .18);
}

.tf-product-card--showcase .tf-product-card__top-badge-text {
    background: linear-gradient(135deg, #008cff 0%, #34c3ff 100%);
    color: #fff;
    box-shadow:
        0 0 10px rgba(0, 170, 255, .40),
        0 0 24px rgba(0, 170, 255, .24);
}

/* FEATURED */
.tf-product-card--featured {
    border: 5px solid rgba(255, 193, 7, .55) !important;
    box-shadow:
        0 0 0 1px rgba(255, 193, 7, .18),
        0 0 18px rgba(255, 193, 7, .18),
        0 0 42px rgba(255, 193, 7, .10);
}

.tf-product-card--featured:hover {
    border-color: rgba(255, 193, 7, .85) !important;
    box-shadow:
        0 0 0 1px rgba(255, 193, 7, .30),
        0 0 24px rgba(255, 193, 7, .30),
        0 0 60px rgba(255, 193, 7, .16);
}

.tf-product-card--featured .tf-product-card__top-badge-text {
    background: linear-gradient(135deg, #f5b301 0%, #ffd95c 100%);
    color: #161616;
    box-shadow:
        0 0 10px rgba(255, 193, 7, .35),
        0 0 24px rgba(255, 193, 7, .20);
}

/* NEW */
.tf-product-card--new {
    border: 5px solid rgba(155, 89, 255, .55) !important;
    box-shadow:
        0 0 0 1px rgba(155, 89, 255, .18),
        0 0 18px rgba(155, 89, 255, .22),
        0 0 42px rgba(155, 89, 255, .12);
}

.tf-product-card--new:hover {
    border-color: rgba(155, 89, 255, .85) !important;
    box-shadow:
        0 0 0 1px rgba(155, 89, 255, .30),
        0 0 24px rgba(155, 89, 255, .34),
        0 0 60px rgba(155, 89, 255, .18);
}

.tf-product-card--new .tf-product-card__top-badge-text {
    background: linear-gradient(135deg, #8b5cf6 0%, #c084fc 100%);
    color: #fff;
    box-shadow:
        0 0 10px rgba(155, 89, 255, .40),
        0 0 24px rgba(155, 89, 255, .24);
}

/* TRENDING */
.tf-product-card--trending {
    border: 5px solid rgba(255, 136, 0, .55) !important;
    box-shadow:
        0 0 0 1px rgba(255, 136, 0, .18),
        0 0 18px rgba(255, 136, 0, .22),
        0 0 42px rgba(255, 136, 0, .12);
}

.tf-product-card--trending:hover {
    border-color: rgba(255, 136, 0, .85) !important;
    box-shadow:
        0 0 0 1px rgba(255, 136, 0, .30),
        0 0 24px rgba(255, 136, 0, .34),
        0 0 60px rgba(255, 136, 0, .18);
}

.tf-product-card--trending .tf-product-card__top-badge-text {
    background: linear-gradient(135deg, #ff7a00 0%, #ffb347 100%);
    color: #fff;
    box-shadow:
        0 0 10px rgba(255, 136, 0, .40),
        0 0 24px rgba(255, 136, 0, .24);
}

/* HOT DEAL */
.tf-product-card--hotdeal {
    border: 5px solid rgba(34, 197, 94, .55) !important;
    box-shadow:
        0 0 0 1px rgba(34, 197, 94, .18),
        0 0 18px rgba(34, 197, 94, .22),
        0 0 42px rgba(34, 197, 94, .12);
}

.tf-product-card--hotdeal:hover {
    border-color: rgba(34, 197, 94, .85) !important;
    box-shadow:
        0 0 0 1px rgba(34, 197, 94, .30),
        0 0 24px rgba(34, 197, 94, .34),
        0 0 60px rgba(34, 197, 94, .18);
}

.tf-product-card--hotdeal .tf-product-card__top-badge-text {
    background: linear-gradient(135deg, #16a34a 0%, #4ade80 100%);
    color: #fff;
    box-shadow:
        0 0 10px rgba(34, 197, 94, .40),
        0 0 24px rgba(34, 197, 94, .24);
}

.tf-trending-offer__image {
    position: relative;
    min-height: 260px;
    max-height: 320px;
    overflow: hidden;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.85) 0%, rgba(2, 6, 23, 0.96) 100%);
}

.tf-trending-offer__image img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    max-height: 320px;
    object-fit: cover;
    display: block;
}

.tf-section-title-sm {
    margin: 0;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    color: #fff;
}

.tf-section-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: rgba(226, 232, 240, 0.78);
}

/* =========================================
   THEME 4 PARTNER SECTION - MATCHED STYLE
========================================= */

.tf-partner-box {
    position: relative;
    padding: 24px;
    border-radius: 18px;
    border: 1px solid rgba(80, 120, 255, 0.18);
    background:
        linear-gradient(180deg, rgba(7, 12, 24, 0.96) 0%, rgba(5, 10, 20, 0.98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 16px 40px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.tf-partner-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(50, 120, 255, 0.12), transparent 24%),
        radial-gradient(circle at bottom left, rgba(30, 166, 232, 0.08), transparent 26%);
    pointer-events: none;
}

.tf-partner-box__header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.tf-partner-box__headings {
    min-width: 0;
}

.tf-partner-box__eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7dd3fc;
}

.tf-partner-box__title {
    margin: 0;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    color: #fff;
}

.tf-partner-box__header-btn {
    flex-shrink: 0;
    min-width: 160px;
    justify-content: center;
}

.tf-partner-logo-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.tf-partner-logo-card {
    min-height: 80px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid rgba(87, 121, 255, 0.18);
    background:
        linear-gradient(180deg, rgba(17, 26, 48, 0.96) 0%, rgba(9, 16, 30, 0.98) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .22s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.tf-partner-logo-card:hover {
    transform: translateY(-2px);
    border-color: rgba(58, 139, 255, 0.42);
    box-shadow:
        0 10px 24px rgba(4, 10, 20, 0.34),
        0 0 0 1px rgba(58, 139, 255, 0.08) inset;
}

.tf-partner-logo-card img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: .92;
    filter: brightness(1.05) grayscale(100%);
    transition: all .22s ease;
}

.tf-partner-logo-card:hover img {
    opacity: 1;
    filter: brightness(1.08) grayscale(0%);
}

.tf-partner-offer-row {
    position: relative;
    z-index: 1;
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(45, 146, 255, 0.22);
    background:
        linear-gradient(90deg, rgba(8, 17, 33, 0.94) 0%, rgba(18, 98, 211, 0.92) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.tf-partner-offer-row__content {
    min-width: 0;
}

.tf-partner-offer-row__badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #dbeafe;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.tf-partner-offer-row__title {
    margin: 0 0 4px;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    color: #fff;
}

.tf-partner-offer-row__desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
}

.tf-partner-offer-row__btn {
    flex-shrink: 0;
    min-width: 170px;
    justify-content: center;
}

@media (max-width: 1199.98px) {
    .tf-partner-logo-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .tf-partner-box__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .tf-partner-box__header-btn {
        width: 100%;
    }

    .tf-partner-logo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tf-partner-offer-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .tf-partner-offer-row__btn {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .tf-partner-box {
        padding: 18px;
        border-radius: 16px;
    }

    .tf-partner-box__title {
        font-size: 20px;
    }

    .tf-partner-logo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .tf-partner-logo-card {
        min-height: 58px;
        padding: 12px;
    }

    .tf-partner-logo-card img {
        max-height: 22px;
    }

    .tf-partner-offer-row__title {
        font-size: 18px;
    }
}

/* =========================================================
   MARKETPLACE BADGE STATES - PRODUCT LIST
========================================================= */

.mp-product-shell {
    position: relative;
    overflow: visible;
    border-radius: 14px;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.mp-product-shell:hover {
    transform: translateY(-3px);
}

.mp-product-shell__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 20;
    pointer-events: none;
}

.mp-product-shell__badge span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .16);
    animation: mpBadgePulse 1.6s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(255, 255, 255, .10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@keyframes mpBadgePulse {
    0% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .78;
        transform: scale(1.04)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

.mp-badge--bestseller {
    border: 1px solid rgba(255, 59, 59, .55) !important;
    box-shadow: 0 0 0 1px rgba(255, 59, 59, .18), 0 0 18px rgba(255, 59, 59, .22), 0 0 42px rgba(255, 59, 59, .12) !important;
}

.mp-badge--bestseller .mp-product-shell__badge span {
    background: linear-gradient(135deg, #ff2d2d 0%, #ff6b6b 100%);
}

.mp-badge--showcase {
    border: 1px solid rgba(0, 170, 255, .55) !important;
    box-shadow: 0 0 0 1px rgba(0, 170, 255, .18), 0 0 18px rgba(0, 170, 255, .22), 0 0 42px rgba(0, 170, 255, .12) !important;
}

.mp-badge--showcase .mp-product-shell__badge span {
    background: linear-gradient(135deg, #008cff 0%, #34c3ff 100%);
}

.mp-badge--featured {
    border: 1px solid rgba(255, 193, 7, .55) !important;
    box-shadow: 0 0 0 1px rgba(255, 193, 7, .18), 0 0 18px rgba(255, 193, 7, .18), 0 0 42px rgba(255, 193, 7, .10) !important;
}

.mp-badge--featured .mp-product-shell__badge span {
    background: linear-gradient(135deg, #f5b301 0%, #ffd95c 100%);
    color: #161616;
}

.mp-badge--new {
    border: 1px solid rgba(155, 89, 255, .55) !important;
    box-shadow: 0 0 0 1px rgba(155, 89, 255, .18), 0 0 18px rgba(155, 89, 255, .22), 0 0 42px rgba(155, 89, 255, .12) !important;
}

.mp-badge--new .mp-product-shell__badge span {
    background: linear-gradient(135deg, #8b5cf6 0%, #c084fc 100%);
}

.mp-badge--trending {
    border: 1px solid rgba(255, 136, 0, .55) !important;
    box-shadow: 0 0 0 1px rgba(255, 136, 0, .18), 0 0 18px rgba(255, 136, 0, .22), 0 0 42px rgba(255, 136, 0, .12) !important;
}

.mp-badge--trending .mp-product-shell__badge span {
    background: linear-gradient(135deg, #ff7a00 0%, #ffb347 100%);
}

.mp-badge--hotdeal {
    border: 1px solid rgba(34, 197, 94, .55) !important;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, .18), 0 0 18px rgba(34, 197, 94, .22), 0 0 42px rgba(34, 197, 94, .12) !important;
}

.mp-badge--hotdeal .mp-product-shell__badge span {
    background: linear-gradient(135deg, #16a34a 0%, #4ade80 100%);
}

/* =========================================================
   PRODUCT DETAIL IMAGE BADGE STATES
========================================================= */

.mpd-hero-media {
    position: relative;
    overflow: visible;
    border-radius: 18px;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.mpd-hero-media img {
    border-radius: 18px;
    display: block;
}

.mpd-hero-media__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 30;
    pointer-events: none;
}

.mpd-hero-media__badge span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .16);
    animation: mpBadgePulse 1.6s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(255, 255, 255, .10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mp-detail-badge--bestseller {
    border: 1px solid rgba(255, 59, 59, .55) !important;
    box-shadow: 0 0 0 1px rgba(255, 59, 59, .18), 0 0 24px rgba(255, 59, 59, .22), 0 0 60px rgba(255, 59, 59, .14) !important;
}

.mp-detail-badge--bestseller .mpd-hero-media__badge span {
    background: linear-gradient(135deg, #ff2d2d 0%, #ff6b6b 100%);
}

.mp-detail-badge--showcase {
    border: 1px solid rgba(0, 170, 255, .55) !important;
    box-shadow: 0 0 0 1px rgba(0, 170, 255, .18), 0 0 24px rgba(0, 170, 255, .22), 0 0 60px rgba(0, 170, 255, .14) !important;
}

.mp-detail-badge--showcase .mpd-hero-media__badge span {
    background: linear-gradient(135deg, #008cff 0%, #34c3ff 100%);
}

.mp-detail-badge--featured {
    border: 1px solid rgba(255, 193, 7, .55) !important;
    box-shadow: 0 0 0 1px rgba(255, 193, 7, .18), 0 0 24px rgba(255, 193, 7, .20), 0 0 60px rgba(255, 193, 7, .12) !important;
}

.mp-detail-badge--featured .mpd-hero-media__badge span {
    background: linear-gradient(135deg, #f5b301 0%, #ffd95c 100%);
    color: #161616;
}

.mp-detail-badge--new {
    border: 1px solid rgba(155, 89, 255, .55) !important;
    box-shadow: 0 0 0 1px rgba(155, 89, 255, .18), 0 0 24px rgba(155, 89, 255, .22), 0 0 60px rgba(155, 89, 255, .14) !important;
}

.mp-detail-badge--new .mpd-hero-media__badge span {
    background: linear-gradient(135deg, #8b5cf6 0%, #c084fc 100%);
}

.mp-detail-badge--trending {
    border: 1px solid rgba(255, 136, 0, .55) !important;
    box-shadow: 0 0 0 1px rgba(255, 136, 0, .18), 0 0 24px rgba(255, 136, 0, .22), 0 0 60px rgba(255, 136, 0, .14) !important;
}

.mp-detail-badge--trending .mpd-hero-media__badge span {
    background: linear-gradient(135deg, #ff7a00 0%, #ffb347 100%);
}

.mp-detail-badge--hotdeal {
    border: 1px solid rgba(34, 197, 94, .55) !important;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, .18), 0 0 24px rgba(34, 197, 94, .22), 0 0 60px rgba(34, 197, 94, .14) !important;
}

.mp-detail-badge--hotdeal .mpd-hero-media__badge span {
    background: linear-gradient(135deg, #16a34a 0%, #4ade80 100%);
}


/* ==========================================================================
   USER CONVERSATION PAGE
   ========================================================================== */

.mp-conversation-page {
    margin-top: 8px;
}

.mp-conversation-shell {
    background:
        radial-gradient(circle at top left, rgba(123, 92, 255, 0.14), transparent 28%),
        radial-gradient(circle at top right, rgba(255, 0, 153, 0.10), transparent 26%),
        linear-gradient(180deg, rgba(10, 17, 34, 0.96) 0%, rgba(7, 13, 26, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}

.mp-conversation-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mp-conversation-topbar__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.48);
    margin-bottom: 8px;
}

.mp-conversation-topbar__title {
    margin: 0;
    font-size: 34px;
    line-height: 1.1;
    font-weight: 800;
    color: #fff;
}

.mp-conversation-topbar__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.mp-conversation-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid transparent;
    white-space: nowrap;
}

.mp-conversation-badge--danger {
    background: rgba(255, 86, 86, 0.10);
    color: #ff8f8f;
    border-color: rgba(255, 86, 86, 0.20);
}

.mp-conversation-badge--warning {
    background: rgba(255, 193, 7, 0.10);
    color: #ffd55a;
    border-color: rgba(255, 193, 7, 0.22);
}

.mp-conversation-badge--success {
    background: rgba(28, 201, 126, 0.10);
    color: #63f0ab;
    border-color: rgba(28, 201, 126, 0.20);
}

.mp-conversation-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 16px;
    border: 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.25s ease;
    cursor: pointer;
}

.mp-conversation-btn:hover {
    transform: translateY(-1px);
}

.mp-conversation-btn--primary {
    background: linear-gradient(135deg, #6d6afc 0%, #4d7cff 100%);
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(77, 124, 255, 0.28);
}

.mp-conversation-btn--warning {
    background: linear-gradient(135deg, #ffcc33 0%, #ff9f1a 100%);
    color: #181818 !important;
    box-shadow: 0 10px 24px rgba(255, 166, 0, 0.22);
}

.mp-conversation-btn--send {
    background: linear-gradient(135deg, #00d26a 0%, #00f08a 100%);
    color: #06130d !important;
    box-shadow: 0 10px 24px rgba(0, 210, 106, 0.24);
}

.mp-conversation-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 20px 28px 0;
}

.mp-conversation-summary__item {
    min-height: 92px;
    padding: 18px 18px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
}

.mp-conversation-summary__item--product {
    background: linear-gradient(180deg, rgba(0, 255, 123, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-color: rgba(0, 255, 123, 0.12);
}

.mp-conversation-summary__label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.mp-conversation-summary__value {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 700;
    color: #fff;
    word-break: break-word;
}

.mp-conversation-alert {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 18px 28px 0;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid transparent;
}

.mp-conversation-alert__icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.mp-conversation-alert__title {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 4px;
}

.mp-conversation-alert__text {
    font-size: 14px;
    line-height: 1.65;
}

.mp-conversation-alert--warning {
    background: rgba(255, 193, 7, 0.08);
    border-color: rgba(255, 193, 7, 0.18);
    color: #ffe08a;
}

.mp-conversation-alert--warning .mp-conversation-alert__icon {
    background: rgba(255, 193, 7, 0.14);
    color: #ffd24d;
}

.mp-conversation-alert--danger {
    background: rgba(255, 86, 86, 0.08);
    border-color: rgba(255, 86, 86, 0.18);
    color: #ffb0b0;
}

.mp-conversation-alert--danger .mp-conversation-alert__icon {
    background: rgba(255, 86, 86, 0.12);
    color: #ff8f8f;
}

.mp-conversation-card {
    margin: 18px 28px 28px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(2, 10, 22, 0.58);
    overflow: hidden;
}

.mp-conversation-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.mp-conversation-card__header h3 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
}

.mp-conversation-card__header p {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.mp-conversation-messages {
    max-height: 560px;
    overflow-y: auto;
    padding: 24px 22px 18px;
    background:
        linear-gradient(180deg, rgba(3, 10, 20, 0.82) 0%, rgba(5, 15, 30, 0.96) 100%);
}

.mp-conversation-messages::-webkit-scrollbar {
    width: 7px;
}

.mp-conversation-messages::-webkit-scrollbar-track {
    background: transparent;
}

.mp-conversation-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 999px;
}

.mp-message-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 18px;
}

.mp-message-row.is-own {
    align-items: flex-end;
}

.mp-message-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 0 4px;
    flex-wrap: wrap;
}

.mp-message-meta__sender {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.78);
}

.mp-message-meta__sender i {
    opacity: 0.85;
}

.mp-message-meta__time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.42);
}

.mp-message-bubble {
    max-width: min(78%, 760px);
    padding: 14px 16px;
    border-radius: 18px;
    border-top-left-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    line-height: 1.7;
    word-break: break-word;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.mp-message-row.is-own .mp-message-bubble {
    border-top-left-radius: 18px;
    border-top-right-radius: 8px;
    background: linear-gradient(135deg, #00e57a 0%, #00c969 100%);
    border-color: transparent;
    color: #04110b;
    box-shadow: 0 12px 28px rgba(0, 210, 106, 0.18);
}

.mp-message-row.is-admin .mp-message-bubble {
    background: linear-gradient(135deg, rgba(109, 106, 252, 0.20) 0%, rgba(77, 124, 255, 0.14) 100%);
    border-color: rgba(109, 106, 252, 0.22);
    color: #eef1ff;
}

.mp-message-row.is-admin .mp-message-meta__sender {
    color: #aab7ff;
}

.mp-conversation-empty {
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color: rgba(255, 255, 255, 0.42);
}

.mp-conversation-empty__icon {
    width: 72px;
    height: 72px;
    margin-bottom: 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 26px;
}

.mp-conversation-composer {
    padding: 18px 22px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.mp-conversation-composer__box {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.mp-conversation-textarea {
    width: 100%;
    min-height: 120px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(8, 18, 34, 0.82);
    color: #fff;
    resize: vertical;
    outline: none;
    transition: all 0.25s ease;
}

.mp-conversation-textarea::placeholder {
    color: rgba(255, 255, 255, 0.36);
}

.mp-conversation-textarea:focus {
    border-color: rgba(0, 255, 123, 0.35);
    box-shadow: none;
    background: rgba(10, 22, 40, 0.95);
}

.mp-conversation-composer__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.mp-conversation-closed-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px;
    border-radius: 14px;
    background: rgba(255, 86, 86, 0.10);
    border: 1px solid rgba(255, 86, 86, 0.18);
    color: #ffb0b0;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .mp-conversation-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .mp-conversation-topbar__actions {
        justify-content: flex-start;
    }

    .mp-conversation-summary {
        grid-template-columns: 1fr;
    }

    .mp-message-bubble {
        max-width: 92%;
    }
}

@media (max-width: 575.98px) {
    .mp-conversation-topbar {
        padding: 22px 16px 18px;
    }

    .mp-conversation-topbar__title {
        font-size: 28px;
    }

    .mp-conversation-summary {
        padding: 16px 16px 0;
    }

    .mp-conversation-alert {
        margin: 16px 16px 0;
    }

    .mp-conversation-card {
        margin: 16px;
        border-radius: 18px;
    }

    .mp-conversation-card__header,
    .mp-conversation-messages,
    .mp-conversation-composer {
        padding-left: 14px;
        padding-right: 14px;
    }

    .mp-conversation-btn {
        width: 100%;
    }

    .mp-conversation-topbar__actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ==========================================================================
   USER PRODUCT MESSAGES INDEX
   ========================================================================== */

.mp-conversation-table-wrap {
    width: 100%;
    overflow-x: auto;
    background: linear-gradient(180deg, rgba(3, 10, 20, 0.78) 0%, rgba(5, 15, 30, 0.94) 100%);
}

.mp-conversation-table-wrap::-webkit-scrollbar {
    height: 8px;
}

.mp-conversation-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.mp-conversation-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 999px;
}

.mp-conversation-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    color: #fff;
}

.mp-conversation-table thead tr {
    background: rgba(255, 255, 255, 0.03);
}

.mp-conversation-table th {
    padding: 18px 20px;
    font-size: 13px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.72);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.mp-conversation-table td {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
}

.mp-conversation-table tbody tr {
    transition: background 0.25s ease, transform 0.25s ease;
}

.mp-conversation-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.025);
}

.mp-conversation-table__product {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 260px;
}

.mp-conversation-table__product-badge {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 123, 0.10);
    color: #45f7a0;
    border: 1px solid rgba(0, 255, 123, 0.16);
    flex: 0 0 auto;
}

.mp-conversation-table__product-text {
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    word-break: break-word;
}

.mp-conversation-table__user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mp-conversation-table__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6d6afc 0%, #4d7cff 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    flex: 0 0 auto;
    box-shadow: 0 10px 22px rgba(77, 124, 255, 0.18);
}

.mp-conversation-table__user-text {
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.mp-conversation-table__time {
    color: rgba(255, 255, 255, 0.56);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.mp-conversation-badge--sm {
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 12px;
    gap: 6px;
}

.mp-conversation-btn--sm {
    min-height: 38px;
    padding: 9px 14px;
    font-size: 12px;
    border-radius: 10px;
    white-space: nowrap;
}

.mp-conversation-empty--table {
    min-height: 260px;
    padding: 34px 20px;
}

.mp-conversation-pagination {
    padding: 18px 22px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.mp-conversation-pagination .pagination {
    margin-bottom: 0;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.mp-conversation-pagination .page-item .page-link {
    min-width: 42px;
    height: 42px;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.78);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    box-shadow: none !important;
}

.mp-conversation-pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #6d6afc 0%, #4d7cff 100%);
    color: #fff;
    border-color: transparent;
}

.mp-conversation-pagination .page-item.disabled .page-link {
    opacity: 0.45;
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.42);
}

@media (max-width: 767.98px) {

    .mp-conversation-table th,
    .mp-conversation-table td {
        padding: 14px 14px;
    }

    .mp-conversation-table__product {
        min-width: 220px;
    }

    .mp-conversation-table__product-text,
    .mp-conversation-table__user-text {
        font-size: 13px;
    }

    .mp-conversation-pagination {
        padding: 16px;
    }
}



/* PRODUCT MESSAGE MODAL */
.mpv-message-modal-dialog {
    max-width: 640px;
}

.mpv-message-modal {
    background: linear-gradient(180deg, #0f172a 0%, #111c34 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.mpv-message-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .02);
}

.mpv-message-modal__eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .50);
}

.mpv-message-modal__title {
    margin: 0;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.mpv-message-modal__close {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .72);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: .25s ease;
}

.mpv-message-modal__close:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.mpv-message-modal__body {
    padding: 22px 24px 16px;
}

.mpv-message-modal__product {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    margin-bottom: 18px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .03);
}

.mpv-message-modal__product-image {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    overflow: hidden;
    flex: 0 0 72px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .04);
}

.mpv-message-modal__product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mpv-message-modal__product-info h6 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
}

.mpv-message-modal__product-info p {
    margin: 0;
    color: rgba(255, 255, 255, .66);
    font-size: 13px;
    line-height: 1.6;
}

.mpv-message-modal__field .form-label {
    display: block;
    margin-bottom: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.mpv-message-modal__textarea {
    min-height: 170px;
    resize: vertical;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    background: rgba(255, 255, 255, .04) !important;
    color: #fff !important;
    box-shadow: none !important;
    padding: 16px 18px !important;
}

.mpv-message-modal__textarea::placeholder {
    color: rgba(255, 255, 255, .38) !important;
}

.mpv-message-modal__textarea:focus {
    border-color: rgba(64, 95, 242, .85) !important;
    background: rgba(255, 255, 255, .05) !important;
    box-shadow: 0 0 0 4px rgba(64, 95, 242, .16) !important;
}

.mpv-message-modal__note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 14px 15px;
    border-radius: 16px;
    border: 1px solid rgba(64, 95, 242, .20);
    background: rgba(64, 95, 242, .10);
    color: rgba(255, 255, 255, .76);
    font-size: 13px;
    line-height: 1.6;
}

.mpv-message-modal__note i {
    margin-top: 2px;
    color: #7ea2ff;
}

.mpv-message-modal__footer {
    padding: 18px 24px 24px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    justify-content: flex-end;
    gap: 10px;
}

.mpv-message-modal__btn {
    min-width: 140px;
    height: 48px;
    border-radius: 14px !important;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid transparent !important;
}

.mpv-message-modal__btn--ghost {
    background: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .08) !important;
}

.mpv-message-modal__btn--ghost:hover {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
}

.mpv-message-modal__btn--primary {
    background: linear-gradient(135deg, #405ff2 0%, #5b74ff 100%) !important;
    color: #fff !important;
    box-shadow: 0 16px 36px rgba(64, 95, 242, .28);
}

.mpv-message-modal__btn--primary:hover {
    color: #fff !important;
    transform: translateY(-1px);
}

@media (max-width: 575.98px) {

    .mpv-message-modal__header,
    .mpv-message-modal__body,
    .mpv-message-modal__footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .mpv-message-modal__product {
        align-items: flex-start;
    }

    .mpv-message-modal__footer {
        flex-direction: column;
    }

    .mpv-message-modal__btn {
        width: 100%;
    }
}

/* ==========================================================================
   USER PROFILE EDIT PAGE
   ========================================================================== */

.mp-profile-edit-shell {
    margin-top: 10px;
}

.mp-profile-edit-card {
    position: relative;
    background:
        radial-gradient(circle at top left, rgba(123, 92, 255, 0.10), transparent 28%),
        linear-gradient(180deg, rgba(11, 18, 34, 0.96) 0%, rgba(7, 13, 25, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.mp-profile-edit-card--sticky {
    position: sticky;
    top: 24px;
    text-align: center;
}

.mp-profile-edit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mp-profile-edit-head__eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.mp-profile-edit-head h3 {
    margin: 0;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
    color: #fff;
}

.mp-profile-avatar-wrap {
    position: relative;
    width: 168px;
    margin: 0 auto 20px;
}

.mp-profile-avatar {
    width: 168px;
    height: 168px;
    border-radius: 50%;
    padding: 6px;
    background: linear-gradient(135deg, rgba(109, 106, 252, 0.95) 0%, rgba(77, 124, 255, 0.95) 100%);
    box-shadow: 0 18px 40px rgba(77, 124, 255, 0.18);
}

.mp-profile-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(9, 16, 30, 0.96);
    display: block;
}

.mp-profile-avatar__edit {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6d6afc 0%, #4d7cff 100%);
    color: #fff !important;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(77, 124, 255, 0.28);
    border: 2px solid rgba(9, 16, 30, 0.96);
    transition: transform 0.25s ease;
}

.mp-profile-avatar__edit:hover {
    transform: translateY(-2px);
}

.mp-profile-user-meta h4 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    word-break: break-word;
}

.mp-profile-user-meta p {
    margin: 0;
    color: rgba(255, 255, 255, 0.52);
    font-size: 13px;
    line-height: 1.7;
}

.mp-profile-upload-state {
    min-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
}

.mp-profile-upload-box {
    margin-top: 22px;
    padding: 20px 18px;
    border-radius: 20px;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
    text-align: center;
}

.mp-profile-upload-box__icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(109, 106, 252, 0.14);
    border: 1px solid rgba(109, 106, 252, 0.22);
    color: #9ba8ff;
    font-size: 22px;
}

.mp-profile-upload-box__content h5 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}

.mp-profile-upload-box__content p {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.56);
}

.mp-profile-upload-box__button {
    min-width: 170px;
    cursor: pointer;
}

.mp-profile-upload-state {
    flex-direction: column;
    gap: 8px;
}

.mp-profile-upload-state__text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.58);
    word-break: break-word;
    text-align: center;
}

.mp-profile-section {
    margin-bottom: 6px;
}

.mp-profile-section__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}

.mp-profile-section__title i {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(109, 106, 252, 0.12);
    color: #9ba8ff;
    border: 1px solid rgba(109, 106, 252, 0.18);
    flex: 0 0 auto;
}

.mp-profile-divider {
    height: 1px;
    margin: 24px 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.mp-profile-label {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.66);
}

.mp-profile-input,
.mp-profile-textarea {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: #fff !important;
    box-shadow: none !important;
    padding: 14px 16px;
    transition: all 0.25s ease;
}

.mp-profile-input {
    min-height: 52px;
}

.mp-profile-textarea {
    min-height: 140px;
    resize: vertical;
}

.mp-profile-input::placeholder,
.mp-profile-textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.mp-profile-input:focus,
.mp-profile-textarea:focus {
    border-color: rgba(109, 106, 252, 0.35) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
}

.mp-profile-input-group {
    border-radius: 16px;
    overflow: hidden;
}

.mp-profile-input-group__icon {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-right: 0 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.72) !important;
    min-width: 54px;
    justify-content: center;
}

.mp-profile-input-group .mp-profile-input {
    border-left: 0 !important;
    border-radius: 0 16px 16px 0 !important;
}

.mp-profile-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mp-profile-btn {
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 14px;
    border: 0;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.mp-profile-btn:hover {
    transform: translateY(-1px);
}

.mp-profile-btn--light {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.mp-profile-btn--primary {
    background: linear-gradient(135deg, #6d6afc 0%, #4d7cff 100%);
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(77, 124, 255, 0.22);
}

.mp-profile-edit-card .invalid-feedback {
    display: block;
    margin-top: 8px;
}

.mp-profile-edit-card .note-editor.note-frame,
.mp-profile-edit-card .note-editor.note-airframe {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.mp-profile-edit-card .note-toolbar {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mp-profile-edit-card .note-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
    color: #fff;
}

.mp-profile-edit-card .note-editing-area,
.mp-profile-edit-card .note-editable {
    background: rgba(8, 16, 30, 0.70) !important;
    color: #fff !important;
}

@media (max-width: 991.98px) {
    .mp-profile-edit-card--sticky {
        position: relative;
        top: 0;
    }

    .mp-profile-edit-head h3 {
        font-size: 26px;
    }
}

@media (max-width: 575.98px) {
    .mp-profile-edit-card {
        padding: 18px;
        border-radius: 20px;
    }

    .mp-profile-avatar-wrap,
    .mp-profile-avatar {
        width: 140px;
        height: 140px;
    }

    .mp-profile-user-meta h4 {
        font-size: 20px;
    }

    .mp-profile-edit-head h3 {
        font-size: 24px;
    }

    .mp-profile-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .mp-profile-btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .mp-profile-upload-box {
        padding: 18px 14px;
    }

    .mp-profile-upload-box__button {
        width: 100%;
    }
}


/* ==========================================================================
   USER CHANGE PASSWORD PAGE
   ========================================================================== */

.mp-password-shell {
    margin-top: 10px;
}

.mp-password-card {
    position: relative;
    background:
        radial-gradient(circle at top left, rgba(123, 92, 255, 0.10), transparent 28%),
        linear-gradient(180deg, rgba(11, 18, 34, 0.96) 0%, rgba(7, 13, 25, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.mp-password-card__head {
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mp-password-card__eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.mp-password-card__head h3 {
    margin: 0 0 8px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
    color: #fff;
}

.mp-password-card__head p {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
    line-height: 1.7;
}

.mp-password-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.mp-password-field {
    width: 100%;
}

.mp-password-label {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.66);
}

.mp-password-input {
    width: 100%;
    min-height: 54px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: #fff !important;
    box-shadow: none !important;
    padding: 14px 16px;
    transition: all 0.25s ease;
}

.mp-password-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.mp-password-input:focus {
    border-color: rgba(109, 106, 252, 0.35) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
}

.mp-password-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 575.98px) {
    .mp-password-card {
        padding: 18px;
        border-radius: 20px;
    }

    .mp-password-card__head h3 {
        font-size: 24px;
    }

    .mp-password-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .mp-password-actions .mp-profile-btn {
        width: 100%;
    }
}


/* =========================
   SUPPORT TICKET CREATE PAGE
========================= */

.mp-user-panel-section {
    background:
        radial-gradient(circle at top left, rgba(64, 95, 242, 0.14), transparent 32%),
        radial-gradient(circle at top right, rgba(189, 52, 254, 0.12), transparent 28%),
        linear-gradient(180deg, #020617 0%, #020617 100%);
    padding: 60px 0;
    min-height: 100vh;
}

.mp-conversation-page {
    position: relative;
    z-index: 1;
}

.mp-conversation-shell {
    background: linear-gradient(180deg, rgba(5, 14, 34, 0.96) 0%, rgba(3, 10, 26, 0.98) 100%);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
}

.mp-conversation-topbar {
    padding: 28px 32px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10);
    background: linear-gradient(90deg, rgba(64, 95, 242, 0.10) 0%, rgba(189, 52, 254, 0.10) 100%);
}

.mp-conversation-topbar__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7dd3fc;
    margin-bottom: 8px;
}

.mp-conversation-topbar__title {
    margin: 0;
    font-size: 36px;
    line-height: 1.15;
    font-weight: 800;
    color: #fff;
}

.mp-conversation-card {
    padding: 26px;
}

.mp-conversation-card__header {
    margin-bottom: 24px;
    padding: 22px 24px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(7, 20, 44, 0.96) 0%, rgba(3, 13, 32, 0.98) 100%);
    border: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.mp-conversation-card__header h3 {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
}

.mp-conversation-card__header p {
    margin: 0;
    font-size: 14px;
    color: #94a3b8;
}

.mp-ticket-form label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #e2e8f0;
}

/* INPUT / SELECT / TEXTAREA */
.mp-ticket-form .form-control {
    width: 100%;
    min-height: 54px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(2, 6, 23, 0.98) 100%);
    color: #f8fafc !important;
    padding: 14px 16px;
    box-shadow: none !important;
    transition: .25s ease;
}

.mp-ticket-form textarea.form-control {
    min-height: 220px;
    resize: vertical;
    padding-top: 15px;
}

.mp-ticket-form .form-control::placeholder {
    color: #64748b;
    opacity: 1;
}

.mp-ticket-form .form-control:focus {
    border-color: rgba(96, 165, 250, 0.65);
    background: linear-gradient(180deg, rgba(17, 26, 48, 0.98) 0%, rgba(5, 10, 28, 1) 100%);
    color: #fff !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14) !important;
}

/* readonly alanlar */
.mp-ticket-form input[readonly].form-control {
    background: linear-gradient(180deg, rgba(12, 18, 34, 0.98) 0%, rgba(5, 10, 24, 0.98) 100%);
    color: #cbd5e1 !important;
    border-color: rgba(148, 163, 184, 0.14);
    cursor: not-allowed;
    opacity: 1;
}

/* select ok görünümü */
.mp-ticket-form select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 46px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2394A3B8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
}

.mp-ticket-form select.form-control option {
    background: #0f172a;
    color: #f8fafc;
}

/* file input */
.mp-ticket-form input[type="file"].form-control {
    padding: 11px 14px;
    line-height: 1.4;
    color: #cbd5e1 !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(2, 6, 23, 0.98) 100%);
}

.mp-ticket-form input[type="file"].form-control::file-selector-button {
    margin-right: 14px;
    border: 0;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 700;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    color: #fff;
    cursor: pointer;
    transition: .2s ease;
}

.mp-ticket-form input[type="file"].form-control::file-selector-button:hover {
    filter: brightness(1.08);
}

.mp-ticket-form small.text-muted {
    color: #64748b !important;
    font-size: 12px;
}

/* buttonlar */
.mp-conversation-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none !important;
    border: 1px solid transparent;
    transition: .25s ease;
}

.mp-conversation-btn i {
    font-size: 13px;
}

.mp-conversation-btn--send {
    background: linear-gradient(135deg, #10b981 0%, #22c55e 100%);
    color: #04130c;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.22);
}

.mp-conversation-btn--send:hover {
    transform: translateY(-1px);
    color: #04130c;
    box-shadow: 0 16px 34px rgba(16, 185, 129, 0.30);
}

.mp-conversation-btn--primary {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #fff;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.22);
}

.mp-conversation-btn--primary:hover {
    transform: translateY(-1px);
    color: #fff;
    box-shadow: 0 16px 34px rgba(99, 102, 241, 0.30);
}

/* validation */
.mp-ticket-form .is-invalid,
.mp-ticket-form .form-control.is-invalid {
    border-color: rgba(239, 68, 68, 0.75) !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12) !important;
}

.mp-ticket-form .invalid-feedback {
    display: block;
    font-size: 13px;
    color: #fda4af;
    margin-top: 8px;
}

/* chrome autofill illetini sustur */
.mp-ticket-form input:-webkit-autofill,
.mp-ticket-form input:-webkit-autofill:hover,
.mp-ticket-form input:-webkit-autofill:focus,
.mp-ticket-form textarea:-webkit-autofill,
.mp-ticket-form select:-webkit-autofill {
    -webkit-text-fill-color: #f8fafc !important;
    transition: background-color 9999s ease-in-out 0s;
    box-shadow: 0 0 0px 1000px #0f172a inset !important;
}

/* mobile */
@media (max-width: 767.98px) {
    .mp-user-panel-section {
        padding: 30px 0 50px;
    }

    .mp-conversation-topbar {
        padding: 22px 18px 16px;
    }

    .mp-conversation-topbar__title {
        font-size: 28px;
    }

    .mp-conversation-card {
        padding: 16px;
    }

    .mp-conversation-card__header {
        padding: 18px;
        border-radius: 16px;
    }
}


/* =========================
   SUPPORT TICKET SHOW PAGE
========================= */

.mp-user-panel-section {
    background:
        radial-gradient(circle at top left, rgba(64, 95, 242, 0.14), transparent 32%),
        radial-gradient(circle at top right, rgba(189, 52, 254, 0.12), transparent 28%),
        linear-gradient(180deg, #020617 0%, #020617 100%);
    padding: 60px 0;
    min-height: 100vh;
}

.mp-conversation-page {
    position: relative;
    z-index: 1;
}

.mp-conversation-shell {
    background: linear-gradient(180deg, rgba(5, 14, 34, 0.96) 0%, rgba(3, 10, 26, 0.98) 100%);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
}

.mp-conversation-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 28px 32px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10);
    background: linear-gradient(90deg, rgba(64, 95, 242, 0.10) 0%, rgba(189, 52, 254, 0.10) 100%);
}

.mp-conversation-topbar__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7dd3fc;
    margin-bottom: 8px;
}

.mp-conversation-topbar__title {
    margin: 0;
    font-size: 34px;
    line-height: 1.15;
    font-weight: 800;
    color: #fff;
}

.mp-conversation-topbar__actions {
    flex-shrink: 0;
}

.mp-conversation-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding: 24px 26px 0;
}

.mp-conversation-summary__item {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: linear-gradient(180deg, rgba(9, 20, 40, 0.92) 0%, rgba(3, 11, 28, 0.98) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.mp-conversation-summary__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #94a3b8;
    margin-bottom: 10px;
}

.mp-conversation-summary__label i {
    color: #60a5fa;
}

.mp-conversation-summary__value {
    font-size: 15px;
    font-weight: 700;
    color: #f8fafc;
    word-break: break-word;
}

.mp-conversation-alert {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 22px 26px 0;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid transparent;
}

.mp-conversation-alert--danger {
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.18) 0%, rgba(69, 10, 10, 0.18) 100%);
    border-color: rgba(248, 113, 113, 0.20);
}

.mp-conversation-alert__icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.12);
    color: #fda4af;
    font-size: 16px;
    flex-shrink: 0;
}

.mp-conversation-alert__title {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
}

.mp-conversation-alert__text {
    font-size: 14px;
    color: #fecaca;
}

.mp-conversation-card {
    padding: 26px;
}

.mp-conversation-card__header {
    margin-bottom: 20px;
    padding: 22px 24px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(7, 20, 44, 0.96) 0%, rgba(3, 13, 32, 0.98) 100%);
    border: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.mp-conversation-card__header h3 {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
}

.mp-conversation-card__header p {
    margin: 0;
    font-size: 14px;
    color: #94a3b8;
}

.mp-conversation-messages {
    max-height: 720px;
    overflow-y: auto;
    padding-right: 6px;
    margin-bottom: 22px;
}

.mp-conversation-messages::-webkit-scrollbar {
    width: 8px;
}

.mp-conversation-messages::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.35);
    border-radius: 999px;
}

.mp-message-row {
    margin-bottom: 18px;
}

.mp-message-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.mp-message-meta__sender {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #cbd5e1;
}

.mp-message-meta__sender i {
    color: #60a5fa;
}

.mp-message-meta__time {
    font-size: 12px;
    color: #64748b;
}

.mp-message-bubble {
    max-width: 82%;
    padding: 18px 18px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: linear-gradient(180deg, rgba(8, 20, 40, 0.94) 0%, rgba(2, 10, 24, 0.98) 100%);
    color: #e2e8f0;
    line-height: 1.7;
    white-space: normal;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
}

.mp-message-row.is-own .mp-message-meta {
    justify-content: flex-end;
}

.mp-message-row.is-own .mp-message-meta__sender {
    order: 2;
}

.mp-message-row.is-own .mp-message-meta__time {
    order: 1;
}

.mp-message-row.is-own .mp-message-bubble {
    margin-left: auto;
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.25) 0%, rgba(49, 46, 129, 0.30) 100%);
    border-color: rgba(96, 165, 250, 0.18);
    color: #eff6ff;
}

.mp-message-row.is-admin .mp-message-bubble {
    border-left: 3px solid rgba(34, 197, 94, 0.75);
}

.mp-conversation-composer {
    margin-top: 10px;
}

.mp-conversation-composer__box {
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: linear-gradient(180deg, rgba(7, 18, 38, 0.96) 0%, rgba(2, 9, 24, 0.98) 100%);
}

.mp-conversation-textarea {
    width: 100%;
    min-height: 150px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(2, 6, 23, 0.98) 100%);
    color: #f8fafc;
    padding: 15px 16px;
    resize: vertical;
    outline: none;
    transition: .25s ease;
    box-shadow: none;
}

.mp-conversation-textarea::placeholder {
    color: #64748b;
    opacity: 1;
}

.mp-conversation-textarea:focus {
    border-color: rgba(96, 165, 250, 0.65);
    background: linear-gradient(180deg, rgba(17, 26, 48, 0.98) 0%, rgba(5, 10, 28, 1) 100%);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
}

/* file input */
.mp-conversation-composer .form-control {
    width: 100%;
    min-height: 54px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(2, 6, 23, 0.98) 100%);
    color: #f8fafc !important;
    padding: 11px 14px;
    box-shadow: none !important;
    transition: .25s ease;
}

.mp-conversation-composer .form-control:focus {
    border-color: rgba(96, 165, 250, 0.65);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14) !important;
    background: linear-gradient(180deg, rgba(17, 26, 48, 0.98) 0%, rgba(5, 10, 28, 1) 100%);
}

.mp-conversation-composer .form-control::file-selector-button {
    margin-right: 14px;
    border: 0;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 700;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    color: #fff;
    cursor: pointer;
    transition: .2s ease;
}

.mp-conversation-composer .form-control::file-selector-button:hover {
    filter: brightness(1.08);
}

.mp-conversation-composer small.text-muted {
    color: #64748b !important;
    font-size: 12px;
}

.mp-conversation-composer__footer {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

.mp-conversation-closed-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 62px;
    padding: 14px 18px;
    border-radius: 18px;
    border: 1px dashed rgba(248, 113, 113, 0.35);
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.12) 0%, rgba(69, 10, 10, 0.14) 100%);
    color: #fecaca;
    font-weight: 700;
}

.mp-conversation-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none !important;
    border: 1px solid transparent;
    transition: .25s ease;
}

.mp-conversation-btn i {
    font-size: 13px;
}

.mp-conversation-btn--send {
    background: linear-gradient(135deg, #10b981 0%, #22c55e 100%);
    color: #04130c;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.22);
}

.mp-conversation-btn--send:hover {
    transform: translateY(-1px);
    color: #04130c;
    box-shadow: 0 16px 34px rgba(16, 185, 129, 0.30);
}

.mp-conversation-btn--primary {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #fff;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.22);
}

.mp-conversation-btn--primary:hover {
    transform: translateY(-1px);
    color: #fff;
    box-shadow: 0 16px 34px rgba(99, 102, 241, 0.30);
}

.mp-conversation-btn--sm {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 13px;
}

@media (max-width: 991.98px) {
    .mp-conversation-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mp-conversation-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .mp-conversation-topbar__actions {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .mp-user-panel-section {
        padding: 30px 0 50px;
    }

    .mp-conversation-topbar {
        padding: 22px 18px 16px;
    }

    .mp-conversation-topbar__title {
        font-size: 26px;
    }

    .mp-conversation-card {
        padding: 16px;
    }

    .mp-conversation-summary {
        grid-template-columns: 1fr;
        padding: 16px 16px 0;
    }

    .mp-conversation-alert {
        margin: 16px 16px 0;
    }

    .mp-conversation-card__header {
        padding: 18px;
        border-radius: 16px;
    }

    .mp-message-bubble {
        max-width: 100%;
    }

    .mp-message-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .mp-message-row.is-own .mp-message-meta {
        align-items: flex-end;
    }

    .mp-conversation-composer__box {
        padding: 16px;
        border-radius: 16px;
    }
}


/* =========================================================
   THEME FOUR PREMIUM HEADER / TOP AREA REFRESH
========================================================= */


.theme-four-topbar__inner {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 0;
}

.theme-four-topbar__left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1 1 auto;
}

.theme-four-topbar__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.theme-four-topbar__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    padding: 7px 14px 7px 10px;
    border-radius: 14px;
    text-decoration: none !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    transition: all .25s ease;
}

.theme-four-topbar__meta-item:hover {
    transform: translateY(-1px);
    border-color: rgba(64, 95, 242, .32);
    background: linear-gradient(135deg, rgba(64, 95, 242, .12), rgba(255, 255, 255, .04));
}

.theme-four-topbar__meta-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #405ff2 0%, #22d3ee 100%);
    box-shadow: 0 10px 20px rgba(64, 95, 242, .24);
    flex: 0 0 30px;
}

.theme-four-topbar__meta-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}

.theme-four-topbar__meta-text small {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(191, 203, 224, .72);
    margin-bottom: 4px;
    font-weight: 700;
}

.theme-four-topbar__meta-text strong {
    font-size: 13px;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.theme-four-topbar__offer-wrap {
    flex: 1 1 auto;
    max-width: 760px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 14px 30px rgba(0, 0, 0, .12);
}

.theme-four-topbar__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.theme-four-topbar__actions .nice-select,
.theme-four-topbar__actions select {
    min-width: 112px;
    height: 42px;
    line-height: 40px;
    padding: 0 38px 0 14px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.theme-four-header--premium {
    position: relative;
    background:
        radial-gradient(circle at 10% 0%, rgba(64, 95, 242, .12), transparent 25%),
        radial-gradient(circle at 100% 0%, rgba(34, 211, 238, .08), transparent 22%),
        linear-gradient(180deg, #07101d 0%, #08111f 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .20);
}

.theme-four-herohead {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    padding: 22px 0 18px;
}

.theme-four-herohead__brand {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.theme-four-herohead__logo {
    flex: 0 0 auto;
    width: 78px;
    height: 78px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 16px 28px rgba(0, 0, 0, .16);
    overflow: hidden;
}

.theme-four-herohead__logo img {
    max-width: 90%;
    max-height: 52px;
    width: auto;
    height: auto;
}

.theme-four-herohead__brand-text {
    min-width: 0;
}

.theme-four-herohead__eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8db5ff;
}

.theme-four-herohead__brand-text h2 {
    margin: 0 0 6px;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 900;
    color: #fff;
}

.theme-four-herohead__brand-text p {
    margin: 0;
    font-size: 13px;
    color: #9aabc7;
    line-height: 1.6;
}

.theme-four-herohead__search {
    min-width: 0;
}

.theme-four-herohead__search form {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 6px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 34px rgba(0, 0, 0, .12);
}

.theme-four-herohead__search-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #b8c8e6;
    background: rgba(255, 255, 255, .05);
    flex: 0 0 50px;
}

.theme-four-herohead__search input {
    flex: 1 1 auto;
    height: 52px;
    border: none;
    background: transparent;
    padding: 0 14px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    min-width: 0;
}

.theme-four-herohead__search input:focus {
    outline: none;
    box-shadow: none;
}

.theme-four-herohead__search input::placeholder {
    color: rgba(173, 188, 214, .72);
}

.theme-four-herohead__search button {
    height: 52px;
    padding: 0 22px;
    border: none;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #405ff2 0%, #2747db 100%);
    box-shadow: 0 14px 26px rgba(64, 95, 242, .28);
    transition: all .25s ease;
}

.theme-four-herohead__search button:hover {
    transform: translateY(-1px);
}

.theme-four-herohead__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.tf-btn--hero,
.tf-btn--hero-alt {
    min-height: 52px;
    padding: 0 18px;
    border-radius: 16px;
    box-shadow: 0 16px 28px rgba(0, 0, 0, .18);
}

.tf-user-menu__trigger--premium {
    min-height: 56px;
    padding: 8px 14px 8px 10px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 14px 28px rgba(0, 0, 0, .14);
}

.theme-four-nav--premium {
    margin-top: 4px;
    padding: 0 0 20px;
    background: transparent;
    border: none;
}

.theme-four-nav--premium .theme-four-nav__inner {
    padding: 14px 16px;
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 16px 34px rgba(0, 0, 0, .12);
}

.tf-main-menu-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tf-main-menu-links a,
.tf-main-menu-links .nav-link {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    color: #dbe6fb;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .05);
    transition: all .22s ease;
}

.tf-main-menu-links a:hover,
.tf-main-menu-links .nav-link:hover,
.tf-main-menu-links a.active,
.tf-main-menu-links .nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(64, 95, 242, .20), rgba(64, 95, 242, .10));
    border-color: rgba(64, 95, 242, .34);
    box-shadow: 0 10px 24px rgba(64, 95, 242, .14);
}

.tf-main-menu-links i {
    font-size: 13px;
}

.theme-four-nav__list--cart a {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(64, 95, 242, .18), rgba(64, 95, 242, .10));
    border: 1px solid rgba(64, 95, 242, .28);
    color: #fff;
    box-shadow: 0 12px 24px rgba(64, 95, 242, .14);
}

.theme-four-nav__list--cart a span {
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #fff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}

.tf-nav-trigger {
    min-height: 46px;
    padding: 0 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

@media (max-width: 1399.98px) {
    .theme-four-herohead {
        grid-template-columns: 240px minmax(0, 1fr) auto;
    }

    .theme-four-herohead__brand-text h2 {
        font-size: 22px;
    }
}

@media (max-width: 1199.98px) {
    .theme-four-topbar__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .theme-four-topbar__left {
        flex-direction: column;
        align-items: stretch;
    }

    .theme-four-topbar__offer-wrap {
        max-width: 100%;
    }

    .theme-four-herohead {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .theme-four-herohead__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .theme-four-topbar__meta {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .theme-four-topbar__meta-item {
        width: 100%;
    }

    .theme-four-topbar__meta-text strong {
        max-width: 100%;
    }

    .theme-four-herohead {
        padding: 18px 0 14px;
    }

    .theme-four-herohead__brand {
        align-items: flex-start;
    }

    .theme-four-herohead__logo {
        width: 68px;
        height: 68px;
        border-radius: 18px;
    }

    .theme-four-herohead__brand-text h2 {
        font-size: 20px;
    }

    .theme-four-herohead__search form {
        min-height: 58px;
    }

    .theme-four-herohead__search button {
        padding: 0 16px;
        font-size: 13px;
    }

    .theme-four-nav--premium .theme-four-nav__inner {
        padding: 12px;
        border-radius: 18px;
    }
}

@media (max-width: 575.98px) {
    .theme-four-topbar__offer-wrap {
        display: none;
    }

    .theme-four-herohead__search form {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px;
    }

    .theme-four-herohead__search-icon {
        display: none;
    }

    .theme-four-herohead__search input {
        width: 100%;
        padding: 0 6px;
    }

    .theme-four-herohead__search button {
        width: 100%;
        justify-content: center;
    }

    .theme-four-herohead__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .tf-user-menu {
        grid-column: 1 / -1;
    }

    .tf-btn--hero,
    .tf-btn--hero-alt {
        width: 100%;
        justify-content: center;
    }
}


/* =========================
  OFFER AREA STYLE START
========================= */

.tf-home-offer-block {
    position: relative;
    overflow: hidden;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(13, 18, 30, 0.96), rgba(20, 26, 42, 0.92));
}

.tf-home-offer-block__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.tf-home-offer-block__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .50;
}

.tf-home-offer-block__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at top right, rgba(64, 95, 242, .18), transparent 35%),
        linear-gradient(135deg, rgba(8, 12, 20, .90), rgba(12, 18, 30, .82));
}

.tf-home-offer-block__content {
    position: relative;
    z-index: 2;
}

.tf-home-offer-card {
    display: flex;
    align-items: center;
    gap: 22px;
    height: 100%;
    padding: 22px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
    transition: all .25s ease;
}

.tf-home-offer-card:hover {
    transform: translateY(-4px);
    border-color: rgba(64, 95, 242, .35);
    background: rgba(255, 255, 255, 0.07);
}

.tf-home-offer-card__image {
    width: 120px;
    min-width: 120px;
    height: 120px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tf-home-offer-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tf-home-offer-card__body {
    flex: 1;
}

.tf-home-offer-card__body h3 {
    font-size: 22px;
    line-height: 1.35;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.tf-home-offer-card__body p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.72);
}

.tf-home-offer-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #7aa2ff;
}

@media (max-width: 767.98px) {
    .tf-home-offer-block {
        padding: 24px;
        border-radius: 22px;
    }

    .tf-home-offer-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .tf-home-offer-card__image {
        width: 100%;
        min-width: 100%;
        height: 180px;
    }

    .tf-home-offer-card__body h3 {
        font-size: 18px;
    }
}


/* =========================
  footer new thema
========================= */



        .tf-footer-pro{
            position:relative;
            overflow:hidden;
        }

        .tf-footer-pro::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 15% 20%, rgba(96,76,255,.18), transparent 28%),
                radial-gradient(circle at 85% 15%, rgba(28,196,255,.10), transparent 22%),
                radial-gradient(circle at 50% 100%, rgba(0,255,153,.06), transparent 26%);
            pointer-events:none;
        }

        .tf-footer-pro .container{
            position:relative;
            z-index:2;
        }

        .tf-footer-pro .theme-four-footer__topbar{
            padding-bottom:22px;
            margin-bottom:24px;
            border-bottom:1px solid rgba(255,255,255,.08);
        }

        .tf-footer-pro .tf-footer-feature-row{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:18px;
            margin-bottom:24px;
        }

        .tf-footer-pro .tf-footer-feature{
            display:flex;
            align-items:center;
            gap:16px;
            min-height:124px;
            padding:18px 20px;
            border-radius:20px;
            background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
            border:1px solid rgba(255,255,255,.08);
            box-shadow:0 10px 28px rgba(0,0,0,.18);
            transition:.25s ease;
        }

        .tf-footer-pro .tf-footer-feature:hover{
            transform:translateY(-4px);
            border-color:rgba(109,93,252,.45);
            box-shadow:0 18px 40px rgba(0,0,0,.26);
        }

        .tf-footer-pro .tf-footer-feature__img{
            width:64px;
            height:64px;
            min-width:64px;
            border-radius:18px;
            overflow:hidden;
            display:flex;
            align-items:center;
            justify-content:center;
            background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
            border:1px solid rgba(255,255,255,.08);
        }

        .tf-footer-pro .tf-footer-feature__img img{
            width:100%;
            height:100%;
            object-fit:cover;
        }

        .tf-footer-pro .tf-footer-feature__title{
            color:#fff;
            font-size:24px;
            line-height:1.1;
            font-weight:800;
            margin-bottom:6px;
        }

        .tf-footer-pro .tf-footer-feature__text{
            color:rgba(255,255,255,.70);
            font-size:13px;
            line-height:1.65;
            margin-bottom:10px;
            max-width:320px;
        }

        .tf-footer-pro .tf-footer-feature__btn{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:10px 14px;
            border-radius:999px;
            background:linear-gradient(135deg, #6d5dfc, #8f67ff);
            color:#fff;
            font-size:13px;
            font-weight:700;
            box-shadow:0 10px 25px rgba(109,93,252,.28);
        }
		
		.tf-footer-feature__btn{
			color: #fff !important;
		}

		.tf-footer-feature__btn span{
			color: #fff !important;
		}
		
		.theme-four-footer__topbar-social a i{
			font-size:18px;
			transition:0.3s;
		}

		.fa-facebook {color:#1877F2;}
		.fa-linkedin-in {color:#0A66C2;}
		.fa-x-twitter {color:#000000;}
		.fa-twitter {color:#1DA1F2;}
		.fa-instagram {color:#E4405F;}
		.fa-youtube {color:#FF0000;}
		.fa-twitch {color:#9146FF;}
		.fa-discord {color:#5865F2;}
		.fa-tiktok {color:#000000;}
		.fa-reddit {color:#FF4500;}
		.fa-telegram {color:#26A5E4;}
		.fa-whatsapp {color:#25D366;}
		.fa-steam {color:#171A21;}
		.fa-google {color:#DB4437;}
		.fa-pinterest-p {color:#E60023;}
		.fa-behance {color:#1769FF;}
		.fa-xbox {color:#107C10;}
		.fa-playstation {color:#003791;}
		.fa-riot-games {color:#D13639;}

		.theme-four-footer__topbar-social a:hover i{
			transform:translateY(-3px);
		}

		.tf-footer-feature__btn i{
			color: #fff !important;
		}

        .tf-footer-pro .tf-footer-main-grid{
            display:grid;
            grid-template-columns:minmax(0, 1.4fr) minmax(380px, .9fr);
            gap:20px;
            margin-bottom:20px;
        }

        .tf-footer-pro .tf-footer-panel{
            border-radius:22px;
            background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
            border:1px solid rgba(255,255,255,.08);
            box-shadow:0 12px 30px rgba(0,0,0,.18);
            padding:20px;
            min-height:100%;
        }

        .tf-footer-pro .tf-footer-panel__title{
            color:#fff;
            font-size:22px;
            font-weight:800;
            line-height:1.1;
            margin-bottom:16px;
        }

        .tf-footer-pro .tf-footer-left-top{
            display:grid;
            grid-template-columns:repeat(4, minmax(0, 1fr));
            gap:14px;
            margin-bottom:16px;
        }

        .tf-footer-pro .tf-footer-mini{
            padding:14px 14px 12px;
            border-radius:18px;
            background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.015));
            border:1px solid rgba(255,255,255,.06);
            min-height:100%;
        }

        .tf-footer-pro .tf-footer-mini h4{
            color:#fff;
            font-size:15px;
            font-weight:800;
            line-height:1.2;
            margin-bottom:12px;
        }

        .tf-footer-pro .tf-footer-menu{
            list-style:none;
            padding:0;
            margin:0;
        }

        .tf-footer-pro .tf-footer-menu li{
            margin-bottom:8px;
        }

        .tf-footer-pro .tf-footer-menu li:last-child{
            margin-bottom:0;
        }

        .tf-footer-pro .tf-footer-menu a{
            color:rgba(255,255,255,.72);
            font-size:13px;
            line-height:1.55;
            transition:.2s ease;
        }

        .tf-footer-pro .tf-footer-menu a:hover{
            color:#fff;
            padding-left:3px;
        }

        .tf-footer-pro .tf-footer-about-card{
            display:grid;
            grid-template-columns:auto 1fr;
            gap:14px;
            align-items:flex-start;
            padding:16px;
            border-radius:18px;
            background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.015));
            border:1px solid rgba(255,255,255,.06);
        }

        .tf-footer-pro .tf-footer-about-card__logo{
            width:56px;
            height:56px;
            border-radius:16px;
            overflow:hidden;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.08);
            display:flex;
            align-items:center;
            justify-content:center;
        }

        .tf-footer-pro .tf-footer-about-card__logo img{
            width:100%;
            height:100%;
            object-fit:cover;
        }

        .tf-footer-pro .tf-footer-about-card h5{
            color:#fff;
            font-size:18px;
            font-weight:800;
            margin-bottom:8px;
        }

        .tf-footer-pro .tf-footer-about-card p{
            color:rgba(255,255,255,.68);
            font-size:13px;
            line-height:1.75;
            margin:0;
        }

        .tf-footer-pro .tf-footer-social-row{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:14px;
        }

        .tf-footer-pro .tf-footer-social-row a{
            width:40px;
            height:40px;
            border-radius:12px;
            display:flex;
            align-items:center;
            justify-content:center;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.03);
            color:#fff;
            transition:.2s ease;
        }

        .tf-footer-pro .tf-footer-social-row a:hover{
            transform:translateY(-2px);
            border-color:rgba(109,93,252,.45);
            background:rgba(109,93,252,.12);
        }

        .tf-footer-pro .tf-footer-support-grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:12px;
            margin-bottom:14px;
        }

        .tf-footer-pro .tf-footer-support-card{
            padding:14px 16px;
            border-radius:18px;
            background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.015));
            border:1px solid rgba(255,255,255,.06);
        }

        .tf-footer-pro .tf-footer-support-card--full{
            grid-column:1 / -1;
        }

        .tf-footer-pro .tf-footer-support-card__label{
            display:block;
            color:rgba(255,255,255,.54);
            font-size:11px;
            line-height:1.2;
            font-weight:800;
            letter-spacing:.06em;
            text-transform:uppercase;
            margin-bottom:8px;
        }

        .tf-footer-pro .tf-footer-support-card__value,
        .tf-footer-pro .tf-footer-support-card__value a{
            color:#fff;
            font-size:14px;
            font-weight:700;
            line-height:1.55;
        }

        .tf-footer-pro .tf-footer-support-card__muted{
            color:rgba(255,255,255,.70);
            font-size:13px;
            line-height:1.7;
            font-weight:500;
        }

        .tf-footer-pro .tf-footer-support-actions{
            display:flex;
            align-items:center;
            gap:10px;
            flex-wrap:wrap;
            margin-top:2px;
        }

        .tf-footer-pro .tf-footer-support-btn{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:12px 16px;
            border-radius:14px;
            background:linear-gradient(135deg, #6d5dfc, #8f67ff);
            color:#fff;
            font-size:13px;
            font-weight:700;
            box-shadow:0 10px 24px rgba(109,93,252,.26);
        }

        .tf-footer-pro .tf-footer-support-btn--alt{
            background:linear-gradient(135deg, #16a34a, #22c55e);
            box-shadow:0 10px 24px rgba(34,197,94,.22);
        }

        .tf-footer-pro .tf-footer-payment-wrap{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            padding:14px;
            border-radius:18px;
            background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.015));
            border:1px solid rgba(255,255,255,.06);
            margin-bottom:18px;
        }

        .tf-footer-pro .tf-footer-payment-wrap img{
            max-width:100%;
            height:auto;
            display:block;
        }

        .tf-footer-pro .tf-footer-legal-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:14px;
            margin-bottom:18px;
        }

        .tf-footer-pro .tf-footer-legal-card{
            padding:18px;
            border-radius:18px;
            background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.015));
            border:1px solid rgba(255,255,255,.06);
            min-height:100%;
        }

        .tf-footer-pro .tf-footer-legal-card h5{
            color:#8db7ff;
            font-size:12px;
            font-weight:800;
            letter-spacing:.05em;
            text-transform:uppercase;
            margin-bottom:10px;
        }

        .tf-footer-pro .tf-footer-legal-card p{
            color:rgba(255,255,255,.74);
            font-size:13px;
            line-height:1.75;
            margin:0;
        }

        .tf-footer-pro .theme-four-footer__bottom{
            padding-top:18px;
            border-top:1px solid rgba(255,255,255,.08);
        }
		

        @media (max-width: 1199.98px){
            .tf-footer-pro .tf-footer-left-top{
                grid-template-columns:repeat(2, minmax(0, 1fr));
            }

            .tf-footer-pro .tf-footer-main-grid{
                grid-template-columns:1fr;
            }
        }

        @media (max-width: 991.98px){
            .tf-footer-pro .tf-footer-feature-row,
            .tf-footer-pro .tf-footer-legal-grid{
                grid-template-columns:1fr;
            }

            .tf-footer-pro .tf-footer-support-grid{
                grid-template-columns:1fr;
            }

            .tf-footer-pro .tf-footer-left-top{
                grid-template-columns:1fr 1fr;
            }
        }

        @media (max-width: 575.98px){
            .tf-footer-pro .tf-footer-left-top{
                grid-template-columns:1fr;
            }

            .tf-footer-pro .tf-footer-feature{
                flex-direction:column;
                align-items:flex-start;
            }
        }





/* =========================
mobile
========================= */






   @media (max-width: 767.98px) {
        .theme-four-topbar{
            display:none;
        }

        .theme-four-header > .container,
        .theme-four-nav{
            display:none;
        }

        .tf-mobile-header{
            display:block;
            padding:14px 0 16px;
            background:var(--site-header-bg, #0a0f1d);
            border-bottom:1px solid rgba(255,255,255,.06);
            position:relative;
            z-index:120;
        }

        .tf-mobile-header__box{
            background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
            border:1px solid rgba(255,255,255,.08);
            border-radius:22px;
            padding:14px;
            box-shadow:var(--site-shadow, 0 20px 45px rgba(0,0,0,.25));
            backdrop-filter:blur(14px);
        }

        .tf-mobile-header__locale{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:10px;
            margin-bottom:12px;
        }

        .tf-mobile-header__locale .theme-four-topbar__form{
            width:100%;
        }

        .tf-mobile-header__brand-row{
            display:grid;
            grid-template-columns:52px 1fr auto;
            gap:12px;
            align-items:center;
            margin-bottom:12px;
        }

        .tf-mobile-header__brand{
            min-width:0;
            height:56px;
            border-radius:18px;
            background:var(--site-logo-bg, #0d1324);
            border:1px solid rgba(255,255,255,.06);
            display:flex;
            align-items:center;
            justify-content:center;
            padding:10px 14px;
        }

        .tf-mobile-header__brand img{
            max-width:100%;
            max-height:34px;
            object-fit:contain;
        }

        .tf-mobile-header__right{
            display:flex;
            align-items:center;
            gap:10px;
        }

        .tf-mobile-icon-btn{
            width:52px;
            height:52px;
            border:none;
            outline:none;
            border-radius:16px;
            background:var(--site-menu-item-bg, #121a2f);
            border:1px solid var(--site-menu-item-border, rgba(255,255,255,.08));
            color:var(--site-menu-item-text, #fff);
            display:inline-flex;
            align-items:center;
            justify-content:center;
            position:relative;
            box-shadow:none;
            text-decoration:none;
        }

        .tf-mobile-icon-btn i{
            font-size:18px;
        }

        .tf-mobile-icon-btn__badge{
            position:absolute;
            top:6px;
            right:6px;
            min-width:18px;
            height:18px;
            padding:0 5px;
            border-radius:999px;
            background:var(--site-primary, #5b7cff);
            color:#fff;
            font-size:11px;
            font-weight:700;
            line-height:18px;
            text-align:center;
        }

        .tf-mobile-header__search{
            margin-bottom:12px;
        }

        .tf-mobile-header__search form{
            position:relative;
        }

        .tf-mobile-header__search input{
            width:100%;
            height:54px;
            border-radius:18px;
            border:1px solid var(--site-panel-border, rgba(255,255,255,.08));
            background:var(--site-search-bg, #0f1728);
            color:var(--site-search-text, #fff);
            padding:0 56px 0 16px;
            font-size:var(--site-font-size-input, 14px);
        }

        .tf-mobile-header__search input::placeholder{
            color:var(--site-text-muted, rgba(255,255,255,.55));
        }

        .tf-mobile-header__search button{
            position:absolute;
            top:50%;
            right:8px;
            transform:translateY(-50%);
            width:40px;
            height:40px;
            border:none;
            border-radius:12px;
            background:transparent;
            color:var(--site-search-icon, #fff);
        }

        .tf-mobile-header__cta-row{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:10px;
            margin-bottom:12px;
        }

        .tf-mobile-header__cta-row .tf-btn{
            width:100%;
            justify-content:center;
            height:50px;
            border-radius:16px;
            font-size:var(--site-font-size-button, 14px);
            padding:0 12px;
        }

        .tf-mobile-header__nav{
            display:flex;
            gap:10px;
            overflow-x:auto;
            padding-bottom:2px;
            scrollbar-width:none;
        }

        .tf-mobile-header__nav::-webkit-scrollbar{
            display:none;
        }

        .tf-mobile-nav-link{
            flex:0 0 auto;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            min-height:44px;
            padding:0 14px;
            border-radius:14px;
            background:var(--site-menu-item-bg, #121a2f);
            border:1px solid var(--site-menu-item-border, rgba(255,255,255,.08));
            color:var(--site-menu-item-text, #fff);
            text-decoration:none;
            font-size:13px;
            font-weight:600;
            white-space:nowrap;
        }

        .tf-mobile-nav-link.active{
            background:var(--site-menu-item-active-bg, #1c2742);
            color:var(--site-menu-item-active-text, #fff);
            border-color:transparent;
        }

        .tf-mobile-header .tf-nav-mega,
        .tf-mobile-header .tf-user-menu{
            position:relative;
        }

        .tf-mobile-header .tf-nav-mega__panel,
        .tf-mobile-header .tf-user-menu__dropdown{
            position:absolute;
            top:calc(100% + 10px);
            left:0;
            right:auto;
            width:min(92vw, 360px);
            max-height:70vh;
            overflow:auto;
            background:linear-gradient(180deg, rgba(14,18,31,.98), rgba(9,13,24,.98));
            border:1px solid rgba(255,255,255,.08);
            border-radius:20px;
            padding:14px;
            box-shadow:0 28px 50px rgba(0,0,0,.35);
            opacity:0;
            visibility:hidden;
            transform:translateY(10px);
            transition:all .2s ease;
            z-index:50;
        }

        .tf-mobile-header .tf-user-menu__dropdown{
            left:auto;
            right:0;
        }

        .tf-mobile-header .tf-nav-mega.is-open .tf-nav-mega__panel,
        .tf-mobile-header .tf-user-menu.is-open .tf-user-menu__dropdown{
            opacity:1;
            visibility:visible;
            transform:translateY(0);
        }

        .tf-mobile-header .tf-nav-mega__grid{
            display:block;
        }

        .tf-mobile-header .tf-nav-mega__pages{
            margin-top:16px;
        }

        .tf-mobile-header .tf-nav-mega__head h4{
            font-size:15px;
            margin-bottom:10px;
        }

        .tf-mobile-header .tf-nav-category-card{
            min-height:58px;
        }

        .tf-mobile-header .tf-user-menu__dropdown a{
            display:flex;
            align-items:center;
            gap:10px;
            min-height:46px;
            border-radius:14px;
            padding:0 12px;
            color:#fff;
            text-decoration:none;
            background:transparent;
        }

        .tf-mobile-header .tf-user-menu__dropdown a + a{
            margin-top:6px;
        }

        .tf-mobile-header .tf-user-menu__dropdown a:hover{
            background:rgba(255,255,255,.04);
        }

        .tf-mobile-avatar-btn{
            width:52px;
            height:52px;
            border:none;
            border-radius:16px;
            overflow:hidden;
            background:var(--site-menu-item-bg, #121a2f);
            border:1px solid var(--site-menu-item-border, rgba(255,255,255,.08));
            display:flex;
            align-items:center;
            justify-content:center;
            padding:0;
        }

        .tf-mobile-avatar-btn img{
            width:100%;
            height:100%;
            object-fit:cover;
        }

        .tf-mobile-avatar-btn span{
            width:100%;
            height:100%;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:18px;
            font-weight:800;
            color:#fff;
        }
    }

    @media (min-width: 768px) {
        .tf-mobile-header{
            display:none;
        }
    }
	


/* =========================================
   VALORANT VP STORE
========================================= */

.mp-vp-store-section{
    position: relative;
    padding: 120px 0;
    background:
        radial-gradient(circle at top left, rgba(189,52,254,0.10), transparent 24%),
        radial-gradient(circle at top right, rgba(64,95,242,0.14), transparent 28%),
        linear-gradient(180deg, #030712 0%, #020817 100%);
    overflow: hidden;
}

.mp-vp-store-section::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.02) 50%, transparent 100%);
    pointer-events: none;
}

.mp-vp-hero{
    position: relative;
    z-index: 1;
    margin-bottom: 32px;
    padding: 34px 34px 28px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(8,15,33,0.96), rgba(5,11,25,0.98));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        0 24px 60px rgba(0,0,0,0.30),
        inset 0 1px 0 rgba(255,255,255,0.04);
    text-align: center;
    overflow: hidden;
}

.mp-vp-hero::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top left, rgba(189,52,254,0.18), transparent 25%),
        radial-gradient(circle at top right, rgba(64,95,242,0.18), transparent 30%);
    pointer-events: none;
}

.mp-vp-hero > *{
    position: relative;
    z-index: 1;
}

.mp-vp-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(64,95,242,0.12);
    border: 1px solid rgba(96,165,250,0.18);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.mp-vp-title{
    margin: 0 0 12px;
    color: #fff;
    font-size: 38px;
    font-weight: 900;
    line-height: 1.1;
}

.mp-vp-desc{
    max-width: 760px;
    margin: 0 auto;
    color: rgba(255,255,255,0.66);
    font-size: 15px;
    line-height: 1.8;
}

.mp-vp-list{
    position: relative;
    z-index: 1;
}

.mp-vp-card{
    position: relative;
    border-radius: 22px;
    padding: 20px;
    background: linear-gradient(180deg, rgba(8,15,33,0.94), rgba(5,11,25,0.98));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        0 18px 42px rgba(0,0,0,0.24),
        inset 0 1px 0 rgba(255,255,255,0.04);
    overflow: hidden;
    transition: all .25s ease;
}

.mp-vp-card::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(64,95,242,0.10), transparent 28%),
        radial-gradient(circle at bottom left, rgba(189,52,254,0.08), transparent 24%);
    pointer-events: none;
}

.mp-vp-card:hover{
    transform: translateY(-4px);
    border-color: rgba(96,165,250,0.18);
    box-shadow:
        0 24px 50px rgba(0,0,0,0.28),
        0 10px 30px rgba(64,95,242,0.08);
}

.mp-vp-card > *{
    position: relative;
    z-index: 1;
}

.mp-vp-card-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.mp-vp-left{
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1 1 420px;
}

.mp-vp-image{
    width: 88px;
    height: 88px;
    min-width: 88px;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 22px rgba(0,0,0,0.20);
}

.mp-vp-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mp-vp-content{
    min-width: 0;
}

.mp-vp-name{
    margin: 0 0 8px;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
}

.mp-vp-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
}

.mp-vp-pill{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.76);
    font-size: 12px;
    font-weight: 700;
}

.mp-vp-pill i{
    color: #c4b5fd;
}

.mp-vp-right{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    flex: 0 1 auto;
}

.mp-vp-price{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    white-space: nowrap;
}

.mp-vp-price i{
    color: #60a5fa;
    font-size: 15px;
}

.mp-vp-qty-wrap{
    width: 96px;
}

.mp-vp-qty{
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #fff !important;
    text-align: center;
    font-weight: 800;
    box-shadow: none !important;
}

.mp-vp-qty:focus{
    border-color: rgba(96,165,250,0.28) !important;
    box-shadow: 0 0 0 4px rgba(64,95,242,0.10) !important;
}

.mp-vp-qty::-webkit-outer-spin-button,
.mp-vp-qty::-webkit-inner-spin-button{
    opacity: 1;
}

.mp-vp-btn{
    min-height: 48px;
    padding: 12px 18px;
    border: 0;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: all .25s ease;
    white-space: nowrap;
}

.mp-vp-btn:hover{
    transform: translateY(-2px);
}

.mp-vp-btn--cart{
    color: #111827;
    background: linear-gradient(90deg, #facc15 0%, #f59e0b 100%);
    box-shadow: 0 14px 28px rgba(245,158,11,0.18);
}

.mp-vp-btn--cart:hover{
    color: #111827;
}

.mp-vp-btn--buy{
    color: #fff;
    background: linear-gradient(90deg, #7c3aed 0%, #405ff2 100%);
    box-shadow: 0 14px 28px rgba(64,95,242,0.18);
}

.mp-vp-btn--buy:hover{
    color: #fff;
}

@media (max-width: 991.98px){
    .mp-vp-store-section{
        padding: 90px 0;
    }

    .mp-vp-hero{
        padding: 26px 22px 22px;
        border-radius: 20px;
    }

    .mp-vp-title{
        font-size: 30px;
    }

    .mp-vp-card{
        padding: 18px;
        border-radius: 18px;
    }

    .mp-vp-name{
        font-size: 20px;
    }
}

@media (max-width: 767.98px){
    .mp-vp-title{
        font-size: 26px;
    }

    .mp-vp-card-inner{
        align-items: stretch;
    }

    .mp-vp-left{
        align-items: flex-start;
    }

    .mp-vp-right{
        width: 100%;
        justify-content: stretch;
    }

    .mp-vp-price,
    .mp-vp-qty-wrap,
    .mp-vp-btn{
        width: 100%;
    }

    .mp-vp-btn{
        justify-content: center;
    }
}


/* =========================================
   VALORANT AGENTS PAGE
========================================= */

.agent-page{
    padding:30px 0 90px;
    background:
        radial-gradient(circle at top left, rgba(189,52,254,0.10), transparent 24%),
        radial-gradient(circle at top right, rgba(64,95,242,0.12), transparent 26%),
        linear-gradient(180deg, #030712 0%, #020817 100%);
}
.agent-hero{
    position:relative;
    overflow:hidden;
    border-radius:26px;
    padding:34px;
    margin-bottom:28px;
    background:linear-gradient(135deg, rgba(8,15,33,0.96), rgba(5,11,25,0.98));
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 24px 60px rgba(0,0,0,.30);
}
.agent-hero h1{color:#fff;font-size:40px;font-weight:900;margin:0 0 10px;}
.agent-hero p{color:rgba(255,255,255,.7);margin:0;max-width:760px;}
.agent-filter{
    margin-bottom:22px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}
.agent-filter a{
    min-height:42px;
    padding:10px 18px;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    color:#fff;
    font-weight:700;
}
.agent-filter a.active{
    background:linear-gradient(135deg, #405ff2, #bd34fe);
}
.agent-card{
    position:relative;
    height:100%;
    border-radius:22px;
    padding:18px;
    background:linear-gradient(180deg, rgba(8,15,33,0.94), rgba(5,11,25,0.98));
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 18px 42px rgba(0,0,0,0.24);
    transition:all .25s ease;
    overflow:hidden;
}
.agent-card:hover{
    transform:translateY(-5px);
    border-color:rgba(96,165,250,0.18);
    box-shadow:0 24px 50px rgba(0,0,0,0.28),0 10px 30px rgba(64,95,242,0.08);
}
.agent-card__image{
    height:290px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    margin-bottom:16px;
}
.agent-card__image img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}
.agent-card__name{
    color:#fff;
    font-size:22px;
    font-weight:900;
    margin:0 0 8px;
}
.agent-card__role{
    display:inline-flex;
    align-items:center;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(64,95,242,.12);
    border:1px solid rgba(96,165,250,.18);
    color:#dbeafe;
    font-size:12px;
    font-weight:800;
    margin-bottom:12px;
}
.agent-card__desc{
    color:rgba(255,255,255,.66);
    font-size:14px;
    line-height:1.7;
    min-height:72px;
}
.agent-card__btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:10px 18px;
    border-radius:14px;
    background:linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    color:#fff;
    font-weight:800;
    margin-top:16px;
}


/* =========================================
   VALORANT AGENTS PAGE SHOW
========================================= */

    .mp-agent-page{
        position: relative;
        overflow: hidden;
        padding: 50px 0 90px;
        background:
            radial-gradient(circle at 10% 10%, rgba(189,52,254,.12), transparent 24%),
            radial-gradient(circle at 90% 5%, rgba(64,95,242,.14), transparent 26%),
            radial-gradient(circle at 50% 100%, rgba(59,130,246,.08), transparent 28%),
            linear-gradient(180deg, #020612 0%, #020816 45%, #01040d 100%);
    }

    .mp-agent-page::before{
        content:'';
        position:absolute;
        inset:0;
        background-image:
            linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
        background-size: 80px 80px;
        opacity:.12;
        pointer-events:none;
    }

    .mp-agent-shell{
        position: relative;
        z-index: 2;
    }

    .mp-agent-hero{
        position: relative;
        padding: 34px;
        border-radius: 30px;
        background:
            linear-gradient(180deg, rgba(9,15,31,.96), rgba(4,10,24,.98));
        border: 1px solid rgba(255,255,255,.08);
        box-shadow:
            0 20px 60px rgba(0,0,0,.30),
            inset 0 1px 0 rgba(255,255,255,.04);
        overflow: hidden;
    }

    .mp-agent-hero::before{
        content:'';
        position:absolute;
        right:-80px;
        top:-80px;
        width:260px;
        height:260px;
        border-radius:50%;
        background: radial-gradient(circle, rgba(64,95,242,.22), transparent 70%);
        pointer-events:none;
    }

    .mp-agent-hero::after{
        content:'';
        position:absolute;
        left:-60px;
        bottom:-60px;
        width:220px;
        height:220px;
        border-radius:50%;
        background: radial-gradient(circle, rgba(189,52,254,.16), transparent 70%);
        pointer-events:none;
    }

    .mp-agent-hero-inner{
        position:relative;
        z-index:2;
    }

    .mp-agent-portrait-wrap{
        position: relative;
        min-height: 540px;
        display:flex;
        align-items:flex-end;
        justify-content:center;
        border-radius: 24px;
        background:
            radial-gradient(circle at 50% 35%, rgba(64,95,242,.15), transparent 45%),
            linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
        border: 1px solid rgba(255,255,255,.06);
        overflow: hidden;
    }

    .mp-agent-portrait-wrap::before{
        content:'';
        position:absolute;
        inset:auto 0 0 0;
        height:120px;
        background: linear-gradient(180deg, transparent, rgba(2,6,18,.85));
        pointer-events:none;
    }

    .mp-agent-portrait{
        position:relative;
        z-index:2;
        max-width:100%;
        max-height:520px;
        object-fit:contain;
        filter: drop-shadow(0 18px 40px rgba(0,0,0,.45));
    }

    .mp-agent-badge-row{
        display:flex;
        flex-wrap:wrap;
        gap:12px;
        margin-bottom:18px;
    }

    .mp-agent-role,
    .mp-agent-chip{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height:40px;
        padding:8px 16px;
        border-radius:999px;
        font-size:12px;
        font-weight:800;
        letter-spacing:.08em;
        text-transform:uppercase;
    }

    .mp-agent-role{
        color:#dbeafe;
        background:rgba(64,95,242,.14);
        border:1px solid rgba(96,165,250,.20);
    }

    .mp-agent-chip{
        color:#e9d5ff;
        background:rgba(168,85,247,.12);
        border:1px solid rgba(192,132,252,.18);
    }

    .mp-agent-title{
        margin:0 0 14px;
        color:#fff;
        font-size: clamp(34px, 5vw, 58px);
        line-height:1.05;
        font-weight:900;
        letter-spacing:-.03em;
    }

    .mp-agent-desc{
        max-width: 680px;
        color: rgba(255,255,255,.72);
        font-size: 15px;
        line-height: 1.9;
        margin-bottom: 24px;
    }

    .mp-agent-meta-grid{
        display:grid;
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap:14px;
        margin-top:26px;
    }

    .mp-agent-meta-card{
        border-radius:18px;
        padding:16px 18px;
        background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
        border:1px solid rgba(255,255,255,.07);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    }

    .mp-agent-meta-label{
        display:block;
        color: rgba(255,255,255,.45);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .08em;
        margin-bottom: 8px;
        font-weight:700;
    }

    .mp-agent-meta-value{
        color:#fff;
        font-size:16px;
        font-weight:800;
        line-height:1.4;
    }

    .mp-section{
        margin-top: 44px;
    }

    .mp-section-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:16px;
        margin-bottom:18px;
    }

    .mp-section-title{
        margin:0;
        color:#fff;
        font-size: 24px;
        font-weight: 900;
        letter-spacing:-.02em;
    }

    .mp-section-sub{
        color:rgba(255,255,255,.48);
        font-size:13px;
        font-weight:600;
    }

    .mp-ability-card,
    .mp-gallery-card,
    .mp-related-card{
        position:relative;
        height:100%;
        border-radius:22px;
        background:linear-gradient(180deg, rgba(9,15,31,.96), rgba(4,10,24,.98));
        border:1px solid rgba(255,255,255,.08);
        box-shadow:0 16px 36px rgba(0,0,0,.24);
        overflow:hidden;
        transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }

    .mp-ability-card:hover,
    .mp-gallery-card:hover,
    .mp-related-card:hover{
        transform:translateY(-4px);
        border-color:rgba(96,165,250,.28);
        box-shadow:0 22px 44px rgba(0,0,0,.30);
    }

    .mp-ability-card{
        padding:20px;
    }

    .mp-ability-icon{
        width:68px;
        height:68px;
        border-radius:18px;
        background:
            linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
        border:1px solid rgba(255,255,255,.07);
        display:flex;
        align-items:center;
        justify-content:center;
        margin-bottom:16px;
    }

    .mp-ability-icon img{
        max-width:36px;
        max-height:36px;
        object-fit:contain;
    }

    .mp-ability-name{
        margin:0 0 10px;
        color:#fff;
        font-size:18px;
        font-weight:800;
    }

    .mp-ability-desc{
        color:rgba(255,255,255,.65);
        font-size:14px;
        line-height:1.75;
        margin:0;
    }

    .mp-gallery-card{
        padding:14px;
    }

    .mp-gallery-media{
        width:100%;
        height:280px;
        border-radius:18px;
        background: radial-gradient(circle at 50% 30%, rgba(64,95,242,.10), transparent 45%), rgba(255,255,255,.02);
        border:1px solid rgba(255,255,255,.05);
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
    }

    .mp-gallery-media img{
        width:100%;
        height:100%;
        object-fit:contain;
        transition:transform .35s ease;
    }

    .mp-gallery-card:hover .mp-gallery-media img{
        transform:scale(1.04);
    }

    .mp-gallery-label{
        padding:12px 4px 2px;
        color:#fff;
        font-size:14px;
        font-weight:700;
    }

    .mp-related-card{
        padding:14px;
    }

    .mp-related-media{
        width:100%;
        height:230px;
        border-radius:18px;
        background:
            radial-gradient(circle at 50% 30%, rgba(189,52,254,.10), transparent 45%),
            rgba(255,255,255,.02);
        border:1px solid rgba(255,255,255,.05);
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
    }

    .mp-related-media img{
        width:100%;
        height:100%;
        object-fit:contain;
        transition:transform .35s ease;
    }

    .mp-related-card:hover .mp-related-media img{
        transform:scale(1.04);
    }

    .mp-related-body{
        padding:14px 2px 2px;
    }

    .mp-related-name{
        color:#fff;
        font-size:18px;
        font-weight:800;
        margin:0 0 6px;
    }

    .mp-related-role{
        color:rgba(255,255,255,.62);
        font-size:13px;
        margin:0 0 14px;
    }

    .mp-related-btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height:44px;
        padding:10px 16px;
        border-radius:14px;
        background:linear-gradient(135deg, #405ff2, #bd34fe);
        color:#fff !important;
        font-size:13px;
        font-weight:800;
        text-decoration:none !important;
        box-shadow:0 10px 24px rgba(84,96,255,.24);
        transition:transform .2s ease, box-shadow .2s ease;
    }

    .mp-related-btn:hover{
        transform:translateY(-1px);
        box-shadow:0 14px 28px rgba(84,96,255,.30);
    }

    .mp-empty-note{
        border-radius:20px;
        padding:20px;
        background:linear-gradient(180deg, rgba(9,15,31,.96), rgba(4,10,24,.98));
        border:1px solid rgba(255,255,255,.08);
        color:rgba(255,255,255,.58);
    }

    @media (max-width: 1199px){
        .mp-agent-portrait-wrap{
            min-height: 460px;
        }

        .mp-gallery-media{
            height:240px;
        }
    }

    @media (max-width: 991px){
        .mp-agent-page{
            padding: 95px 0 70px;
        }

        .mp-agent-hero{
            padding:22px;
        }

        .mp-agent-portrait-wrap{
            min-height: 380px;
            margin-bottom: 8px;
        }

        .mp-agent-portrait{
            max-height: 360px;
        }

        .mp-agent-meta-grid{
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 575px){
        .mp-agent-page{
            padding: 88px 0 64px;
        }

        .mp-agent-hero{
            padding:18px;
            border-radius:24px;
        }

        .mp-agent-title{
            font-size: 34px;
        }

        .mp-agent-desc{
            font-size:14px;
            line-height:1.8;
        }

        .mp-agent-portrait-wrap{
            min-height: 320px;
            border-radius: 20px;
        }

        .mp-agent-portrait{
            max-height: 300px;
        }

        .mp-section{
            margin-top: 36px;
        }

        .mp-section-title{
            font-size: 21px;
        }

        .mp-gallery-media,
        .mp-related-media{
            height:220px;
        }
    }
	
	
	
	
/* =========================================
   VALORANT AGENTS PAGE INDEX
========================================= */
	
	
	
	    .mp-agents-page{
        position: relative;
        overflow: hidden;
        padding: 40px 0 90px;
        background:
            radial-gradient(circle at 12% 10%, rgba(189,52,254,.10), transparent 24%),
            radial-gradient(circle at 88% 6%, rgba(64,95,242,.12), transparent 24%),
            radial-gradient(circle at 50% 100%, rgba(59,130,246,.08), transparent 30%),
            linear-gradient(180deg, #020612 0%, #020816 45%, #01040d 100%);
    }

    .mp-agents-page::before{
        content:'';
        position:absolute;
        inset:0;
        background-image:
            linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
        background-size: 72px 72px;
        opacity:.16;
        pointer-events:none;
    }

    .mp-agents-wrap{
        position: relative;
        z-index: 2;
    }

    .mp-agents-hero{
        position: relative;
        padding: 34px 34px 30px;
        border-radius: 30px;
        margin-bottom: 26px;
        background:
            linear-gradient(180deg, rgba(9,15,31,.96), rgba(4,10,24,.98));
        border: 1px solid rgba(255,255,255,.08);
        box-shadow:
            0 24px 60px rgba(0,0,0,.28),
            inset 0 1px 0 rgba(255,255,255,.04);
        overflow: hidden;
    }

    .mp-agents-hero::before{
        content:'';
        position:absolute;
        right:-80px;
        top:-80px;
        width:260px;
        height:260px;
        border-radius:50%;
        background: radial-gradient(circle, rgba(64,95,242,.20), transparent 70%);
        pointer-events:none;
    }

    .mp-agents-hero::after{
        content:'';
        position:absolute;
        left:-60px;
        bottom:-60px;
        width:220px;
        height:220px;
        border-radius:50%;
        background: radial-gradient(circle, rgba(189,52,254,.16), transparent 70%);
        pointer-events:none;
    }

    .mp-agents-hero__inner{
        position: relative;
        z-index: 2;
    }

    .mp-agents-eyebrow{
        display:inline-flex;
        align-items:center;
        gap:8px;
        min-height:38px;
        padding:8px 15px;
        border-radius:999px;
        margin-bottom:16px;
        color:#dbeafe;
        background:rgba(64,95,242,.12);
        border:1px solid rgba(96,165,250,.18);
        font-size:12px;
        font-weight:800;
        letter-spacing:.08em;
        text-transform:uppercase;
    }

    .mp-agents-title{
        margin:0 0 12px;
        color:#fff;
        font-size:clamp(30px, 5vw, 54px);
        line-height:1.05;
        font-weight:900;
        letter-spacing:-.03em;
    }

    .mp-agents-subtitle{
        max-width:760px;
        margin:0;
        color:rgba(255,255,255,.70);
        font-size:15px;
        line-height:1.85;
    }

    .mp-agents-topbar{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:18px;
        flex-wrap:wrap;
        margin: 0 0 26px;
    }

    .mp-agents-filter{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
    }

    .mp-agents-filter a{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height:42px;
        padding:10px 16px;
        border-radius:999px;
        text-decoration:none !important;
        font-size:13px;
        font-weight:800;
        letter-spacing:.02em;
        color:rgba(255,255,255,.72);
        background:rgba(255,255,255,.04);
        border:1px solid rgba(255,255,255,.08);
        transition:all .22s ease;
    }

    .mp-agents-filter a:hover{
        color:#fff;
        border-color:rgba(96,165,250,.22);
        background:rgba(255,255,255,.07);
        transform:translateY(-1px);
    }

    .mp-agents-filter a.active{
        color:#fff;
        background:linear-gradient(135deg, #405ff2, #bd34fe);
        border-color:transparent;
        box-shadow:0 12px 26px rgba(84,96,255,.24);
    }

    .mp-agents-count{
        display:inline-flex;
        align-items:center;
        min-height:42px;
        padding:10px 16px;
        border-radius:999px;
        color:rgba(255,255,255,.78);
        background:rgba(255,255,255,.04);
        border:1px solid rgba(255,255,255,.08);
        font-size:13px;
        font-weight:700;
    }

    .mp-agent-card{
        position:relative;
        height:100%;
        border-radius:24px;
        background:linear-gradient(180deg, rgba(9,15,31,.96), rgba(4,10,24,.98));
        border:1px solid rgba(255,255,255,.08);
        box-shadow:0 18px 38px rgba(0,0,0,.25);
        overflow:hidden;
        transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }

    .mp-agent-card:hover{
        transform:translateY(-6px);
        border-color:rgba(96,165,250,.24);
        box-shadow:0 24px 48px rgba(0,0,0,.32);
    }

    .mp-agent-card__media{
        position:relative;
        min-height:280px;
        padding:18px 18px 0;
        display:flex;
        align-items:flex-end;
        justify-content:center;
        background:
            radial-gradient(circle at 50% 28%, rgba(64,95,242,.16), transparent 44%),
            linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
        border-bottom:1px solid rgba(255,255,255,.06);
        overflow:hidden;
    }

    .mp-agent-card__media::before{
        content:'';
        position:absolute;
        inset:auto 0 0 0;
        height:90px;
        background:linear-gradient(180deg, transparent, rgba(2,6,18,.82));
        pointer-events:none;
    }

    .mp-agent-card__image{
        position:relative;
        z-index:2;
        width:100%;
        height:260px;
        object-fit:contain;
        filter:drop-shadow(0 16px 30px rgba(0,0,0,.42));
        transition:transform .35s ease;
    }

    .mp-agent-card:hover .mp-agent-card__image{
        transform:scale(1.04);
    }

    .mp-agent-card__body{
        padding:20px 20px 22px;
    }

    .mp-agent-card__role-badge{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height:34px;
        padding:8px 12px;
        border-radius:999px;
        margin-bottom:14px;
        color:#dbeafe;
        background:rgba(64,95,242,.12);
        border:1px solid rgba(96,165,250,.16);
        font-size:11px;
        font-weight:800;
        letter-spacing:.08em;
        text-transform:uppercase;
    }

    .mp-agent-card__name{
        color:#fff;
        font-size:24px;
        line-height:1.15;
        font-weight:900;
        letter-spacing:-.02em;
        margin:0 0 8px;
    }

    .mp-agent-card__role{
        color:rgba(255,255,255,.56);
        font-size:13px;
        font-weight:700;
        margin-bottom:14px;
    }

    .mp-agent-card__desc{
        min-height:72px;
        color:rgba(255,255,255,.68);
        font-size:14px;
        line-height:1.8;
        margin-bottom:18px;
    }

    .mp-agent-card__footer{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        flex-wrap:wrap;
    }

    .mp-agent-card__link{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height:44px;
        padding:10px 16px;
        border-radius:14px;
        background:linear-gradient(135deg, #405ff2, #bd34fe);
        color:#fff !important;
        text-decoration:none !important;
        font-size:13px;
        font-weight:800;
        box-shadow:0 10px 24px rgba(84,96,255,.24);
        transition:transform .2s ease, box-shadow .2s ease;
    }

    .mp-agent-card__link:hover{
        transform:translateY(-1px);
        box-shadow:0 14px 28px rgba(84,96,255,.30);
    }

    .mp-agent-card__meta{
        color:rgba(255,255,255,.44);
        font-size:12px;
        font-weight:700;
        letter-spacing:.04em;
        text-transform:uppercase;
    }

    .mp-empty-state{
        padding:28px;
        border-radius:24px;
        text-align:center;
        background:linear-gradient(180deg, rgba(9,15,31,.96), rgba(4,10,24,.98));
        border:1px solid rgba(255,255,255,.08);
        color:rgba(255,255,255,.64);
        box-shadow:0 18px 38px rgba(0,0,0,.22);
    }

    @media (max-width: 991px){
        .mp-agents-page{
            padding:95px 0 72px;
        }

        .mp-agents-hero{
            padding:24px 22px;
            border-radius:24px;
        }

        .mp-agent-card__media{
            min-height:250px;
        }

        .mp-agent-card__image{
            height:230px;
        }
    }

    @media (max-width: 575px){
        .mp-agents-page{
            padding:84px 0 60px;
        }

        .mp-agents-hero{
            padding:20px 18px;
            border-radius:22px;
        }

        .mp-agents-title{
            font-size:34px;
        }

        .mp-agents-subtitle{
            font-size:14px;
            line-height:1.75;
        }

        .mp-agents-filter{
            gap:8px;
        }

        .mp-agents-filter a{
            min-height:40px;
            padding:9px 14px;
            font-size:12px;
        }

        .mp-agent-card__media{
            min-height:220px;
        }

        .mp-agent-card__image{
            height:205px;
        }

        .mp-agent-card__name{
            font-size:21px;
        }

        .mp-agent-card__desc{
            min-height:auto;
        }
    }
	
	
/* =========================================
   VALORANT AGENTS PAGE INDEX end
========================================= */


/* =========================================================
   PRODUCT MARKETPLACE PAGE
========================================================= */
.mp-marketplace-page{
    position: relative;
}

.mp-marketplace-toolbar{
    margin-bottom: 22px;
    padding: 22px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(15,23,42,.88) 0%, rgba(2,6,23,.92) 100%);
    border: 1px solid rgba(148,163,184,.14);
    box-shadow: 0 24px 60px rgba(2,6,23,.30);
}

.mp-marketplace-toolbar__search,
.mp-marketplace-toolbar__sort{
    height: 100%;
}

.mp-marketplace-toolbar__search form{
    margin: 0;
}

.mp-marketplace-toolbar__search-inner{
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 68px;
    padding: 10px 10px 10px 54px;
    border-radius: 18px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(148,163,184,.12);
}

.mp-marketplace-toolbar__icon{
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,.58);
    font-size: 16px;
}

.mp-marketplace-toolbar__search input{
    flex: 1 1 auto;
    height: 48px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 15px;
    box-shadow: none !important;
}

.mp-marketplace-toolbar__search input::placeholder{
    color: rgba(255,255,255,.45);
}

.mp-marketplace-toolbar__search button{
    flex: 0 0 auto;
    min-width: 150px;
    height: 48px;
    border-radius: 14px;
    font-weight: 700;
}

.mp-marketplace-toolbar__sort .nice-select{
    display: flex;
    align-items: center;
    float: none;
    width: 100%;
    height: 68px;
    line-height: 68px;
    padding: 0 52px 0 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(148,163,184,.12);
    color: #fff;
}

.mp-marketplace-toolbar__sort .nice-select .current{
    color: #fff;
    font-weight: 600;
}

.mp-marketplace-toolbar__sort .nice-select:after{
    right: 20px;
    width: 9px;
    height: 9px;
    border-bottom: 2px solid rgba(255,255,255,.7);
    border-right: 2px solid rgba(255,255,255,.7);
}

.mp-marketplace-toolbar__sort .nice-select .list{
    width: 100%;
    background: #0b1220;
    border: 1px solid rgba(148,163,184,.16);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(2,6,23,.35);
}

.mp-marketplace-toolbar__sort .nice-select .option{
    color: rgba(255,255,255,.78);
}

.mp-marketplace-toolbar__sort .nice-select .option:hover,
.mp-marketplace-toolbar__sort .nice-select .option.focus,
.mp-marketplace-toolbar__sort .nice-select .option.selected.focus{
    background: rgba(64,95,242,.18);
    color: #fff;
}

.mp-market-card{
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(15,23,42,.94) 0%, rgba(2,6,23,.98) 100%);
    border: 1px solid rgba(148,163,184,.12);
    transition: .28s ease;
    box-shadow: 0 18px 40px rgba(2,6,23,.22);
}

.mp-market-card:hover{
    transform: translateY(-6px);
    border-color: rgba(96,165,250,.28);
    box-shadow: 0 28px 60px rgba(2,6,23,.34);
}

.mp-market-card__badge{
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
}

.mp-market-card__badge span{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    box-shadow: 0 10px 25px rgba(0,0,0,.18);
}

.mp-badge--bestseller .mp-market-card__badge span{
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
}

.mp-badge--showcase .mp-market-card__badge span{
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
}

.mp-badge--featured .mp-market-card__badge span{
    background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
}

.mp-badge--new .mp-market-card__badge span{
    background: linear-gradient(135deg, #10b981 0%, #22c55e 100%);
}

.mp-badge--trending .mp-market-card__badge span{
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
}

.mp-badge--hotdeal .mp-market-card__badge span{
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
}

.mp-market-card__thumb{
    position: relative;
    display: block;
    height: 250px;
    overflow: hidden;
    background: rgba(255,255,255,.04);
}

.mp-market-card__thumb::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2,6,23,0) 0%, rgba(2,6,23,.18) 100%);
}

.mp-market-card__thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.mp-market-card:hover .mp-market-card__thumb img{
    transform: scale(1.06);
}

.mp-market-card__body{
    padding: 18px 18px 16px;
}

.mp-market-card__top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.mp-market-card__price{
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 12px;
    background: rgba(64,95,242,.14);
    border: 1px solid rgba(96,165,250,.18);
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
}

.mp-market-card__title{
    display: -webkit-box;
    min-height: 52px;
    margin: 0 0 10px;
    overflow: hidden;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.6;
    text-decoration: none;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mp-market-card__title:hover{
    color: #c7d2fe;
}

.mp-market-card__meta{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: rgba(255,255,255,.62);
    font-size: 13px;
    line-height: 1.6;
}

.mp-market-card__meta strong{
    color: #fff;
    font-weight: 700;
}

.mp-market-card__category{
    margin-bottom: 16px;
}

.mp-market-card__category a{
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(148,163,184,.12);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: .25s ease;
}

.mp-market-card__category a:hover{
    background: rgba(64,95,242,.14);
    border-color: rgba(96,165,250,.24);
    color: #fff;
}

.mp-market-card__footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid rgba(148,163,184,.10);
}

.mp-market-card__rating,
.mp-market-card__sales{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.70);
    font-size: 13px;
    font-weight: 700;
}

.mp-market-card__stars{
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.mp-market-card__stars i{
    color: #fbbf24;
    font-size: 12px;
}

.mp-market-card__sales i{
    color: #60a5fa;
}

.mp-market-sidebar{
    position: sticky;
    top: 120px;
}

.mp-market-sidebar .wsus__product_sidebar,
.mp-market-ad{
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(15,23,42,.92) 0%, rgba(2,6,23,.96) 100%);
    border: 1px solid rgba(148,163,184,.12);
    box-shadow: 0 18px 40px rgba(2,6,23,.22);
}

.mp-market-sidebar .wsus__product_sidebar{
    padding: 20px;
    margin-bottom: 20px;
}

.mp-market-sidebar .wsus__product_sidebar h3{
    margin-bottom: 16px;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
}

.mp-market-sidebar .wsus__product_sidebar ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.mp-market-sidebar .wsus__product_sidebar ul li + li{
    margin-top: 10px;
}

.mp-market-sidebar .wsus__product_sidebar ul li a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(148,163,184,.10);
    color: rgba(255,255,255,.72);
    text-decoration: none;
    transition: .25s ease;
}

.mp-market-sidebar .wsus__product_sidebar ul li a span,
.mp-market-sidebar .wsus__product_sidebar ul li a strong{
    color: inherit;
    font-size: 13px;
    font-weight: 700;
}

.mp-market-sidebar .wsus__product_sidebar ul li a.active,
.mp-market-sidebar .wsus__product_sidebar ul li a:hover{
    background: rgba(64,95,242,.16);
    border-color: rgba(96,165,250,.24);
    color: #fff;
}

.mp-market-sidebar .range_price_area{
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
}

.mp-market-sidebar .range_price_area p{
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    font-weight: 700;
}

.mp-market-sidebar .price-range-field{
    width: 62px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}

.mp-market-sidebar .common_btn{
    border-radius: 14px;
}

.mp-market-ad{
    padding: 0;
}

.mp-market-ad img{
    display: block;
    width: 100%;
    border-radius: 22px;
}

.mp-market-empty{
    padding: 70px 20px;
    text-align: center;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(15,23,42,.92) 0%, rgba(2,6,23,.96) 100%);
    border: 1px dashed rgba(148,163,184,.18);
}

.mp-market-empty h2{
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
}

.mp-market-pagination .pagination{
    justify-content: center;
    gap: 10px;
}

.mp-market-pagination .page-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    border-radius: 14px !important;
    background: rgba(15,23,42,.92);
    border: 1px solid rgba(148,163,184,.12);
    color: rgba(255,255,255,.78);
    font-weight: 700;
    box-shadow: none;
}

.mp-market-pagination .page-link:hover,
.mp-market-pagination .page-link.active{
    background: linear-gradient(135deg, var(--site-primary, #405ff2) 0%, #6d5efc 100%);
    border-color: transparent;
    color: #fff;
}

@media (max-width: 1199.98px){
    .mp-market-sidebar{
        position: static;
        top: auto;
    }

    .mp-market-card__thumb{
        height: 230px;
    }
}

@media (max-width: 767.98px){
    .mp-marketplace-toolbar{
        padding: 16px;
        border-radius: 18px;
    }

    .mp-marketplace-toolbar__search-inner{
        flex-wrap: wrap;
        padding: 12px 12px 12px 46px;
    }

    .mp-marketplace-toolbar__search button{
        width: 100%;
        min-width: 100%;
    }

    .mp-market-card{
        border-radius: 18px;
    }

    .mp-market-card__thumb{
        height: 210px;
    }

    .mp-market-card__body{
        padding: 16px;
    }

    .mp-market-sidebar .wsus__product_sidebar,
    .mp-market-ad,
    .mp-market-empty{
        border-radius: 18px;
    }
}


/* =========================================
   VALORANT WEAPONS PROFESSIONAL
========================================= */

.mp-weapons-page .mp-agents-hero{
    min-height: 220px;
    display:flex;
    align-items:flex-end;
    background:
        radial-gradient(circle at 85% 18%, rgba(64,95,242,.20), transparent 26%),
        radial-gradient(circle at 15% 12%, rgba(189,52,254,.16), transparent 20%),
        linear-gradient(180deg, rgba(8,13,30,.98), rgba(4,9,22,.98));
}

.mp-weapons-page .mp-agents-title{
    margin-bottom: 12px;
}

.mp-weapons-page .mp-agents-subtitle{
    max-width: 720px;
}

.mp-weapons-topbar{
    align-items:center;
}

.mp-weapon-card-pro{
    position:relative;
    min-height:100%;
    overflow:hidden;
    border-radius:24px;
    background:
        linear-gradient(180deg, rgba(10,16,34,.98), rgba(3,8,20,.98));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 48px rgba(0,0,0,.28);
}

.mp-weapon-card-pro__glow{
    position:absolute;
    top:-80px;
    right:-80px;
    width:220px;
    height:220px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(64,95,242,.20), transparent 68%);
    pointer-events:none;
}

.mp-weapon-card-pro__media{
    min-height:230px;
    padding:26px 18px 10px;
    background:
        radial-gradient(circle at 50% 20%, rgba(64,95,242,.14), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    border-bottom:1px solid rgba(255,255,255,.06);
}

.mp-weapon-card-pro__media img{
    width:100%;
    height:185px;
    object-fit:contain;
    filter:drop-shadow(0 16px 28px rgba(0,0,0,.36));
}

.mp-weapon-card-pro__body{
    padding:18px 18px 20px;
}

.mp-weapon-card-pro__tags{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}

.mp-weapon-card-pro__mini{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:6px 10px;
    border-radius:999px;
    color:rgba(255,255,255,.58);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
}

.mp-weapon-mini-stats--stack{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:14px;
    margin-bottom:18px;
}

.mp-weapon-mini-stats--stack .mp-weapon-mini-stats__item{
    min-height:52px;
}

.mp-weapon-detail-page-pro{
    padding-top:36px;
}

.mp-weapon-headline{
    display:flex;
    align-items:center;
    gap:22px;
    margin-bottom:20px;
}

.mp-weapon-headline__icon{
    width:72px;
    height:72px;
    flex:0 0 72px;
    border-radius:18px;
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    box-shadow:0 10px 26px rgba(0,0,0,.24);
}

.mp-weapon-headline__icon img{
    width:86%;
    height:86%;
    object-fit:contain;
}

.mp-weapon-headline__content h1{
    margin:0 0 8px;
    color:#fff;
    font-size:clamp(28px, 4vw, 44px);
    font-weight:900;
    line-height:1.08;
    letter-spacing:-.03em;
}

.mp-weapon-headline__content p{
    margin:0;
    color:rgba(255,255,255,.66);
    font-size:16px;
    line-height:1.7;
}

.mp-weapons-detail-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:16px;
}

.mp-weapons-detail-tabs a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:9px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.76);
    font-size:13px;
    font-weight:800;
    text-decoration:none !important;
    transition:all .22s ease;
}

.mp-weapons-detail-tabs a:hover,
.mp-weapons-detail-tabs a.active{
    color:#fff;
    border-color:rgba(189,52,254,.34);
    background:linear-gradient(135deg, rgba(64,95,242,.18), rgba(189,52,254,.20));
    box-shadow:0 10px 24px rgba(84,96,255,.18);
}

.mp-weapons-sub-tabs{
    display:grid;
    grid-template-columns:repeat(6, minmax(0,1fr));
    gap:10px;
    margin-bottom:24px;
}

.mp-weapons-sub-tabs__item{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:106px;
    padding:12px 10px;
    border-radius:16px;
    text-decoration:none !important;
    background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.07);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
    transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.mp-weapons-sub-tabs__item:hover,
.mp-weapons-sub-tabs__item.active{
    transform:translateY(-2px);
    border-color:rgba(96,165,250,.24);
    box-shadow:0 12px 26px rgba(0,0,0,.22);
}

.mp-weapons-sub-tabs__image{
    width:100%;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.mp-weapons-sub-tabs__image img{
    max-width:100%;
    max-height:40px;
    object-fit:contain;
}

.mp-weapons-sub-tabs__name{
    color:#fff;
    font-size:14px;
    font-weight:800;
    line-height:1.2;
    text-align:center;
}

.mp-weapon-showcase{
    position:relative;
    border-radius:28px;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(8,13,30,.98), rgba(3,8,20,.98));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 20px 60px rgba(0,0,0,.30);
}

.mp-weapon-showcase::before{
    content:'';
    position:absolute;
    right:-120px;
    top:-120px;
    width:260px;
    height:260px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(64,95,242,.22), transparent 70%);
    pointer-events:none;
}

.mp-weapon-showcase__hero{
    position:relative;
    z-index:2;
    padding:28px 28px 16px;
}

.mp-weapon-showcase__title{
    margin:0 0 8px;
    color:#fff;
    font-size:56px;
    font-weight:900;
    line-height:1;
    letter-spacing:-.04em;
}

.mp-weapon-showcase__desc{
    margin:0;
    color:rgba(255,255,255,.66);
    font-size:14px;
    line-height:1.8;
    max-width:620px;
}

.mp-weapon-showcase__stage{
    position:relative;
    z-index:2;
    margin:0 18px;
    border-radius:22px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.06);
    background:
        radial-gradient(circle at 50% 30%, rgba(64,95,242,.08), transparent 35%),
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}

.mp-weapon-showcase__video{
    width:100%;
    display:block;
    background:#02040c;
    aspect-ratio:16/9;
    object-fit:cover;
}

.mp-weapon-showcase__image-wrap{
    min-height:430px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
}

.mp-weapon-showcase__image{
    width:100%;
    max-width:640px;
    max-height:360px;
    object-fit:contain;
    filter:drop-shadow(0 22px 40px rgba(0,0,0,.34));
}

.mp-weapon-showcase__footer{
    position:relative;
    z-index:2;
    padding:18px 22px 22px;
}

.mp-weapon-mode-switches{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:26px;
    padding:8px 0 18px;
}

.mp-weapon-mode-switches__item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:rgba(255,255,255,.44);
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.mp-weapon-mode-switches__item.active{
    color:#fff;
}

.mp-weapon-mode-switches__icon{
    width:28px;
    height:38px;
    border-radius:14px;
    background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.34));
    position:relative;
    opacity:.86;
}

.mp-weapon-mode-switches__icon::after{
    content:'';
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:3px;
    height:38px;
    background:rgba(2,6,18,.26);
}

.mp-weapon-mode-switches__icon.alt{
    opacity:.48;
}

.mp-weapon-bottom-stats{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    padding:8px 6px 4px;
}

.mp-weapon-bottom-stats__block{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.mp-weapon-bottom-stats__block span{
    color:rgba(255,255,255,.44);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:700;
}

.mp-weapon-bottom-stats__block strong{
    color:#fff;
    font-size:36px;
    line-height:1;
    font-weight:900;
}

.mp-weapon-bottom-stats__block small{
    color:rgba(255,255,255,.66);
    font-size:14px;
    line-height:1.5;
}

.mp-weapon-bottom-stats__value{
    color:#fff;
    font-size:24px;
    font-weight:900;
    line-height:1.2;
    text-align:right;
}

.mp-weapon-side-panel{
    position:sticky;
    top:110px;
    border-radius:26px;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(11,16,34,.98), rgba(4,9,22,.98));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 48px rgba(0,0,0,.28);
}


.mp-weapon-side-panel__image{
    width:100%;
    height:110px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:10px;
}

.mp-weapon-side-panel__image img{
    max-width:86%;
    max-height:96px;
    object-fit:contain;
    filter:drop-shadow(0 14px 28px rgba(0,0,0,.34));
}

.mp-weapon-side-panel__top h3{
    margin:0;
    color:#fff;
    font-size:24px;
    font-weight:900;
}

.mp-weapon-side-panel__price{
    margin-top:8px;
    color:rgba(255,255,255,.74);
    font-size:28px;
    font-weight:900;
    line-height:1;
}

.mp-weapon-side-panel__damage{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:16px;
    padding:20px 20px 10px;
}

.mp-weapon-side-panel__damage-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mp-weapon-side-panel__damage-range{
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
}
.mp-weapon-side-panel__damage-body{
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    column-gap: 10px;
}

.mp-human-figure{
    width: 30px;
    min-width: 30px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mp-human-figure svg{
    width: 100%;
    height: 100%;
    display: block;
}

.mp-weapon-side-panel__damage-values{
    height: 96px;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    align-items: center;
}

.mp-weapon-side-panel__damage-values strong{
    display: flex;
    align-items: center;
    line-height: 1;
    margin: 0;
}

.mp-weapon-side-panel__stats{
    padding:6px 20px 20px;
}

.mp-weapon-side-panel__section{
    margin-bottom:18px;
}

.mp-weapon-side-panel__section h4{
    margin:0 0 10px;
    color:#fff;
    font-size:24px;
    font-weight:900;
}

.mp-weapon-stat-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:8px 0;
}

.mp-weapon-stat-row span{
    color:rgba(255,255,255,.58);
    font-size:14px;
    line-height:1.5;
}

.mp-weapon-stat-row strong{
    color:#fff;
    font-size:14px;
    line-height:1.5;
    text-align:right;
    font-weight:900;
    max-width:58%;
}

.mp-weapon-damage-box{
    height:100%;
    border-radius:20px;
    padding:18px;
    background:linear-gradient(180deg, rgba(9,15,31,.96), rgba(4,10,24,.98));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 16px 36px rgba(0,0,0,.24);
}

.mp-weapon-damage-box__range{
    color:#fff;
    font-size:20px;
    font-weight:900;
    line-height:1.2;
    margin-bottom:14px;
}

.mp-weapon-damage-box__rows{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.mp-weapon-damage-box__row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.mp-weapon-damage-box__row span{
    color:rgba(255,255,255,.58);
    font-size:14px;
}

.mp-weapon-damage-box__row strong{
    color:#fff;
    font-size:16px;
    font-weight:900;
}

.mp-weapon-gallery-card{
    padding:14px;
}

.mp-weapon-gallery-media{
    height:240px;
    background:
        radial-gradient(circle at 50% 25%, rgba(64,95,242,.12), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}

.mp-weapon-gallery-media img{
    padding:14px;
    object-fit:contain;
}



.mp-weapon-damage-box__rows{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:16px;
}

.mp-weapon-damage-box__figure{
    width:58px;
    min-width:58px;
    height:96px;
    flex:0 0 58px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.mp-weapon-damage-box__figure svg{
    width:100%;
    height:100%;
    display:block;
}

.mp-weapon-damage-box__stats{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    gap:10px;
    min-width:0;
}

.mp-weapon-damage-box__row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.mp-weapon-damage-box__row span{
    color:rgba(255,255,255,.62);
    font-size:13px;
    line-height:1.2;
}

.mp-weapon-damage-box__row strong{
    font-size:22px;
    line-height:1;
    font-weight:900;
    text-align:right;
}

@media (max-width: 575px){
    .mp-weapon-damage-box__rows{
        gap:12px;
    }

    .mp-weapon-damage-box__figure{
        width:46px;
        min-width:46px;
        height:76px;
        flex-basis:46px;
    }

    .mp-weapon-damage-box__row strong{
        font-size:18px;
    }
}

@media (max-width: 1399px){
    .mp-weapons-sub-tabs{
        grid-template-columns:repeat(4, minmax(0,1fr));
    }
}

@media (max-width: 1199px){
    .mp-weapon-showcase__title{
        font-size:48px;
    }

    .mp-weapon-side-panel{
        position:relative;
        top:0;
    }
}

@media (max-width: 991px){
    .mp-weapons-sub-tabs{
        grid-template-columns:repeat(3, minmax(0,1fr));
    }

    .mp-weapon-headline{
        align-items:flex-start;
    }

    .mp-weapon-showcase__title{
        font-size:42px;
    }

    .mp-weapon-showcase__image-wrap{
        min-height:300px;
    }

    .mp-weapon-bottom-stats{
        flex-direction:column;
        align-items:flex-start;
    }
}

@media (max-width: 767px){
    .mp-weapons-sub-tabs{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }

    .mp-weapon-headline{
        gap:16px;
    }

    .mp-weapon-headline__icon{
        width:58px;
        height:58px;
        flex-basis:58px;
    }

    .mp-weapon-headline__content h1{
        font-size:28px;
    }

    .mp-weapon-showcase__hero{
        padding:22px 18px 14px;
    }

    .mp-weapon-showcase__title{
        font-size:36px;
    }

    .mp-weapon-showcase__stage{
        margin:0 12px;
    }

    .mp-weapon-side-panel__damage{
        grid-template-columns:1fr 1fr;
        gap:10px;
        padding:16px 14px 8px;
    }

    .mp-weapon-side-panel__stats{
        padding:4px 14px 16px;
    }
}

@media (max-width: 575px){
    .mp-weapons-sub-tabs{
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .mp-weapons-sub-tabs__item{
        min-height:92px;
        padding:10px 8px;
    }

    .mp-weapons-sub-tabs__name{
        font-size:13px;
    }

    .mp-weapon-showcase{
        border-radius:22px;
    }

    .mp-weapon-showcase__title{
        font-size:30px;
    }

    .mp-weapon-showcase__desc{
        font-size:13px;
    }

    .mp-weapon-showcase__image-wrap{
        min-height:220px;
        padding:18px;
    }

    .mp-weapon-mode-switches{
        gap:18px;
    }

    .mp-weapon-bottom-stats__block strong{
        font-size:28px;
    }

    .mp-weapon-bottom-stats__value{
        font-size:20px;
    }

    .mp-weapon-side-panel__damage{
        grid-template-columns:1fr 1fr;
    }

    .mp-human-figure{
        width:34px;
    }

    .mp-weapon-side-panel__damage-values strong{
        font-size:14px;
    }

    .mp-weapon-gallery-media{
        height:200px;
    }
	

}

/* =========================================
   VALORANT WEAPONS PROFESSIONAL and
========================================= */

/* =========================================
   Weapon detail image fit fixes
========================================= */

/* Sağ panel üstteki weapon image */
.mp-weapon-side-panel__image{
    width: 100%;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8px 12px;
}

.mp-weapon-side-panel__image img{
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 114px;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* Weapon skins kart medya alanı */
.mp-weapon-gallery-media{
    height: 180px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 12px;
}

.mp-weapon-gallery-media img{
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 156px;
    object-fit: contain !important;
    object-position: center;
    display: block;
    padding: 0 !important;
}

/* Galeri kartı biraz daha dengeli dursun */
.mp-weapon-gallery-card{
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mp-gallery-label{
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Mobil */
@media (max-width: 575px){
    .mp-weapon-side-panel__image{
        height: 110px;
    }

    .mp-weapon-side-panel__image img{
        max-height: 94px;
    }

    .mp-weapon-gallery-media{
        height: 150px !important;
    }

    .mp-weapon-gallery-media img{
        max-height: 128px;
    }
}

/* ===== Weapon right panel exact fit fix ===== */
.mp-weapon-side-panel .mp-weapon-side-panel__top{
    padding: 16px 16px 14px !important;
}

.mp-weapon-side-panel .mp-weapon-side-panel__image{
    width: 100% !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
}

.mp-weapon-side-panel .mp-weapon-side-panel__image img{
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 96px !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
    filter: none !important;
}

/* Özellikle sniper gibi uzun silahlarda taşmayı engelle */
.mp-weapon-side-panel .mp-weapon-side-panel__top img{
    width: 100% !important;
    height: 96px !important;
    max-height: 96px !important;
    object-fit: contain !important;
}


/* Top weapon tabs image fix */
.mp-weapons-sub-tabs__item{
    min-height: 86px !important;
    padding: 10px 10px 12px !important;
    overflow: hidden;
}

.mp-weapons-sub-tabs__image{
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
}

.mp-weapons-sub-tabs__image img{
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 34px !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
    filter: none !important;
}

.mp-weapons-sub-tabs__name{
    font-size: 13px !important;
    line-height: 1.15 !important;
}