/* =========================================================
   MYTHRA CRAFT — HESAP PANELİ
   Sağ panel dışında header tetikleyicilerine dokunmaz.
   ========================================================= */

:root {
    --mp-pink: #ff0a91;
    --mp-pink-hot: #ff2baf;
    --mp-purple: #9f16ff;
    --mp-green: #22d69b;
    --mp-red: #ff5261;
    --mp-panel: #100912;
    --mp-panel-2: #170b19;
    --mp-surface: rgba(255, 255, 255, .035);
    --mp-line: rgba(255, 65, 173, .2);
    --mp-muted: rgba(255, 255, 255, .52);
}

html.mythra-panel-open,
html.mythra-panel-open body {
    overflow: hidden;
}

.mythra-profile-drawer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    isolation: isolate;
}

.mythra-profile-drawer__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    cursor: default;
    pointer-events: auto;
    background: rgba(4, 0, 7, .7);
}

.mythra-account-panel {
    position: relative;
    z-index: 1;
    width: min(520px, 100vw);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    color: #fff;
    background:
        radial-gradient(circle at 88% 3%, rgba(255, 10, 145, .13), transparent 27%),
        linear-gradient(155deg, #180a1b 0%, #0d080f 48%, #09070b 100%);
    border-left: 1px solid rgba(255, 31, 155, .42);
    box-shadow: -22px 0 65px rgba(0, 0, 0, .56), -1px 0 18px rgba(255, 0, 139, .13);
    contain: layout paint;
}

.mythra-account-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .38;
    background-image:
        linear-gradient(135deg, transparent 0 48%, rgba(255, 47, 164, .055) 49% 51%, transparent 52%),
        linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px);
    background-size: 72px 72px, 100% 48px;
}

.mythra-account-panel::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: -105px;
    bottom: 16%;
    width: 245px;
    height: 245px;
    pointer-events: none;
    opacity: .42;
    border: 1px solid rgba(255, 36, 164, .14);
    box-shadow:
        inset 0 0 0 34px rgba(145, 23, 210, .015),
        inset 0 0 0 35px rgba(151, 31, 255, .08);
    transform: translate3d(0, 0, 0) rotate(45deg);
    will-change: transform;
    animation: mythraPanelDiamondFloat 16s ease-in-out infinite alternate;
}

.mythra-account-panel__ambient {
    position: absolute;
    top: -130px;
    right: -110px;
    z-index: 0;
    width: 350px;
    height: 350px;
    border: 1px solid rgba(255, 36, 164, .2);
    transform: translate3d(0, 0, 0) rotate(32deg);
    pointer-events: none;
    opacity: .78;
    will-change: transform;
    animation: mythraPanelAmbientOrbit 22s ease-in-out infinite alternate;
}

.mythra-account-panel__ambient::before,
.mythra-account-panel__ambient::after {
    content: "";
    position: absolute;
    inset: 34px;
    border: 1px solid rgba(151, 31, 255, .13);
}

.mythra-account-panel__ambient::after { inset: 70px; }

.mythra-account-panel__header {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 112px;
    padding: 24px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, .075);
    background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent);
}

.mythra-account-panel__identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.mythra-account-panel__avatar {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    padding: 5px;
    border: 1px solid rgba(255, 88, 184, .65);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 36, 163, .2), rgba(101, 18, 142, .18));
    box-shadow: inset 0 1px rgba(255, 255, 255, .22), 0 0 24px rgba(255, 11, 143, .17);
}

.mythra-account-panel__avatar img { width: 56px; height: 56px; }

.mythra-account-panel__status {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 16px;
    height: 16px;
    border: 3px solid #100912;
    border-radius: 50%;
    background: var(--mp-green);
    box-shadow: 0 0 10px rgba(34, 214, 155, .65);
}

.mythra-account-panel__identity-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mythra-account-panel__identity-copy > small {
    color: #ff52b3;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .17em;
}

.mythra-account-panel__identity-copy > strong {
    max-width: 295px;
    overflow: hidden;
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mythra-account-panel__identity-copy > span {
    max-width: 295px;
    overflow: hidden;
    color: var(--mp-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mythra-panel-icon-button {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: rgba(255, 255, 255, .76);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 13px;
    background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 1px rgba(255, 255, 255, .08);
    transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease;
}

.mythra-panel-icon-button:hover {
    color: #fff;
    border-color: rgba(255, 70, 170, .58);
    background: rgba(255, 20, 143, .13);
    transform: rotate(4deg);
}

.mythra-account-panel__scroll {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 24px 28px 30px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 27, 151, .6) rgba(255, 255, 255, .03);
}

.mythra-account-panel__scroll::-webkit-scrollbar { width: 5px; }
.mythra-account-panel__scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, .025); }
.mythra-account-panel__scroll::-webkit-scrollbar-thumb { background: rgba(255, 27, 151, .58); border-radius: 99px; }

.mythra-wallet-card {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 112px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 49, 162, .4);
    border-radius: 18px;
    background:
        linear-gradient(105deg, rgba(255, 13, 145, .16), rgba(117, 13, 151, .08) 48%, rgba(255, 255, 255, .025));
    box-shadow: inset 0 1px rgba(255, 255, 255, .12), inset 0 -4px rgba(77, 0, 68, .4), 0 12px 28px rgba(0, 0, 0, .22);
}

.mythra-wallet-card::after {
    content: "";
    position: absolute;
    top: -75px;
    right: 88px;
    width: 160px;
    height: 160px;
    border: 1px solid rgba(255, 79, 181, .14);
    transform: rotate(45deg);
    pointer-events: none;
}

.mythra-wallet-card__icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: #fff;
    font-size: 18px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(145deg, var(--mp-pink), var(--mp-purple));
    box-shadow:
        inset 0 2px rgba(255, 255, 255, .28),
        inset 0 -5px rgba(53, 0, 64, .42);
}

.mythra-wallet-card__content {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mythra-wallet-card__content span {
    color: rgba(255, 255, 255, .47);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .14em;
}

.mythra-wallet-card__content strong {
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.2;
    text-shadow: 0 2px 16px rgba(255, 26, 157, .25);
}

.mythra-wallet-card__content small { color: rgba(255, 255, 255, .42); font-size: 10px; }

.mythra-emboss-button,
.mythra-logout-button {
    position: relative;
    z-index: 1;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #fff;
    font-weight: 900;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease !important;
}

.mythra-emboss-button::before,
.mythra-logout-button::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -70%;
    left: -55%;
    width: 36%;
    height: 240%;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .46),
        transparent
    );
    transform: skewX(-22deg);
    transition: left 500ms cubic-bezier(.22, 1, .36, 1);
}

.mythra-emboss-button:hover::before,
.mythra-logout-button:hover::before {
    left: 125%;
}

.mythra-emboss-button {
    background-color: #ff0099;
    background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, .30) 0%,
        rgba(255, 255, 255, .09) 34%,
        rgba(255, 255, 255, 0) 54%,
        rgba(105, 0, 63, .28) 100%
    );
    border: 1px solid rgba(255, 140, 210, .58);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .40),
        inset 2px 0 0 rgba(255, 255, 255, .12),
        inset -2px 0 0 rgba(105, 0, 63, .18),
        inset 0 -3px 0 rgba(105, 0, 63, .40),
        0 3px 0 #a80065,
        0 8px 18px rgba(255, 0, 153, .22),
        0 0 22px rgba(255, 0, 153, .10);
    text-shadow: 0 1px 1px rgba(80, 0, 48, .50);
}

.mythra-emboss-button--compact {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 11px;
}

.mythra-emboss-button:hover {
    color: #fff;
    border-color: rgba(255, 210, 237, .9);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .56),
        inset 0 -3px 0 rgba(105, 0, 63, .42),
        0 4px 0 #9a005d,
        0 10px 22px rgba(255, 0, 153, .30),
        0 0 34px rgba(255, 0, 153, .20);
    filter: saturate(1.08) brightness(1.05);
    transform: translateY(-2px) !important;
}

.mythra-emboss-button:active {
    filter: brightness(.94);
    transform: translateY(2px) scale(.98) !important;
    box-shadow:
        inset 0 4px 7px rgba(91, 0, 55, .46),
        inset 0 -1px 0 rgba(255, 255, 255, .34),
        0 1px 0 #870052,
        0 3px 8px rgba(255, 0, 153, .14);
}

.mythra-panel-section { margin-top: 27px; }

.mythra-panel-section__heading {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 13px;
}

.mythra-panel-section__heading > span,
.mythra-panel-section__heading > div > span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
}

.mythra-panel-section__heading span i {
    display: block;
    width: 18px;
    height: 2px;
    background: linear-gradient(90deg, var(--mp-pink), var(--mp-purple));
    box-shadow: 0 0 10px rgba(255, 10, 145, .55);
}

.mythra-panel-section__heading > small,
.mythra-panel-section__heading > div > small {
    color: rgba(255, 255, 255, .38);
    font-size: 10px;
}

.mythra-panel-section__heading--row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
}

.mythra-panel-section__heading--row > div { display: flex; flex-direction: column; gap: 3px; }

.mythra-panel-section__heading--row > a {
    color: #ff52b3;
    font-size: 10px;
    font-weight: 800;
    transition: color .18s ease;
}

.mythra-panel-section__heading--row > a:hover { color: #fff; }

.mythra-panel-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mythra-panel-action {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 66px;
    padding: 12px;
    overflow: hidden;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018));
    box-shadow: inset 0 1px rgba(255, 255, 255, .055), 0 8px 18px rgba(0, 0, 0, .12);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.mythra-panel-action::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 18, 155, .7), transparent);
    opacity: 0;
    transition: opacity .18s ease;
}

.mythra-panel-action:hover {
    color: #fff;
    border-color: rgba(255, 49, 164, .34);
    background: linear-gradient(145deg, rgba(255, 18, 155, .095), rgba(118, 16, 151, .035));
    transform: translateY(-2px);
}

.mythra-panel-action:hover::after { opacity: 1; }

.mythra-panel-action > i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #ff62bb;
    border: 1px solid rgba(255, 60, 170, .25);
    border-radius: 11px;
    background: rgba(255, 17, 150, .08);
}

.mythra-panel-action > span { min-width: 0; display: flex; flex-direction: column; }
.mythra-panel-action > span strong { overflow: hidden; color: #fff; font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.mythra-panel-action > span small { overflow: hidden; color: rgba(255, 255, 255, .37); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.mythra-panel-action > em { color: rgba(255, 255, 255, .3); font-size: 11px; font-style: normal; transition: transform .18s ease, color .18s ease; }
.mythra-panel-action:hover > em { color: #ff55b5; transform: translateX(3px); }

.mythra-ticket-list { display: grid; gap: 8px; }

.mythra-ticket-item,
.mythra-ticket-empty,
.mythra-staff-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 10px 12px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.mythra-ticket-item:hover,
.mythra-ticket-empty:hover,
.mythra-staff-card:hover {
    color: #fff;
    border-color: rgba(255, 47, 164, .3);
    background: rgba(255, 20, 151, .055);
    transform: translateX(-3px);
}

.mythra-ticket-item__icon,
.mythra-ticket-empty > i,
.mythra-staff-card > i {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: #ff5ab8;
    border: 1px solid rgba(255, 54, 168, .22);
    border-radius: 11px;
    background: rgba(255, 13, 147, .07);
}

.mythra-ticket-item__copy,
.mythra-ticket-empty > span,
.mythra-staff-card > span { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.mythra-ticket-item__copy small { color: #ff53b5; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.mythra-ticket-item__copy strong,
.mythra-ticket-empty strong,
.mythra-staff-card strong { overflow: hidden; color: #fff; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.mythra-ticket-empty small,
.mythra-staff-card small { color: rgba(255, 255, 255, .4); font-size: 9px; }
.mythra-ticket-item > i,
.mythra-ticket-empty > em,
.mythra-staff-card > em { color: rgba(255, 255, 255, .32); font-style: normal; }

.mythra-staff-card {
    margin-top: 18px;
    border-color: rgba(155, 70, 255, .2);
    background: linear-gradient(100deg, rgba(125, 32, 223, .08), rgba(255, 14, 146, .035));
}

.mythra-account-panel__footer {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 28px 22px;
    border-top: 1px solid rgba(255, 255, 255, .075);
    background: rgba(5, 3, 7, .72);
}

.mythra-account-panel__footer > span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, .36);
    font-size: 9px;
    font-weight: 700;
}

.mythra-account-panel__footer > span i { color: var(--mp-green); }

.mythra-logout-button {
    min-width: 116px;
    min-height: 42px;
    padding: 0 14px;
    color: #fff;
    border: 1px solid rgba(255, 131, 150, .62);
    border-radius: 12px;
    background-color: #d92752;
    background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, .30) 0%,
        rgba(255, 255, 255, .08) 34%,
        rgba(255, 255, 255, 0) 54%,
        rgba(92, 0, 28, .30) 100%
    );
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .38),
        inset 2px 0 0 rgba(255, 255, 255, .10),
        inset -2px 0 0 rgba(92, 0, 28, .18),
        inset 0 -3px 0 rgba(92, 0, 28, .42),
        0 3px 0 #8e1538,
        0 8px 18px rgba(217, 39, 82, .20),
        0 0 22px rgba(217, 39, 82, .09);
    font-size: 10px;
    text-shadow: 0 1px 1px rgba(79, 0, 25, .48);
}

.mythra-logout-button:hover {
    color: #fff;
    border-color: rgba(255, 207, 216, .88);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .52),
        inset 0 -3px 0 rgba(92, 0, 28, .44),
        0 4px 0 #7d1231,
        0 10px 22px rgba(217, 39, 82, .28),
        0 0 34px rgba(217, 39, 82, .18);
    filter: saturate(1.08) brightness(1.05);
    transform: translateY(-2px) !important;
}

.mythra-logout-button:active {
    filter: brightness(.94);
    transform: translateY(2px) scale(.98) !important;
    box-shadow:
        inset 0 4px 7px rgba(79, 0, 24, .48),
        inset 0 -1px 0 rgba(255, 255, 255, .32),
        0 1px 0 #70102c,
        0 3px 8px rgba(217, 39, 82, .13);
}

@keyframes mythraPanelAmbientOrbit {
    0% {
        transform: translate3d(0, 0, 0) rotate(32deg);
    }
    50% {
        transform: translate3d(-24px, 20px, 0) rotate(58deg);
    }
    100% {
        transform: translate3d(12px, 42px, 0) rotate(84deg);
    }
}

@keyframes mythraPanelDiamondFloat {
    0% {
        transform: translate3d(0, 0, 0) rotate(45deg);
    }
    50% {
        transform: translate3d(-30px, -22px, 0) rotate(70deg);
    }
    100% {
        transform: translate3d(10px, 18px, 0) rotate(96deg);
    }
}

/* Alpine geçiş sınıfları: backdrop yalnız opacity, panel yalnız transform. */
.mythra-drawer-fade-enter,
.mythra-drawer-fade-leave { transition: opacity .2s ease; }
.mythra-drawer-fade-start { opacity: 0; }
.mythra-drawer-fade-end { opacity: 1; }
.mythra-drawer-slide-enter { transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .2s ease; }
.mythra-drawer-slide-leave { transition: transform .22s cubic-bezier(.4, 0, 1, 1), opacity .18s ease; }
.mythra-drawer-slide-start { opacity: .4; transform: translate3d(100%, 0, 0); }
.mythra-drawer-slide-end { opacity: 1; transform: translate3d(0, 0, 0); }

@media (max-width: 639px) {
    .mythra-account-panel { width: 100vw; border-left: 0; }
    .mythra-account-panel__header { min-height: 94px; padding: 17px 16px; }
    .mythra-account-panel__avatar { width: 58px; height: 58px; }
    .mythra-account-panel__avatar img { width: 48px; height: 48px; }
    .mythra-account-panel__identity-copy > strong { max-width: 210px; font-size: 18px; }
    .mythra-account-panel__identity-copy > span { max-width: 210px; }
    .mythra-account-panel__scroll { padding: 18px 16px 24px; }
    .mythra-wallet-card { grid-template-columns: 46px minmax(0, 1fr); }
    .mythra-wallet-card__icon { width: 44px; height: 44px; }
    .mythra-wallet-card__content strong { font-size: 20px; }
    .mythra-wallet-card .mythra-emboss-button { grid-column: 1 / -1; width: 100%; }
    .mythra-panel-actions { grid-template-columns: 1fr; }
    .mythra-account-panel__footer { padding: 14px 16px 19px; }
    .mythra-account-panel__footer > span { display: none; }
    .mythra-account-panel__footer form,
    .mythra-logout-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .mythra-drawer-fade-enter,
    .mythra-drawer-fade-leave,
    .mythra-drawer-slide-enter,
    .mythra-drawer-slide-leave,
    .mythra-panel-action,
    .mythra-ticket-item,
    .mythra-ticket-empty,
    .mythra-staff-card,
    .mythra-emboss-button,
    .mythra-logout-button { transition-duration: .01ms !important; }

    .mythra-account-panel::after,
    .mythra-account-panel__ambient {
        animation: none !important;
        will-change: auto;
    }

    .mythra-emboss-button::before,
    .mythra-logout-button::before {
        transition: none !important;
    }
}