/* =========================================================
   MYTHRA CRAFT — KREDİ BANNERI V3 / MASAÜSTÜ

   Önceki "MASAÜSTÜ KREDİ YÜKLEME BANNERI" CSS bloğunun
   tamamını silip yalnızca bu bloğu kullanın.
   PHP/HTML bölümünde değişiklik gerekmez.
   ========================================================= */

.mythra-credit-promo {
    display: none;
}

@media (min-width: 1280px) {
    .mythra-credit-promo {
        position: relative;
        z-index: 35;
        display: block;
        width: min(1400px, calc(100vw - 48px));

        /* Önceki 34px üst boşluk azaltıldı. Taşan karakterler
           üstteki panellere yaklaşarak aradaki boşluğu doldurur. */
        margin: 18px auto 70px;
        box-sizing: border-box;
    }

    .mythra-credit-promo__panel {
        position: relative;
        isolation: isolate;
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(340px, 410px)
            190px;
        align-items: center;
        gap: 28px;

        min-height: 174px;
        padding: 24px 34px 22px 46px;
        box-sizing: border-box;
        overflow: visible;

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

        background: linear-gradient(
            112deg,
            #7f3fb5 0%,
            #9e47b9 45%,
            #c653b8 100%
        ) !important;

        /* Ayrı koyu alt tabaka kaldırıldı.
           Yalnızca üst ve alt iç emboss + doğal siyah gölge kaldı. */
        box-shadow:
            inset 0 6px 0 rgba(255, 255, 255, 0.22),
            inset 3px 0 0 rgba(255, 255, 255, 0.075),
            inset -3px 0 0 rgba(78, 19, 88, 0.16),
            inset 0 -9px 0 rgba(72, 20, 92, 0.40),
            0 15px 25px rgba(0, 0, 0, 0.18) !important;
    }

    .mythra-credit-promo__copy {
        position: relative;
        z-index: 5;
        min-width: 0;
    }

    .mythra-credit-promo__copy h2 {
        display: inline-block;
        margin: 0;
        font-size: clamp(27px, 2vw, 35px);
        line-height: 1.08;
        font-weight: 900;
        letter-spacing: -0.025em;
        text-transform: uppercase;

        /* İlk ve son karesi matematiksel olarak aynı olan,
           başa sarma noktası görünmeyen kesintisiz gradient. */
        color: #ffffff;
        background-image: linear-gradient(
            90deg,
            #ffffff 0%,
            #ffe0f4 12.5%,
            #ff74c4 25%,
            #e59de8 37.5%,
            #d1b1ff 50%,
            #e59de8 62.5%,
            #ff74c4 75%,
            #ffe0f4 87.5%,
            #ffffff 100%
        );
        background-size: 200% 100%;
        background-repeat: repeat-x;
        background-position: 0% 50%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: mythraCreditTitleFlow 5.4s linear infinite;

        /* Blur kullanılmayan, harflerin hemen altındaki sert gölge. */
 text-shadow: none;
filter: drop-shadow(0 3px 0 #702276);
    }

    .mythra-credit-promo__copy p {
        display: grid;
        gap: 3px;
        margin: 13px 0 0;
        color: rgba(255, 255, 255, 0.90);
        font-size: 15px;
        line-height: 1.42;
        font-weight: 650;

        /* Açıklama harflerinin altında kutumsu, blursuz koyu katman. */
        text-shadow:
            0 2px 0 #6b226f,
            1px 2px 0 rgba(66, 14, 73, 0.90);
    }

    .mythra-credit-promo__copy p span {
        display: block;
    }

    /* -----------------------------------------------------
       KARAKTERLER — BÜYÜK, Y EKSENİNDE YUKARI TAŞAN
       ----------------------------------------------------- */

    .mythra-credit-promo__art {
        position: relative;
        z-index: 6;
        align-self: stretch;
        min-height: 174px;
        pointer-events: none;
    }

    .mythra-credit-promo__art img {
        position: absolute;
        left: 50%;
        top: 50%;
        bottom: auto;

        /* Önceki 350px değerinden büyütüldü. */
        width: 430px;
        max-width: none;
        height: auto;

        /* Görsel merkezi yukarı çekilir; karakterlerin üst kısmı
           banner dışına taşarak üstteki boşluğu görsel olarak kapatır. */
        transform: translate(-50%, -72%);
        transform-origin: center center;

        image-rendering: pixelated;
        image-rendering: crisp-edges;
        user-select: none;
        -webkit-user-drag: none;
        filter: drop-shadow(0 12px 10px rgba(57, 15, 75, 0.22));
    }

    /* -----------------------------------------------------
       MAĞAZAYA GİT — HEADER SEPET BUTONUYLA AYNI SİSTEM
       ----------------------------------------------------- */

    .mythra-credit-promo__button {
        position: relative;
        z-index: 7;
        isolation: isolate;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        min-height: 56px;
        padding: 0 23px;
        box-sizing: border-box;

        border: 1px solid rgba(255, 234, 247, 0.78) !important;
        border-radius: 14px;
        outline: 0;

        /* Yalnızca normal durum IP/Play butonunun pembe paletidir.
           Hover ve active aşağıda sepet butonuyla aynı kalır. */
        color: #57083f !important;
        background-color: #ffafe6 !important;
        background-image: linear-gradient(
            180deg,
            #ffe3f0 0%,
            #ffbce9 42%,
            #ff87e1 100%
        ) !important;

        box-shadow:
            inset 0 2px 0 rgba(255, 255, 255, 0.68),
            inset 1px 0 0 rgba(255, 255, 255, 0.24),
            inset -1px 0 0 rgba(133, 12, 91, 0.16),
            inset 0 -3px 0 rgba(145, 40, 111, 0.34),
            0 3px 0 #c55f9e,
            0 5px 0 #a34880,
            0 8px 14px rgba(111, 14, 78, 0.28),
            0 0 18px 4px rgba(255, 100, 207, 0.24) !important;

        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62);

        font-size: 15px;
        font-weight: 850;
        text-decoration: none !important;
        white-space: nowrap;
        cursor: pointer;
        transform: translateY(0) scale(1);

        transition:
            transform 180ms ease,
            color 180ms ease,
            background-color 180ms ease,
            border-color 180ms ease,
            box-shadow 180ms ease !important;
    }

    .mythra-credit-promo__button:hover,
    .mythra-credit-promo__button:focus-visible {
        color: #ffffff !important;
        background-color: #ff0099 !important;
        background-image: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.05) 45%,
            rgba(105, 0, 63, 0.25) 100%
        ) !important;
        border-color: rgba(255, 160, 218, 0.58) !important;

        box-shadow:
            inset 0 2px 0 rgba(255, 255, 255, 0.30),
            inset 0 -3px 0 rgba(105, 0, 63, 0.40),
            0 3px 0 #9c005e,
            0 8px 18px rgba(255, 0, 153, 0.30),
            0 0 25px rgba(255, 0, 153, 0.16) !important;

        transform: translateY(-2px) !important;
    }

    .mythra-credit-promo__button:active {
        color: #ffffff !important;
        background-color: #ff0099 !important;
        transform: translateY(2px) scale(0.97) !important;
        box-shadow:
            inset 0 3px 6px rgba(82, 0, 49, 0.52),
            inset 0 -1px 0 rgba(255, 255, 255, 0.14),
            0 1px 0 #8b0054 !important;
    }

    .mythra-credit-promo__button:focus-visible {
        outline: 2px solid #ff4db3;
        outline-offset: 3px;
    }

    .mythra-credit-promo__button span,
    .mythra-credit-promo__button i {
        position: relative;
        z-index: 2;
        pointer-events: none;
    }
}

@keyframes mythraCreditTitleFlow {
    0% {
        background-position: 0% 50%;
    }
    100% {
        /* 200% konumu tam bir doku periyodudur. Başlangıç ve
           bitiş kareleri aynı olduğu için sıçrama görünmez. */
        background-position: 200% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mythra-credit-promo__copy h2 {
        animation: none !important;
        background-position: 50% 50% !important;
    }

    .mythra-credit-promo__button {
        transition: none !important;
    }
}
/* =========================================================
   MYTHRA CRAFT — KREDİ BANNERI MOBİL + TABLET EKLENTİSİ

   Masaüstü V3 CSS bloğu korunacak.
   Bu blok Özel CSS'in en altına ayrıca eklenecek.
   PHP veya theme.js değişikliği gerekmez.
   ========================================================= */

@media (max-width: 1279px) {
    .mythra-credit-promo {
        position: relative;
        z-index: 35;
        display: block !important;
        box-sizing: border-box;
    }

    .mythra-credit-promo__panel {
        position: relative;
        isolation: isolate;
        box-sizing: border-box;
        overflow: visible;

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

        background: linear-gradient(
            145deg,
            #773aad 0%,
            #9c46b9 48%,
            #c653b8 100%
        ) !important;

        /* Masaüstündeki gibi yalnızca iç üst/alt emboss. */
        box-shadow:
            inset 0 5px 0 rgba(255, 255, 255, 0.23),
            inset 3px 0 0 rgba(255, 255, 255, 0.075),
            inset -3px 0 0 rgba(78, 19, 88, 0.16),
            inset 0 -8px 0 rgba(72, 20, 92, 0.42),
            0 14px 24px rgba(0, 0, 0, 0.18) !important;
    }

    .mythra-credit-promo__copy {
        position: relative;
        z-index: 5;
        min-width: 0;
    }

    .mythra-credit-promo__copy h2 {
        display: inline-block;
        margin: 0;
        color: #ffffff;
        font-weight: 900;
        line-height: 1.08;
        letter-spacing: -0.025em;
        text-transform: uppercase;

        /* Masaüstündeki kesintisiz gradient döngüsü. */
        background-image: linear-gradient(
            90deg,
            #ffffff 0%,
            #ffe0f4 12.5%,
            #ff74c4 25%,
            #e59de8 37.5%,
            #d1b1ff 50%,
            #e59de8 62.5%,
            #ff74c4 75%,
            #ffe0f4 87.5%,
            #ffffff 100%
        );
        background-size: 200% 100%;
        background-repeat: repeat-x;
        background-position: 0% 50%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: mythraCreditTitleFlow 5.4s linear infinite;

        text-shadow: none;
        filter: drop-shadow(0 3px 0 #702276);
    }

    .mythra-credit-promo__copy p {
        display: grid;
        gap: 4px;
        margin: 12px 0 0;
        color: rgba(255, 255, 255, 0.92);
        font-weight: 700;
        line-height: 1.45;
        text-shadow:
            0 2px 0 #6b226f,
            1px 2px 0 rgba(66, 14, 73, 0.90);
    }

    .mythra-credit-promo__copy p span {
        display: block;
    }

    .mythra-credit-promo__art {
        position: relative;
        z-index: 6;
        min-width: 0;
        pointer-events: none;
    }

    .mythra-credit-promo__art img {
        position: absolute;
        left: 50%;
        width: 100%;
        max-width: none;
        height: auto;
        transform: translateX(-50%);
        transform-origin: center center;
        image-rendering: pixelated;
        image-rendering: crisp-edges;
        user-select: none;
        -webkit-user-drag: none;
        filter: drop-shadow(0 10px 9px rgba(57, 15, 75, 0.22));
    }

    /* IP/Play paleti + sepet butonunun emboss sistemi. */
    .mythra-credit-promo__button {
        position: relative;
        z-index: 7;
        isolation: isolate;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 11px;
        min-height: 54px;
        padding: 0 22px;
        box-sizing: border-box;

        border: 1px solid rgba(255, 234, 247, 0.78) !important;
        border-radius: 14px;
        outline: 0;

        color: #57083f !important;
        background-color: #ffafe6 !important;
        background-image: linear-gradient(
            180deg,
            #ffe3f0 0%,
            #ffbce9 42%,
            #ff87e1 100%
        ) !important;

        box-shadow:
            inset 0 2px 0 rgba(255, 255, 255, 0.68),
            inset 1px 0 0 rgba(255, 255, 255, 0.24),
            inset -1px 0 0 rgba(133, 12, 91, 0.16),
            inset 0 -3px 0 rgba(145, 40, 111, 0.34),
            0 3px 0 #c55f9e,
            0 5px 0 #a34880,
            0 8px 14px rgba(111, 14, 78, 0.28),
            0 0 18px 4px rgba(255, 100, 207, 0.20) !important;

        font-weight: 850;
        text-decoration: none !important;
        white-space: nowrap;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62);
        cursor: pointer;
        transform: translateY(0) scale(1);
        -webkit-tap-highlight-color: transparent;

        transition:
            transform 180ms ease,
            color 180ms ease,
            background-color 180ms ease,
            border-color 180ms ease,
            box-shadow 180ms ease !important;
    }

    .mythra-credit-promo__button:active {
        color: #ffffff !important;
        background-color: #ff0099 !important;
        background-image: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.05) 45%,
            rgba(105, 0, 63, 0.25) 100%
        ) !important;
        border-color: rgba(255, 160, 218, 0.58) !important;
        transform: translateY(3px) scale(0.975) !important;
        box-shadow:
            inset 0 3px 6px rgba(82, 0, 49, 0.52),
            inset 0 -1px 0 rgba(255, 255, 255, 0.14),
            0 1px 0 #8b0054 !important;
    }

    .mythra-credit-promo__button span,
    .mythra-credit-promo__button i {
        position: relative;
        z-index: 2;
        pointer-events: none;
    }
}

/* =========================================================
   TABLET — METİN/BUTON SOLDA, KARAKTERLER SAĞDA
   ========================================================= */

@media (min-width: 768px) and (max-width: 1279px) {
    .mythra-credit-promo {
        width: min(1040px, calc(100% - 36px));
        margin: 62px auto 64px;
    }

    .mythra-credit-promo__panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
        grid-template-areas:
            "copy art"
            "button art";
        align-items: center;
        column-gap: 28px;
        row-gap: 18px;
        min-height: 210px;
        padding: 28px 30px 27px 34px;
    }

    .mythra-credit-promo__copy {
        grid-area: copy;
        align-self: end;
    }

    .mythra-credit-promo__copy h2 {
        font-size: clamp(25px, 3.2vw, 32px);
    }

    .mythra-credit-promo__copy p {
        max-width: 570px;
        font-size: clamp(13px, 1.65vw, 15px);
    }

    .mythra-credit-promo__art {
        grid-area: art;
        align-self: stretch;
        min-height: 210px;
    }

    .mythra-credit-promo__art img {
        top: 50%;
        width: clamp(310px, 38vw, 390px);
        transform: translate(-50%, -58%);
    }

    .mythra-credit-promo__button {
        grid-area: button;
        justify-self: start;
        width: 190px;
        font-size: 14px;
    }
}

/* =========================================================
   TELEFON — ÜSTTEN TAŞAN KARAKTERLER + ORTALI KART
   ========================================================= */

@media (max-width: 767px) {
    .mythra-credit-promo {
        width: calc(100% - 28px);
        max-width: 440px;
        margin: 118px auto 54px;
    }

    .mythra-credit-promo__panel {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 338px;

        /* Üst alan taşan karakterlere ayrılır. */
        padding: 132px 18px 24px;
        text-align: center;
    }

    .mythra-credit-promo__copy {
        order: 2;
        width: 100%;
    }

    .mythra-credit-promo__copy h2 {
        font-size: clamp(22px, 7vw, 28px);
    }

    .mythra-credit-promo__copy p {
        max-width: 355px;
        margin: 13px auto 0;
        font-size: clamp(12px, 3.55vw, 14px);
        line-height: 1.48;
    }

    .mythra-credit-promo__art {
        position: absolute;
        z-index: 6;
        order: 1;
        top: -92px;
        left: 50%;
        width: min(330px, 88vw);
        height: 220px;
        transform: translateX(-50%);
    }

    .mythra-credit-promo__art img {
        top: 0;
        width: 100%;
        transform: translateX(-50%);
    }

    .mythra-credit-promo__button {
        order: 3;
        width: min(235px, 82%);
        margin-top: 22px;
        font-size: 14px;
    }
}

/* Hover yalnızca gerçek fare kullanan cihazlarda çalışır. */
@media (max-width: 1279px) and (hover: hover) and (pointer: fine) {
    .mythra-credit-promo__button:hover,
    .mythra-credit-promo__button:focus-visible {
        color: #ffffff !important;
        background-color: #ff0099 !important;
        background-image: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.05) 45%,
            rgba(105, 0, 63, 0.25) 100%
        ) !important;
        border-color: rgba(255, 160, 218, 0.58) !important;
        box-shadow:
            inset 0 2px 0 rgba(255, 255, 255, 0.30),
            inset 0 -3px 0 rgba(105, 0, 63, 0.40),
            0 3px 0 #9c005e,
            0 8px 18px rgba(255, 0, 153, 0.30),
            0 0 25px rgba(255, 0, 153, 0.16) !important;
        transform: translateY(-2px) !important;
    }
}

@media (max-width: 1279px) and (prefers-reduced-motion: reduce) {
    .mythra-credit-promo__copy h2 {
        animation: none !important;
        background-position: 50% 50% !important;
    }

    .mythra-credit-promo__button {
        transition: none !important;
    }
}

/* =========================================================
   RESPONSIVE V2 — KREDİ BANNER TAŞMA DÜZELTMESİ
   ========================================================= */
@media (min-width: 768px) and (max-width: 1279px) {
    .mythra-credit-promo__panel {
        overflow: hidden !important;
        grid-template-columns: minmax(0, 1fr) minmax(230px, 34%) !important;
    }

    .mythra-credit-promo__art {
        width: 100% !important;
        min-width: 0 !important;
    }

    .mythra-credit-promo__art img {
        width: min(360px, 40vw) !important;
        max-height: 245px !important;
        object-fit: contain !important;
    }
}

@media (max-width: 767px) {
    .mythra-credit-promo {
        width: min(440px, calc(100% - 28px)) !important;
        margin: 42px auto 54px !important;
    }

    .mythra-credit-promo__panel {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "art" "copy" "button" !important;
        gap: 12px !important;
        min-height: 0 !important;
        padding: 22px 18px 27px !important;
        overflow: hidden !important;
        text-align: center !important;
    }

    .mythra-credit-promo__art {
        position: relative !important;
        z-index: 4 !important;
        inset: auto !important;
        grid-area: art !important;
        width: min(100%, 330px) !important;
        height: auto !important;
        min-height: 175px !important;
        margin: 0 auto !important;
        transform: none !important;
    }

    .mythra-credit-promo__art img {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: min(100%, 320px) !important;
        max-height: 205px !important;
        object-fit: contain !important;
        transform: translate(-50%, -50%) !important;
    }

    .mythra-credit-promo__copy {
        z-index: 5 !important;
        grid-area: copy !important;
        width: 100% !important;
    }

    .mythra-credit-promo__button {
        grid-area: button !important;
        width: min(235px, 88%) !important;
        margin: 8px auto 0 !important;
    }
}