/* =========================================================
   MYTHRA CRAFT — KESİNTİSİZ EJDERHA SALINIMI

   Çok sayıda ara nokta ve linear zamanlama sayesinde
   hiçbir noktada duraklama veya hız kesme oluşmaz.
   Yalnızca masaüstünde çalışır.
   ========================================================= */

@media (min-width: 640px) {

    #mythra-header .mythra-header-logo {
        animation:
            mythraDragonOrbit
            7s
            linear
            infinite !important;

        will-change: transform;
    }

    @keyframes mythraDragonOrbit {
        0% {
            transform: translate3d(0, -8px, 0);
        }

        6.25% {
            transform: translate3d(4px, -7.5px, 0);
        }

        12.5% {
            transform: translate3d(7px, -6px, 0);
        }

        18.75% {
            transform: translate3d(9px, -3px, 0);
        }

        25% {
            transform: translate3d(10px, 0, 0);
        }

        31.25% {
            transform: translate3d(9px, 3px, 0);
        }

        37.5% {
            transform: translate3d(7px, 6px, 0);
        }

        43.75% {
            transform: translate3d(4px, 7.5px, 0);
        }

        50% {
            transform: translate3d(0, 8px, 0);
        }

        56.25% {
            transform: translate3d(-4px, 7.5px, 0);
        }

        62.5% {
            transform: translate3d(-7px, 6px, 0);
        }

        68.75% {
            transform: translate3d(-9px, 3px, 0);
        }

        75% {
            transform: translate3d(-10px, 0, 0);
        }

        81.25% {
            transform: translate3d(-9px, -3px, 0);
        }

        87.5% {
            transform: translate3d(-7px, -6px, 0);
        }

        93.75% {
            transform: translate3d(-4px, -7.5px, 0);
        }

        100% {
            transform: translate3d(0, -8px, 0);
        }
    }
}

@media (min-width: 640px) and (prefers-reduced-motion: reduce) {
    #mythra-header .mythra-header-logo {
        animation: none !important;
        transform: none !important;
        will-change: auto;
    }
}
/* =========================================================
   MYTHRA CRAFT — MASAÜSTÜ HERO ALT GEÇİŞİ

   Yalnızca PC sürümünde çalışır.
   Kıvrımlı SVG kaldırılır.
   Hero görseli, site arka planına yumuşakça karışır.
   ========================================================= */

@media (min-width: 640px) {

    /* Hero katmanlarının kontrollü sıralanması */
    #__heroSection {
        position: relative;
        isolation: isolate;
    }

    /*
     * Home.php içerisindeki kıvrımlı SVG'yi kaldırır.
     * Yalnızca hero'nun doğrudan altındaki SVG hedeflenir.
     */
    #__heroSection > svg {
        display: none !important;
    }

    /*
     * Üstte tamamen şeffaftır.
     * Aşağı indikçe Gale temasının gerçek arka plan rengine dönüşür.
     */
    #__heroSection::after {
        content: "";
        position: absolute;
        z-index: 16;
        left: 0;
        right: 0;
        bottom: -1px;

        width: 100%;
        height: 65%;

        pointer-events: none;

        background: linear-gradient(
            to bottom,

            rgb(var(--color-voon-background) / 0) 0%,
            rgb(var(--color-voon-background) / 0.04) 14%,
            rgb(var(--color-voon-background) / 0.12) 28%,
            rgb(var(--color-voon-background) / 0.30) 43%,
            rgb(var(--color-voon-background) / 0.58) 61%,
            rgb(var(--color-voon-background) / 0.82) 78%,
            rgb(var(--color-voon-background) / 0.96) 91%,
            rgb(var(--color-voon-background) / 1) 100%
        );
    }

    /*
     * Hero yazıları ve butonları gradientin üstünde kalır.
     * Gradient yalnızca arka plan görselini soldurur.
     */
    #__heroSection .section {
        position: relative;
        z-index: 20;
    }

    /*
     * Hero altındaki katılım kutusu gradientin üzerinde kalır.
     */
    body:has(#__heroSection)
    #__heroSection + section {
        position: relative;
        z-index: 22;
    }
}
/* =========================================================
   MYTHRA CRAFT — MASAÜSTÜ ANA ARKA PLAN RENGİ

   #4d032d = RGB 77 3 45
   Yalnızca PC sürümünde uygulanır.
   ========================================================= */

@media (min-width: 640px) {

    :root {
        --color-voon-background: 38 0 22 !important;
    }

    html,
    body,
    #app,
    main.main {
        background-color: #260016 !important;
    }
}
/* =========================================================
   MYTHRA CRAFT — RESPONSIVE HERO / TEK TEMİZ SÜRÜM

   PC ve mobil aynı tasarım sistemini kullanır.
   Yerleşim ve etkileşimler cihaz türüne göre uyarlanır.

   Bu dosya önceki hero CSS bloklarının tamamının yerine
   tek başına kullanılmalıdır.
   ========================================================= */

/* =========================================================
   ORTAK TEMA ARKA PLANI
   #260016 = RGB 38 0 22
   ========================================================= */

:root {
    --color-voon-background: 38 0 22 !important;
}

html,
body,
#app,
main.main {
    background-color: #260016 !important;
}

/* =========================================================
   ORTAK HERO YAPISI
   ========================================================= */

/* Yeni hero bütün cihazlarda kullanılır. */
#__heroSection .mythra-desktop-hero-content {
    position: relative !important;
    z-index: 30 !important;

    display: flex !important;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
}

/* Eski mobil hero ve eski siyah katılım kutusu kaldırılır. */
.mythra-original-mobile-hero,
.mythra-join-widget {
    display: none !important;
}

/* Home.php içerisindeki kıvrımlı SVG kaldırılır. */
#__heroSection > svg {
    display: none !important;
}

#__heroSection {
    position: relative;
    isolation: isolate;
}

/* Eski, içeriğin tamamını karartan gradient kullanılmaz. */
#__heroSection::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Gradient her carousel arka plan görselinin içinde çalışır. */
#__heroSection
.carousel
div[style*="background-image"] {
    position: absolute !important;
    isolation: isolate;
}

#__heroSection
.carousel
div[style*="background-image"]::after {
    content: "";
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: -1px;

    width: 100%;
    pointer-events: none;

    background: linear-gradient(
        to bottom,
        rgb(var(--color-voon-background) / 0) 0%,
        rgb(var(--color-voon-background) / 0.04) 14%,
        rgb(var(--color-voon-background) / 0.12) 28%,
        rgb(var(--color-voon-background) / 0.30) 43%,
        rgb(var(--color-voon-background) / 0.58) 61%,
        rgb(var(--color-voon-background) / 0.82) 78%,
        rgb(var(--color-voon-background) / 0.96) 91%,
        rgb(var(--color-voon-background) / 1) 100%
    );
}

.mythra-hero-description,
.mythra-hero-play-button,
.mythra-hero-features,
.mythra-hero-online-status {
    position: relative;
    z-index: 31;
}

/* =========================================================
   ORTAK AÇIKLAMA
   ========================================================= */

.mythra-hero-description {
    margin: 0;
    color: rgba(255, 255, 255, 0.96);
    font-weight: 650;
    letter-spacing: 0.01em;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.72),
        0 0 18px rgba(255, 0, 153, 0.15);
}

/* =========================================================
   ORTAK #922BFF DÜZ EMBOSS BUTON

   Ana bağlantı tek katman olarak ölçeklenir.
   Yüzey, ikon ve yazı ayrı ayrı hareket ettirilmez.
   ========================================================= */

.mythra-hero-play-button {
    position: relative;
    isolation: isolate;
    overflow: visible !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    border: 0 !important;
    border-radius: 16px;
    outline: 0 !important;

    color: #ffffff;
    background: transparent !important;

    box-shadow:
        0 9px 14px -5px rgba(0, 0, 0, 0.80);

    transform: scale(1) !important;
    transform-origin: center;
    translate: none !important;
    animation: none !important;

    font-weight: 800;

    transition:
        transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 250ms ease !important;
}

/* Eski kayan ışık katmanı kullanılmaz. */
.mythra-hero-play-button::before {
    content: none !important;
    display: none !important;
}

/* Butonun görsel emboss yüzeyi. */
.mythra-hero-play-button::after {
    content: "" !important;
    position: absolute;
    z-index: 0;
    inset: 0;

    display: block !important;
    border: 0;
    border-radius: inherit;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.20) 0%,
            rgba(255, 255, 255, 0.075) 31%,
            rgba(255, 255, 255, 0) 52%,
            rgba(47, 0, 99, 0.28) 100%
        ),
        #922bff !important;

    /* Düz emboss: dış çizgi ve 3D alt basamak yoktur. */
    box-shadow:
        inset 0 3px 0 rgba(255, 255, 255, 0.24),
        inset 2px 0 0 rgba(255, 255, 255, 0.075),
        inset -2px 0 0 rgba(49, 0, 104, 0.20),
        inset 0 -4px 0 rgba(49, 0, 104, 0.42);

    transform: none !important;
    transition: box-shadow 250ms ease !important;
}

/* İçerik, ana butonun doğal bir parçasıdır. */
.mythra-hero-play-button > i,
.mythra-hero-play-button > span {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;

    line-height: 1 !important;
    transform: none !important;
    translate: none !important;
    transition: none !important;
    animation: none !important;
}

.mythra-hero-play-button > i {
    justify-content: center;
}

/* =========================================================
   ORTAK ÖZELLİKLER
   ========================================================= */

.mythra-hero-features {
    align-items: center;
    justify-content: center;
}

.mythra-hero-feature {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: rgba(255, 255, 255, 0.88);
    font-weight: 650;

    text-shadow:
        0 2px 7px rgba(0, 0, 0, 0.72);
}

.mythra-hero-feature i {
    color: #ff0099;

    text-shadow:
        0 0 9px rgba(255, 0, 153, 0.42);
}

/* =========================================================
   ORTAK CANLI OYUNCU DURUMU
   ========================================================= */

.mythra-hero-online-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border: 1px solid rgba(255, 0, 153, 0.18);
    border-radius: 999px;

    color: rgba(255, 255, 255, 0.76);
    background: rgba(13, 4, 10, 0.62);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -2px 0 rgba(0, 0, 0, 0.20),
        0 8px 20px rgba(0, 0, 0, 0.16);

    font-weight: 600;
    line-height: 1.35;
    word-spacing: 1px;
}

.mythra-hero-online-status strong {
    display: inline-block;
    margin-right: 5px;
    color: #ffffff;
    font-weight: 850;
    letter-spacing: 0.01em;
}

.mythra-hero-online-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 999px;
}

.mythra-hero-online-dot.is-online {
    background: #00ff4c;
    box-shadow:
        0 0 8px rgba(0, 255, 76, 0.64),
        0 0 15px rgba(0, 255, 76, 0.24);
}

.mythra-hero-online-dot.is-empty {
    background: #ff0099;
    box-shadow:
        0 0 8px rgba(255, 0, 153, 0.55),
        0 0 14px rgba(255, 0, 153, 0.20);
}

/* =========================================================
   MASAÜSTÜ YERLEŞİMİ
   ========================================================= */

@media (min-width: 640px) {

    #__heroSection
    .carousel
    div[style*="background-image"]::after {
        height: 54%;
    }

    #__heroSection .mythra-desktop-hero-content {
        min-height: clamp(680px, 88vh, 840px);
        padding: 245px 24px 145px;
    }

    .mythra-hero-description {
        max-width: 760px;
        font-size: clamp(19px, 1.45vw, 23px);
        line-height: 1.45;
    }

    .mythra-hero-play-button {
        min-width: 190px;
        min-height: 54px;
        margin-top: 27px;
        padding: 13px 27px;
        font-size: 14px;
    }

    .mythra-hero-play-button > i {
        font-size: 18px;
    }

    .mythra-hero-features {
        display: flex;
        flex-wrap: wrap;
        column-gap: 14px;
        row-gap: 10px;
        margin-top: 31px;
    }

    .mythra-hero-feature {
        font-size: 13px;
    }

    .mythra-hero-feature i {
        font-size: 14px;
    }

    .mythra-hero-feature:not(:last-child)::after {
        content: "";
        width: 3px;
        height: 3px;
        margin-left: 14px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.20);
    }

    .mythra-hero-online-status {
        margin-top: 24px;
        padding: 9px 17px;
        font-size: 11px;
    }

    .mythra-hero-online-status strong {
        font-size: 12px;
    }
}

/* Masaüstünde hover destekleyen cihazlar. */
@media (min-width: 640px) and (hover: hover) and (pointer: fine) {

    /* Bütün buton tek kompozit katman olarak büyür. */
    .mythra-hero-play-button:hover,
    .mythra-hero-play-button:focus-visible {
        box-shadow: none !important;
        transform: scale(1.085) !important;
    }

    .mythra-hero-play-button:hover::after,
    .mythra-hero-play-button:focus-visible::after {
        box-shadow:
            inset 0 3px 0 rgba(255, 255, 255, 0.27),
            inset 2px 0 0 rgba(255, 255, 255, 0.09),
            inset -2px 0 0 rgba(49, 0, 104, 0.20),
            inset 0 -4px 0 rgba(49, 0, 104, 0.44),

            0 0 22px 5px rgba(146, 43, 255, 0.56),
            0 0 52px 13px rgba(146, 43, 255, 0.32),
            0 0 92px 24px rgba(146, 43, 255, 0.16),
            0 0 125px 34px rgba(146, 43, 255, 0.07) !important;
    }

    .mythra-hero-play-button:active {
        box-shadow: none !important;
        transform: scale(1.045) !important;
    }

    .mythra-hero-play-button:active::after {
        box-shadow:
            inset 0 3px 0 rgba(255, 255, 255, 0.23),
            inset 2px 0 0 rgba(255, 255, 255, 0.075),
            inset -2px 0 0 rgba(49, 0, 104, 0.20),
            inset 0 -4px 0 rgba(49, 0, 104, 0.42),

            0 0 18px 4px rgba(146, 43, 255, 0.48),
            0 0 42px 10px rgba(146, 43, 255, 0.26),
            0 0 76px 18px rgba(146, 43, 255, 0.12) !important;
    }
}

/* =========================================================
   MOBİL YERLEŞİMİ
   ========================================================= */

@media (max-width: 639px) {

    /* Mobilde gradient daha erken başlar ve geçiş yumuşar. */
    #__heroSection
    .carousel
    div[style*="background-image"]::after {
        height: 67%;

        background: linear-gradient(
            to bottom,
            rgba(38, 0, 22, 0) 0%,
            rgba(38, 0, 22, 0.06) 13%,
            rgba(38, 0, 22, 0.16) 27%,
            rgba(38, 0, 22, 0.36) 43%,
            rgba(38, 0, 22, 0.64) 61%,
            rgba(38, 0, 22, 0.86) 78%,
            rgba(38, 0, 22, 0.97) 91%,
            #260016 100%
        ) !important;
    }

    /* Mobil carousel'ın boş kalan zemini de tema rengiyle aynı tutulur. */
    #__heroSection,
    #__heroSection .carousel,
    #__heroSection .flickity-viewport,
    #__heroSection .flickity-slider {
        background-color: #260016 !important;
    }

    #__heroSection
    .carousel
    div[style*="background-image"] {
        background-position: center top !important;
    }

    #__heroSection .mythra-desktop-hero-content {
        width: calc(100% - 24px) !important;
        max-width: 430px !important;
        min-height: 680px;
        min-height: max(680px, 100svh);
        margin-right: auto !important;
        margin-left: auto !important;

        padding: 142px 8px 88px;
    }

    .mythra-hero-description {
        max-width: 350px;
        font-size: clamp(16px, 4.7vw, 19px);
        line-height: 1.42;
    }

    .mythra-hero-play-button {
        min-width: 174px;
        min-height: 50px;
        margin-top: 22px;
        padding: 12px 22px;
        border-radius: 15px;
        font-size: 13px;
    }

    .mythra-hero-play-button > i {
        font-size: 16px;
    }

    /* Mobilde özellikler dokunmatik dostu 2×2 kartlardır. */
    .mythra-hero-features {
        display: grid;
        width: min(100%, 350px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        margin-top: 25px;
    }

    .mythra-hero-feature {
        min-width: 0;
        min-height: 45px;
        padding: 8px 10px;

        border: 1px solid rgba(255, 0, 153, 0.12);
        border-radius: 12px;

        color: rgba(255, 255, 255, 0.82);
        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.045),
                rgba(255, 255, 255, 0.012)
            ),
            rgba(17, 5, 13, 0.58);

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.055),
            inset 0 -2px 0 rgba(0, 0, 0, 0.24),
            0 7px 14px rgba(0, 0, 0, 0.13);

        font-size: 10.5px;
        line-height: 1.2;
        text-align: left;
    }

    .mythra-hero-feature i {
        display: inline-grid;
        width: 20px;
        flex: 0 0 20px;
        place-items: center;
        font-size: 13px;
    }

    /* Masaüstü ayırıcı noktaları mobilde kullanılmaz. */
    .mythra-hero-feature::after {
        content: none !important;
        display: none !important;
    }

    .mythra-hero-online-status {
        max-width: calc(100vw - 38px);
        margin-top: 18px;
        padding: 9px 14px;
        font-size: 10px;
        white-space: nowrap;
    }

    .mythra-hero-online-status strong {
        margin-right: 4px;
        font-size: 11px;
    }

    /* Dokunma sırasında kısa ve dengeli geri bildirim. */
    .mythra-hero-play-button:active {
        box-shadow: none !important;
        transform: scale(1.035) !important;
    }

    .mythra-hero-play-button:active::after {
        box-shadow:
            inset 0 3px 0 rgba(255, 255, 255, 0.24),
            inset 2px 0 0 rgba(255, 255, 255, 0.08),
            inset -2px 0 0 rgba(49, 0, 104, 0.20),
            inset 0 -4px 0 rgba(49, 0, 104, 0.42),
            0 0 18px 4px rgba(146, 43, 255, 0.42),
            0 0 38px 9px rgba(146, 43, 255, 0.20) !important;
    }
}

/* Çok dar telefonlarda metinlerin sıkışmasını önler. */
@media (max-width: 359px) {
    .mythra-hero-features {
        grid-template-columns: 1fr;
        width: min(100%, 270px);
    }

    .mythra-hero-feature {
        justify-content: flex-start;
        min-height: 40px;
    }

    .mythra-hero-online-status {
        white-space: normal;
    }
}

/* Sistem hareket azaltma tercihine saygı gösterir. */
@media (prefers-reduced-motion: reduce) {
    .mythra-hero-play-button,
    .mythra-hero-play-button::after {
        transition: none !important;
    }

    .mythra-hero-play-button:hover,
    .mythra-hero-play-button:focus-visible,
    .mythra-hero-play-button:active {
        transform: none !important;
    }
}

/* =========================================================
   RESPONSIVE V2 — TABLET HERO AKIŞI
   Masaüstü görünümünü değiştirmez. 640–1279px aralığında
   hero içeriğini sabit koordinatlar yerine normal akışa alır.
   ========================================================= */
@media (min-width: 640px) and (max-width: 1279px),
       (min-width: 1280px) and (max-width: 1400px) and (hover: none) and (pointer: coarse) {
    #__heroSection,
    #__heroSection .carousel,
    #__heroSection .flickity-viewport,
    #__heroSection .flickity-slider {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    #__heroSection .carousel div[style*="background-image"] {
        position: absolute !important;
        inset: 0 !important;
        min-height: 100% !important;
        background-position: center top !important;
    }

    /*
     * Flickity slaytları absolute konumlandırdığı için uzayan tablet
     * içeriği carousel yüksekliğine katılmıyordu. Slaytları aynı grid
     * hücresine alarak aktif slaydın gerçek yüksekliğini koruruz.
     */
    #__heroSection .carousel.flickity-enabled .flickity-viewport {
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #__heroSection .carousel.flickity-enabled .flickity-slider {
        position: relative !important;
        display: grid !important;
        height: auto !important;
        transform: none !important;
    }

    #__heroSection .carousel.flickity-enabled .flickity-slider > * {
        position: relative !important;
        grid-area: 1 / 1 !important;
        left: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        transform: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 280ms ease !important;
    }

    #__heroSection .carousel.flickity-enabled .flickity-slider > .is-selected {
        z-index: 2 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    #__heroSection .mythra-desktop-hero-content {
        width: min(1120px, calc(100% - 36px)) !important;
        max-width: none !important;
        min-height: 0 !important;
        margin-inline: auto !important;
        padding: clamp(300px, 34vw, 350px) 0 72px !important;
        justify-content: flex-start !important;
        overflow: visible !important;
    }

    #__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; }
    #__heroSection .mythra-hero-leaderboards { order: 5; }

    #__heroSection .mythra-hero-description {
        max-width: 620px !important;
        font-size: clamp(16px, 2.2vw, 20px) !important;
        line-height: 1.45 !important;
    }

    #__heroSection .mythra-hero-features {
        width: min(100%, 670px) !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        row-gap: 10px !important;
    }
}

/* Büyük yatay tabletlerde hero üst boşluğu masaüstünden daha kompakt kalır. */
@media (min-width: 1280px) and (max-width: 1400px) and (hover: none) and (pointer: coarse) {
    #__heroSection .mythra-desktop-hero-content {
        width: min(1240px, calc(100% - 48px)) !important;
        padding-top: 270px !important;
        padding-bottom: 70px !important;
    }
}

@media (min-width: 640px) and (max-width: 820px) {
    #__heroSection .mythra-desktop-hero-content {
        width: min(100% - 28px, 760px) !important;
        padding-top: clamp(285px, 43vw, 340px) !important;
    }
}