/* =============================================================================
   checkout-overlay.css — odemeyi kendi sayfamizda baslatan katmanin gorunumu
   =============================================================================
   Es dosya: checkout-overlay.js.

   Bu katman, Polar'in gomulu checkout'u acilana kadar gorunen markali gecis
   ekranidir; Polar kendi katmanini actiginda arkada kalir ve sessizlesir.

   Renk YOK: her deger design-system.css'teki semantik degiskenlerden gelir,
   yani acik ve koyu tema kendiliginden dogru calisir.
   ========================================================================== */

/* Katman aciksa arka sayfa kaydirilmaz; yoksa Polar'in kendi katmani
   acilirken altta sayfa oynuyor. */
html.sx-checkout-lock,
html.sx-checkout-lock body {
    overflow: hidden;
}

.sx-checkout {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--overlay-bg);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
}

.sx-checkout.is-open {
    opacity: 1;
}

/* Polar kendi katmanini acinca (data-state="ready") bizimki perdeye doner:
   gorunur kalir ama dikkat cekmez. Tamamen kaldirmiyoruz cunku Polar'in
   katmani kapandiginda arkada cip cikan bir bosluk kalirdi. */
.sx-checkout[data-state="ready"] {
    opacity: 1;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.sx-checkout[data-state="ready"] .sx-checkout-card {
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
}

.sx-checkout-card {
    width: min(420px, 100%);
    padding: calc(var(--space-6) * 1.5) var(--space-6);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 24px 64px rgba(var(--shadow-rgb), 0.28);
    text-align: center;
    transform: translateY(12px) scale(0.98);
    opacity: 0;
    transition:
        transform var(--dur-base) var(--ease-out),
        opacity var(--dur-base) var(--ease-out);
}

.sx-checkout.is-open .sx-checkout-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* --- marka isareti ------------------------------------------------------- */

.sx-checkout-mark {
    position: relative;
    width: 84px;
    height: 84px;
    margin: 0 auto var(--space-6);
}

.sx-checkout-core {
    position: absolute;
    inset: 34px;
    border-radius: 999px;
    background: var(--accent-gradient, var(--accent));
}

.sx-checkout-ring {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 2px solid var(--accent-soft-border);
    opacity: 0;
    animation: sx-checkout-pulse 2.4s var(--ease-out) infinite;
}

.sx-checkout-ring:nth-child(2) { animation-delay: 0.8s; }
.sx-checkout-ring:nth-child(3) { animation-delay: 1.6s; }

@keyframes sx-checkout-pulse {
    0%   { transform: scale(0.42); opacity: 0; }
    20%  { opacity: 0.9; }
    100% { transform: scale(1); opacity: 0; }
}

/* --- metin --------------------------------------------------------------- */

.sx-checkout-title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text);
}

.sx-checkout-subtitle {
    margin: 0 0 var(--space-6);
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--text-muted);
}

/* --- ilerleme ------------------------------------------------------------ */

/* Yuzde GOSTERMEZ. Sure bilinmiyor; sahte bir sayac saymak yanlis bilgi olur.
   Yalnizca "calisiyor" der. */
.sx-checkout-track {
    position: relative;
    height: 3px;
    margin: 0 auto var(--space-6);
    max-width: 220px;
    border-radius: 999px;
    background: var(--surface-muted);
    overflow: hidden;
}

.sx-checkout-beam {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
    animation: sx-checkout-beam 1.4s var(--ease-out) infinite;
}

@keyframes sx-checkout-beam {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(260%); }
}

/* --- satici beyani ------------------------------------------------------- */

/* Polar bu satisin merchant of record'udur. Odeme cercevesini kendi sayfamiza
   almak bunu degistirmez, bu yuzden satir kaldirilamaz. */
.sx-checkout-note {
    margin: 0;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--text-subtle);
}

/* --- durumlar ------------------------------------------------------------ */

.sx-checkout[data-state="confirming"] .sx-checkout-beam,
.sx-checkout[data-state="success"] .sx-checkout-beam {
    animation-duration: 0.9s;
}

.sx-checkout[data-state="confirming"] .sx-checkout-card,
.sx-checkout[data-state="success"] .sx-checkout-card {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.sx-checkout[data-state="success"] .sx-checkout-core {
    background: var(--success-solid, var(--accent));
}

.sx-checkout[data-state="success"] .sx-checkout-ring {
    border-color: var(--success-border, var(--accent-soft-border));
}

/* --- hareket kisitlamasi -------------------------------------------------- */

/* Sistem "az hareket" diyorsa dongu BASLAMAZ. Katman yine gorunur ve
   okunur; yalnizca donen/akani durur. */
@media (prefers-reduced-motion: reduce) {
    .sx-checkout,
    .sx-checkout-card {
        transition: none;
    }

    .sx-checkout-ring,
    .sx-checkout-beam {
        animation: none;
    }

    .sx-checkout-ring {
        opacity: 0.5;
        transform: scale(1);
    }

    .sx-checkout-beam {
        width: 100%;
        transform: none;
    }
}

.sx-checkout[data-reduced="true"] .sx-checkout-ring,
.sx-checkout[data-reduced="true"] .sx-checkout-beam {
    animation: none;
}