/* ============================================================
   Güvenli Ödeme — VakıfBank Sanal POS
   Ön yüz stil dosyası
   ============================================================ */

/* Marka paleti — kaynak: elitnet.com
   #1a1a2e koyu lacivert · #c9a96e altın · #ff6f4e mercan
   Logo mavileri: #1a5a9c (ELIT) · #0e8fb4 (NET) */
:root {
    --navy-900: #101020;
    --navy-800: #1a1a2e;
    --navy-700: #2e2e4d;
    --navy-100: #eceaf3;
    --gold-500: #c9a96e;
    --gold-600: #b3925a;
    --gold-700: #8a6e35;
    --coral-500: #ff6f4e;
    --brand-blue: #1a5a9c;
    --brand-cyan: #0e8fb4;
    --sand-050: #f6f2ea;
    --ok-500: #12a150;
    --ok-050: #e7f7ee;
    --err-500: #dc2b31;
    --err-050: #fdeced;
    --warn-500: #b45309;
    --warn-050: #fff7e6;

    --ink-900: #0d1b2a;
    --ink-700: #3c4a5a;
    --ink-500: #6b7a8d;
    --ink-300: #a8b4c2;
    --line: #e2e8f1;
    --surface: #ffffff;
    --bg: #f2f5fa;

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 26px;

    --sh-sm: 0 1px 2px rgba(13, 27, 42, .06);
    --sh-md: 0 6px 20px rgba(13, 27, 42, .08);
    --sh-lg: 0 24px 60px rgba(13, 27, 42, .14);

    --ff: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
    --mono: "SF Mono", Consolas, "Liberation Mono", monospace;
}

/* ------------------------------- Temel -------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/*
 | HTML'in "hidden" özniteliği, tarayıcının varsayılan display:none kuralıyla
 | çalışır. Öğeye CSS'te display (flex/grid/block) verildiğinde bu varsayılan
 | EZİLİR ve öğe gizlenemez. Aşağıdaki kural, hidden'ın her koşulda kesin
 | çalışmasını sağlar — JS ile gizlenen tüm bileşenler buna bağlıdır
 | (toplu işlem çubuğu, vade farkı satırı, taksit notu, ödeme açıklaması...).
*/
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--ff);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-900);
    background:
        radial-gradient(1200px 520px at 12% -8%, #e6e3ef 0%, rgba(230, 227, 239, 0) 60%),
        radial-gradient(900px 460px at 96% 4%, #f3ead8 0%, rgba(243, 234, 216, 0) 55%),
        var(--bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img { max-width: 100%; display: block; }
a { color: var(--navy-700); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -.015em; }

:focus-visible {
    outline: 3px solid rgba(18, 58, 104, .35);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ------------------------------ Üst bar ------------------------------- */

/* Logo lacivert-mavi tonlarında olduğu için üst bar AÇIK zeminde; koyu lacivert
   zeminde logonun "ELIT" kısmı okunmaz kalırdı. */
.topbar {
    background: #fff;
    color: var(--ink-900);
    box-shadow: 0 1px 0 var(--line), var(--sh-sm);
    position: relative;
    z-index: 5;
}
.topbar::after {
    content: "";
    position: absolute; inset: auto 0 0 0; height: 3px;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan) 38%, var(--gold-500) 78%, transparent);
}
.topbar__inner {
    max-width: 1160px; margin: 0 auto; padding: 13px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 14px; color: var(--ink-900); }
.brand:hover { text-decoration: none; }
.brand__logo {
    width: 170px; height: auto; flex: none; display: block;
}
.brand__text {
    display: flex; flex-direction: column; line-height: 1.25;
    padding-left: 14px; border-left: 1px solid var(--line);
}
.brand__text strong { font-size: 14px; font-weight: 700; color: var(--navy-800); }
.brand__text small { font-size: 11.5px; color: var(--ink-500); letter-spacing: .02em; }

.topbar__right { display: flex; align-items: center; gap: 12px; }
.env-pill {
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    background: rgba(255, 111, 78, .1); color: #c2410c;
    border: 1px solid rgba(255, 111, 78, .35);
    padding: 4px 9px; border-radius: 999px;
}
.ssl {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 600; color: var(--ok-500);
}
.ssl__lock, .lock {
    width: 13px; height: 15px; flex: none; position: relative;
    border: 2px solid currentColor; border-radius: 3px; border-top: none;
    height: 9px; margin-top: 5px;
}
.ssl__lock::before, .lock::before {
    content: ""; position: absolute; left: 50%; top: -7px; transform: translateX(-50%);
    width: 9px; height: 8px; border: 2px solid currentColor; border-bottom: none;
    border-radius: 5px 5px 0 0;
}

/* ------------------------------ Bildirim ------------------------------ */

.toast-stack {
    position: fixed; top: 18px; right: 18px; z-index: 999;
    display: flex; flex-direction: column; gap: 10px; max-width: min(360px, calc(100vw - 36px));
}
.toast {
    background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-lg);
    border-left: 4px solid var(--ink-300);
    padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start;
    animation: toast-in .28s cubic-bezier(.2, .9, .3, 1.4);
}
.toast--warn { border-left-color: var(--gold-600); }
.toast--error { border-left-color: var(--err-500); }
.toast--success { border-left-color: var(--ok-500); }
.toast__title { font-weight: 650; font-size: 13.5px; margin-bottom: 2px; }
.toast__text { font-size: 13px; color: var(--ink-700); }
.toast__close {
    margin-left: auto; background: none; border: 0; cursor: pointer;
    color: var(--ink-500); font-size: 18px; line-height: 1; padding: 0 2px;
}
.toast--hide { animation: toast-out .2s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }

/* -------------------------------- Uyarı ------------------------------- */

.alert {
    border-radius: var(--r-md); padding: 12px 14px; font-size: 13.5px;
    margin-bottom: 18px; border: 1px solid transparent;
}
.alert--warn { background: var(--warn-050); border-color: #f6dfae; color: var(--warn-500); }
.alert--error { background: var(--err-050); border-color: #f7c9cb; color: #a91d22; }
.alert--success { background: var(--ok-050); border-color: #bfe6cf; color: #0a6b36; }
.alert a { color: inherit; text-decoration: underline; font-weight: 600; }

/* ------------------------------- Yerleşim ----------------------------- */

.checkout { flex: 1; width: 100%; max-width: 1160px; margin: 0 auto; padding: 30px 20px 56px; }
.checkout__grid { display: grid; grid-template-columns: minmax(0, 1fr) 356px; gap: 26px; align-items: start; }

.panel {
    background: var(--surface); border-radius: var(--r-xl);
    box-shadow: var(--sh-md); padding: 30px 32px 34px;
    border: 1px solid rgba(226, 232, 241, .9);
}
.panel__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 22px;
}
.panel__title { font-size: 23px; font-weight: 700; }
.panel__sub { margin: 5px 0 0; color: var(--ink-500); font-size: 13.5px; }

.secure-chip {
    display: inline-flex; align-items: center; gap: 7px; flex: none;
    background: var(--ok-050); color: #0a6b36; border: 1px solid #bfe6cf;
    padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 650;
}
.secure-chip__dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--ok-500);
    box-shadow: 0 0 0 0 rgba(18, 161, 80, .55); animation: pulse 2.2s infinite;
}
@keyframes pulse {
    70% { box-shadow: 0 0 0 8px rgba(18, 161, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(18, 161, 80, 0); }
}

/* -------------------------------- Adımlar ----------------------------- */

.step { display: flex; align-items: center; gap: 11px; margin: 28px 0 16px; }
.step:first-of-type { margin-top: 6px; }
.step__no {
    width: 27px; height: 27px; border-radius: 50%; flex: none;
    background: var(--navy-800); color: #fff;
    display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.step__title { font-size: 15.5px; font-weight: 650; letter-spacing: -.005em; }
.step::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* -------------------------------- Form -------------------------------- */

.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.field { display: flex; flex-direction: column; min-width: 0; }
.label {
    font-size: 13px; font-weight: 600; color: var(--ink-700);
    margin-bottom: 6px; display: flex; align-items: center; gap: 5px;
}
.req { color: var(--err-500); font-weight: 700; }

.tip {
    width: 16px; height: 16px; border-radius: 50%; cursor: help;
    background: var(--navy-100); color: var(--navy-700);
    font-size: 11px; font-weight: 700; display: inline-grid; place-items: center;
}

.input {
    width: 100%; padding: 11px 13px; font: inherit; font-size: 14.5px;
    color: var(--ink-900); background: #fbfcfe;
    border: 1.5px solid var(--line); border-radius: var(--r-md);
    transition: border-color .16s, box-shadow .16s, background .16s;
    appearance: none;
}
select.input {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236b7a8d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center;
    padding-right: 34px; cursor: pointer;
}
.input::placeholder { color: var(--ink-300); }
.input:hover { border-color: #cfd8e5; }
.input:focus {
    outline: none; background: #fff;
    border-color: var(--navy-700); box-shadow: 0 0 0 4px rgba(18, 58, 104, .1);
}
.input--card { font-family: var(--mono); letter-spacing: .07em; font-size: 15px; }

.input.is-error,
.input.is-error:focus {
    border-color: var(--err-500); background: #fff7f7;
    box-shadow: 0 0 0 4px rgba(220, 43, 49, .1);
}

.field__error {
    display: none; font-size: 12.5px; color: var(--err-500);
    margin-top: 5px; font-weight: 600;
}
.field__error.is-visible { display: block; animation: shake .32s; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}
.field__hint { font-size: 12px; color: var(--ink-500); margin-top: 5px; }

.input-wrap { position: relative; }
.input-wrap .input { padding-right: 62px; }
.input-wrap__icon {
    position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    width: 42px; height: 27px; border-radius: 5px;
    display: grid; place-items: center;
    font-size: 9.5px; font-weight: 800; letter-spacing: .04em; color: #fff;
    background: transparent; transition: background .2s, opacity .2s; opacity: 0;
}
.input-wrap__icon.is-on { opacity: 1; }
.input-wrap__icon[data-brand="visa"] { background: #1a1f71; }
.input-wrap__icon[data-brand="mastercard"] { background: #eb001b; }
.input-wrap__icon[data-brand="troy"] { background: #00a1e0; }
.input-wrap__icon[data-brand="amex"] { background: #2e77bc; }
.input-wrap__icon[data-brand="unknown"] { background: var(--ink-300); }

/* ------------------------------ Onay kutusu --------------------------- */

.field--check { margin-top: 22px; }
.check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
    width: 21px; height: 21px; flex: none; margin-top: 1px;
    border: 1.5px solid var(--ink-300); border-radius: 6px; background: #fff;
    position: relative; transition: all .16s;
}
.check input:checked + .check__box { background: var(--ok-500); border-color: var(--ok-500); }
.check__box::after {
    content: ""; position: absolute; left: 6.5px; top: 2.5px;
    width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg) scale(0); transition: transform .16s;
}
.check input:checked + .check__box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 4px rgba(18, 58, 104, .18); }
.check__text { font-size: 13.5px; color: var(--ink-700); }
.check.is-error .check__box { border-color: var(--err-500); background: #fff7f7; }

/* ---------------------------- Kart önizlemesi ------------------------- */

.card-area { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 26px; align-items: start; }

.card-preview { perspective: 1100px; }
.card-preview__inner {
    position: relative; width: 100%; aspect-ratio: 1.586;
    transition: transform .6s cubic-bezier(.4, .2, .2, 1);
    transform-style: preserve-3d;
}
.card-preview.is-flipped .card-preview__inner { transform: rotateY(180deg); }
.card-preview__face {
    position: absolute; inset: 0; border-radius: var(--r-lg);
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    padding: 20px; color: #fff; overflow: hidden;
    background: linear-gradient(135deg, #0b2545 0%, #123a68 52%, #21578f 100%);
    box-shadow: var(--sh-lg);
    display: flex; flex-direction: column; justify-content: space-between;
}
.card-preview__face::after {
    content: ""; position: absolute; right: -60px; top: -70px;
    width: 210px; height: 210px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 199, 44, .32), transparent 68%);
}
.card-preview__face--back { transform: rotateY(180deg); padding: 0; }
.card-preview__top { display: flex; align-items: center; justify-content: space-between; }
.card-preview__chip {
    width: 42px; height: 31px; border-radius: 6px;
    background: linear-gradient(140deg, #f7d774, #d5a72c);
    position: relative;
}
.card-preview__chip::before, .card-preview__chip::after {
    content: ""; position: absolute; left: 5px; right: 5px; height: 1px;
    background: rgba(0, 0, 0, .28);
}
.card-preview__chip::before { top: 10px; }
.card-preview__chip::after { bottom: 10px; }
.card-preview__brand {
    font-size: 12.5px; font-weight: 800; letter-spacing: .1em; opacity: .95;
    text-transform: uppercase; z-index: 1;
}
.card-preview__number {
    font-family: var(--mono); font-size: 19px; letter-spacing: .09em;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .3); word-spacing: 4px;
}
.card-preview__bottom { display: flex; justify-content: space-between; gap: 12px; z-index: 1; }
.card-preview__label {
    display: block; font-size: 8.5px; letter-spacing: .12em;
    text-transform: uppercase; opacity: .6; margin-bottom: 2px;
}
.card-preview__value {
    display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 175px;
}
.card-preview__stripe { height: 44px; background: #08192e; margin-top: 22px; }
.card-preview__cvvbox {
    margin: 18px 20px 0; background: #f1f3f7; color: var(--ink-900);
    border-radius: 5px; padding: 8px 11px; display: flex;
    align-items: center; justify-content: space-between;
}
.card-preview__cvvbox .card-preview__label { color: var(--ink-500); opacity: 1; margin: 0; }
.card-preview__cvv { font-family: var(--mono); font-size: 14px; letter-spacing: .16em; }
.card-preview__note { margin: 12px 20px 0; font-size: 10.5px; opacity: .62; }

.card-fields { display: flex; flex-direction: column; gap: 16px; }

/* ------------------------------- Taksitler ---------------------------- */

.installments {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 11px; margin-bottom: 4px;
}
.ins { cursor: pointer; position: relative; display: block; }
.ins__radio { position: absolute; opacity: 0; width: 0; height: 0; }
.ins__body {
    display: flex; flex-direction: column; gap: 2px; height: 100%;
    border: 1.5px solid var(--line); border-radius: var(--r-md);
    padding: 12px 13px; background: #fbfcfe;
    transition: all .16s;
}
.ins:hover .ins__body { border-color: #c3cfe0; background: #fff; }
.ins__radio:checked + .ins__body {
    border-color: var(--navy-800); background: #fff;
    box-shadow: 0 0 0 3px rgba(11, 37, 69, .09);
}
.ins__radio:focus-visible + .ins__body { box-shadow: 0 0 0 4px rgba(18, 58, 104, .22); }
.ins__radio:checked + .ins__body::after {
    content: ""; position: absolute; top: 9px; right: 9px;
    width: 16px; height: 16px; border-radius: 50%; background: var(--navy-800);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'><path d='M1 4l2.6 2.6L9 1.2' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat; background-position: center;
}
.ins__label { font-size: 13px; font-weight: 650; color: var(--ink-900); }
.ins__monthly { font-size: 12px; color: var(--ink-500); min-height: 17px; }
.ins__total { font-size: 15px; font-weight: 700; color: var(--navy-800); margin-top: 2px; }
.ins__diff { font-size: 11px; color: var(--ok-500); font-weight: 600; }
.ins__diff--plus { color: var(--warn-500); }

/* -------------------------------- Buton ------------------------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font: inherit; font-size: 15px; font-weight: 650;
    padding: 13px 22px; border-radius: var(--r-md); border: 1.5px solid transparent;
    cursor: pointer; transition: transform .12s, box-shadow .18s, background .18s;
    text-decoration: none; position: relative;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary {
    background: linear-gradient(135deg, var(--navy-800), var(--navy-700));
    color: #fff; box-shadow: 0 10px 24px rgba(11, 37, 69, .26);
}
.btn--primary:hover { box-shadow: 0 14px 30px rgba(11, 37, 69, .34); }
.btn--ghost { background: #fff; border-color: var(--line); color: var(--ink-700); }
.btn--ghost:hover { border-color: #c3cfe0; background: #f8fafd; }
.btn--danger { background: var(--err-500); color: #fff; }
.btn--block { width: 100%; margin-top: 24px; padding: 16px 22px; font-size: 16px; }
.btn__label { display: inline-flex; align-items: center; gap: 9px; }
.btn__spinner { display: none; width: 18px; height: 18px; }
.btn.is-loading { pointer-events: none; opacity: .82; }
.btn.is-loading .btn__label { display: none; }
.btn.is-loading .btn__spinner {
    display: block; border: 2.5px solid rgba(255, 255, 255, .35);
    border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form__foot {
    margin: 16px 0 0; font-size: 12.5px; color: var(--ink-500);
    text-align: center; line-height: 1.6;
}

/* ------------------------------ Sipariş özeti ------------------------- */

.summary { position: sticky; top: 24px; }
.summary__card {
    background: var(--surface); border-radius: var(--r-xl);
    box-shadow: var(--sh-md); padding: 24px; border: 1px solid rgba(226, 232, 241, .9);
}
.summary__title {
    font-size: 16px; font-weight: 700; padding-bottom: 14px;
    border-bottom: 1px solid var(--line); margin-bottom: 14px;
}
.summary__items { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.summary__item { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.summary__name { color: var(--ink-700); }
.summary__qty { font-style: normal; color: var(--ink-500); font-size: 12px; }
.summary__price { font-weight: 600; white-space: nowrap; }
.summary__row {
    display: flex; justify-content: space-between; font-size: 13px;
    color: var(--ink-500); padding: 5px 0;
}
.summary__row--diff { color: var(--warn-500); font-weight: 600; }
.summary__total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: 12px; padding-top: 14px; border-top: 2px dashed var(--line);
    font-size: 14px; color: var(--ink-700);
}
.summary__total strong { font-size: 23px; color: var(--navy-800); letter-spacing: -.02em; }
.summary__note { margin: 8px 0 0; font-size: 12px; color: var(--ink-500); text-align: right; }

.trust { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 11px; }
.trust__item { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-700); }
.trust__ico {
    width: 26px; height: 26px; border-radius: 8px; flex: none;
    background: var(--navy-100); position: relative;
}
.trust__ico::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    background: var(--navy-700); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: 14px; mask-size: 14px; width: 14px; height: 14px;
}
.trust__ico--lock::after { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 10V8a6 6 0 1112 0v2h1a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2v-8a2 2 0 012-2h1zm2 0h8V8a4 4 0 10-8 0v2z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 10V8a6 6 0 1112 0v2h1a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2v-8a2 2 0 012-2h1zm2 0h8V8a4 4 0 10-8 0v2z'/></svg>"); }
.trust__ico--shield::after { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l8 3v6c0 5-3.4 9.7-8 11-4.6-1.3-8-6-8-11V5l8-3z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l8 3v6c0 5-3.4 9.7-8 11-4.6-1.3-8-6-8-11V5l8-3z'/></svg>"); }
.trust__ico--card::after { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 6a2 2 0 012-2h16a2 2 0 012 2v2H2V6zm0 5h20v7a2 2 0 01-2 2H4a2 2 0 01-2-2v-7z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 6a2 2 0 012-2h16a2 2 0 012 2v2H2V6zm0 5h20v7a2 2 0 01-2 2H4a2 2 0 01-2-2v-7z'/></svg>"); }
.trust__ico--bank::after { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l10 6H2l10-6zM4 10h3v8H4v-8zm6.5 0h3v8h-3v-8zM17 10h3v8h-3v-8zM2 20h20v2H2v-2z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l10 6H2l10-6zM4 10h3v8H4v-8zm6.5 0h3v8h-3v-8zM17 10h3v8h-3v-8zM2 20h20v2H2v-2z'/></svg>"); }

/* --------------------------- Yönlendirme sayfası ---------------------- */

.redirect { flex: 1; display: grid; place-items: center; padding: 60px 20px; }
.redirect__card {
    background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-lg);
    padding: 46px 40px; max-width: 520px; text-align: center;
}
.redirect__spinner {
    width: 54px; height: 54px; margin: 0 auto 24px;
    border: 4px solid var(--navy-100); border-top-color: var(--navy-800);
    border-radius: 50%; animation: spin .9s linear infinite;
}
.redirect__title { font-size: 20px; margin-bottom: 12px; }
.redirect__text { color: var(--ink-700); font-size: 14px; margin: 0 0 22px; }
.redirect__hint { color: var(--ink-500); font-size: 12.5px; margin: 16px 0 0; }
.redirect__noscript { color: var(--err-500); font-size: 13px; margin-bottom: 12px; }

/* ------------------------------ Sonuç sayfası ------------------------- */

.result { flex: 1; display: grid; place-items: start center; padding: 46px 20px 60px; }
.result__card {
    background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-lg);
    padding: 42px 38px; max-width: 560px; width: 100%; text-align: center;
    border-top: 5px solid var(--ink-300);
}
.result__card--ok { border-top-color: var(--ok-500); }
.result__card--fail { border-top-color: var(--err-500); }

.result__icon {
    width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 20px;
    display: grid; place-items: center; position: relative;
}
.result__icon--ok { background: var(--ok-050); }
.result__icon--fail { background: var(--err-050); }
.result__icon::before, .result__icon::after { content: ""; position: absolute; border-radius: 3px; }
.result__icon--ok::before {
    width: 11px; height: 26px; border: solid var(--ok-500); border-width: 0 4px 4px 0;
    transform: rotate(45deg) translate(-2px, -4px);
    animation: pop .35s ease-out;
}
.result__icon--fail::before, .result__icon--fail::after {
    width: 4px; height: 30px; background: var(--err-500);
}
.result__icon--fail::before { transform: rotate(45deg); }
.result__icon--fail::after { transform: rotate(-45deg); }
@keyframes pop { from { transform: rotate(45deg) translate(-2px, -4px) scale(0); } }

.result__title { font-size: 22px; margin-bottom: 10px; }
.result__text { color: var(--ink-700); font-size: 14px; margin: 0 0 26px; }

.receipt {
    text-align: left; border: 1px solid var(--line); border-radius: var(--r-lg);
    overflow: hidden; margin-bottom: 26px;
}
.receipt__head {
    display: flex; justify-content: space-between; align-items: center;
    background: #f7f9fc; padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.receipt__brand { font-weight: 700; font-size: 13.5px; }
.receipt__status { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--ink-500); }
.result__card--ok .receipt__status { color: var(--ok-500); }
.result__card--fail .receipt__status { color: var(--err-500); }
.receipt__list { margin: 0; padding: 6px 16px 12px; }
.receipt__row {
    display: flex; justify-content: space-between; gap: 14px;
    padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px;
}
.receipt__row:last-child { border-bottom: none; }
.receipt__row dt { color: var(--ink-500); }
.receipt__row dd { margin: 0; font-weight: 600; text-align: right; word-break: break-word; }

.result__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.result__tips {
    text-align: left; margin: 26px 0 0; padding: 18px 18px 18px 34px;
    background: #f7f9fc; border-radius: var(--r-md); font-size: 13px; color: var(--ink-700);
}
.result__tips li { margin-bottom: 6px; }
.result__tips li:last-child { margin-bottom: 0; }

/* ------------------------------ Doküman ------------------------------- */

.doc { flex: 1; max-width: 860px; margin: 0 auto; padding: 36px 20px 60px; }
.doc__card { background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-md); padding: 40px; }
.doc__title { font-size: 25px; margin-bottom: 10px; }
.doc__lead { color: var(--ink-500); font-size: 13.5px; margin: 0 0 26px; }
.doc__card h2 { font-size: 16.5px; margin: 26px 0 8px; color: var(--navy-800); }
.doc__card p, .doc__card li { color: var(--ink-700); font-size: 14px; }
.doc__card ul { padding-left: 20px; }
.doc__card .btn { margin-top: 28px; }

/* -------------------------------- Alt bar ----------------------------- */

.footer { background: #fff; border-top: 1px solid var(--line); margin-top: auto; }
.footer__inner {
    max-width: 1160px; margin: 0 auto; padding: 18px 20px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.footer__copy { margin: 0; font-size: 12.5px; color: var(--ink-500); }
.footer__links { display: flex; gap: 18px; font-size: 12.5px; }
.footer__links a { color: var(--ink-500); }

/* ------------------------------- Duyarlı ------------------------------ */

@media (max-width: 1000px) {
    .checkout__grid { grid-template-columns: 1fr; }
    .summary { position: static; order: -1; }
    .summary__card { padding: 20px; }
    .trust { display: none; }
}

@media (max-width: 720px) {
    .panel { padding: 22px 18px 26px; border-radius: var(--r-lg); }
    .card-area { grid-template-columns: 1fr; }
    .card-preview { max-width: 300px; margin: 0 auto 4px; width: 100%; }
    .grid--2 { grid-template-columns: 1fr; }
    .panel__head { flex-direction: column; }
    .checkout { padding: 18px 12px 40px; }
    .result__card, .doc__card, .redirect__card { padding: 26px 20px; }
    .toast-stack { left: 12px; right: 12px; max-width: none; }
}

@media (max-width: 400px) {
    .grid--3 { grid-template-columns: 1fr 1fr; }
    .grid--3 .field:last-child { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* -------------------------------- Yazdırma ---------------------------- */

@media print {
    body { background: #fff; }
    .topbar, .footer, .result__actions, .result__tips, .toast-stack { display: none !important; }
    .result__card { box-shadow: none; border: 1px solid #ddd; max-width: 100%; }
}

/* ------------------------- Onay penceresi (modal) --------------------- */

.modal {
    position: fixed; inset: 0; z-index: 998;
    background: rgba(7, 27, 51, .5);
    display: grid; place-items: center; padding: 20px;
    animation: fade-in .18s ease;
}
.modal__card {
    background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-lg);
    padding: 26px 26px 22px; max-width: 420px; width: 100%;
    border-top: 4px solid var(--navy-800);
    animation: modal-in .22s cubic-bezier(.2, .9, .3, 1.3);
}
.modal__card--danger { border-top-color: var(--err-500); }
.modal__title { font-size: 17px; margin-bottom: 8px; }
.modal__text { color: var(--ink-700); font-size: 13.5px; margin: 0 0 20px; }
.modal__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.modal__actions .btn { padding: 10px 18px; font-size: 14px; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }

/* ------------------------------- Rozetler ----------------------------- */

.badge {
    display: inline-block; padding: 4px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.badge--ok { background: var(--ok-050); color: #0a6b36; }
.badge--err { background: var(--err-050); color: #a91d22; }
.badge--wait { background: #fff7e6; color: var(--warn-500); }
.badge--muted { background: #eef2f7; color: var(--ink-500); }

/* --------------------- Taksit kutusu (karta göre) --------------------- */

.insbox {
    border: 1.5px dashed var(--line); border-radius: var(--r-lg);
    padding: 14px; background: #fbfcfe;
}
.insbox__head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px; min-height: 22px; flex-wrap: wrap;
}
.insbox__note { margin: 0; font-size: 12.5px; color: var(--ink-500); flex: 1; min-width: 180px; }
.insbox__card {
    font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
    background: #eef2f7; color: var(--ink-500);
    padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.insbox__card--known { background: var(--navy-100); color: var(--navy-700); }
.insbox__spinner {
    width: 16px; height: 16px; flex: none; border-radius: 50%;
    border: 2px solid var(--navy-100); border-top-color: var(--navy-700);
    animation: spin .7s linear infinite;
}
.insbox .installments { margin-bottom: 0; }
.insbox .ins__body { background: #fff; }

/* ------------------------- Serbest tutar alanı ------------------------ */

.amount-block { margin-bottom: 4px; }

.presets { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; }
.preset {
    font: inherit; font-size: 14px; font-weight: 650; cursor: pointer;
    padding: 10px 18px; border-radius: var(--r-md);
    border: 1.5px solid var(--line); background: #fff; color: var(--ink-700);
    transition: all .15s;
}
.preset:hover { border-color: var(--navy-700); color: var(--navy-800); }
.preset--active {
    border-color: var(--navy-800); background: var(--navy-800); color: #fff !important;
    box-shadow: 0 6px 16px rgba(11, 37, 69, .2);
}

.field--amount { margin-bottom: 16px; }

.amount-input { position: relative; }
.amount-input__cur {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    font-size: 22px; font-weight: 700; color: var(--ink-300); pointer-events: none;
}
.input--amount {
    padding: 16px 16px 16px 44px;
    font-size: 26px; font-weight: 700; letter-spacing: -.02em;
    color: var(--navy-800); font-variant-numeric: tabular-nums;
}
.input--amount::placeholder { font-weight: 600; color: var(--ink-300); }
.input--amount:focus + .amount-input__cur,
.amount-input:focus-within .amount-input__cur { color: var(--navy-700); }

.summary__row--desc span:last-child {
    max-width: 60%; text-align: right; color: var(--ink-700);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 720px) {
    .preset { flex: 1 1 calc(50% - 5px); text-align: center; }
    .input--amount { font-size: 22px; }
}

/* ---------------------- Teknik detay (yalnız test) -------------------- */

.diag {
    text-align: left; margin: 0 0 24px;
    background: #0d1b2a; color: #d7e3f4; border-radius: var(--r-md);
    padding: 16px 18px;
}
.diag__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.diag__tag {
    font-size: 10px; font-weight: 800; letter-spacing: .1em;
    background: var(--gold-500); color: var(--navy-900);
    padding: 3px 8px; border-radius: 4px;
}
.diag__hint { font-size: 11px; color: #7f95b0; }
.diag__list { margin: 0; font-family: var(--mono); font-size: 12px; }
.diag__list > div {
    display: flex; justify-content: space-between; gap: 14px;
    padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.diag__list > div:last-child { border-bottom: none; }
.diag__list dt { color: #7f95b0; flex: none; }
.diag__list dd { margin: 0; text-align: right; color: #eaf1fa; word-break: break-word; }
.diag__note {
    margin: 12px 0 0; font-size: 12px; line-height: 1.65; color: #c8d6e8;
    font-family: var(--ff);
}
.diag__note strong { color: var(--gold-500); }
.diag__note a { color: #7fc4ff; }
.diag .mono { font-family: var(--mono); background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 3px; }

/* ------------------- Ortak ödeme bilgilendirme kutusu ----------------- */

.bankbox {
    display: flex; gap: 16px; align-items: flex-start;
    background: linear-gradient(135deg, #f4f8ff 0%, #fbfcfe 100%);
    border: 1.5px solid var(--navy-100); border-radius: var(--r-lg);
    padding: 18px 20px;
}
.bankbox__icon {
    width: 44px; height: 44px; flex: none; border-radius: 12px;
    background: linear-gradient(140deg, var(--navy-800), var(--navy-700));
    position: relative; box-shadow: 0 6px 16px rgba(11, 37, 69, .22);
}
.bankbox__icon::after {
    content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px;
    background: var(--gold-500);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l8 3v6c0 5-3.4 9.7-8 11-4.6-1.3-8-6-8-11V5l8-3zm0 6a2.5 2.5 0 00-2.5 2.5c0 .9.5 1.7 1.2 2.1V15h2.6v-2.4c.7-.4 1.2-1.2 1.2-2.1A2.5 2.5 0 0012 8z'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l8 3v6c0 5-3.4 9.7-8 11-4.6-1.3-8-6-8-11V5l8-3zm0 6a2.5 2.5 0 00-2.5 2.5c0 .9.5 1.7 1.2 2.1V15h2.6v-2.4c.7-.4 1.2-1.2 1.2-2.1A2.5 2.5 0 0012 8z'/></svg>") center/contain no-repeat;
}
.bankbox__body { min-width: 0; }
.bankbox__title { font-size: 15px; font-weight: 700; margin-bottom: 7px; color: var(--navy-800); }
.bankbox__text { margin: 0; font-size: 13.5px; color: var(--ink-700); line-height: 1.65; }
.bankbox__list { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.bankbox__list li {
    font-size: 12.5px; color: var(--ink-700); padding-left: 24px; position: relative;
}
.bankbox__list li::before {
    content: ""; position: absolute; left: 0; top: 3px;
    width: 15px; height: 15px; border-radius: 50%; background: var(--ok-050);
}
.bankbox__list li::after {
    content: ""; position: absolute; left: 6px; top: 6px;
    width: 4px; height: 8px; border: solid var(--ok-500);
    border-width: 0 2px 2px 0; transform: rotate(45deg);
}

@media (max-width: 720px) {
    .bankbox { flex-direction: column; gap: 12px; }
}

/* ------------ Doğrulama bekleyen ödeme (teyit edilemedi) ------------- */

.result__card--wait { border-top-color: var(--gold-600); }
.result__icon--wait { background: #fff7e6; }
.result__icon--wait::before {
    content: ""; width: 4px; height: 20px; border-radius: 2px;
    background: var(--warn-500); transform: translateY(-4px);
}
.result__icon--wait::after {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: var(--warn-500); transform: translateY(13px);
}
.result__card--wait .receipt__status { color: var(--warn-500); }

/* --------------------- Marka: logo ve alt bilgi ----------------------- */

.footer__brand { min-width: 0; }
.footer__meta {
    margin: 4px 0 0; font-size: 11.5px; color: var(--ink-500); line-height: 1.6;
}
.footer__meta a { color: var(--ink-500); }
.footer__meta a:hover { color: var(--navy-800); }

/* Güven rozetlerinde marka mavisi */
.trust__ico { background: #eaf3f8; }
.trust__ico::after { background: var(--brand-blue); }

.secure-chip__dot { background: var(--ok-500); }

@media (max-width: 720px) {
    .brand__logo { width: 140px; }
    .brand__text { display: none; }          /* dar ekranda yalnızca logo */
    .topbar__inner { padding: 11px 14px; }
    .footer__inner { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* --------------------- Havale / EFT hesap kartları -------------------- */

/* Form ve havale bloğu sol sütunda alt alta durur; sağdaki özet böylece
   kendi satırında kalır ve yapışkanlığını (position: sticky) korur. */
.checkout__main { display: flex; flex-direction: column; gap: 26px; min-width: 0; }

/* Yalnızca ekran okuyucular için — kopyalama geri bildirimi buradan duyurulur */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.panel--banks .panel__title { font-size: 19px; }
.copy-hint {
    flex: none; font-size: 12px; color: var(--ink-500);
    border: 1px dashed var(--line); border-radius: 999px; padding: 5px 11px;
}

.banks { display: flex; flex-direction: column; gap: 14px; }

.bank {
    min-width: 0; padding: 16px 18px 18px;
    border: 1.5px solid var(--line); border-radius: var(--r-lg);
    background: linear-gradient(135deg, #f7fafd 0%, #fff 62%);
}
.bank__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.bank__mark {
    width: 34px; height: 34px; flex: none; border-radius: 10px;
    display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 800;
    background: linear-gradient(140deg, var(--brand-blue), var(--brand-cyan));
    box-shadow: 0 4px 12px rgba(26, 90, 156, .25);
}
.bank__name { font-size: 15.5px; font-weight: 700; color: var(--navy-800); }

.bank__rows { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.bank__row { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 12px; }
.bank__key {
    font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--ink-500);
}
.bank__value { margin: 0; min-width: 0; }

.banks__foot { margin: 16px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-500); }
.banks__foot a { color: var(--brand-blue); font-weight: 600; }

/* --------------------------- Kopyala düğmesi -------------------------- */

/* Değerin tamamı düğmedir: tıklama alanı büyük olsun diye metin de içine alınır. */
.copy {
    font: inherit; cursor: pointer; width: 100%; text-align: left;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px 9px 13px; border-radius: var(--r-md);
    border: 1.5px solid var(--line); background: #fff; color: var(--ink-900);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.copy:hover { border-color: var(--brand-blue); box-shadow: var(--sh-sm); }
.copy:active { transform: translateY(1px); }

.copy__val { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; overflow-wrap: break-word; }
.copy__val--iban {
    font-family: var(--mono); font-weight: 700; letter-spacing: .04em;
    color: var(--navy-800); font-variant-numeric: tabular-nums;
}

.copy__act {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 650; color: var(--ink-500);
}
.copy:hover .copy__act { color: var(--brand-blue); }
.copy__ico {
    width: 15px; height: 15px; flex: none; background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 2h9a2 2 0 012 2v12h-2V4H9V2z'/><path d='M5 6h10a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2zm0 2v12h10V8H5z'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 2h9a2 2 0 012 2v12h-2V4H9V2z'/><path d='M5 6h10a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2zm0 2v12h10V8H5z'/></svg>") center/contain no-repeat;
}

.copy.is-copied { border-color: #bfe6cf; background: var(--ok-050); }
.copy.is-copied .copy__act,
.copy.is-copied:hover .copy__act { color: #0a6b36; }
.copy.is-copied .copy__ico {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.55 17.6l-4.9-4.9 1.6-1.6 3.3 3.3 8.2-8.2 1.6 1.6z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.55 17.6l-4.9-4.9 1.6-1.6 3.3 3.3 8.2-8.2 1.6 1.6z'/></svg>");
}

@media (max-width: 720px) {
    .copy-hint { display: none; }            /* panel__head zaten dikey diziliyor */
    .bank__row { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 5px; }
    .copy { flex-wrap: wrap; }               /* IBAN uzunsa etiket alt satıra iner */
    .copy__act { margin-left: auto; }
}