.slider-container {
    position: relative;
    width: 100%;
    max-width: var(--home-slider-width, 100%);
    height: var(--home-slider-height, 520px);
    min-height: 520px;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.03);
    background: #060504;
}

.slider-slide,
.slider-slide.active {
    filter: none;
}

.slider-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.slider-wrapper-mobile {
    display: none;
}

.slider-slide {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    background-position: center center;
    background-size: cover;
    transition: opacity .8s ease, visibility .8s ease;
}

.slider-slide.active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
}

.slider-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: transparent;
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    transition: background .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease;
}

.slider-slide-database::after {
    background: transparent;
}

.slider-slide-database.slider-slide-has-copy::after {
    background: transparent;
}

.slider-slide:hover::after {
    background: rgba(5,6,10,.06);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.slider-click-layer {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
}

.slider-content {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.slider-info {
    max-width: var(--slider-text-width, 610px);
    padding-left: 24px;
    transform: translate3d(var(--slider-text-x, 0), var(--slider-text-y, 0), 0);
}

.slider-copy-center .slider-content { justify-content: center; }
.slider-copy-center .slider-info {
    max-width: var(--slider-text-width, 760px);
    padding-left: 0;
    text-align: center;
}
.slider-copy-center .slider-actions { justify-content: center; }
.slider-copy-right .slider-content { justify-content: flex-end; }
.slider-copy-right .slider-info {
    padding-right: 24px;
    padding-left: 0;
    text-align: right;
}
.slider-copy-right .slider-actions { justify-content: flex-end; }
.slider-copy-top .slider-content {
    align-items: flex-start;
    padding-top: 38px;
    padding-bottom: 38px;
}
.slider-copy-middle .slider-content { align-items: center; }
.slider-copy-bottom .slider-content {
    align-items: flex-end;
    padding-top: 38px;
    padding-bottom: 38px;
}

.slider-crown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    padding: 6px 14px;
    border: 1px solid rgba(197,160,89,.25);
    border-radius: 20px;
    background: rgba(197,160,89,.1);
    color: #c5a059;
    font: 700 10px 'Oxanium', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.slider-title {
    margin-bottom: 14px;
    color: #fff;
    font: 800 38px/1.15 'Oxanium', sans-serif;
    letter-spacing: -1px;
    text-transform: uppercase;
    text-shadow: 0 4px 18px rgba(0,0,0,.65);
}

.slider-title span { color: var(--primary-color); }
.slider-title .slider-title-highlight { display: block; }

.slider-desc {
    max-width: 570px;
    margin-bottom: 23px;
    color: #aab1bd;
    font-size: 13px;
    line-height: 1.75;
}

.slider-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.slider-actions .btn {
    position: relative;
    z-index: 6;
    padding: 10px 24px;
    font: 800 12px 'Oxanium', sans-serif;
}

.home-notice-ticker {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: stretch;
    min-height: 44px;
    overflow: hidden;
    border-bottom: 1px solid rgba(197,160,89,.18);
    background: linear-gradient(90deg, #090807, #0d0d0f 50%, #090807);
    color: #cbd5e1;
    font: 600 12px 'Oxanium', sans-serif;
}

.home-notice-heading {
    position: relative;
    z-index: 3;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 0 22px;
    border-right: 1px solid rgba(197,160,89,.25);
    background: #0d0b08;
    color: #e1b85e;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    box-shadow: 14px 0 28px rgba(0,0,0,.45);
}

.home-notice-viewport {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.home-notice-track {
    display: flex;
    width: max-content;
    min-width: max-content;
    animation: home-notice-scroll var(--notice-duration, 28s) linear infinite;
    will-change: transform;
}

.home-notice-ticker:hover .home-notice-track {
    animation-play-state: paused;
}

.home-notice-group {
    display: flex;
    align-items: center;
    gap: 40px;
    padding-right: 40px;
}

.home-notice-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.home-notice-item::after {
    content: '';
    width: 4px;
    height: 4px;
    margin-left: 30px;
    border-radius: 50%;
    background: rgba(197,160,89,.5);
    box-shadow: 0 0 8px rgba(197,160,89,.45);
}

.home-notice-item a,
.home-notice-item > span:last-child {
    color: #d6d9df;
    text-decoration: none;
}

.home-notice-item a:hover {
    color: #fff;
}

.home-notice-badge {
    padding: 4px 8px;
    border: 1px solid rgba(83,170,255,.28);
    border-radius: 4px;
    background: rgba(50,130,220,.12);
    color: #69b6ff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .55px;
    text-transform: uppercase;
}

.home-notice-badge.notice-onemli {
    border-color: rgba(255,76,76,.32);
    background: rgba(190,37,37,.14);
    color: #ff6666;
}

.home-notice-badge.notice-bilgi {
    border-color: rgba(197,160,89,.3);
    background: rgba(197,160,89,.12);
    color: #e1b85e;
}

@keyframes home-notice-scroll {
    from { transform: translate3d(0,0,0); }
    to { transform: translate3d(-50%,0,0); }
}

.home-hero-split-section {
    position: relative;
    z-index: 18;
    padding: 18px 0;
    border-bottom: 1px solid rgba(197,160,89,.12);
    background:
        radial-gradient(circle at 74% 12%, rgba(197,160,89,.08), transparent 32%),
        linear-gradient(180deg, rgba(5,5,5,.98), rgba(3,4,6,.99));
}

.container.home-hero-split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(300px, 3fr);
    gap: 18px;
    align-items: stretch;
    width: 100%;
    max-width: none;
    min-height: var(--hero-slider-height, 520px);
    margin-right: 0;
    margin-left: 0;
    padding-right: 24px;
    padding-left: 24px;
}

.container.home-hero-split.no-countdown {
    grid-template-columns: 1fr;
}

.home-hero-split .slider-container {
    order: 1;
    max-width: none;
    height: var(--hero-slider-height, 520px);
    min-height: 0;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 16px;
    box-shadow: 0 22px 60px rgba(0,0,0,.34);
}

.home-hero-split .slider-content {
    max-width: 100%;
}

.home-countdown-section {
    position: relative;
    z-index: 19;
    display: flex;
    justify-content: center;
    order: 2;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.home-countdown-card {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 190px;
    overflow: hidden;
    border: 1px solid rgba(232,184,89,.32);
    border-radius: 16px;
    background-color: #080909;
    background-position: center center;
    background-size: cover;
    color: #fff;
    text-align: center;
    text-decoration: none;
    box-shadow:
        0 20px 52px rgba(0,0,0,.42),
        inset 0 0 0 1px rgba(255,255,255,.025);
    animation:
        home-countdown-bg-drift 18s ease-in-out infinite alternate,
        home-countdown-card-aura 5.4s ease-in-out infinite;
    will-change: background-position, box-shadow;
}

.home-countdown-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 22%, rgba(255,237,185,.2), transparent 38%),
        radial-gradient(circle at 18% 82%, rgba(255,190,63,.14), transparent 34%),
        radial-gradient(circle at 84% 18%, rgba(151,82,255,.14), transparent 32%),
        linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.18) 48%, rgba(0,0,0,.5));
    opacity: .96;
    animation: home-countdown-light-drift 7.8s ease-in-out infinite alternate;
    will-change: opacity, transform;
}

.home-countdown-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .24;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(110deg, transparent 0%, transparent 38%, rgba(255,218,132,.22) 49%, transparent 60%, transparent 100%);
    background-position: 0 0, -130% 0;
    background-size: 100% 4px, 230% 100%;
    mix-blend-mode: screen;
    animation: home-countdown-overlay-flow 6.8s linear infinite;
    will-change: background-position, opacity;
}

.home-countdown-card:hover {
    color: #fff;
    border-color: rgba(255,218,132,.58);
    box-shadow:
        0 24px 62px rgba(0,0,0,.5),
        0 0 28px rgba(197,160,89,.14),
        inset 0 0 0 1px rgba(255,255,255,.035);
}

.home-countdown-inner {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 12px;
    width: min(92%, 420px);
    padding: 18px;
    isolation: isolate;
}

.home-countdown-inner::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 10% 4%;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 45%, rgba(255,205,104,.32), transparent 58%),
        radial-gradient(circle at 50% 55%, rgba(125,48,255,.16), transparent 68%);
    filter: blur(20px);
    opacity: .48;
    transform: scale(.94);
    animation: home-countdown-core-pulse 3.9s ease-in-out infinite;
    will-change: opacity, transform;
}

.home-countdown-title {
    color: #e8bf68;
    font: 950 clamp(32px, 3.2vw, 52px)/.95 'Oxanium', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 4px 18px rgba(0,0,0,.5);
}

.home-countdown-subtitle {
    display: grid;
    grid-template-columns: minmax(34px, 1fr) auto minmax(34px, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    color: rgba(255,255,255,.88);
    font: 900 9px 'Oxanium', sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.home-countdown-subtitle i {
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,184,89,.58));
}

.home-countdown-subtitle i:last-child {
    transform: scaleX(-1);
}

.home-countdown-units {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}

.home-countdown-units span {
    display: grid;
    gap: 8px;
}

.home-countdown-units b {
    color: #fffef0;
    font: 950 clamp(25px, 2.6vw, 42px)/.9 'Oxanium', sans-serif;
    letter-spacing: 1px;
    text-shadow: 0 5px 18px rgba(0,0,0,.55);
}

.home-countdown-units small,
.home-countdown-date-label {
    color: rgba(255,255,255,.66);
    font: 900 10px 'Oxanium', sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.home-countdown-date-label {
    margin-top: 2px;
    font-style: normal;
}

.home-countdown-date {
    color: #fff8df;
    font: 950 clamp(20px, 2.2vw, 31px)/1 'Oxanium', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 5px 16px rgba(0,0,0,.55);
}

.home-countdown-card.is-finished .home-countdown-subtitle {
    color: #86efac;
}

@keyframes home-countdown-bg-drift {
    0% { background-position: 48% 48%; }
    50% { background-position: 54% 50%; }
    100% { background-position: 46% 54%; }
}

@keyframes home-countdown-card-aura {
    0%, 100% {
        border-color: rgba(232,184,89,.3);
        box-shadow:
            0 20px 52px rgba(0,0,0,.42),
            0 0 0 rgba(232,184,89,0),
            inset 0 0 0 1px rgba(255,255,255,.025);
    }
    50% {
        border-color: rgba(255,218,132,.52);
        box-shadow:
            0 24px 62px rgba(0,0,0,.48),
            0 0 34px rgba(232,184,89,.14),
            inset 0 0 22px rgba(232,184,89,.045);
    }
}

@keyframes home-countdown-light-drift {
    0% {
        opacity: .86;
        transform: translate3d(-1.4%, -1%, 0) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translate3d(1.4%, 1%, 0) scale(1.06);
    }
}

@keyframes home-countdown-overlay-flow {
    0% {
        opacity: .18;
        background-position: 0 0, -130% 0;
    }
    45% {
        opacity: .34;
    }
    100% {
        opacity: .22;
        background-position: 0 32px, 130% 0;
    }
}

@keyframes home-countdown-core-pulse {
    0%, 100% {
        opacity: .34;
        transform: scale(.92);
    }
    50% {
        opacity: .58;
        transform: scale(1.04);
    }
}

@media (max-width: 980px) {
    .home-hero-split-section {
        padding: 14px 0;
    }

    .container.home-hero-split {
        grid-template-columns: 1fr;
        gap: 14px;
        min-height: 0;
        padding-right: 16px;
        padding-left: 16px;
    }

    .home-hero-split .slider-container {
        height: var(--hero-slider-mobile-height, 470px);
    }

    .home-countdown-section {
        min-height: 0;
    }

    .home-countdown-card {
        width: 100%;
        height: min(var(--countdown-height, 300px), 300px);
    }
}

@media (max-width: 760px) {
    .container.home-hero-split {
        padding-right: 12px;
        padding-left: 12px;
    }

    .home-countdown-section {
        padding: 0;
    }

    .home-countdown-card {
        width: 100%;
        height: clamp(220px, 68vw, 300px);
        border-radius: 13px;
    }

    .home-countdown-inner {
        gap: 9px;
        width: min(94%, 520px);
        padding: 14px;
    }

    .home-countdown-subtitle {
        gap: 8px;
        font-size: 9px;
        letter-spacing: 2.8px;
    }

    .home-countdown-units {
        gap: 9px;
    }

    .home-countdown-units small,
    .home-countdown-date-label {
        font-size: 8px;
        letter-spacing: 1.8px;
    }
}

@media (max-width: 430px) {
    .home-countdown-card {
        height: 232px;
    }

    .home-countdown-title {
        font-size: 31px;
        letter-spacing: 1px;
    }

    .home-countdown-units b {
        font-size: 27px;
    }

    .home-countdown-date {
        font-size: 21px;
    }
}

.vertical-social-bar {
    position: fixed !important;
    top: 50%;
    left: 20px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform: translateY(-50%);
    will-change: transform;
}

.v-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 6px;
    background: rgba(13,12,10,.8);
    color: #94a3b8;
    box-shadow: 0 4px 10px rgba(0,0,0,.3);
    transition: all .3s cubic-bezier(.175,.885,.32,1.275);
}

.v-social-link:hover {
    border-color: var(--color);
    background: var(--color);
    color: #fff;
    box-shadow: 0 0 15px var(--glow);
    transform: translateX(5px) scale(1.05);
}

.home-stage {
    position: relative;
    padding: 34px 0 72px;
    background:
        radial-gradient(circle at 38% 20%, rgba(197, 160, 89, .07), transparent 34%),
        radial-gradient(circle at 8% 76%, rgba(67, 111, 92, .08), transparent 27%),
        linear-gradient(180deg, rgba(4, 4, 4, .96), rgba(7, 9, 10, .98));
}

.home-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .18;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 100% 4px;
}

.container.home-container {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    padding-right: 24px;
    padding-left: 24px;
}

.home-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
}

.home-main-column {
    min-width: 0;
}

.home-promo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 58px;
}

.home-promo-card {
    position: relative;
    display: block;
    min-height: var(--home-promo-height, 200px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background-position: center;
    background-size: cover;
    box-shadow: 0 16px 34px rgba(0,0,0,.34);
    isolation: isolate;
}

.home-promo-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(3,3,3,.08) 25%, rgba(3,3,3,.94) 100%);
}

.home-promo-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow: inset 0 -55px 70px rgba(0,0,0,.65);
    transition: box-shadow .25s ease;
}

.home-promo-card:hover {
    transform: translateY(-4px);
    border-color: rgba(197,160,89,.45);
    box-shadow: 0 20px 42px rgba(0,0,0,.44), 0 0 18px rgba(197,160,89,.08);
}

.home-promo-card:hover::after {
    box-shadow: inset 0 -55px 70px rgba(0,0,0,.5);
}

.home-promo-content {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 18px;
}

.home-promo-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    color: var(--primary-color);
    font: 800 9px 'Oxanium', sans-serif;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.home-promo-title {
    display: block;
    color: #fff;
    font: 800 14px/1.35 'Oxanium', sans-serif;
    text-shadow: 0 2px 9px #000;
}

.home-promo-description {
    display: block;
    margin-top: 7px;
    color: #c3c8d2;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    text-shadow: 0 2px 8px #000;
}

.home-rankings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.home-panel {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(24,23,21,.94), rgba(8,9,9,.96));
    box-shadow: 0 18px 42px rgba(0,0,0,.28);
}

.home-panel-header {
    position: static;
    top: auto;
    z-index: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 58px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.015);
}

.home-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #f3ead8;
    font: 800 12px 'Oxanium', sans-serif;
    text-transform: uppercase;
}

.home-panel-title i {
    color: var(--primary-color);
}

.home-panel-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #777;
    font: 800 9px 'Oxanium', sans-serif;
    text-transform: uppercase;
}

.home-panel-link i {
    color: #e11d2e;
}

.home-panel-link:hover {
    color: var(--primary-color);
}

.home-rank-list {
    padding: 6px 20px 10px;
}

.home-rank-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 51px;
    border-bottom: 1px solid rgba(255,255,255,.035);
}

.home-rank-row:last-child {
    border-bottom: 0;
}

.home-rank-row:hover {
    background: rgba(255,255,255,.018);
}

.home-rank-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 6px;
    background: rgba(255,255,255,.055);
    color: #a4a8ad;
    font: 800 11px 'Oxanium', sans-serif;
}

.home-rank-number.rank-1 {
    border-color: #f7d000;
    background: linear-gradient(135deg, #ffe100, #b78300);
    color: #191200;
    box-shadow: 0 0 15px rgba(255,215,0,.3);
}

.home-rank-number.rank-2 {
    border-color: #dce2ea;
    background: linear-gradient(135deg, #f7f9fb, #818995);
    color: #111827;
}

.home-rank-number.rank-3 {
    border-color: #de7a24;
    background: linear-gradient(135deg, #f39a4d, #8b3e08);
    color: #fff;
}

.home-rank-identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
}

.home-nation-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.home-nation-icon img {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
    image-rendering: pixelated;
}

.home-rank-name {
    overflow: hidden;
    color: #f2f2f2;
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-rank-name:hover { color: var(--primary-color); }

.home-rank-points {
    color: #e7bd69;
    font: 800 12px 'Oxanium', sans-serif;
    white-space: nowrap;
}

.home-clan-points { color: #7fa9e8; }

.home-empty-row {
    padding: 44px 16px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

.home-ranking-table-panel {
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(31, 34, 40, .96), rgba(17, 19, 24, .97)),
        radial-gradient(circle at 50% 0, rgba(197, 160, 89, .09), transparent 42%);
    border-color: rgba(255, 255, 255, .055);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .34);
}

.home-ranking-table-head {
    position: relative;
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 86px 0 86px;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
    background:
        linear-gradient(90deg, rgba(21, 24, 29, .96), rgba(34, 38, 45, .96), rgba(21, 24, 29, .96));
    overflow: hidden;
}

.home-ranking-table-head::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 230px;
    height: 100%;
    transform: translateX(-50%);
    background:
        linear-gradient(135deg, transparent 0 13%, rgba(15, 25, 39, .98) 13% 87%, transparent 87%),
        linear-gradient(90deg, transparent, rgba(255, 92, 26, .6) 16%, transparent 18% 82%, rgba(255, 92, 26, .6) 84%, transparent);
    clip-path: polygon(14% 0, 86% 0, 100% 50%, 86% 100%, 14% 100%, 0 50%);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
}

.home-ranking-title {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    margin: 0;
    transform: translate(-50%, -50%);
    color: #fff8e8;
    font: 900 15px/1.1 'Oxanium', sans-serif;
    letter-spacing: .7px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .85);
}

.home-ranking-table-head .home-panel-link {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
}

.home-ranking-table-wrap {
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(197, 160, 89, .4) rgba(255, 255, 255, .04);
}

.home-ranking-table {
    width: 100%;
    min-width: 0;
}

.home-clan-ranking-table {
    width: 100%;
    min-width: 0;
}

.home-ranking-thead,
.home-ranking-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 82px 96px;
    align-items: center;
}

.home-clan-ranking-table .home-ranking-thead,
.home-clan-ranking-table .home-ranking-row {
    grid-template-columns: 42px minmax(0, 1fr) 86px 104px;
}

.home-clan-ranking-table .home-ranking-row.has-clan-custom-image {
    min-height: 60px;
}

.home-ranking-thead {
    min-height: 45px;
    background: rgba(34, 37, 43, .96);
    color: #f4f7fb;
    font: 900 11px 'Oxanium', sans-serif;
}

.home-ranking-thead span {
    padding: 0 8px;
    text-align: center;
}

.home-ranking-thead span:nth-child(2) {
    text-align: left;
}

.home-ranking-row {
    min-height: 45px;
    background: rgba(24, 27, 33, .96);
    border-bottom: 1px solid rgba(255, 255, 255, .035);
    color: #fff;
    font: 700 12px 'Outfit', sans-serif;
    transition: background .18s ease, box-shadow .18s ease;
}

.home-ranking-row:nth-child(odd) {
    background: rgba(21, 24, 30, .96);
}

.home-ranking-row:hover {
    background: rgba(32, 36, 44, .98);
    box-shadow: inset 3px 0 0 rgba(197, 160, 89, .65);
}

.home-ranking-row > span,
.home-ranking-row > strong {
    min-width: 0;
    padding: 0 8px;
}

.home-rank-index {
    color: #fff;
    font: 800 12px 'Oxanium', sans-serif;
    text-align: center;
}

.home-ranking-identity {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 7px;
}

.home-clan-custom-image {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    overflow: hidden;
    border: 1px solid rgba(255, 213, 0, .38);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255, 213, 0, .13), rgba(255, 255, 255, .035)),
        rgba(0, 0, 0, .35);
    box-shadow: 0 0 18px rgba(255, 213, 0, .12), inset 0 0 0 1px rgba(255, 255, 255, .045);
}

.home-clan-custom-image img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: cover;
}

.home-ranking-name {
    min-width: 0;
    overflow: hidden;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-ranking-name-human {
    color: #ff3048;
}

.home-ranking-name-karus {
    color: #00d7ee;
}

.home-ranking-name:hover {
    color: var(--primary-color);
}

.home-ranking-level,
.home-ranking-members {
    color: #f7f9ff;
    text-align: center;
    white-space: nowrap;
}

.home-ranking-score {
    color: #f2f7ff;
    font: 900 12px 'Oxanium', sans-serif;
    text-align: right;
    white-space: nowrap;
    text-shadow: 0 0 10px rgba(78, 170, 255, .16);
}

.home-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.home-side-panel {
    padding: 18px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    background: rgba(8,9,9,.94);
    box-shadow: 0 18px 42px rgba(0,0,0,.28);
}

.home-side-heading {
    position: relative;
    margin: 0 0 16px;
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    color: #e8dfcf;
    font: 800 11px 'Oxanium', sans-serif;
    letter-spacing: .5px;
    text-align: center;
    text-transform: uppercase;
}

.home-side-heading::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 12px;
    margin-right: 9px;
    border-radius: 3px;
    background: var(--primary-color);
    vertical-align: -2px;
}

.home-side-heading::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 48px;
    height: 2px;
    transform: translateX(-50%);
    background: #e11d2e;
}

.home-faction-labels {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
    font: 800 10px 'Oxanium', sans-serif;
    text-transform: uppercase;
}

.home-faction-labels span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.home-faction-labels img {
    display: block;
    width: 16px;
    height: 16px;
    object-fit: contain;
    image-rendering: pixelated;
}

.home-faction-human { color: #75a7eb; }
.home-faction-karus { color: #eb7373; }

.home-faction-bar {
    display: flex;
    height: 6px;
    margin-bottom: 14px;
    overflow: hidden;
    border-radius: 8px;
    background: #161718;
}

.home-faction-bar span {
    display: block;
    min-width: 2px;
    transition: width .4s ease;
}

.home-faction-human-bar { background: linear-gradient(90deg, #3067bd, #5d99f2); }
.home-faction-karus-bar { background: linear-gradient(90deg, #d84949, #ef7777); }

.home-online-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
}

.home-online-box span {
    color: #7d8289;
    font: 800 10px 'Oxanium', sans-serif;
    text-transform: uppercase;
}

.home-online-box strong {
    color: #38ef91;
    font: 800 19px 'Oxanium', sans-serif;
    letter-spacing: 1px;
}

.home-kings-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 19px 0 10px;
    color: #696969;
    font: 800 9px 'Oxanium', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.home-kings-title::before,
.home-kings-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(197,160,89,.23));
}

.home-kings-title::after { transform: scaleX(-1); }
.home-kings-title i { color: var(--primary-color); }

.home-kings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.home-king-card {
    min-width: 0;
    padding: 14px 9px;
    border: 1px solid rgba(197,160,89,.19);
    border-radius: 8px;
    background: rgba(197,160,89,.035);
    text-align: center;
}

.home-king-nation-icon {
    display: block;
    width: 26px;
    height: 26px;
    margin-bottom: 9px;
    margin-right: auto;
    margin-left: auto;
    object-fit: contain;
    image-rendering: pixelated;
}

.home-king-card small {
    display: block;
    margin-bottom: 5px;
    color: #777;
    font: 800 9px 'Oxanium', sans-serif;
    text-transform: uppercase;
}

.home-king-card strong {
    display: block;
    overflow: hidden;
    color: #e4b85f;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-event-panel {
    padding: 16px;
}

.home-event-visual {
    position: relative;
    min-height: 187px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;
    background-position: center;
    background-size: cover;
}

.home-event-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.88));
}

.home-event-info {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    padding: 16px;
}

.home-event-info strong {
    display: block;
    margin-bottom: 4px;
    color: #fff;
    font: 800 16px 'Oxanium', sans-serif;
    text-transform: uppercase;
}

.home-event-info span {
    color: #3cf08d;
    font: 800 10px 'Oxanium', sans-serif;
    text-transform: uppercase;
}

.home-features-section {
    position: relative;
    overflow: hidden;
    padding: 58px 0 62px;
    border-top: 1px solid rgba(197,160,89,.13);
    border-bottom: 1px solid rgba(255,255,255,.04);
    background:
        linear-gradient(90deg, rgba(7,8,9,.95) 0%, rgba(7,8,9,.82) 48%, rgba(7,8,9,.91) 100%),
        url('../../Public/Web/img/bg/third_about_bg.jpg') center 42% / cover no-repeat;
}

.home-features-top-section {
    border-top: 1px solid rgba(197,160,89,.16);
    border-bottom: 1px solid rgba(255,255,255,.035);
}

.home-stage + .home-features-section {
    padding-top: 46px;
}

.home-stage + .home-features-section .home-features-container {
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: stretch;
}

.home-stage + .home-features-section .home-features-intro,
.home-stage + .home-features-section .home-features-grid {
    display: none;
}

.home-features-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0,0,0,.18), transparent 24%, transparent 76%, rgba(0,0,0,.34)),
        radial-gradient(circle at 50% 50%, rgba(197,160,89,.045), transparent 55%);
}

.home-features-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(320px, .92fr) minmax(0, 1.65fr);
    gap: 54px;
    align-items: center;
    max-width: 1424px;
}

.container.home-features-container {
    max-width: 1500px;
    padding-right: 24px;
    padding-left: 24px;
}

.home-features-intro {
    padding-left: 52px;
}

.home-features-intro h2 {
    position: relative;
    max-width: 440px;
    margin: 0 0 18px;
    color: #efe4ce;
    font: 800 25px/1.45 'Oxanium', sans-serif;
    letter-spacing: -.5px;
}

.home-features-intro h2::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: -20px;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, #f0bd58, #a56c17);
    box-shadow: 0 0 12px rgba(240,189,88,.25);
}

.home-features-intro h2 span {
    color: var(--primary-color);
}

.home-features-intro p {
    max-width: 480px;
    margin: 0;
    color: #969ca5;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.75;
}

.home-features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.home-feature-card {
    min-height: 294px;
    padding: 23px 22px;
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(17,20,23,.86), rgba(9,11,13,.72));
    box-shadow: inset 0 1px rgba(255,255,255,.018), 0 16px 34px rgba(0,0,0,.2);
    backdrop-filter: blur(3px);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.home-feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(197,160,89,.3);
    box-shadow: inset 0 1px rgba(255,255,255,.025), 0 20px 40px rgba(0,0,0,.32), 0 0 18px rgba(197,160,89,.04);
}

.home-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    margin-bottom: 17px;
    border: 1px solid rgba(197,160,89,.34);
    border-radius: 10px;
    background: rgba(197,160,89,.11);
    color: #e6b95f;
    font-size: 17px;
    box-shadow: inset 0 0 14px rgba(197,160,89,.035);
}

.home-feature-card h3 {
    margin: 0 0 16px;
    color: #e7bd69;
    font: 800 14px 'Oxanium', sans-serif;
}

.home-feature-card ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-feature-card li {
    position: relative;
    padding-left: 18px;
    color: #969ca5;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
}

.home-feature-card li::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b9852c;
    box-shadow: 0 0 8px rgba(185,133,44,.48);
}

.home-seo-article {
    position: relative;
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    margin: 8px 0 4px;
    padding: 32px 44px;
    overflow: hidden;
    border: 1px solid rgba(197,160,89,.2);
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 0, rgba(197,160,89,.09), transparent 42%),
        linear-gradient(145deg, rgba(16,17,18,.88), rgba(7,9,10,.8));
    box-shadow: inset 0 1px rgba(255,255,255,.02), 0 18px 42px rgba(0,0,0,.22);
    text-align: center;
}

.home-seo-article::before,
.home-seo-article::after {
    content: '';
    position: absolute;
    top: 0;
    width: 34%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(220,174,78,.8));
}

.home-seo-article::before { left: 16%; }
.home-seo-article::after { right: 16%; transform: scaleX(-1); }

.home-seo-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    color: var(--primary-color);
    font: 800 9px 'Oxanium', sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.home-seo-article h1,
.home-seo-article h2 {
    max-width: 900px;
    margin: 0 auto 14px;
    color: #f4ead7;
    font: 800 25px/1.4 'Oxanium', sans-serif;
    letter-spacing: -.55px;
}

.home-seo-article-secondary {
    background:
        radial-gradient(circle at 50% 100%, rgba(96,118,162,.09), transparent 45%),
        linear-gradient(145deg, rgba(12,15,18,.9), rgba(7,9,10,.82));
}

.home-seo-article-secondary::before,
.home-seo-article-secondary::after {
    background: linear-gradient(90deg, transparent, rgba(122,154,207,.64));
}

.home-seo-article-secondary .home-seo-kicker {
    color: #8fb1e4;
}

.home-seo-article-secondary .home-seo-keywords span {
    border-color: rgba(122,154,207,.2);
    background: rgba(122,154,207,.055);
    color: #9bb4d8;
}

.home-seo-lead {
    max-width: 850px;
    margin: 0 auto 10px;
    color: #c6cbd3;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.75;
}

.home-seo-copy {
    max-width: 940px;
    margin: 0 auto;
    color: #8f96a1;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.75;
}

.home-seo-keywords {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.home-seo-keywords span {
    padding: 5px 10px;
    border: 1px solid rgba(197,160,89,.18);
    border-radius: 20px;
    background: rgba(197,160,89,.055);
    color: #b9a276;
    font: 700 9px 'Oxanium', sans-serif;
    text-transform: uppercase;
}

.home-community-cta {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 8px;
    padding: 25px 30px;
    border: 1px solid rgba(99,102,241,.48);
    border-radius: 13px;
    background:
        linear-gradient(90deg, rgba(67,72,176,.2), rgba(13,15,19,.82) 56%),
        rgba(10,12,16,.76);
    box-shadow: inset 0 1px rgba(255,255,255,.025), 0 16px 35px rgba(0,0,0,.22);
    backdrop-filter: blur(4px);
}

.home-community-copy {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.home-community-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border: 1px solid rgba(114,137,218,.35);
    border-radius: 11px;
    background: rgba(88,101,242,.14);
    color: #8e9cff;
    font-size: 21px;
}

.home-community-copy h3 {
    margin: 0 0 6px;
    color: #f2f3ff;
    font: 800 18px 'Oxanium', sans-serif;
}

.home-community-copy p {
    margin: 0;
    color: #969ca8;
    font-size: 13px;
    font-weight: 600;
}

.home-community-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 205px;
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid #727df2;
    border-radius: 8px;
    background: linear-gradient(135deg, #6674f4, #5865f2);
    color: #fff;
    font: 900 12px 'Oxanium', sans-serif;
    text-transform: uppercase;
    box-shadow: 0 9px 24px rgba(88,101,242,.22);
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.home-community-button:hover {
    transform: translateY(-2px);
    color: #fff;
    filter: brightness(1.08);
    box-shadow: 0 13px 30px rgba(88,101,242,.34);
}

@media (max-width: 1180px) {
    .home-dashboard-grid { grid-template-columns: 1fr; }
    .home-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-features-container { grid-template-columns: 1fr; gap: 34px; }
    .home-features-intro { max-width: 760px; padding-left: 28px; }
}

@media (max-width: 820px) {
    .home-notice-heading { padding: 0 14px; }
    .slider-container { height: var(--home-slider-mobile-height, 470px); }
    .slider-info { max-width: 100%; padding: 0 48px; }
    .slider-title { font-size: 28px; }
    .slider-desc { font-size: 12px; }
    .vertical-social-bar { left: 8px; }
    .home-stage { padding-top: 22px; }
    .home-promo-grid { grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; }
    .home-promo-card { min-height: var(--home-promo-height, 180px); }
    .home-rankings-grid,
    .home-sidebar { grid-template-columns: 1fr; }
    .home-features-section { padding: 44px 0 48px; }
    .home-features-grid { grid-template-columns: 1fr; gap: 14px; }
    .home-feature-card { min-height: 0; }
    .home-seo-article { padding: 27px 24px; }
    .home-seo-article h1,
    .home-seo-article h2 { font-size: 21px; }
    .home-community-cta {
        align-items: stretch;
        flex-direction: column;
        gap: 20px;
    }
    .home-community-button { align-self: flex-start; }
}

@media (max-width: 520px) {
    .home-notice-heading { font-size: 0; }
    .home-notice-heading i { font-size: 13px; }
    .home-notice-group { gap: 26px; padding-right: 26px; }
    .home-notice-item::after { margin-left: 16px; }
    .slider-container { height: var(--home-slider-mobile-height, 470px); }
    .slider-info { padding: 0 20px 0 54px; }
    .slider-title { font-size: 23px; }
    .slider-actions .btn { width: 100%; justify-content: center; }
    .home-container { padding: 0 12px; }
    .home-panel-header { padding: 0 14px; }
    .home-rank-list { padding-right: 12px; padding-left: 12px; }
    .home-rank-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; }
    .home-rank-points { font-size: 10px; }
    .home-panel-link span { display: none; }
    .home-features-container { padding: 0 20px; }
    .home-features-intro { padding-left: 20px; }
    .home-features-intro h2 { font-size: 21px; }
    .home-features-intro p { font-size: 13px; }
    .home-seo-article { padding: 24px 17px; text-align: left; }
    .home-seo-article h1,
    .home-seo-article h2 { font-size: 18px; }
    .home-seo-lead,
    .home-seo-copy { font-size: 12px; }
    .home-seo-keywords { justify-content: flex-start; }
    .home-community-cta { padding: 21px 18px; }
    .home-community-icon { display: none; }
    .home-community-copy h3 { font-size: 16px; }
    .home-community-copy p { line-height: 1.6; }
    .home-community-button { width: 100%; min-width: 0; }
}

@media (max-width: 475px) {
    .slider-container.has-mobile-sliders .slider-wrapper-pc { display: none; }
    .slider-container.has-mobile-sliders .slider-wrapper-mobile { display: block; }
}

/* Mobile-first correction pass: keeps the home layout readable on real phones. */
@media (max-width: 1024px) {
    .slider-container {
        height: clamp(340px, 54vw, var(--home-slider-mobile-height, 440px));
    }

    .home-dashboard-grid {
        gap: 18px;
    }

    .home-promo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-bottom: 34px;
    }

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

    .home-features-container {
        gap: 30px;
    }

    .home-features-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .home-feature-card {
        padding: 20px 18px;
    }
}

@media (max-width: 820px) {
    body > .vertical-social-bar,
    .vertical-social-bar {
        top: auto !important;
        right: auto !important;
        bottom: 12px !important;
        left: 50% !important;
        z-index: 1040 !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: calc(100vw - 24px) !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 7px !important;
        border: 1px solid rgba(255,255,255,.075);
        border-radius: 999px;
        background: rgba(6,7,10,.78);
        box-shadow: 0 16px 38px rgba(0,0,0,.44);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        transform: translateX(-50%) !important;
    }

    .v-social-link {
        width: 34px;
        height: 34px;
        border-radius: 999px;
    }

    .v-social-link:hover {
        transform: translateY(-3px) scale(1.05);
    }

    .home-notice-ticker {
        min-height: 38px;
        font-size: 11px;
    }

    .home-notice-heading {
        padding: 0 12px;
    }

    .home-notice-group {
        gap: 26px;
        padding-right: 26px;
    }

    .home-notice-item::after {
        margin-left: 16px;
    }

    .slider-container {
        height: clamp(320px, 68vw, var(--home-slider-mobile-height, 420px));
        border-bottom-color: rgba(197,160,89,.12);
    }

    .slider-slide {
        align-items: stretch;
        background-position: center center;
    }

    .slider-slide::after,
    .slider-slide-database::after,
    .slider-slide-database.slider-slide-has-copy::after {
        background:
            linear-gradient(180deg, rgba(0,0,0,.14) 0%, rgba(0,0,0,.28) 38%, rgba(0,0,0,.82) 100%),
            linear-gradient(90deg, rgba(0,0,0,.52), transparent 48%, rgba(0,0,0,.28));
    }

    .slider-slide:hover::after {
        background:
            linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.36) 38%, rgba(0,0,0,.86) 100%),
            linear-gradient(90deg, rgba(0,0,0,.58), transparent 48%, rgba(0,0,0,.32));
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }

    .slider-content,
    .slider-copy-top .slider-content,
    .slider-copy-middle .slider-content,
    .slider-copy-bottom .slider-content {
        align-items: flex-end;
        justify-content: center;
        height: 100%;
        padding: 24px 18px 34px !important;
    }

    .slider-info,
    .slider-copy-center .slider-info,
    .slider-copy-right .slider-info {
        width: 100%;
        max-width: min(100%, 560px);
        padding: 0;
        text-align: left;
        transform: translate3d(
            clamp(-28px, var(--slider-text-x, 0px), 28px),
            clamp(-22px, var(--slider-text-y, 0px), 22px),
            0
        );
    }

    .slider-crown {
        max-width: 100%;
        margin-bottom: 10px;
        padding: 5px 10px;
        font-size: 9px;
        line-height: 1.25;
    }

    .slider-title {
        max-width: 100%;
        margin-bottom: 10px;
        font-size: clamp(24px, 7.4vw, 34px);
        line-height: 1.06;
        letter-spacing: -.5px;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .slider-desc {
        display: -webkit-box;
        max-width: 100%;
        margin-bottom: 16px;
        overflow: hidden;
        color: #d0d4dc;
        font-size: 12px;
        line-height: 1.55;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .slider-actions {
        gap: 8px;
    }

    .slider-actions .btn {
        flex: 1 1 145px;
        width: auto;
        min-height: 39px;
        padding: 10px 12px;
        font-size: 10px;
    }

    .home-stage {
        padding: 24px 0 54px;
    }

    .home-container {
        padding-right: 14px;
        padding-left: 14px;
    }

    .home-promo-grid,
    .home-rankings-grid,
    .home-sidebar,
    .home-features-grid {
        grid-template-columns: 1fr;
    }

    .home-promo-card {
        min-height: clamp(154px, 46vw, 220px);
    }

    .home-panel {
        border-radius: 11px;
    }

    .home-panel-header {
        min-height: 54px;
    }

    .home-side-panel {
        padding: 15px;
    }

    .home-event-visual {
        min-height: 170px;
    }

    .home-features-section {
        padding: 42px 0 50px;
    }

    .home-features-container {
        grid-template-columns: 1fr;
        padding-right: 18px;
        padding-left: 18px;
    }

    .container.home-features-container {
        padding-right: 18px;
        padding-left: 18px;
    }

    .home-features-intro {
        max-width: 100%;
        padding-left: 22px;
    }

    .home-feature-card {
        min-height: 0;
    }

    .home-seo-article {
        margin-top: 0;
    }
}

@media (max-width: 560px) {
    .home-notice-heading {
        font-size: 0;
    }

    .home-notice-heading i {
        font-size: 13px;
    }

    .slider-container {
        height: clamp(305px, 84vw, 380px);
    }

    .slider-content,
    .slider-copy-top .slider-content,
    .slider-copy-middle .slider-content,
    .slider-copy-bottom .slider-content {
        padding: 22px 14px 30px !important;
    }

    .slider-title {
        font-size: clamp(21px, 8vw, 29px);
    }

    .slider-desc {
        -webkit-line-clamp: 2;
    }

    .slider-actions .btn {
        flex-basis: 100%;
    }

    .home-stage {
        padding-bottom: 46px;
    }

    .home-container {
        padding-right: 10px;
        padding-left: 10px;
    }

    .home-promo-grid {
        gap: 12px;
        margin-bottom: 24px;
    }

    .home-promo-card {
        min-height: 158px;
        border-radius: 9px;
    }

    .home-promo-content {
        padding: 14px;
    }

    .home-rank-list {
        padding: 4px 10px 8px;
    }

    .home-rank-row {
        grid-template-columns: 28px minmax(0, 1fr) auto;
        gap: 7px;
        min-height: 48px;
    }

    .home-nation-icon,
    .home-nation-icon img {
        width: 17px;
        height: 17px;
        flex-basis: 17px;
    }

    .home-rank-name {
        font-size: 11px;
    }

    .home-rank-points {
        font-size: 9.5px;
    }

    .home-faction-labels {
        flex-direction: column;
        gap: 6px;
        align-items: flex-start;
    }

    .home-kings-grid {
        grid-template-columns: 1fr;
    }

    .home-event-visual {
        min-height: 150px;
    }

    .home-features-section {
        padding: 36px 0 42px;
    }

    .home-features-container {
        padding-right: 14px;
        padding-left: 14px;
    }

    .container.home-features-container {
        padding-right: 14px;
        padding-left: 14px;
    }

    .home-features-intro h2 {
        font-size: 20px;
        line-height: 1.35;
    }

    .home-features-intro p {
        font-size: 12.5px;
    }

    .home-feature-card {
        padding: 18px 16px;
    }

    .home-seo-article {
        padding: 22px 16px;
        text-align: left;
    }

    .home-seo-article h1,
    .home-seo-article h2 {
        font-size: 18px;
        line-height: 1.35;
    }

    .home-seo-lead,
    .home-seo-copy {
        font-size: 12px;
    }

    .home-seo-keywords {
        justify-content: flex-start;
    }

    .home-community-cta {
        padding: 20px 16px;
    }

    .home-community-copy {
        align-items: flex-start;
    }

    .home-community-icon {
        display: none;
    }

    .home-community-button {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 380px) {
    .v-social-link {
        width: 31px;
        height: 31px;
        font-size: 12px;
    }

    .slider-crown {
        font-size: 8px;
    }

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

    .slider-desc {
        display: none;
    }

    .home-panel-header {
        padding-right: 10px;
        padding-left: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-notice-track { animation: none; }
    .home-countdown-card,
    .home-countdown-card::before,
    .home-countdown-card::after,
    .home-countdown-inner::before { animation: none; }
}

/* Slider netlik düzeltmesi: tüm slide görselleri karartmasız başlar. */
.slider-slide::after,
.slider-slide-database::after,
.slider-slide-database.slider-slide-has-copy::after {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.slider-slide:hover::after {
    background: rgba(5, 6, 10, .04) !important;
    -webkit-backdrop-filter: blur(1.5px) !important;
    backdrop-filter: blur(1.5px) !important;
}

.slider-slide,
.slider-slide.active {
    filter: none !important;
}

@media (min-width: 821px) {
    .slider-container {
        min-height: 520px;
    }
}

@media (max-width: 820px) {
    .slider-container {
        min-height: 0;
        height: clamp(360px, 72vw, var(--home-slider-mobile-height, 470px));
    }
}

@media (max-width: 560px) {
    .slider-container {
        height: clamp(330px, 84vw, 430px);
    }
}

/* 20260720: hard mobile slider layout. Keeps images visible and copy readable on phones/tablets. */
@media (max-width: 820px) {
    .slider-container {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: clamp(440px, 118vw, 620px) !important;
        overflow: hidden !important;
        background: #040405 !important;
    }

    .slider-wrapper,
    .slider-slide {
        height: 100% !important;
    }

    .slider-slide {
        display: flex !important;
        align-items: flex-end !important;
        background-color: #040405 !important;
        background-repeat: no-repeat !important;
        background-position: top center !important;
        background-size: contain !important;
    }

    .slider-slide::after,
    .slider-slide-database::after,
    .slider-slide-database.slider-slide-has-copy::after {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0 42%, rgba(0, 0, 0, .48) 66%, rgba(0, 0, 0, .92) 100%) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .slider-slide:hover::after {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0 42%, rgba(0, 0, 0, .56) 66%, rgba(0, 0, 0, .94) 100%) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .slider-content,
    .slider-copy-top .slider-content,
    .slider-copy-middle .slider-content,
    .slider-copy-bottom .slider-content {
        position: relative !important;
        z-index: 5 !important;
        height: 100% !important;
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 24px 16px calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .slider-info,
    .slider-copy-center .slider-info,
    .slider-copy-right .slider-info,
    .slider-copy-left .slider-info {
        width: min(100%, 560px) !important;
        max-width: min(100%, 560px) !important;
        padding: 14px 15px !important;
        border: 1px solid rgba(255, 255, 255, .08) !important;
        border-radius: 14px !important;
        background: rgba(5, 7, 11, .70) !important;
        box-shadow: 0 16px 36px rgba(0, 0, 0, .38) !important;
        text-align: left !important;
        transform: none !important;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }

    .slider-crown {
        max-width: 100% !important;
        margin-bottom: 9px !important;
        padding: 5px 10px !important;
        font-size: 8.5px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
    }

    .slider-title {
        margin-bottom: 8px !important;
        font-size: clamp(22px, 7.2vw, 32px) !important;
        line-height: 1.08 !important;
        letter-spacing: -.45px !important;
        overflow-wrap: anywhere !important;
    }

    .slider-desc {
        display: -webkit-box !important;
        max-width: 100% !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
        color: #d5d9e1 !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .slider-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
    }

    .slider-actions .btn {
        width: 100% !important;
        min-height: 38px !important;
        justify-content: center !important;
        padding: 9px 10px !important;
        font-size: 9.5px !important;
    }
}

@media (max-width: 560px) {
    .slider-container {
        height: clamp(430px, 132vw, 590px) !important;
    }

    .slider-content,
    .slider-copy-top .slider-content,
    .slider-copy-middle .slider-content,
    .slider-copy-bottom .slider-content {
        padding: 20px 12px calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .slider-info,
    .slider-copy-center .slider-info,
    .slider-copy-right .slider-info,
    .slider-copy-left .slider-info {
        padding: 12px !important;
        border-radius: 12px !important;
    }

    .slider-title {
        font-size: clamp(20px, 8vw, 27px) !important;
    }

    .slider-desc {
        font-size: 11.5px !important;
        -webkit-line-clamp: 2;
    }

    .slider-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 380px) {
    .slider-container {
        height: clamp(390px, 136vw, 540px) !important;
    }

    .slider-crown {
        display: none !important;
    }

    .slider-title {
        font-size: 19px !important;
    }
}

/* 20260720-2: mobile slider was leaving too much empty space under wide banners. */
@media (min-width: 821px) and (max-width: 1100px) {
    .slider-container {
        min-height: 0 !important;
        height: clamp(360px, 42vw, 460px) !important;
    }

    .home-stage {
        padding-top: 16px !important;
    }
}

@media (max-width: 820px) {
    .slider-container {
        height: clamp(320px, 52vw, 430px) !important;
    }

    .home-stage {
        padding-top: 12px !important;
    }
}

@media (max-width: 640px) {
    .slider-container {
        height: clamp(315px, 78vw, 410px) !important;
    }

    .home-stage {
        padding-top: 10px !important;
    }
}

@media (max-width: 420px) {
    .slider-container {
        height: clamp(300px, 86vw, 370px) !important;
    }
}