/* =========================================================
   MYTHRA CRAFT — SAF KIRMIZI GAMING GECESİ V2
   ========================================================= */

.mythra-gaming-night {
    display: none !important;
}

@media (min-width: 1280px) {

    .mythra-gaming-night {
        --gaming-red: #ff1616;
        --gaming-red-dark: #c40000;
        --gaming-red-deep: #720000;

        position: absolute;
        z-index: 36;

        left: 286px;
        right: 286px;
        bottom: 92px;

        display: grid !important;
        grid-template-columns:
            minmax(185px, 0.98fr)
            minmax(220px, 1.15fr)
            125px;
        align-items: center;
        gap: 14px;

        min-height: 128px;
        padding: 15px 17px;

        box-sizing: border-box;
        overflow: visible;
        isolation: isolate;
        pointer-events: auto;

        border: 1px solid rgba(255, 22, 22, 0.55);
        border-radius: 19px;

        color: #ffffff;

        background:
            radial-gradient(
                circle at 8% 5%,
                rgba(255, 20, 20, 0.16),
                transparent 37%
            ),
            radial-gradient(
                circle at 91% 100%,
                rgba(130, 0, 0, 0.20),
                transparent 40%
            ),
            linear-gradient(
                145deg,
                rgba(255, 15, 15, 0.065),
                transparent 68%
            ),
            linear-gradient(
                180deg,
                rgba(35, 2, 4, 0.985),
                rgba(13, 1, 2, 0.995)
            );

        /*
         * Derin düz-panel emboss.
         * Altta ayrı buton basamağı bulunmaz.
         */
        box-shadow:
            inset 0 4px 0 rgba(255, 170, 170, 0.15),
            inset 3px 0 0 rgba(255, 45, 45, 0.055),
            inset -3px 0 0 rgba(73, 0, 0, 0.32),
            inset 0 -7px 0 rgba(75, 0, 0, 0.52),

            inset 0 0 22px rgba(255, 0, 0, 0.035),

            0 14px 28px rgba(0, 0, 0, 0.35),
            0 0 25px rgba(255, 0, 0, 0.09);
    }

    /* Önceki hareketli pseudo-element sistemi kapatılır. */
    .mythra-gaming-night::before,
    .mythra-gaming-night::after {
        content: none !important;
        display: none !important;
        animation: none !important;
        filter: none !important;
    }

    /* =====================================================
       SABİT HIZLI, KÖŞEYE OTURAN SVG ÇERÇEVE IŞIĞI

       Üç stroke aynı geometri ve aynı dash hareketini kullanır.
       Blur/drop-shadow yoktur; kırmızı aura stroke kalınlığı ve
       transparanlık ile oluşturulur.
       ===================================================== */

    .mythra-gaming-night__border-runner {
        position: absolute;
        z-index: 5;
        inset: 0;

        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
        pointer-events: none;
    }

    .mythra-gaming-night__border-runner rect {
        fill: none;
        stroke-linecap: round;
        stroke-dasharray: 76 924;
        stroke-dashoffset: 0;
        vector-effect: non-scaling-stroke;
        will-change: stroke-dashoffset;

        animation:
            mythraGamingStrokeRun 3.25s linear infinite;
    }

    /* Geniş, transparan kırmızı aura. */
    .mythra-gaming-border-aura--wide {
        stroke: rgba(255, 0, 0, 0.11);
        stroke-width: 13;
    }

    /* Çekirdeğe yakın daha belirgin kırmızı ışık. */
    .mythra-gaming-border-aura--near {
        stroke: rgba(255, 22, 22, 0.44);
        stroke-width: 6;
    }

    /* Eski görünümdeki ince sıcak beyaz merkez. */
    .mythra-gaming-border-core {
        stroke: rgba(255, 250, 248, 0.98);
        stroke-width: 2;
    }

    @keyframes mythraGamingStrokeRun {
        from {
            stroke-dashoffset: 0;
        }

        to {
            stroke-dashoffset: -1000;
        }
    }

    .mythra-gaming-night > * {
        position: relative;
        z-index: 2;
    }

    .mythra-gaming-night > .mythra-gaming-night__border-runner {
        position: absolute;
        z-index: 5;
    }

    /* =====================================================
       SOL BİLGİ ALANI
       ===================================================== */

    .mythra-gaming-night__info {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        text-align: left !important;
    }

    .mythra-gaming-night__info strong {
        display: flex;
        align-items: center;

        margin: 0;
        color: #ffffff;

        font-size: 15.5px;
        font-weight: 900;
        line-height: 1.1;
        text-align: left !important;
        white-space: nowrap;

        text-shadow:
            0 0 11px rgba(255, 0, 0, 0.25);
    }

    /* Kırmızı emboss yıldırım */
    .mythra-gaming-night__info strong i {
        display: grid;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        place-items: center;

        margin-right: 10px;
        border-radius: 11px;

        color: #ffffff;

        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.27),
                transparent 43%,
                rgba(65, 0, 0, 0.32) 100%
            ),
            linear-gradient(
                145deg,
                #ff2020,
                #c90000
            );

        box-shadow:
            inset 0 3px 0 rgba(255, 255, 255, 0.31),
            inset 2px 0 0 rgba(255, 170, 170, 0.13),
            inset -2px 0 0 rgba(82, 0, 0, 0.27),
            inset 0 -5px 0 rgba(83, 0, 0, 0.45),
            0 5px 10px rgba(0, 0, 0, 0.31),
            0 0 13px rgba(255, 0, 0, 0.17);

        font-size: 16px;
    }

    /*
     * Bu iki yazı artık ortalanmaz.
     * GAMING GECESİ yazısının başladığı 46px çizgisinden başlar.
     */
    .mythra-gaming-night__info span,
    .mythra-gaming-night__info small {
        width: calc(100% - 46px);
        align-self: flex-start;

        margin-left: 46px;

        text-align: left !important;
    }

    .mythra-gaming-night__info span {
        max-width: 190px;
        margin-top: 7px;

        color: rgba(255, 225, 225, 0.72);

        font-size: 10.5px;
        font-weight: 650;
        line-height: 1.32;
    }

    .mythra-gaming-night__info small {
        margin-top: 5px;

        color: #ff3838;

        font-size: 10.5px;
        font-weight: 900;
        line-height: 1.2;
        letter-spacing: 0.025em;

        text-shadow:
            0 0 10px rgba(255, 0, 0, 0.31);
    }

    /* =====================================================
       SAYAÇ
       ===================================================== */

    .mythra-gaming-night__countdown {
        display: grid;
        grid-template-columns: repeat(4, minmax(43px, 1fr));
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .mythra-countdown-unit {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
    }

    .mythra-countdown-unit strong {
        display: grid;
        width: 100%;
        min-width: 43px;
        height: 43px;
        place-items: center;

        border: 1px solid rgba(255, 35, 35, 0.24);
        border-radius: 11px;

        color: #ffffff;

        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.105),
                transparent 43%
            ),
            linear-gradient(
                145deg,
                rgba(255, 18, 18, 0.20),
                rgba(100, 0, 0, 0.11)
            ),
            rgba(18, 1, 2, 0.97);

        box-shadow:
            inset 0 3px 0 rgba(255, 175, 175, 0.13),
            inset 2px 0 0 rgba(255, 40, 40, 0.055),
            inset -2px 0 0 rgba(72, 0, 0, 0.28),
            inset 0 -4px 0 rgba(64, 0, 0, 0.72),
            0 5px 10px rgba(0, 0, 0, 0.35),
            0 0 12px rgba(255, 0, 0, 0.07);

        font-size: 21px;
        font-weight: 950;
        line-height: 1;
    }

    .mythra-countdown-unit span {
        color: rgba(255, 130, 130, 0.88);

        font-size: 9.5px;
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0.075em;
    }

    /* =====================================================
       FIRSATLARI GÖR BUTONU
       ===================================================== */

    .mythra-gaming-night__button {
        display: inline-flex;
        width: 125px;
        min-height: 43px;
        align-items: center;
        justify-content: center;
        gap: 8px;

        padding: 10px 13px;
        box-sizing: border-box;

        border: 0;
        border-radius: 12px;

        color: #ffffff !important;

        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.23),
                transparent 43%,
                rgba(72, 0, 0, 0.28) 100%
            ),
            linear-gradient(
                135deg,
                #ff2020,
                #c90000
            );

        box-shadow:
            inset 0 3px 0 rgba(255, 255, 255, 0.25),
            inset 2px 0 0 rgba(255, 168, 168, 0.10),
            inset -2px 0 0 rgba(80, 0, 0, 0.26),
            inset 0 -4px 0 rgba(78, 0, 0, 0.46),
            0 7px 13px rgba(0, 0, 0, 0.35);

        font-size: 11.5px;
        font-weight: 900;
        white-space: nowrap;

        transform: scale(1);
        transform-origin: center;

        transition:
            transform 190ms ease,
            box-shadow 190ms ease;
    }

    .mythra-gaming-night__button:hover {
        transform: scale(1.05);

        box-shadow:
            inset 0 3px 0 rgba(255, 255, 255, 0.29),
            inset 2px 0 0 rgba(255, 168, 168, 0.12),
            inset -2px 0 0 rgba(80, 0, 0, 0.26),
            inset 0 -4px 0 rgba(78, 0, 0, 0.43),

            0 0 21px rgba(255, 0, 0, 0.45),
            0 0 45px rgba(255, 0, 0, 0.17);
    }

    /* Aktif durumda da kırmızı kalır */
    .mythra-gaming-night.is-active {
        border-color: rgba(255, 25, 25, 0.82);

        box-shadow:
            inset 0 4px 0 rgba(255, 180, 180, 0.17),
            inset 3px 0 0 rgba(255, 45, 45, 0.055),
            inset -3px 0 0 rgba(73, 0, 0, 0.32),
            inset 0 -7px 0 rgba(75, 0, 0, 0.52),
            0 14px 29px rgba(0, 0, 0, 0.35),
            0 0 30px rgba(255, 0, 0, 0.17);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mythra-gaming-night__border-runner rect {
        animation: none !important;
        stroke-dashoffset: -80;
    }
}
/* =========================================================
   MYTHRA CRAFT — MOBİL GAMING GECESİ + LİDER TABLOLARI

   Bu blok yalnızca telefon görünümünde çalışır.
   Masaüstü CSS'lerini değiştirmez veya yeniden tanımlamaz.
   Özel CSS alanının EN ALTINA eklenmelidir.
   ========================================================= */

@media (max-width: 639px) {

    /* Yeni içerikler normal akışta kaldığı için hero kendiliğinden uzar. */
    #__heroSection .mythra-desktop-hero-content {
        justify-content: flex-start !important;
        overflow: visible !important;
        padding-bottom: 72px !important;
    }

    /* DOM sırası farklı olsa bile mobilde okunabilir içerik sırası korunur. */
    #__heroSection .mythra-hero-description {
        order: 1;
    }

    #__heroSection .mythra-hero-play-button {
        order: 2;
    }

    #__heroSection .mythra-hero-features {
        order: 3;
    }

    #__heroSection .mythra-hero-online-status {
        order: 4;
    }

    /* =====================================================
       MOBİL GAMING GECESİ
       ===================================================== */

    #__heroSection .mythra-gaming-night {
        --mobile-gaming-red: #ff1818;
        --mobile-gaming-dark: #a90000;

        position: relative !important;
        z-index: 36 !important;
        inset: auto !important;
        order: 5;

        display: grid !important;
        width: min(100%, 380px) !important;
        min-height: 0 !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-template-areas:
            "info info info info"
            "countdown countdown countdown countdown"
            "button button button button" !important;
        align-items: center !important;
        gap: 17px 7px !important;

        margin: 29px auto 0 !important;
        padding: 17px 14px 19px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        isolation: isolate;

        border: 1px solid rgba(255, 24, 24, 0.52) !important;
        border-radius: 18px !important;
        color: #ffffff;

        background:
            radial-gradient(circle at 8% 4%, rgba(255, 34, 34, 0.17), transparent 36%),
            radial-gradient(circle at 94% 100%, rgba(150, 0, 0, 0.18), transparent 42%),
            linear-gradient(145deg, rgba(255, 15, 15, 0.07), transparent 66%),
            linear-gradient(180deg, rgba(38, 2, 5, 0.985), rgba(13, 1, 2, 0.995)) !important;

        box-shadow:
            inset 0 3px 0 rgba(255, 175, 175, 0.14),
            inset 2px 0 0 rgba(255, 45, 45, 0.05),
            inset -2px 0 0 rgba(73, 0, 0, 0.28),
            inset 0 -5px 0 rgba(75, 0, 0, 0.48),
            0 12px 25px rgba(0, 0, 0, 0.29),
            0 0 21px rgba(255, 0, 0, 0.08) !important;
    }

    #__heroSection .mythra-gaming-night > * {
        position: relative;
        z-index: 2;
    }

    /*
     * Masaüstündeki 598×150 SVG mobil panelde orantısız biçimde
     * esnediği için mobilde kapatılır. Panelin gerçek ölçülerini
     * izleyen CSS motion-path koşucusu aşağıda kullanılır.
     */
    #__heroSection .mythra-gaming-night > .mythra-gaming-night__border-runner {
        display: none !important;
    }

    #__heroSection .mythra-gaming-night::before,
    #__heroSection .mythra-gaming-night::after {
        content: "" !important;
        position: absolute !important;
        z-index: 6 !important;
        top: 0 !important;
        left: 0 !important;
        display: block !important;
        box-sizing: border-box;
        border: 0 !important;
        border-radius: 999px !important;
        pointer-events: none;

        /* Kartın o anki gerçek genişlik/yüksekliğini otomatik izler. */
        offset-path: inset(1px round 17px);
        offset-distance: 0%;
        offset-anchor: center;
        offset-rotate: auto;

        animation: mythraMobileGamingRunner 3.25s linear infinite !important;
        will-change: offset-distance;
        filter: none !important;
    }

    /* Kısa, geniş ve yumuşak kırmızı kuyruk. */
    #__heroSection .mythra-gaming-night::before {
        width: 25px !important;
        height: 4px !important;
        background: rgba(255, 24, 24, 0.50) !important;
        box-shadow:
            0 0 7px 2px rgba(255, 0, 0, 0.38),
            0 0 15px 5px rgba(255, 0, 0, 0.17),
            0 0 25px 8px rgba(255, 0, 0, 0.07) !important;
    }

    /* İnce sıcak-beyaz merkez; kısa tutulduğu için köşede L oluşturmaz. */
    #__heroSection .mythra-gaming-night::after {
        width: 18px !important;
        height: 2px !important;
        background: rgba(255, 252, 250, 0.98) !important;
        box-shadow:
            0 0 3px 1px rgba(255, 255, 255, 0.58),
            0 0 7px 2px rgba(255, 38, 38, 0.62),
            0 0 13px 4px rgba(255, 0, 0, 0.20) !important;
    }

    @keyframes mythraMobileGamingRunner {
        from { offset-distance: 0%; }
        to   { offset-distance: 100%; }
    }

    #__heroSection .mythra-gaming-night__info {
        grid-area: info;
        display: flex !important;
        min-width: 0;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    #__heroSection .mythra-gaming-night__info strong {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        color: #ffffff;
        font-size: 15px !important;
        font-weight: 900;
        line-height: 1.15 !important;
        white-space: nowrap;
        text-shadow: 0 0 10px rgba(255, 0, 0, 0.22);
    }

    #__heroSection .mythra-gaming-night__info strong i {
        display: grid !important;
        width: 35px !important;
        height: 35px !important;
        flex: 0 0 35px !important;
        place-items: center;
        margin-right: 10px !important;
        border-radius: 10px;
        color: #ffffff;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 43%, rgba(65, 0, 0, 0.31)),
            linear-gradient(145deg, #ff2424, #c70000) !important;
        box-shadow:
            inset 0 3px 0 rgba(255, 255, 255, 0.30),
            inset 2px 0 0 rgba(255, 170, 170, 0.12),
            inset -2px 0 0 rgba(82, 0, 0, 0.26),
            inset 0 -4px 0 rgba(83, 0, 0, 0.43),
            0 5px 10px rgba(0, 0, 0, 0.27),
            0 0 12px rgba(255, 0, 0, 0.15) !important;
        font-size: 15px !important;
    }

    #__heroSection .mythra-gaming-night__info span,
    #__heroSection .mythra-gaming-night__info small {
        width: auto !important;
        max-width: 290px !important;
        align-self: center !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        text-align: center !important;
    }

    #__heroSection .mythra-gaming-night__info span {
        margin-top: 8px !important;
        color: rgba(255, 225, 225, 0.74) !important;
        font-size: 10.5px !important;
        font-weight: 660 !important;
        line-height: 1.38 !important;
    }

    #__heroSection .mythra-gaming-night__info small {
        margin-top: 5px !important;
        color: #ff4444 !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        line-height: 1.2 !important;
        letter-spacing: 0.035em;
        text-shadow: 0 0 9px rgba(255, 0, 0, 0.26);
    }

    #__heroSection .mythra-gaming-night__countdown {
        grid-area: countdown;
        display: grid !important;
        width: 100%;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        align-items: start !important;
        justify-content: center !important;
        gap: 7px !important;
    }

    #__heroSection .mythra-countdown-unit {
        display: flex !important;
        min-width: 0;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
    }

    #__heroSection .mythra-countdown-unit strong {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 43px !important;
        place-items: center;
        border: 1px solid rgba(255, 35, 35, 0.23) !important;
        border-radius: 10px !important;
        color: #ffffff;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.105), transparent 43%),
            linear-gradient(145deg, rgba(255, 18, 18, 0.20), rgba(100, 0, 0, 0.11)),
            rgba(18, 1, 2, 0.97) !important;
        box-shadow:
            inset 0 3px 0 rgba(255, 175, 175, 0.13),
            inset 0 -4px 0 rgba(64, 0, 0, 0.68),
            0 5px 9px rgba(0, 0, 0, 0.28) !important;
        font-size: clamp(17px, 5.2vw, 21px) !important;
        font-weight: 950 !important;
        line-height: 1 !important;
    }

    #__heroSection .mythra-countdown-unit span {
        color: rgba(255, 135, 135, 0.90) !important;
        font-size: 8px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: 0.055em;
        white-space: nowrap;
    }

    #__heroSection .mythra-gaming-night__button {
        grid-area: button;
        display: inline-flex !important;
        width: min(100%, 190px) !important;
        min-height: 43px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        justify-self: center;
        padding: 10px 15px !important;
        border: 0 !important;
        border-radius: 12px !important;
        color: #ffffff !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.23), transparent 43%, rgba(72, 0, 0, 0.27)),
            linear-gradient(135deg, #ff2424, #c70000) !important;
        box-shadow:
            inset 0 3px 0 rgba(255, 255, 255, 0.25),
            inset 2px 0 0 rgba(255, 168, 168, 0.10),
            inset -2px 0 0 rgba(80, 0, 0, 0.25),
            inset 0 -4px 0 rgba(78, 0, 0, 0.44),
            0 7px 13px rgba(0, 0, 0, 0.31) !important;
        font-size: 11.5px !important;
        font-weight: 900 !important;
        white-space: nowrap;
        transform: none !important;
    }

    #__heroSection .mythra-gaming-night__button:active {
        transform: scale(0.975) !important;
    }

    /* =====================================================
       MOBİL KREDİ LİDERLERİ
       ===================================================== */

    #__heroSection .mythra-hero-leaderboards {
        position: relative !important;
        z-index: 34 !important;
        inset: auto !important;
        order: 6;

        display: grid !important;
        width: min(100%, 380px) !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 17px !important;

        margin: 24px auto 0 !important;
        pointer-events: auto !important;
    }

    #__heroSection .mythra-hero-leaderboards::before {
        content: "KREDİ LİDERLERİ";
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 31px;
        color: rgba(255, 208, 95, 0.82);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.13em;
        text-shadow: 0 0 12px rgba(255, 153, 0, 0.17);
    }

    #__heroSection .mythra-donor-board {
        --board-start: #ffc800;
        --board-end: #ff8800;
        --board-rgb: 255, 166, 0;

        position: relative !important;
        inset: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: block !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
        overflow: hidden;
        contain: layout paint;

        border: 1px solid rgba(var(--board-rgb), 0.34) !important;
        border-radius: 17px !important;
        color: #ffffff;
        background:
            radial-gradient(circle at 16% 0%, rgba(255, 200, 0, 0.15), transparent 42%),
            linear-gradient(145deg, rgba(255, 200, 0, 0.09), rgba(255, 136, 0, 0.04) 46%, transparent 74%),
            linear-gradient(180deg, rgba(31, 20, 8, 0.97), rgba(16, 9, 4, 0.985)) !important;
        box-shadow:
            inset 0 2px 0 rgba(255, 231, 145, 0.14),
            inset 2px 0 0 rgba(255, 200, 0, 0.04),
            inset -2px 0 0 rgba(85, 35, 0, 0.22),
            inset 0 -4px 0 rgba(69, 27, 0, 0.33),
            0 12px 24px rgba(0, 0, 0, 0.25),
            0 0 20px rgba(255, 136, 0, 0.07) !important;
    }

    #__heroSection .mythra-donor-board__header {
        position: relative;
        display: flex !important;
        min-height: 58px !important;
        align-items: center !important;
        gap: 11px !important;
        overflow: hidden;
        padding: 10px 13px !important;
        border: 0 !important;
        background: linear-gradient(90deg, rgba(255, 200, 0, 0.15), rgba(255, 136, 0, 0.03) 74%, transparent) !important;
    }

    #__heroSection .mythra-donor-board__header::before {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 1px;
        background: rgba(255, 166, 0, 0.16);
    }

    #__heroSection .mythra-donor-board__header::after {
        content: "";
        position: absolute;
        z-index: 2;
        bottom: 0;
        left: -42%;
        width: 42%;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(255, 200, 0, 0.22) 18%, #ffc800 52%, #ff8800 76%, transparent);
        box-shadow: 0 0 7px rgba(255, 200, 0, 0.48);
        animation: mythraMobileDonorLine 3.4s linear infinite;
        will-change: transform;
    }

    @keyframes mythraMobileDonorLine {
        from { transform: translate3d(0, 0, 0); }
        to   { transform: translate3d(340%, 0, 0); }
    }

    #__heroSection .mythra-donor-board__icon {
        display: inline-grid !important;
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px !important;
        place-items: center;
        border-radius: 10px !important;
        color: #2c1600 !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 48%),
            linear-gradient(135deg, var(--board-start), var(--board-end)) !important;
        box-shadow:
            inset 0 2px 0 rgba(255, 255, 255, 0.42),
            inset 0 -3px 0 rgba(126, 55, 0, 0.37),
            0 5px 10px rgba(255, 136, 0, 0.18) !important;
        font-size: 14px !important;
    }

    #__heroSection .mythra-donor-board__header > span:last-child {
        display: flex !important;
        min-width: 0;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    #__heroSection .mythra-donor-board__header strong {
        overflow: hidden;
        max-width: 100%;
        color: rgba(255, 255, 255, 0.97) !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        line-height: 1.25 !important;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.50);
    }

    #__heroSection .mythra-donor-board__header small {
        margin-top: 3px !important;
        color: rgba(255, 191, 72, 0.74) !important;
        font-size: 9.5px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: 0.012em;
    }

    #__heroSection .mythra-donor-board__list {
        display: grid !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 9px 10px 12px !important;
        list-style: none !important;
    }

    #__heroSection .mythra-donor-row {
        display: grid !important;
        min-height: 29px !important;
        grid-template-columns: 23px minmax(0, 1fr) auto !important;
        align-items: center !important;
        column-gap: 8px !important;
        padding: 3px 7px !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.016) !important;
        transform: none !important;
    }

    #__heroSection .mythra-donor-row.is-podium {
        background: linear-gradient(90deg, rgba(255, 200, 0, 0.13), rgba(255, 136, 0, 0.025) 75%, transparent) !important;
    }

    #__heroSection .mythra-donor-rank {
        display: inline-grid !important;
        width: 21px !important;
        height: 21px !important;
        place-items: center;
        border-radius: 7px !important;
        color: rgba(255, 255, 255, 0.58) !important;
        background: rgba(255, 255, 255, 0.05) !important;
        font-size: 9px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
    }

    #__heroSection .mythra-donor-row.is-podium .mythra-donor-rank {
        color: #2b1500 !important;
        background: linear-gradient(135deg, var(--board-start), var(--board-end)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.42),
            inset 0 -2px 0 rgba(116, 46, 0, 0.27),
            0 0 10px rgba(255, 153, 0, 0.17) !important;
    }

    #__heroSection .mythra-donor-name {
        overflow: hidden;
        min-width: 0;
        color: rgba(255, 255, 255, 0.83) !important;
        font-size: 10.5px !important;
        font-weight: 740 !important;
        line-height: 1.2 !important;
        text-align: left !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #__heroSection .mythra-donor-total {
        margin-left: 5px !important;
        color: #ffb300 !important;
        font-size: 9.5px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        text-align: right !important;
        white-space: nowrap;
        text-shadow: 0 0 9px rgba(255, 136, 0, 0.14);
    }

    #__heroSection .mythra-donor-board__empty {
        padding: 14px 9px !important;
        color: rgba(255, 190, 70, 0.60) !important;
        font-size: 10px !important;
        font-weight: 680 !important;
        text-align: center !important;
    }
}

/* 360px altındaki cihazlarda sayaç taşmasını ve tutar sıkışmasını önler. */
@media (max-width: 359px) {
    #__heroSection .mythra-gaming-night {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    #__heroSection .mythra-gaming-night__countdown {
        gap: 5px !important;
    }

    #__heroSection .mythra-countdown-unit strong {
        height: 39px !important;
        font-size: 17px !important;
    }

    #__heroSection .mythra-countdown-unit span {
        font-size: 7px !important;
        letter-spacing: 0.025em;
    }

    #__heroSection .mythra-donor-row {
        grid-template-columns: 22px minmax(0, 1fr) auto !important;
        column-gap: 6px !important;
        padding-right: 5px !important;
        padding-left: 5px !important;
    }

    #__heroSection .mythra-donor-name {
        font-size: 10px !important;
    }

    #__heroSection .mythra-donor-total {
        font-size: 8.5px !important;
    }
}

@media (prefers-reduced-motion: reduce) and (max-width: 639px) {
    #__heroSection .mythra-gaming-night::before,
    #__heroSection .mythra-gaming-night::after,
    #__heroSection .mythra-donor-board__header::after {
        animation: none !important;
    }

    #__heroSection .mythra-gaming-night::before,
    #__heroSection .mythra-gaming-night::after {
        offset-distance: 18%;
    }
}

/* =========================================================
   RESPONSIVE V2 — TABLET GAMING GECESİ WIDGET'I
   ========================================================= */
@media (min-width: 640px) and (max-width: 1279px),
       (min-width: 1280px) and (max-width: 1400px) and (hover: none) and (pointer: coarse) {
    #__heroSection .mythra-gaming-night {
        --tablet-gaming-red: #ff1818;
        position: relative !important;
        z-index: 36 !important;
        inset: auto !important;
        display: grid !important;
        width: 100% !important;
        min-height: 138px !important;
        grid-template-columns: minmax(190px, .9fr) minmax(260px, 1.25fr) minmax(125px, .55fr) !important;
        align-items: center !important;
        gap: 18px !important;
        margin: 0 !important;
        padding: 18px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        isolation: isolate;
        pointer-events: auto !important;
        border: 1px solid rgba(255, 24, 24, .50) !important;
        border-radius: 18px !important;
        color: #fff !important;
        background:
            radial-gradient(circle at 8% 4%, rgba(255, 34, 34, .17), transparent 36%),
            radial-gradient(circle at 94% 100%, rgba(150, 0, 0, .18), transparent 42%),
            linear-gradient(145deg, rgba(255, 15, 15, .07), transparent 66%),
            linear-gradient(180deg, rgba(38, 2, 5, .985), rgba(13, 1, 2, .995)) !important;
        box-shadow:
            inset 0 3px 0 rgba(255, 175, 175, .14),
            inset 0 -5px 0 rgba(75, 0, 0, .48),
            0 12px 25px rgba(0, 0, 0, .29),
            0 0 21px rgba(255, 0, 0, .08) !important;
    }

    #__heroSection .mythra-gaming-night > * {
        position: relative;
        z-index: 2;
    }

    #__heroSection .mythra-gaming-night__border-runner {
        position: absolute !important;
        z-index: 5 !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        pointer-events: none !important;
    }

    #__heroSection .mythra-gaming-night__border-runner rect {
        fill: none !important;
        stroke-linecap: round;
        stroke-dasharray: 76 924;
        vector-effect: non-scaling-stroke;
        animation: mythraGamingStrokeRun 3.25s linear infinite;
    }

    #__heroSection .mythra-gaming-border-aura--wide {
        stroke: rgba(255, 0, 0, .11) !important;
        stroke-width: 13 !important;
    }

    #__heroSection .mythra-gaming-border-aura--near {
        stroke: rgba(255, 22, 22, .44) !important;
        stroke-width: 6 !important;
    }

    #__heroSection .mythra-gaming-border-core {
        stroke: rgba(255, 250, 248, .98) !important;
        stroke-width: 2 !important;
    }

    #__heroSection .mythra-gaming-night__info {
        display: flex !important;
        min-width: 0;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    #__heroSection .mythra-gaming-night__info strong {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        color: #fff !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        white-space: nowrap;
    }

    #__heroSection .mythra-gaming-night__info strong i {
        display: grid !important;
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
        place-items: center;
        margin-right: 10px !important;
        border-radius: 10px !important;
        color: #fff !important;
        background: linear-gradient(145deg, #ff2424, #c70000) !important;
        box-shadow: inset 0 3px 0 rgba(255,255,255,.28), inset 0 -4px 0 rgba(83,0,0,.43), 0 5px 10px rgba(0,0,0,.27) !important;
    }

    #__heroSection .mythra-gaming-night__info span,
    #__heroSection .mythra-gaming-night__info small {
        width: auto !important;
        max-width: 220px !important;
        margin-left: 46px !important;
        text-align: left !important;
    }

    #__heroSection .mythra-gaming-night__info span {
        margin-top: 7px !important;
        color: rgba(255,225,225,.74) !important;
        font-size: 10px !important;
        line-height: 1.35 !important;
    }

    #__heroSection .mythra-gaming-night__info small {
        margin-top: 4px !important;
        color: #ff4444 !important;
        font-size: 9px !important;
        font-weight: 900 !important;
    }

    #__heroSection .mythra-gaming-night__countdown {
        display: grid !important;
        width: 100% !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    #__heroSection .mythra-countdown-unit {
        display: flex !important;
        min-width: 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 7px !important;
    }

    #__heroSection .mythra-countdown-unit strong {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 43px !important;
        place-items: center;
        border: 1px solid rgba(255,35,35,.23) !important;
        border-radius: 10px !important;
        color: #fff !important;
        background: linear-gradient(180deg, rgba(255,255,255,.105), transparent 43%), rgba(18,1,2,.97) !important;
        box-shadow: inset 0 3px 0 rgba(255,175,175,.13), inset 0 -4px 0 rgba(64,0,0,.68), 0 5px 9px rgba(0,0,0,.28) !important;
        font-size: 20px !important;
        font-weight: 950 !important;
    }

    #__heroSection .mythra-countdown-unit span {
        color: rgba(255,135,135,.9) !important;
        font-size: 8px !important;
        font-weight: 900 !important;
        white-space: nowrap;
    }

    #__heroSection .mythra-gaming-night__button {
        display: inline-flex !important;
        width: 100% !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        padding: 10px 12px !important;
        border: 0 !important;
        border-radius: 12px !important;
        color: #fff !important;
        background: linear-gradient(180deg, rgba(255,255,255,.23), transparent 43%, rgba(72,0,0,.27)), linear-gradient(135deg, #ff2424, #c70000) !important;
        box-shadow: inset 0 3px 0 rgba(255,255,255,.25), inset 0 -4px 0 rgba(78,0,0,.44), 0 7px 13px rgba(0,0,0,.31) !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        white-space: nowrap;
    }
}

@media (min-width: 640px) and (max-width: 819px) {
    #__heroSection .mythra-gaming-night {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
        padding: 20px !important;
    }

    #__heroSection .mythra-gaming-night__info {
        align-items: center !important;
        text-align: center !important;
    }

    #__heroSection .mythra-gaming-night__info span,
    #__heroSection .mythra-gaming-night__info small {
        max-width: 420px !important;
        margin-left: 0 !important;
        text-align: center !important;
    }

    #__heroSection .mythra-gaming-night__button {
        width: min(100%, 220px) !important;
        justify-self: center !important;
    }
}

/* =========================================================
   RESPONSIVE V3 — TABLET GÖRSEL/Etkileşim EŞİTLEME
   Masaüstündeki kırmızı palet, SVG neon koşucusu ve gerçek
   basma hissi tabletlerde birebir korunur.
   ========================================================= */
@media (min-width: 640px) and (max-width: 1279px),
       (min-width: 1280px) and (max-width: 1400px) and (hover: none) and (pointer: coarse) {
    #__heroSection .mythra-gaming-night {
        --gaming-red: #ff1616;
        --gaming-red-dark: #c40000;
        --gaming-red-deep: #720000;
        overflow: visible !important;
        border-color: rgba(255, 22, 22, .55) !important;
        background:
            radial-gradient(circle at 8% 5%, rgba(255, 20, 20, .16), transparent 37%),
            radial-gradient(circle at 91% 100%, rgba(130, 0, 0, .20), transparent 40%),
            linear-gradient(145deg, rgba(255, 15, 15, .065), transparent 68%),
            linear-gradient(180deg, rgba(35, 2, 4, .985), rgba(13, 1, 2, .995)) !important;
        box-shadow:
            inset 0 4px 0 rgba(255, 170, 170, .15),
            inset 3px 0 0 rgba(255, 45, 45, .055),
            inset -3px 0 0 rgba(73, 0, 0, .32),
            inset 0 -7px 0 rgba(75, 0, 0, .52),
            inset 0 0 22px rgba(255, 0, 0, .035),
            0 14px 28px rgba(0, 0, 0, .35),
            0 0 25px rgba(255, 0, 0, .09) !important;
    }

    #__heroSection .mythra-gaming-night.is-active {
        border-color: rgba(255, 25, 25, .82) !important;
        box-shadow:
            inset 0 4px 0 rgba(255, 180, 180, .17),
            inset 3px 0 0 rgba(255, 45, 45, .055),
            inset -3px 0 0 rgba(73, 0, 0, .32),
            inset 0 -7px 0 rgba(75, 0, 0, .52),
            0 14px 29px rgba(0, 0, 0, .35),
            0 0 30px rgba(255, 0, 0, .17) !important;
    }

    #__heroSection .mythra-gaming-night__border-runner {
        display: block !important;
        overflow: visible !important;
    }

    #__heroSection .mythra-gaming-night__border-runner rect {
        stroke-linecap: round !important;
        stroke-dasharray: 76 924 !important;
        stroke-dashoffset: 0;
        vector-effect: non-scaling-stroke;
        animation: mythraTabletGamingStrokeRun 3.25s linear infinite !important;
        will-change: stroke-dashoffset;
    }

    #__heroSection .mythra-gaming-border-aura--wide {
        stroke: rgba(255, 0, 0, .11) !important;
        stroke-width: 13 !important;
    }

    #__heroSection .mythra-gaming-border-aura--near {
        stroke: rgba(255, 22, 22, .44) !important;
        stroke-width: 6 !important;
    }

    #__heroSection .mythra-gaming-border-core {
        stroke: rgba(255, 250, 248, .98) !important;
        stroke-width: 2 !important;
    }

    #__heroSection .mythra-gaming-night__info strong i {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .27), transparent 43%, rgba(65, 0, 0, .32)),
            linear-gradient(145deg, #ff2020, #c90000) !important;
        box-shadow:
            inset 0 3px 0 rgba(255, 255, 255, .31),
            inset 2px 0 0 rgba(255, 170, 170, .13),
            inset -2px 0 0 rgba(82, 0, 0, .27),
            inset 0 -5px 0 rgba(83, 0, 0, .45),
            0 5px 10px rgba(0, 0, 0, .31),
            0 0 13px rgba(255, 0, 0, .17) !important;
    }

    #__heroSection .mythra-countdown-unit strong {
        border-color: rgba(255, 35, 35, .24) !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .105), transparent 43%),
            linear-gradient(145deg, rgba(255, 18, 18, .20), rgba(100, 0, 0, .11)),
            rgba(18, 1, 2, .97) !important;
        box-shadow:
            inset 0 3px 0 rgba(255, 175, 175, .13),
            inset 2px 0 0 rgba(255, 40, 40, .055),
            inset -2px 0 0 rgba(72, 0, 0, .28),
            inset 0 -4px 0 rgba(64, 0, 0, .72),
            0 5px 10px rgba(0, 0, 0, .35),
            0 0 12px rgba(255, 0, 0, .07) !important;
    }

    #__heroSection .mythra-gaming-night__button {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .23), transparent 43%, rgba(72, 0, 0, .28)),
            linear-gradient(135deg, #ff2020, #c90000) !important;
        box-shadow:
            inset 0 3px 0 rgba(255, 255, 255, .25),
            inset 2px 0 0 rgba(255, 168, 168, .10),
            inset -2px 0 0 rgba(80, 0, 0, .26),
            inset 0 -4px 0 rgba(78, 0, 0, .46),
            0 7px 13px rgba(0, 0, 0, .35) !important;
        transform: translateY(0) scale(1) !important;
        transform-origin: center;
        transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    #__heroSection .mythra-gaming-night__button:active {
        filter: brightness(.96) !important;
        transform: translateY(3px) scale(.975) !important;
        box-shadow:
            inset 0 4px 7px rgba(70, 0, 0, .60),
            inset 0 -1px 0 rgba(255, 255, 255, .12),
            0 2px 0 #760000,
            0 4px 8px rgba(0, 0, 0, .26) !important;
    }

    @keyframes mythraTabletGamingStrokeRun {
        from { stroke-dashoffset: 0; }
        to { stroke-dashoffset: -1000; }
    }
}

@media (min-width: 640px) and (max-width: 1400px) and (hover: hover) and (pointer: fine) {
    #__heroSection .mythra-gaming-night__button:hover {
        transform: translateY(-2px) scale(1.04) !important;
        box-shadow:
            inset 0 3px 0 rgba(255, 255, 255, .29),
            inset 0 -4px 0 rgba(78, 0, 0, .43),
            0 0 21px rgba(255, 0, 0, .45),
            0 0 45px rgba(255, 0, 0, .17) !important;
    }
}

@media (min-width: 640px) and (max-width: 1400px) and (prefers-reduced-motion: reduce) {
    #__heroSection .mythra-gaming-night__border-runner rect {
        animation: none !important;
        stroke-dashoffset: -80;
    }
}