/* =====================================================================
   AraziMax — Sipariş Wizard (Step 1)
   ===================================================================== */

/* HTML hidden attribute her zaman gizler — display:flex/grid bunu ezmesin */
[hidden] { display: none !important; }

.wizard-section {
    padding: 88px 0 120px;
    background: var(--bg);
    min-height: 80vh;
    /* Mobilde geniş içerik (grid/kart/rozet) sayfayı sağa-sola kaydırmasın.
       position:fixed öğeleri (paybar, modallar) etkilenmez. */
    overflow-x: clip;
}

.wizard-shell { max-width: 1080px; }

/* ---------- Progress Nav ---------- */
.wizard-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 auto 32px;
    max-width: 720px;
    padding: 10px 18px;
    background: var(--bg-paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
}
.wp-item {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 10px; color: var(--muted-2);
    font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
    transition: color .25s var(--ease);
}
.wp-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--bg-soft); color: var(--muted);
    font-weight: 700; font-size: 0.85rem;
    border: 1px solid var(--line);
    transition: all .3s var(--ease);
}
.wp-item.is-active { color: var(--ink); }
.wp-item.is-active .wp-num {
    background: var(--accent-grad); color: #fff; border-color: transparent;
    box-shadow: 0 6px 16px -6px rgba(239, 35, 60, 0.55);
}
.wp-item.is-done { color: var(--ink-soft); }
.wp-item.is-done .wp-num {
    background: var(--ink); color: transparent; border-color: transparent; position: relative;
}
.wp-item.is-done .wp-num::after {
    content: "\F26A"; font-family: "bootstrap-icons";
    color: #fff; position: absolute; inset: 0;
    display: grid; place-items: center; font-size: 0.95rem;
}
.wp-sep {
    flex: 0 0 28px; height: 2px;
    background: var(--line); border-radius: 2px;
    transition: background .3s var(--ease);
}
.wp-sep.is-done { background: var(--ink); }

@media (max-width: 640px) {
    .wp-label { display: none; }
    .wp-sep { flex-basis: 18px; }
    .wizard-progress { gap: 4px; padding: 8px 12px; margin-bottom: 20px; }
}

/* ---------- Mobile compact (≤560px) ---------- */
@media (max-width: 560px) {
    .wizard-section { padding: 36px 0 64px; }
    .wizard-progress { margin-bottom: 16px; }
    .step-head { margin-bottom: 14px; }
    .step-tag { margin-bottom: 6px; padding: 3px 9px; font-size: 0.66rem; letter-spacing: 0.05em; }
    .step-title { font-size: 1.15rem; margin-bottom: 4px; line-height: 1.2; }
    .step-sub { font-size: 0.82rem; line-height: 1.4; }
    .step1-grid { gap: 14px; }
    .step1-media { max-width: 380px; }
    .form-card { padding: 14px 12px; border-radius: var(--radius); }
    .form-section + .form-section { margin-top: 14px; padding-top: 14px; }
    .form-section-head { margin-bottom: 10px; }
    .form-section-head h3 { font-size: 0.92rem; margin-bottom: 2px; }
    .form-section-sub { font-size: 0.78rem; }
    .form-field label { font-size: 0.78rem; margin-bottom: 4px; }
    .form-row { gap: 8px; margin-bottom: 8px; }
    .combobox-trigger, .form-input { padding: 9px 11px; font-size: 0.9rem; }
    .step-actions { margin-top: 14px; }
    .btn-step-next { padding: 11px 20px; font-size: 0.92rem; }
    .parsel-multi-toggle { margin-top: 6px; font-size: 0.78rem; }
}

/* ---------- Draft restore banner ---------- */
.draft-banner {
    display: flex; align-items: center; gap: 16px;
    background: linear-gradient(135deg, rgba(251, 133, 0, 0.10), rgba(239, 35, 60, 0.05));
    border: 1px solid rgba(251, 133, 0, 0.25);
    border-radius: var(--radius-lg);
    padding: 16px 20px; margin-bottom: 28px;
}
.db-icon {
    flex: 0 0 auto; width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; background: var(--accent-grad); color: #fff; font-size: 1.1rem;
    box-shadow: 0 8px 18px -8px rgba(239, 35, 60, 0.5);
}
.db-text { flex: 1; min-width: 0; line-height: 1.4; }
.db-text strong {
    display: block; font-family: var(--font-display); font-weight: 700;
    color: var(--ink); font-size: 1rem;
}
.db-text span { font-size: 0.88rem; color: var(--muted); }
.db-actions { display: flex; gap: 8px; flex-shrink: 0; }
.db-btn {
    padding: 9px 16px; border-radius: 999px;
    font-family: var(--font-display); font-weight: 600; font-size: 0.86rem;
    cursor: pointer; border: 1px solid transparent;
    transition: all .2s var(--ease); white-space: nowrap;
}
.db-btn-primary { background: var(--ink); color: #fff; }
.db-btn-primary:hover { background: var(--accent-deep); }
.db-btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--line-strong); }
.db-btn-ghost:hover { border-color: var(--ink); background: var(--bg-soft); }

@media (max-width: 640px) {
    .draft-banner { flex-direction: column; align-items: stretch; text-align: center; }
    .db-actions { justify-content: center; }
}

/* ---------- Step Box ---------- */
.step-box { display: none; animation: stepFadeIn .35s var(--ease); }
.step-box.is-active { display: block; }
@keyframes stepFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.step-head { text-align: center; margin-bottom: 36px; }
.step-tag {
    display: inline-block; padding: 5px 14px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent-deep);
    font-family: var(--font-display); font-weight: 600; font-size: 0.78rem;
    letter-spacing: 0.06em; text-transform: uppercase;
    margin-bottom: 14px;
}
.step-title {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 3.3vw, 2.4rem);
    font-weight: 800; line-height: 1.18; color: var(--ink);
    margin: 0 0 12px; letter-spacing: -0.02em;
    text-wrap: balance;
}
.step-title br { display: block; }
.gradient-text {
    background: var(--accent-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.step-sub { color: var(--muted); font-size: 1rem; margin: 0; max-width: 540px; margin-left: auto; margin-right: auto; }

/* ---------- Step 1 grid ---------- */
.step1-grid {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}

@media (max-width: 880px) {
    .step1-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Media card (video + color, glued) ---------- */
.step1-media { position: sticky; top: 88px; }

.media-card {
    background: var(--bg);
    border-radius: var(--radius-lg);
    overflow: visible;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.media-card > .step1-video { width: 100%; }

.step1-video {
    position: relative;
    aspect-ratio: 9 / 13;       /* webm'in boş kenarları kırpılıyor */
    overflow: hidden;
    border-radius: var(--radius-lg);
    cursor: pointer;
    outline: none;
    display: block;
    line-height: 0;
}
.step1-video video {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
}

.step1-video:focus-visible {
    box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 4px var(--accent);
    border-radius: var(--radius-lg);
}

/* Sound toggle — webm ile renk satırı arasında, video alt kenarına oturmuş */
.sound-toggle {
    position: relative;
    display: inline-flex; align-items: center; gap: 7px;
    margin: -18px auto 0;              /* video'nun alt kenarını hafifçe örtüyor */
    padding: 8px 16px 8px 13px;
    background: var(--accent-grad);
    color: #fff;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    font-family: var(--font-display);
    font-weight: 600; font-size: 0.78rem;
    letter-spacing: 0.015em;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    transition: all .25s var(--ease);
    user-select: none;
    box-shadow:
        0 10px 26px -8px rgba(239, 35, 60, 0.55),
        0 4px 10px -3px rgba(251, 133, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    white-space: nowrap;
}
.sound-toggle i { font-size: 0.92rem; line-height: 1; opacity: 0.96; }
.sound-toggle:hover {
    transform: translateY(-2px);
    box-shadow:
        0 16px 32px -8px rgba(239, 35, 60, 0.65),
        0 6px 14px -3px rgba(251, 133, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.sound-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* color block — label üstte, dotlar altta hizalı */
.color-block {
    width: 100%;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 10px 12px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.color-label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--muted);
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-align: center;
}

@media (max-width: 880px) {
    .step1-media {
        position: static;
        max-width: 280px;
        margin: 0 auto;
    }
    .sound-toggle { margin-top: -16px; padding: 7px 14px 7px 11px; font-size: 0.72rem; }
    .color-block { padding: 12px 10px 4px; gap: 8px; }
    .color-label { font-size: 0.76rem; }
    .color-dots { gap: 12px; }
    .color-dot { width: 26px; height: 26px; }
}

/* ---------- Color dots ---------- */
.color-dots {
    display: flex; gap: 10px; align-items: center;
}
.color-dot {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--sw, #999);
    border: 2px solid transparent; padding: 0;
    cursor: pointer; transition: all .25s var(--ease);
    position: relative;
    box-shadow: inset 0 0 0 2px var(--bg-paper);
}
.color-dot::after {
    content: ""; position: absolute; inset: -4px;
    border-radius: 50%; border: 2px solid transparent;
    transition: border-color .25s var(--ease);
    pointer-events: none;
}
.color-dot:hover { transform: scale(1.08); }
.color-dot.is-active::after { border-color: var(--sw); }
.color-dot:focus-visible { outline: none; }
.color-dot:focus-visible::after { border-color: var(--ink); }

/* ---------- Form card ---------- */
.form-card {
    background: var(--bg-paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-md);
}

.form-section + .form-section {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}
.form-section-head { margin-bottom: 18px; }
.form-section-head h3 {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.05rem;
    color: var(--ink); letter-spacing: -0.01em;
}
.form-section-sub { font-size: 0.85rem; color: var(--muted); }
.form-section-sub a {
    color: var(--accent); font-weight: 600; text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* ---------- Form fields ---------- */
.form-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    margin-bottom: 16px;
}
.form-row:last-child { margin-bottom: 0; }
.form-row-single { grid-template-columns: 1fr; }
@media (max-width: 480px) {
    .form-row { grid-template-columns: 1fr; gap: 10px; }
}

.form-field { display: flex; flex-direction: column; min-width: 0; }
.form-field label {
    font-family: var(--font-display);
    font-weight: 600; font-size: 0.82rem;
    color: var(--ink-soft); margin-bottom: 6px; letter-spacing: 0.01em;
}
.field-optional {
    font-weight: 400; font-size: 0.74rem;
    color: var(--ink-faint, #9aa0a6); letter-spacing: 0;
}

.form-input {
    width: 100%; padding: 12px 14px;
    background: var(--bg); border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: 0.95rem; color: var(--ink);
    transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.form-input:hover { border-color: var(--muted-2); }
.form-input:focus {
    outline: none; border-color: var(--accent);
    background: var(--bg-paper);
    box-shadow: 0 0 0 4px rgba(239, 35, 60, 0.10);
}
.form-input.is-invalid {
    border-color: var(--accent);
    background: rgba(239, 35, 60, 0.04);
}

.form-hint { margin: 6px 0 0; color: var(--muted-2); font-size: 0.76rem; }
.form-hint kbd {
    display: inline-block; padding: 1px 5px; border-radius: 4px;
    background: var(--bg-soft); border: 1px solid var(--line);
    font-family: var(--font-body); font-size: 0.7rem;
    color: var(--ink-soft);
}

/* ---------- Field error ---------- */
.field-error {
    display: flex; align-items: center; gap: 6px;
    margin: 6px 0 0; padding: 0;
    font-size: 0.78rem; color: var(--accent-deep);
    animation: errorPop .25s var(--ease);
}
.field-error::before {
    content: "\F33B"; font-family: "bootstrap-icons"; font-size: 0.9rem;
}
@keyframes errorPop {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Combobox ---------- */
.combobox { position: relative; }
.combobox-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 12px 14px;
    background: var(--bg); border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: 0.95rem; color: var(--ink);
    cursor: pointer; text-align: left;
    transition: all .2s var(--ease);
}
.combobox-trigger:hover { border-color: var(--muted-2); }
.combobox-trigger:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(239, 35, 60, 0.10); }
.combobox-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combobox-value.is-placeholder { color: var(--muted-2); }
.combobox-trigger i { color: var(--muted); transition: transform .2s var(--ease); }
.combobox.is-open .combobox-trigger i { transform: rotate(180deg); }
.combobox.is-open .combobox-trigger { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(239, 35, 60, 0.10); }

.combobox.is-disabled .combobox-trigger {
    background: var(--bg-soft); color: var(--muted-2); cursor: not-allowed;
}
.combobox.is-invalid .combobox-trigger {
    border-color: var(--accent); background: rgba(239, 35, 60, 0.04);
}

.combobox-panel {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    z-index: 30; background: var(--bg-paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: panelOpen .2s var(--ease);
}
@keyframes panelOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.combobox-search {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-bottom: 1px solid var(--line);
    background: var(--bg);
}
.combobox-search i { color: var(--muted-2); font-size: 0.9rem; }
.combobox-search input {
    flex: 1; border: none; background: transparent;
    font-family: var(--font-body); font-size: 0.92rem; color: var(--ink);
    outline: none;
}
.combobox-list {
    list-style: none; margin: 0; padding: 6px;
    max-height: 240px; overflow-y: auto;
}
.combobox-list li {
    padding: 9px 12px; border-radius: var(--radius-sm);
    font-size: 0.92rem; color: var(--ink-soft);
    cursor: pointer; transition: background .15s var(--ease);
}
.combobox-list li:hover,
.combobox-list li.is-active { background: var(--bg-soft); color: var(--ink); }
.combobox-list li.is-selected {
    background: var(--accent-soft); color: var(--accent-deep);
    font-weight: 600;
}
.combobox-empty {
    padding: 28px 16px; text-align: center;
    font-size: 0.88rem; color: var(--muted-2);
}

/* mobile centered modal */
@media (max-width: 560px) {
    .combobox.is-open .combobox-panel {
        position: fixed;
        top: 50%; left: 50%;
        right: auto; bottom: auto;
        transform: translate(-50%, -50%);
        width: min(92vw, 420px);
        max-height: 75vh;
        display: flex; flex-direction: column;
        border-radius: var(--radius-lg);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
        z-index: 1000;
        animation: cbxModalIn .22s var(--ease);
    }
    @keyframes cbxModalIn {
        from { opacity: 0; transform: translate(-50%, -48%) scale(.96); }
        to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
    .combobox.is-open .combobox-list { max-height: 55vh; }
    .combobox-backdrop {
        position: fixed; inset: 0; background: rgba(11, 11, 15, 0.55);
        z-index: 999; backdrop-filter: blur(3px);
        animation: fadeIn .2s var(--ease);
    }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- Parsel toggle ---------- */
.parsel-wrap { width: 100%; }

.parsel-multi-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 8px; padding: 0;
    background: none; border: none; cursor: pointer;
    font-family: var(--font-display); font-weight: 600;
    font-size: 0.82rem; color: var(--accent-deep);
    transition: color .2s var(--ease);
}
.parsel-multi-toggle:hover { color: var(--accent); }
.parsel-multi-toggle i { font-size: 0.95rem; transition: transform .2s var(--ease); }
.parsel-multi-toggle.is-on i { transform: rotate(45deg); }

/* ---------- Chip input ---------- */
.chip-input {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    min-height: 46px;
    padding: 8px 10px;
    background: var(--bg); border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    transition: all .2s var(--ease); cursor: text;
}
.chip-input:hover { border-color: var(--muted-2); }
.chip-input.is-focus {
    border-color: var(--accent); background: var(--bg-paper);
    box-shadow: 0 0 0 4px rgba(239, 35, 60, 0.10);
}
.chip-input.is-invalid { border-color: var(--accent); background: rgba(239, 35, 60, 0.04); }

.chip-list { display: contents; list-style: none; margin: 0; padding: 0; }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 6px 5px 12px;
    background: var(--accent-grad); color: #fff;
    border-radius: 999px;
    font-family: var(--font-display); font-weight: 600;
    font-size: 0.85rem; line-height: 1;
    box-shadow: 0 4px 10px -4px rgba(239, 35, 60, 0.4);
    animation: chipPop .2s var(--ease);
}
@keyframes chipPop {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
.chip-x {
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.25); color: #fff;
    border: none; cursor: pointer; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.7rem; transition: background .15s var(--ease);
}
.chip-x:hover { background: rgba(255, 255, 255, 0.45); }
.chip-typer {
    flex: 1; min-width: 80px;
    border: none; background: transparent; outline: none;
    font-family: var(--font-body); font-size: 0.92rem; color: var(--ink);
    padding: 6px 4px;
}

/* ---------- Step actions ---------- */
.step-actions {
    display: flex; align-items: center;
    gap: 12px; margin-top: 24px;
}
.btn-step-next { margin-left: auto; }  /* her zaman en sağda kal */

.autosave {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.84rem; color: var(--muted);
    font-family: var(--font-display); font-weight: 500;
    opacity: 0;                  /* layout'ta yer kaplar, görünmez */
    pointer-events: none;
    transition: opacity .3s var(--ease);
}
.autosave.is-visible { opacity: 1; }
.autosave i { color: #00C853; font-size: 1rem; }
.autosave.is-saving i {
    color: var(--accent-2);
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-step-next, .btn-step-back {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 26px; border-radius: 999px;
    font-family: var(--font-display); font-weight: 700; font-size: 0.98rem;
    cursor: pointer; border: none;
    transition: all .25s var(--ease);
}
.btn-step-next {
    background: var(--accent-grad); color: #fff;
    box-shadow: var(--shadow-accent);
}
.btn-step-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 28px 60px -22px rgba(239, 35, 60, 0.6);
}
.btn-step-next:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-step-back {
    background: var(--bg-paper); color: var(--ink-soft);
    border: 1px solid var(--line-strong);
}
.btn-step-back:hover { border-color: var(--ink); background: var(--bg-soft); }

/* ---------- Placeholder ---------- */
.step-placeholder {
    text-align: center; padding: 60px 24px;
    background: var(--bg-paper); border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg); color: var(--muted);
}
.step-placeholder i {
    font-size: 2.6rem; color: var(--accent-2);
    display: block; margin-bottom: 16px;
}
.step-placeholder p { margin: 0 0 24px; font-size: 1rem; color: var(--muted); }
.step-placeholder .step-actions { justify-content: center; }


/* =====================================================================
   STEP 2 — Video Özelleştirme
   ===================================================================== */

.step2-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: 36px;
    align-items: start;
}

@media (max-width: 880px) {
    .step2-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* Step actions — grid'in altında, sabit konum */
.step-actions--bottom {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

/* ---------- Order Card (Sipariş Kartı) ---------- */
.step2-preview { position: sticky; top: 88px; }

@media (max-width: 880px) {
    .step2-preview { position: static; max-width: 420px; margin: 0 auto; width: 100%; }
}

.order-card {
    --brand-primary: #5E5C58;
    --brand-secondary: #0B0B0F;

    background: var(--bg-paper);
    border-radius: var(--radius-lg);
    box-shadow:
        0 24px 60px -22px rgba(0, 0, 0, 0.22),
        0 4px 12px -4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--line);
}

/* === Üst başlık === */
.oc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg-paper) 100%);
    border-bottom: 1px solid var(--line);
}
.oc-head-icon {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--accent-grad);
    color: #fff;
    display: grid; place-items: center;
    font-size: 1.15rem;
    box-shadow: 0 6px 14px -4px rgba(239, 35, 60, 0.4);
}
.oc-head-text h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.oc-head-text p {
    margin: 1px 0 0;
    font-size: 0.78rem;
    color: var(--muted);
}

/* === Bölümler === */
.oc-section {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}
.oc-section:last-of-type { border-bottom: none; }

.oc-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-2);
}
.oc-section-title i {
    color: var(--accent-2);
    font-size: 0.92rem;
}
.oc-count {
    margin-left: auto;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--ink-soft);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* === Marka bölümü === */
.oc-brand-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.oc-brand-logo-wrap {
    width: 100%;
    min-height: 60px;
    padding: 10px 16px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
}
.oc-brand-logo-wrap img {
    max-height: 48px;
    max-width: 160px;
    object-fit: contain;
}
.oc-brand-fallback {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.96rem;
    color: var(--ink);
    letter-spacing: 0.02em;
}
.oc-brand-sub {
    font-size: 0.74rem;
    color: var(--muted-2);
}

/* === Danışman kartı (mini sub-card, brand renkleriyle) === */
.oc-consultant {
    background: var(--bg-paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
}
.ocm-band {
    height: 8px;
    background: var(--brand-primary);
    transition: background .4s var(--ease);
    position: relative;
}
.ocm-band::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 38%;
    background: var(--brand-secondary);
    transition: background .4s var(--ease);
}
.ocm-body {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 12px;
}
.ocm-avatar {
    flex: 0 0 60px;
    width: 60px; height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-soft);
    border: 2px solid var(--brand-primary);
    transition: border-color .4s var(--ease);
    position: relative;
}
.ocm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ocm-avatar-placeholder {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    color: var(--muted-2);
    font-size: 1.4rem;
}
.ocm-avatar.has-image .ocm-avatar-placeholder { display: none; }

.ocm-info { flex: 1; min-width: 0; line-height: 1.25; }
.ocm-name {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--brand-secondary);
    font-size: 0.95rem;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    transition: color .4s var(--ease);
}
.ocm-title {
    color: var(--muted);
    font-size: 0.76rem;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.ocm-phone {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--brand-secondary);
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color .4s var(--ease);
}
.ocm-phone i {
    color: var(--brand-primary);
    font-size: 0.78rem;
    transition: color .4s var(--ease);
}

.ocm-firm {
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    text-align: center;
    background: var(--bg-soft);
}
.ocm-firm img {
    max-height: 30px;
    max-width: 50%;
    object-fit: contain;
}

/* === Lokasyonlar === */
.oc-locations {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 32px;
}
.oc-locations .pc-loc-chip {
    background: var(--brand-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.72rem;
    box-shadow: 0 3px 8px -3px color-mix(in srgb, var(--brand-primary) 50%, transparent);
    transition: background .4s var(--ease);
}
.oc-locations .pc-loc-chip i { font-size: 0.7rem; opacity: 0.9; }
.oc-empty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted-2);
    font-size: 0.82rem;
    font-style: italic;
}
.oc-empty i { font-size: 0.95rem; }

/* === Ses === */
.oc-audio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.oc-audio-icon {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--brand-primary);
    color: #fff;
    display: grid; place-items: center;
    font-size: 0.95rem;
    transition: background .4s var(--ease);
}
.oc-audio-info { display: flex; flex-direction: column; min-width: 0; }
.oc-audio-label {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    font-size: 0.92rem;
}
.oc-audio-sub {
    font-size: 0.74rem;
    color: var(--muted);
    margin-top: 1px;
}

.oc-voice-preview {
    margin-top: 10px;
    padding: 12px 14px 12px 38px;
    background: color-mix(in srgb, var(--brand-primary) 6%, var(--bg-paper));
    border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, transparent);
    border-radius: var(--radius);
    position: relative;
    transition: background .4s var(--ease), border-color .4s var(--ease);
}
.oc-voice-quote {
    position: absolute;
    top: 10px; left: 12px;
    color: var(--brand-primary);
    font-size: 1.2rem;
    opacity: 0.7;
    transition: color .4s var(--ease);
}
.oc-voice-preview p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.5;
    font-style: italic;
}
.oc-voice-preview.is-empty p {
    color: var(--muted-2);
    font-style: normal;
}

/* === Footer === */
.oc-footer {
    background: var(--brand-secondary);
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
    padding: 10px 16px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: background .4s var(--ease);
}

/* === Header: marka primary rengi === */
.bsc-header {
    background: var(--brand-primary);
    color: #fff;
    padding: 26px 24px 54px;
    text-align: center;
    position: relative;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .4s var(--ease);
}

/* Logo plate — beyaz arka plan, logo doğal renkleriyle */
.bsc-logo-plate {
    background: #fff;
    padding: 12px 22px;
    border-radius: 14px;
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    min-width: 140px;
    max-width: 86%;
}
.bsc-logo {
    max-height: 56px;
    max-width: 180px;
    width: auto;
    object-fit: contain;
    display: block;
}
.bsc-brand-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.98rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-secondary);
    transition: color .4s var(--ease);
}

/* === Avatar: header'ı örtecek şekilde === */
.bsc-avatar {
    width: 92px; height: 92px;
    border-radius: 50%;
    background: var(--bg-paper);
    border: 4px solid var(--bg-paper);
    box-shadow:
        0 0 0 3px var(--brand-secondary),
        0 10px 22px -6px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    position: relative;
    margin: -46px auto 14px;
    z-index: 2;
    transition: box-shadow .4s var(--ease);
}
.bsc-avatar-placeholder {
    width: 100%; height: 100%;
    background: var(--bg-soft);
    display: grid; place-items: center;
    color: var(--muted-2);
    font-size: 2rem;
}
.bsc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bsc-avatar.has-image .bsc-avatar-placeholder { display: none; }

/* === Danışman bilgileri === */
.bsc-info {
    text-align: center;
    padding: 0 24px 18px;
}
.bsc-name {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--brand-secondary);
    font-size: 1.2rem;
    line-height: 1.2;
    margin-bottom: 4px;
    transition: color .4s var(--ease);
    word-wrap: break-word;
}
.bsc-title {
    color: var(--muted);
    font-size: 0.86rem;
    margin-bottom: 10px;
}
.bsc-phone {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--brand-secondary);
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: color .4s var(--ease);
}
.bsc-phone i {
    color: var(--brand-primary);
    transition: color .4s var(--ease);
    font-size: 0.92rem;
}

/* === Firma logosu === */
.bsc-firm {
    padding: 14px 24px;
    border-top: 1px solid color-mix(in srgb, var(--brand-primary) 14%, transparent);
    text-align: center;
}
.bsc-firm img {
    max-height: 40px;
    max-width: 65%;
    object-fit: contain;
}

/* === Lokasyonlar === */
.bsc-locations {
    padding: 12px 16px;
    background: color-mix(in srgb, var(--brand-primary) 7%, var(--bg-paper));
    border-top: 1px solid color-mix(in srgb, var(--brand-primary) 14%, transparent);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    transition: background .4s var(--ease);
}
.pc-loc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    background: var(--brand-primary);
    color: #fff;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--brand-primary) 50%, transparent);
    transition: background .4s var(--ease);
}
.pc-loc-chip i { font-size: 0.7rem; opacity: 0.92; }

/* === Seçimler özeti (ses vb.) === */
.bsc-selections {
    padding: 12px 16px;
    border-top: 1px solid color-mix(in srgb, var(--brand-primary) 12%, transparent);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.bsc-sel-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: color-mix(in srgb, var(--brand-secondary) 6%, var(--bg-paper));
    color: var(--brand-secondary);
    border: 1px solid color-mix(in srgb, var(--brand-secondary) 18%, transparent);
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.74rem;
    transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.bsc-sel-item i {
    color: var(--brand-primary);
    font-size: 0.86rem;
    transition: color .4s var(--ease);
}

/* === Footer band — secondary rengi === */
.bsc-footer {
    background: var(--brand-secondary);
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
    padding: 9px 16px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: background .4s var(--ease);
}

.bsc-caption {
    margin: 14px 4px 0;
    font-size: 0.74rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.45;
}

/* ---------- Brand grid ---------- */
.brand-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}
@media (max-width: 560px) {
    .brand-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .brand-card { height: 68px; padding: 6px 4px; }
}

.brand-card {
    --brand: var(--muted-2);
    position: relative;
    padding: 8px 8px;
    height: 88px;
    background: var(--bg-paper);
    border: 2px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all .2s var(--ease);
    display: flex; align-items: center; justify-content: center;
}
.brand-card img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(0.15);
    transition: filter .2s var(--ease);
}
.brand-card:hover {
    border-color: var(--muted-2);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.brand-card:hover img { filter: none; }
.brand-card.is-active {
    border-color: var(--brand);
    background: linear-gradient(180deg, var(--bg-paper) 0%, color-mix(in srgb, var(--brand) 8%, var(--bg-paper)) 100%);
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--brand) 50%, transparent);
}
.brand-card.is-active img { filter: none; }
.brand-card.is-active::after {
    content: "\F26E";   /* bi-check-circle-fill */
    font-family: "bootstrap-icons";
    position: absolute;
    top: -8px; right: -8px;
    width: 22px; height: 22px;
    background: var(--brand);
    color: #fff;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 0.85rem;
    border: 2px solid var(--bg-paper);
}

.brand-independent {
    width: 100%;
    padding: 13px 16px;
    background: var(--bg-paper);
    border: 2px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-display);
    font-weight: 600; font-size: 0.92rem;
    color: var(--ink-soft);
    transition: all .2s var(--ease);
}
.brand-independent i { font-size: 1.1rem; color: var(--muted); }
.brand-independent:hover { border-color: var(--muted-2); }
.brand-independent.is-active {
    border-color: var(--ink);
    background: var(--bg-soft);
    color: var(--ink);
}
.brand-independent.is-active i:first-child { color: var(--ink); }
.brand-independent .brand-check {
    margin-left: auto;
    color: var(--ink);
    font-size: 1.1rem;
    opacity: 0;
    transition: opacity .2s var(--ease);
}
.brand-independent.is-active .brand-check { opacity: 1; }

/* ---------- Upload CTA (büyük buton, modal açar) ---------- */
.upload-cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}
@media (max-width: 560px) {
    .upload-cta-row { grid-template-columns: 1fr; }
}

.upload-cta {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: var(--bg-paper);
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all .2s var(--ease);
    text-align: left;
    min-width: 0;
}
.upload-cta:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-1px);
}
.upload-cta.has-file {
    border-style: solid;
    border-color: var(--accent);
    background: var(--accent-soft);
}
.uc-icon {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--accent-grad);
    color: #fff;
    display: grid; place-items: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px -2px rgba(239,35,60,0.35);
}
.uc-text { flex: 1; min-width: 0; }
.uc-label {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--ink);
    margin-bottom: 2px;
}
.uc-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--muted);
}
.uc-thumb {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: 8px;
    background-size: cover; background-position: center;
    border: 1px solid var(--line);
}

/* ---------- Location grid ---------- */
.loc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 560px) {
    .loc-grid { grid-template-columns: 1fr; }
}

.badge-pro {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 8px;
    border-radius: 999px;
    background: var(--accent-grad);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    vertical-align: middle;
}

.loc-notice {
    display: flex; gap: 10px;
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--muted);
}
.loc-notice i { color: var(--accent-2); margin-top: 2px; flex-shrink: 0; }
.loc-notice p { margin: 0; line-height: 1.45; }
.loc-notice a { color: var(--accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }

/* ---------- EİDS onaylıdır etiketi (zorunlu seçim) ---------- */
.badge-req {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 8px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    vertical-align: middle;
}

/* Etiketin kendisi — şeffaf PNG olduğu için açık zeminde gösterilir. */
.eids-figure {
    margin: 0 0 14px;
    padding: 16px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: center;
}
.eids-figure img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
}
.eids-figure figcaption {
    margin-top: 10px;
    font-size: 0.76rem;
    color: var(--muted);
}

.eids-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 480px) {
    .eids-choice { grid-template-columns: 1fr; }
}

.eids-btn {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: var(--bg-paper);
    border: 2px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all .2s var(--ease);
    text-align: left;
    font: inherit;
}
.eids-btn:hover { border-color: var(--muted-2); transform: translateY(-2px); }
.eb-mark {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--bg-soft);
    color: var(--muted);
    display: grid; place-items: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: all .2s var(--ease);
}
.eb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eb-title {
    font-family: var(--font-display); font-weight: 700;
    font-size: 0.95rem; color: var(--ink);
}
.eb-sub { font-size: 0.76rem; color: var(--muted); }

/* Evet yeşil, hayır nötr — seçim bir bakışta okunsun. */
.eids-btn[data-eids="1"].is-active {
    border-color: #16A34A;
    background: #F0FDF4;
}
.eids-btn[data-eids="1"].is-active .eb-mark { background: #16A34A; color: #fff; }
.eids-btn[data-eids="0"].is-active {
    border-color: var(--muted-2);
    background: var(--bg-soft);
}
.eids-btn[data-eids="0"].is-active .eb-mark { background: var(--muted); color: #fff; }

/* Seçim yapılmadan devam denenirse bölüm kırmızıya döner. */
.eids-choice.is-invalid .eids-btn { border-color: var(--accent); }

.eids-notice {
    display: flex; gap: 10px;
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--muted);
}
.eids-notice i { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.eids-notice p { margin: 0; }

/* Sipariş kartındaki özet satırı */
.oc-eids {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
}
.oc-eids-badge {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: grid; place-items: center;
    font-size: 1.1rem;
    background: var(--line);
    color: var(--muted);
    flex-shrink: 0;
}
.oc-eids.is-yes .oc-eids-badge { background: #16A34A; color: #fff; }
.oc-eids.is-no  .oc-eids-badge { background: var(--muted); color: #fff; }
.oc-eids-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oc-eids-label { font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.oc-eids-sub { font-size: 0.76rem; color: var(--muted); }

/* ---------- Audio choice ---------- */
.audio-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 480px) {
    .audio-choice { grid-template-columns: 1fr; }
}

.audio-btn {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 6px;
    padding: 16px 16px 14px;
    background: var(--bg-paper);
    border: 2px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all .2s var(--ease);
    text-align: left;
}
.audio-btn:hover {
    border-color: var(--muted-2);
    transform: translateY(-2px);
}
.audio-btn.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.ab-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--accent-grad);
    color: #fff;
    display: grid; place-items: center;
    font-size: 1.05rem;
    margin-bottom: 4px;
}
.ab-title {
    font-family: var(--font-display); font-weight: 700;
    font-size: 0.98rem; color: var(--ink);
}
.ab-sub { font-size: 0.78rem; color: var(--muted); }

.voice-box { margin-top: 14px; }
.voice-box textarea {
    width: 100%;
    resize: vertical;
    font-family: var(--font-body);
    min-height: 110px;
}
.voice-meta {
    display: flex; justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--muted);
}
.voice-meta i { color: var(--accent-2); }

/* ---------- Upload modal ---------- */
.upload-modal {
    position: fixed; inset: 0; z-index: 100;
    display: grid; place-items: center;
    padding: 20px;
}
.um-backdrop {
    position: absolute; inset: 0;
    background: rgba(11, 11, 15, 0.55);
    backdrop-filter: blur(4px);
    animation: fadeIn .25s var(--ease);
}
.um-dialog {
    position: relative;
    z-index: 1;
    width: 100%; max-width: 460px;
    background: var(--bg-paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 28px;
    animation: dialogPop .3s var(--ease);
}
@keyframes dialogPop {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.um-close {
    position: absolute; top: 12px; right: 12px;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--bg-soft); border: 1px solid var(--line);
    color: var(--ink-soft); cursor: pointer;
    display: grid; place-items: center;
    font-size: 0.95rem;
    transition: all .2s var(--ease);
}
.um-close:hover { background: var(--bg-paper); border-color: var(--ink); }
.um-head { margin-bottom: 16px; padding-right: 30px; }
.um-head h3 {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.1rem; color: var(--ink);
}
.um-head p { margin: 0; font-size: 0.85rem; color: var(--muted); }

.um-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px;
    padding: 30px 20px;
    background: var(--bg);
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: center;
    transition: all .2s var(--ease);
    margin-bottom: 14px;
}
.um-dropzone:hover, .um-dropzone.is-drag {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.um-dropzone i {
    font-size: 2rem;
    color: var(--accent);
}
.um-dropzone p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }
.um-dropzone small { font-size: 0.75rem; color: var(--muted-2); }

.um-preview {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-soft);
    margin-bottom: 14px;
    max-height: 280px;
    display: grid; place-items: center;
}
.um-preview img { max-width: 100%; max-height: 280px; object-fit: contain; }

.um-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    flex-wrap: wrap;
}
.um-btn {
    padding: 10px 18px; border-radius: 999px;
    font-family: var(--font-display); font-weight: 600;
    font-size: 0.9rem; cursor: pointer;
    border: 1px solid transparent;
    transition: all .2s var(--ease);
}
.um-btn-ghost {
    background: transparent; color: var(--ink-soft); border-color: var(--line-strong);
}
.um-btn-ghost:hover { border-color: var(--ink); background: var(--bg-soft); }
.um-btn-primary {
    background: var(--accent-grad); color: #fff;
    box-shadow: 0 8px 18px -8px rgba(239,35,60,0.5);
}
.um-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.um-btn-primary:not(:disabled):hover { transform: translateY(-1px); }
#umRemove { margin-right: auto; color: var(--accent); border-color: var(--accent); }

/* ---------- Mobile step 2 sıkılaştırma ---------- */
@media (max-width: 560px) {
    .step2-grid { gap: 16px; }
    .oc-head { padding: 14px 16px; }
    .oc-head-icon { width: 36px; height: 36px; font-size: 1rem; }
    .oc-head-text h2 { font-size: 0.96rem; }
    .oc-section { padding: 14px 16px; }
    .oc-section-title { font-size: 0.66rem; letter-spacing: 0.1em; margin-bottom: 10px; }
    .oc-brand-logo-wrap { min-height: 52px; padding: 8px 14px; }
    .oc-brand-logo-wrap img { max-height: 40px; max-width: 140px; }
    .ocm-body { padding: 12px 12px 10px; gap: 10px; }
    .ocm-avatar { flex-basis: 52px; width: 52px; height: 52px; }
    .ocm-name { font-size: 0.9rem; }
    .ocm-title { font-size: 0.72rem; }
    .ocm-phone { font-size: 0.78rem; }
    .oc-audio { padding: 10px 12px; gap: 10px; }
    .oc-audio-icon { width: 32px; height: 32px; font-size: 0.85rem; }
    .oc-audio-label { font-size: 0.86rem; }
    .oc-audio-sub { font-size: 0.7rem; }
    .oc-voice-preview { padding: 10px 12px 10px 34px; }
    .oc-voice-preview p { font-size: 0.78rem; }
    .oc-footer { padding: 8px 14px; font-size: 0.66rem; }
    .brand-grid { gap: 6px; }
    .brand-card { height: 68px; padding: 6px 4px; }
    .upload-cta { padding: 12px 14px; }
    .uc-label { font-size: 0.86rem; }
    .uc-sub { font-size: 0.7rem; }
    .um-dialog { padding: 22px 20px; }
}

/* =====================================================================
   STEP 2 — Sipariş Kartı eklemeler (color picker, logo section, locations)
   ===================================================================== */

/* Sorumluluk uyarısı — sade, italik */
.oc-disclaimer {
    margin: 0;
    padding: 11px 18px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--muted);
    text-align: center;
}

/* === Arazi Çizim Rengi picker — 5 sütun tek satır === */
.oc-color-picker {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    margin-bottom: 10px;
}
.oc-color-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 4px;
    background: var(--bg-paper);
    border: 1.5px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    transition: all .2s var(--ease);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--ink-soft);
    min-width: 0;
}
.oc-color-dot {
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: inset 0 0 0 2px var(--bg-paper);
    border: 1.5px solid var(--c);
    flex-shrink: 0;
}
.oc-color-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.oc-color-pill:hover {
    border-color: var(--c);
    transform: translateY(-1px);
}
.oc-color-pill.is-active {
    border-color: var(--c);
    background: color-mix(in srgb, var(--c) 12%, var(--bg-paper));
    color: var(--ink);
}
.oc-color-pill.is-suggested {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 32%, transparent);
}

/* === Renk seçim feedback === */
.oc-color-feedback {
    padding: 12px 14px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.oc-color-selected {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 6px;
}
.oc-color-selected-dot {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: inset 0 0 0 2.5px var(--bg-paper), 0 2px 6px -2px color-mix(in srgb, var(--c) 40%, transparent);
    border: 2px solid var(--c);
    flex-shrink: 0;
    transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.oc-color-selected-text {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink-soft);
    font-size: 0.88rem;
}
.oc-color-selected-text strong {
    font-weight: 800;
    color: var(--ink);
}
.oc-color-hint-text {
    margin: 0;
    font-size: 0.74rem;
    color: var(--muted);
    line-height: 1.45;
}
.oc-color-hint-text strong { color: var(--ink-soft); font-weight: 700; }

/* === Logo subsection — başlıklı, tıklanabilir === */
.ocm-logo-section {
    border-top: 1px solid var(--line);
    padding: 12px 14px 14px;
    background: var(--bg-soft);
}
.ocm-logo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.ocm-logo-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-2);
}
.ocm-logo-title i {
    color: var(--accent-2);
    font-size: 0.85rem;
}
.ocm-logo-edit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--bg-paper);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.7rem;
    transition: all .15s var(--ease);
}
.ocm-logo-edit i { font-size: 0.7rem; }
.ocm-logo-edit:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}
.ocm-logo-display {
    width: 100%;
    min-height: 68px;
    padding: 10px 14px;
    background: var(--bg-paper);
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all .2s var(--ease);
}
.ocm-logo-display:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.ocm-logo-display.has-image {
    border-style: solid;
    border-color: var(--line);
}
.ocm-logo-display img {
    max-height: 56px;
    max-width: 100%;
    object-fit: contain;
}
.ocm-logo-empty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted-2);
    font-size: 0.82rem;
}
.ocm-logo-empty i {
    font-size: 1.05rem;
    color: var(--accent-2);
}

/* === Lokasyonlar (vertical list) === */
.oc-locations {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 32px;
}
.oc-locations .pc-loc-chip,
.oc-locations li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--brand-primary);
    color: #fff;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.78rem;
    line-height: 1.3;
    box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--brand-primary) 45%, transparent);
    transition: background .4s var(--ease);
}
.oc-locations .pc-loc-chip i { font-size: 0.82rem; opacity: 0.92; flex-shrink: 0; }
.oc-locations .oc-empty {
    background: transparent;
    color: var(--muted-2);
    box-shadow: none;
    padding: 6px 2px;
    font-style: italic;
    font-weight: 500;
}
.oc-locations .oc-empty i {
    color: var(--muted-2);
    opacity: 1;
}

/* TKGM warning */
.oc-tkgm-notice {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(251, 133, 0, 0.07);
    border: 1px solid rgba(251, 133, 0, 0.22);
    border-radius: var(--radius-sm);
}
.oc-tkgm-notice i {
    color: var(--accent-2);
    font-size: 0.9rem;
    margin-top: 1px;
    flex-shrink: 0;
}
.oc-tkgm-notice p {
    margin: 0;
    font-size: 0.74rem;
    color: var(--ink-soft);
    line-height: 1.45;
}
.oc-tkgm-notice strong { color: var(--ink); }
.oc-tkgm-notice a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* Voice preview overflow düzeltme */
.oc-voice-preview {
    max-width: 100%;
    overflow: hidden;
}
.oc-voice-preview p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.5;
    font-style: italic;
    max-height: 6em;
    overflow-y: auto;
}

/* Mobile compact */
@media (max-width: 560px) {
    .oc-disclaimer { padding: 10px 14px; }
    .oc-disclaimer p { font-size: 0.74rem; }
    .oc-color-pill { padding: 5px 10px 5px 7px; font-size: 0.74rem; }
    .oc-color-dot { width: 14px; height: 14px; }
    .oc-color-hint { padding: 8px 10px; }
    .oc-color-hint p { font-size: 0.72rem; }
    .ocm-logo-section { padding: 10px 12px 12px; }
    .ocm-logo-display { min-height: 60px; }
    .ocm-logo-display img { max-height: 46px; }
    .oc-tkgm-notice { padding: 8px 10px; }
    .oc-tkgm-notice p { font-size: 0.7rem; }
    .step-actions--bottom { margin-top: 18px; padding-top: 16px; }
}

/* =====================================================================
   STEP 2 — Logo footnote, Confirm checkbox, Disclaimer modal
   ===================================================================== */

/* Logo dipnotu */
.ocm-logo-foot {
    display: flex;
    gap: 6px;
    margin: 8px 0 0;
    padding: 6px 8px;
    font-size: 0.7rem;
    color: var(--muted);
    line-height: 1.4;
}
.ocm-logo-foot i {
    color: var(--accent-2);
    font-size: 0.82rem;
    margin-top: 1px;
    flex-shrink: 0;
}

/* === Onay checkbox === */
.oc-confirm {
    padding: 14px 20px 12px;
    background: linear-gradient(135deg, rgba(251, 133, 0, 0.08), rgba(239, 35, 60, 0.05));
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.oc-confirm-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.oc-confirm-row input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
    pointer-events: none;
}
.oc-confirm-box {
    flex: 0 0 22px;
    width: 22px; height: 22px;
    border-radius: 6px;
    border: 2px solid var(--line-strong);
    background: var(--bg-paper);
    display: grid;
    place-items: center;
    color: transparent;
    font-size: 0.85rem;
    transition: all .15s var(--ease);
    margin-top: 1px;
}
.oc-confirm-row input:checked ~ .oc-confirm-box {
    background: var(--accent-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 10px -3px rgba(239, 35, 60, 0.45);
}
.oc-confirm-row:hover .oc-confirm-box {
    border-color: var(--accent);
}
.oc-confirm-row input:focus-visible ~ .oc-confirm-box {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.oc-confirm-text {
    font-size: 0.84rem;
    line-height: 1.4;
    color: var(--ink-soft);
}
.oc-confirm-text strong {
    color: var(--ink);
    font-weight: 700;
}

.oc-confirm-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 32px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--accent);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.76rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.oc-confirm-link:hover { color: var(--accent-deep); }
.oc-confirm-link i { font-size: 0.85rem; }

/* Devam Et disabled state */
.btn-step-next.is-locked {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* === Disclaimer modal === */
.disclaimer-modal {
    position: fixed; inset: 0; z-index: 100;
    display: grid; place-items: center;
    padding: 20px;
}
.dm-dialog {
    position: relative;
    z-index: 1;
    width: 100%; max-width: 560px;
    max-height: 85vh;
    overflow: hidden;
    background: var(--bg-paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: dialogPop .3s var(--ease);
    display: flex;
    flex-direction: column;
}
.dm-head {
    display: flex;
    gap: 14px;
    padding: 22px 28px 16px;
    border-bottom: 1px solid var(--line);
    padding-right: 60px;
}
.dm-head-icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--accent-grad);
    color: #fff;
    display: grid; place-items: center;
    font-size: 1.2rem;
    box-shadow: 0 8px 18px -8px rgba(239, 35, 60, 0.5);
}
.dm-head h3 {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.dm-head p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
}
.dm-body {
    padding: 18px 28px;
    overflow-y: auto;
    flex: 1;
}
.dm-list {
    margin: 0; padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dm-list li {
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--ink-soft);
}
.dm-list li::marker { color: var(--accent); font-weight: 700; }
.dm-list strong { color: var(--ink); font-weight: 700; }

.dm-actions {
    padding: 14px 28px 22px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 560px) {
    .dm-head { padding: 18px 18px 14px; padding-right: 50px; }
    .dm-head-icon { width: 38px; height: 38px; font-size: 1.05rem; }
    .dm-head h3 { font-size: 1.02rem; }
    .dm-head p { font-size: 0.78rem; }
    .dm-body { padding: 14px 18px; }
    .dm-list li { font-size: 0.8rem; }
    .dm-actions { padding: 12px 18px 18px; }
    .oc-confirm { padding: 12px 16px 10px; }
    .oc-confirm-text { font-size: 0.78rem; }
    .oc-confirm-link { font-size: 0.72rem; margin-left: 32px; }
    .oc-disclaimer { padding: 10px 14px; font-size: 0.7rem; }
    .oc-color-pill { font-size: 0.68rem; padding: 5px 3px; }
    .oc-color-dot { width: 12px; height: 12px; }
    .oc-color-feedback { padding: 10px 12px; }
}

/* Confirm shake hatırlatma */
@keyframes ocShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.oc-confirm.shake { animation: ocShake .55s var(--ease); }

/* =====================================================================
   STEP 3 — İletişim & Fatura
   ===================================================================== */

.step3-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: 36px;
    align-items: start;
}
@media (max-width: 880px) {
    .step3-grid { grid-template-columns: 1fr; gap: 20px; }
}

.step3-preview { position: sticky; top: 88px; }
@media (max-width: 880px) {
    .step3-preview { position: static; max-width: 420px; margin: 0 auto; width: 100%; }
}

/* ---------- Üyelik modları ---------- */
.auth-modes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
@media (max-width: 560px) {
    .auth-modes { grid-template-columns: 1fr; }
}

.auth-mode {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-paper);
    border: 2px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all .2s var(--ease);
    text-align: left;
    min-width: 0;
}
.auth-mode:hover {
    border-color: var(--muted-2);
    transform: translateY(-2px);
}
.auth-mode.is-active {
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-paper) 100%);
    box-shadow: 0 10px 22px -10px rgba(239, 35, 60, 0.35);
}
.am-icon {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--accent-grad);
    color: #fff;
    display: grid; place-items: center;
    font-size: 1.05rem;
    box-shadow: 0 6px 14px -4px rgba(239, 35, 60, 0.4);
}
.auth-mode:not(.is-active) .am-icon {
    background: var(--bg-soft);
    color: var(--muted);
    box-shadow: none;
}
.am-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.am-text strong {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    font-size: 0.92rem;
    margin-bottom: 1px;
}
.am-text small {
    font-size: 0.72rem;
    color: var(--muted);
}
.am-pop {
    background: var(--accent-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

/* ---------- Giriş yapmış banner ---------- */
.auth-loggedin {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(0, 200, 83, 0.10), rgba(0, 200, 83, 0.04));
    border: 1px solid rgba(0, 200, 83, 0.3);
    border-radius: var(--radius);
}
.al-icon {
    width: 36px; height: 36px;
    background: #00C853;
    color: #fff;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 1rem;
}
.al-text { flex: 1; min-width: 0; line-height: 1.3; }
.al-text strong {
    display: block;
    font-family: var(--font-display); font-weight: 700;
    color: var(--ink); font-size: 0.95rem;
}
.al-text small { font-size: 0.78rem; color: var(--muted); }
.al-logout {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bg-paper);
    border: 1px solid var(--line);
    color: var(--muted);
    display: grid; place-items: center;
    font-size: 1rem;
    transition: all .15s var(--ease);
    text-decoration: none;
}
.al-logout:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- OTP info satırı ---------- */
.otp-info {
    margin: 12px 0 0;
    padding: 10px 14px;
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--ink-soft);
    line-height: 1.4;
}
.otp-info i { color: var(--accent); margin-right: 4px; }
.otp-info strong { color: var(--ink); }

/* ---------- Fatura tip toggle ---------- */
.ftype-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
    padding: 6px;
    background: var(--bg-soft);
    border-radius: var(--radius);
}
.ftype-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--muted);
    transition: all .2s var(--ease);
}
.ftype-btn:hover { color: var(--ink-soft); }
.ftype-btn.is-active {
    background: var(--bg-paper);
    color: var(--ink);
    box-shadow: 0 2px 8px -2px rgba(0,0,0,0.08), inset 0 0 0 1px var(--line);
}

/* ---------- Opsiyonel etiketi (TC kimlik) ---------- */
.opt-tag {
    font-size: 0.7rem;
    color: var(--muted-2);
    font-weight: 500;
    text-transform: lowercase;
    margin-left: 4px;
}

/* ---------- Üyelik bonusu kutusu ---------- */
.member-bonus {
    margin-top: 18px;
    display: flex;
    gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(251, 133, 0, 0.10), rgba(239, 35, 60, 0.06));
    border: 1px solid rgba(251, 133, 0, 0.28);
    border-radius: var(--radius);
}
.mb-icon {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    background: var(--accent-grad);
    color: #fff;
    border-radius: 12px;
    display: grid; place-items: center;
    font-size: 1.2rem;
    box-shadow: 0 8px 18px -6px rgba(239, 35, 60, 0.5);
}
.mb-text strong {
    display: block;
    font-family: var(--font-display); font-weight: 700;
    color: var(--ink); font-size: 0.95rem; margin-bottom: 4px;
}
.mb-text p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--ink-soft);
    line-height: 1.5;
}
.mb-text strong em, .mb-text p strong { font-weight: 700; }

/* ---------- Sipariş Özeti Mini Kart ---------- */
.order-card-mini {
    background: var(--bg-paper);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    box-shadow: 0 22px 56px -22px rgba(0,0,0,0.2), 0 4px 12px -4px rgba(0,0,0,0.05);
    overflow: hidden;
}
.ocm-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg-paper) 100%);
    border-bottom: 1px solid var(--line);
}
.ocm-head .oc-head-icon { width: 38px; height: 38px; font-size: 1.05rem; }
.ocm-head .oc-head-text h2 { font-size: 0.98rem; }
.ocm-head .oc-head-text p { font-size: 0.74rem; }

/* Key-value list (özet bilgi) */
.oc-kv {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.oc-kv li {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: 0.82rem;
    line-height: 1.4;
}
.oc-kv li.oc-kv-row-full {
    flex-direction: column;
    gap: 2px;
}
.oc-k { color: var(--muted); font-weight: 500; flex-shrink: 0; }
.oc-v {
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}
.oc-kv-row-full .oc-v { text-align: left; }
.oc-v.is-empty { color: var(--muted-2); font-weight: 500; font-style: italic; }

/* Ödeme özeti */
.oc-pricing {
    background: linear-gradient(180deg, var(--bg-paper) 0%, var(--bg-soft) 100%);
}
.oc-price-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.oc-price-list li {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 0.88rem;
    color: var(--ink-soft);
}
.oc-price-discount {
    color: #00A847 !important;
    font-weight: 600;
}
.oc-price-discount i { font-size: 0.82rem; margin-right: 4px; }
.oc-price-total {
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px dashed var(--line-strong);
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--ink);
    font-size: 1.1rem;
}
.oc-price-total span:last-child {
    background: var(--accent-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.25rem;
}

/* ---------- OTP modal ---------- */
.otp-modal {
    position: fixed; inset: 0; z-index: 110;
    display: grid; place-items: center;
    padding: 20px;
}
.otp-dialog {
    position: relative; z-index: 1;
    width: 100%; max-width: 420px;
    background: var(--bg-paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 28px 28px 22px;
    animation: dialogPop .3s var(--ease);
    text-align: center;
}
.otp-head { margin-bottom: 22px; }
.otp-head-icon {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    border-radius: 16px;
    background: var(--accent-grad);
    color: #fff;
    display: grid; place-items: center;
    font-size: 1.6rem;
    box-shadow: 0 14px 32px -10px rgba(239, 35, 60, 0.5);
}
.otp-head h3 {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--ink); font-size: 1.2rem;
}
.otp-head p {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}
.otp-head p strong { color: var(--ink); font-weight: 700; }

.otp-inputs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.otp-digit {
    width: 100%;
    aspect-ratio: 1 / 1.2;
    padding: 0;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--ink);
    background: var(--bg-soft);
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    transition: all .15s var(--ease);
    caret-color: var(--accent);
}
.otp-digit:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-paper);
    box-shadow: 0 0 0 4px rgba(239, 35, 60, 0.10);
}
.otp-digit.has-value {
    border-color: var(--accent);
    background: var(--bg-paper);
}
.otp-modal.is-error .otp-digit {
    border-color: var(--accent);
    animation: ocShake .55s var(--ease);
}

.otp-error {
    margin: 0 0 12px;
    color: var(--accent-deep);
    font-size: 0.82rem;
    font-weight: 600;
}

.otp-foot {
    display: flex;
    justify-content: center;
}
.otp-resend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.82rem;
    transition: all .2s var(--ease);
}
.otp-resend:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.otp-resend:not(:disabled):hover {
    border-color: var(--accent);
    color: var(--accent);
}

.otp-dev {
    margin-top: 14px;
    padding: 10px 14px;
    background: rgba(251, 133, 0, 0.10);
    border: 1px dashed rgba(251, 133, 0, 0.4);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--ink-soft);
}
.otp-dev i { color: var(--accent-2); margin-right: 5px; }
.otp-dev strong {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--ink);
    letter-spacing: 0.15em;
}

/* Mobile compact */
@media (max-width: 560px) {
    .auth-mode { padding: 10px 12px; }
    .am-icon { width: 32px; height: 32px; }
    .am-text strong { font-size: 0.86rem; }
    .am-text small { font-size: 0.7rem; }
    .ftype-btn { padding: 9px 10px; font-size: 0.86rem; }
    .member-bonus { padding: 12px 14px; gap: 10px; }
    .mb-icon { width: 36px; height: 36px; font-size: 1rem; }
    .mb-text strong { font-size: 0.88rem; }
    .mb-text p { font-size: 0.78rem; }
    .otp-dialog { padding: 22px 18px 18px; }
    .otp-head-icon { width: 46px; height: 46px; font-size: 1.3rem; }
    .otp-head h3 { font-size: 1.05rem; }
    .otp-digit { font-size: 1.2rem; }
    .otp-inputs { gap: 6px; }
}

/* =====================================================================
   STEP 4 — Ödeme ve Sipariş Onayı
   ===================================================================== */
.step4-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: 36px;
    align-items: start;
}
@media (max-width: 880px) {
    .step4-grid { grid-template-columns: 1fr; gap: 20px; }
}
.step4-preview { position: sticky; top: 88px; }
@media (max-width: 880px) {
    .step4-preview { position: static; max-width: 440px; margin: 0 auto; width: 100%; }
}

/* ---------- Ödeme yöntemleri ---------- */
.pay-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}
@media (max-width: 560px) {
    .pay-methods { grid-template-columns: 1fr; }
}

.pay-method {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-paper);
    border: 2px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all .2s var(--ease);
    text-align: left;
}
.pay-method:hover { border-color: var(--muted-2); transform: translateY(-2px); }
.pay-method.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 10px 22px -10px rgba(239, 35, 60, 0.35);
}
.pm-icon {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--accent-grad);
    color: #fff;
    display: grid; place-items: center;
    font-size: 1.15rem;
    box-shadow: 0 6px 14px -4px rgba(239, 35, 60, 0.4);
}
.pay-method:not(.is-active) .pm-icon { background: var(--bg-soft); color: var(--muted); box-shadow: none; }
.pm-text { flex: 1; min-width: 0; line-height: 1.25; }
.pm-text strong {
    display: block;
    font-family: var(--font-display); font-weight: 700;
    color: var(--ink); font-size: 0.94rem; margin-bottom: 2px;
}
.pm-text small { font-size: 0.74rem; color: var(--muted); }
.pm-badge {
    position: absolute;
    top: -8px; right: 10px;
    padding: 3px 9px;
    background: var(--accent-grad);
    color: #fff;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---------- Kart formu ---------- */
.pay-panel { margin-bottom: 8px; }
.pay-secure {
    margin: 12px 0 0;
    padding: 8px 12px;
    background: rgba(0, 200, 83, 0.08);
    border: 1px solid rgba(0, 200, 83, 0.25);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    color: var(--ink-soft);
    line-height: 1.4;
}
.pay-secure i { color: #00A847; margin-right: 4px; }

/* ---------- Banka bilgileri ---------- */
.bank-info {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 10px;
}
.bank-row { display: flex; align-items: baseline; gap: 12px; }
.bank-k {
    flex: 0 0 100px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}
.bank-v {
    flex: 1;
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
    display: inline-flex; align-items: center; gap: 8px;
}
.bank-iban {
    font-family: 'Menlo', 'Monaco', monospace;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}
.bank-copy {
    width: 28px; height: 28px; border-radius: 6px;
    background: var(--bg-paper); border: 1px solid var(--line);
    color: var(--muted); cursor: pointer;
    display: grid; place-items: center;
    font-size: 0.85rem;
    transition: all .15s var(--ease);
}
.bank-copy:hover { color: var(--accent); border-color: var(--accent); }
.bank-copy.copied { color: #00A847; border-color: #00A847; }
.bank-warning {
    margin-top: 12px;
    display: flex; gap: 8px;
    padding: 10px 12px;
    background: rgba(251, 133, 0, 0.08);
    border: 1px solid rgba(251, 133, 0, 0.22);
    border-radius: var(--radius-sm);
}
.bank-warning i { color: var(--accent-2); margin-top: 2px; flex-shrink: 0; }
.bank-warning p { margin: 0; font-size: 0.78rem; line-height: 1.45; color: var(--ink-soft); }

/* ---------- Kupon ---------- */
.coupon-row { display: flex; gap: 8px; }
.coupon-row input { flex: 1; min-width: 0; }
.coupon-apply {
    flex: 0 0 auto;
    padding: 0 18px;
    background: var(--ink);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all .15s var(--ease);
}
.coupon-apply:hover { background: var(--accent-deep); }
.coupon-msg {
    margin: 8px 0 0;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
}
.coupon-msg.is-success { color: #00754F; background: rgba(0, 200, 83, 0.1); }
.coupon-msg.is-error   { color: var(--accent-deep); background: var(--accent-soft); }

/* ---------- Sözleşmeler ---------- */
.agreements {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.agr-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all .15s var(--ease);
}
.agr-row:hover { border-color: var(--muted-2); }
.agr-row input[type="checkbox"] {
    position: absolute;
    opacity: 0; width: 0; height: 0;
    pointer-events: none;
}
.agr-box {
    flex: 0 0 20px;
    width: 20px; height: 20px;
    border-radius: 5px;
    border: 2px solid var(--line-strong);
    background: var(--bg-paper);
    display: grid; place-items: center;
    color: transparent;
    font-size: 0.8rem;
    transition: all .15s var(--ease);
    margin-top: 1px;
}
.agr-row input:checked ~ .agr-box {
    background: var(--accent-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 8px -3px rgba(239, 35, 60, 0.4);
}
.agr-row input:focus-visible ~ .agr-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.agr-row.is-checked { border-color: var(--accent); background: var(--accent-soft); }
.agr-text {
    font-size: 0.84rem;
    line-height: 1.4;
    color: var(--ink-soft);
}
.agr-text a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- Recap (sağ kart) ---------- */
.order-recap {
    background: var(--bg-paper);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    box-shadow: 0 22px 56px -22px rgba(0,0,0,0.2), 0 4px 12px -4px rgba(0,0,0,0.05);
    overflow: hidden;
}
.order-recap .oc-section { padding: 14px 18px; }
.oc-edit {
    margin-left: auto;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    color: var(--muted);
    cursor: pointer;
    display: grid; place-items: center;
    font-size: 0.74rem;
    transition: all .15s var(--ease);
}
.oc-edit:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.order-recap .oc-footer {
    background: linear-gradient(135deg, var(--bg-soft), var(--bg-paper));
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.82rem;
    font-weight: 600;
}
.order-recap .oc-footer i { color: #00A847; font-size: 0.95rem; }

/* ---------- Submit button ---------- */
.btn-step-submit {
    background: linear-gradient(135deg, #00C853 0%, #00A847 100%);
    box-shadow: 0 10px 24px -6px rgba(0, 200, 83, 0.45);
    padding: 14px 28px;
    font-size: 1rem;
}
.btn-step-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -8px rgba(0, 200, 83, 0.55);
}
.btn-step-submit.is-loading {
    opacity: 0.85;
    cursor: wait;
    pointer-events: none;
}
.btn-step-submit i { font-size: 1.1rem; margin-right: 4px; }
.btn-amount {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    margin-left: 6px;
    padding-left: 10px;
    border-left: 1px solid rgba(255,255,255,0.3);
}

/* ---------- Success modal ---------- */
.success-modal {
    position: fixed; inset: 0; z-index: 120;
    display: grid; place-items: center;
    padding: 20px;
}
.success-dialog {
    position: relative; z-index: 1;
    width: 100%; max-width: 440px;
    background: var(--bg-paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 36px 28px 28px;
    animation: dialogPop .35s var(--ease);
    text-align: center;
}
.success-icon {
    width: 80px; height: 80px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00C853 0%, #00A847 100%);
    color: #fff;
    display: grid; place-items: center;
    font-size: 2.4rem;
    box-shadow: 0 16px 36px -10px rgba(0, 200, 83, 0.55);
    animation: successPulse 1.2s ease-in-out infinite;
}
@keyframes successPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.success-dialog h3 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--ink);
}
.success-dialog p { margin: 0 0 4px; font-size: 0.96rem; color: var(--ink-soft); }
.success-sub { color: var(--muted) !important; font-size: 0.86rem !important; margin: 10px 0 22px !important; line-height: 1.5; }
.success-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* ---------- Mobile compact ---------- */
@media (max-width: 560px) {
    .pay-method { padding: 12px 14px; }
    .pm-icon { width: 36px; height: 36px; font-size: 1.05rem; }
    .pm-text strong { font-size: 0.88rem; }
    .pm-text small { font-size: 0.72rem; }
    .bank-info { padding: 12px 14px; }
    .bank-k { flex-basis: 85px; font-size: 0.78rem; }
    .bank-v { font-size: 0.84rem; }
    .agr-row { padding: 10px; }
    .agr-text { font-size: 0.8rem; }
    .order-recap .oc-section { padding: 12px 14px; }
    .btn-step-submit { padding: 12px 20px; font-size: 0.92rem; flex-wrap: wrap; justify-content: center; }
    .btn-amount { font-size: 0.96rem; padding-left: 8px; margin-left: 4px; }
    .success-dialog { padding: 28px 22px 22px; }
    .success-icon { width: 64px; height: 64px; font-size: 2rem; }
    .success-dialog h3 { font-size: 1.2rem; }
}

/* =====================================================================
   KDV breakdown + Kupon kazandın + Kupon applied
   ===================================================================== */

.oc-price-tax-tag {
    display: block;
    font-size: 0.66rem;
    color: var(--muted-2);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 1px;
}
.oc-price-vat {
    color: var(--muted) !important;
    font-size: 0.84rem !important;
}
.oc-price-vat span:first-child { font-style: italic; }
.oc-price-total small {
    display: block;
    font-size: 0.62rem;
    color: var(--muted-2);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 1px;
}

/* === Kupon kazandın (OTP success ardından açılır) === */
.coupon-won {
    margin-top: 18px;
    position: relative;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(0, 200, 83, 0.10) 0%, rgba(251, 133, 0, 0.08) 100%);
    border: 1.5px solid rgba(0, 200, 83, 0.4);
    border-radius: var(--radius);
    overflow: hidden;
    animation: couponPop .5s var(--ease);
}
@keyframes couponPop {
    0%   { opacity: 0; transform: scale(0.92); }
    50%  { transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1); }
}
.cw-confetti {
    position: absolute;
    top: -10px; right: 12px;
    font-size: 2rem;
    pointer-events: none;
    animation: confettiTilt 2s ease-in-out infinite;
}
@keyframes confettiTilt {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
}
.cw-icon {
    width: 42px; height: 42px;
    background: linear-gradient(135deg, #00C853 0%, #00A847 100%);
    color: #fff;
    border-radius: 12px;
    display: grid; place-items: center;
    font-size: 1.2rem;
    box-shadow: 0 8px 18px -6px rgba(0, 200, 83, 0.5);
    margin-bottom: 10px;
}
.cw-text strong {
    display: block;
    font-family: var(--font-display); font-weight: 800;
    color: var(--ink); font-size: 1rem; margin-bottom: 4px;
}
.cw-text p {
    margin: 0 0 12px;
    font-size: 0.84rem; color: var(--ink-soft); line-height: 1.45;
}
.cw-code-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-paper);
    border: 1.5px dashed rgba(0, 200, 83, 0.5);
    border-radius: var(--radius-sm);
}
.cw-code {
    flex: 1;
    font-family: 'Menlo', 'Monaco', monospace;
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.06em;
}
.cw-copy {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    color: var(--muted);
    cursor: pointer;
    display: grid; place-items: center;
    font-size: 0.82rem;
    transition: all .15s var(--ease);
}
.cw-copy:hover { color: var(--accent); border-color: var(--accent); }
.cw-copy.copied { color: #00A847; border-color: #00A847; }
.cw-amount {
    background: var(--accent-grad);
    color: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.86rem;
    box-shadow: 0 4px 10px -3px rgba(239, 35, 60, 0.4);
}

/* === Step 4: Kupon uygulandı === */
.coupon-applied {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(0, 200, 83, 0.08) 0%, rgba(0, 200, 83, 0.03) 100%);
    border: 1.5px solid rgba(0, 200, 83, 0.4);
    border-radius: var(--radius);
    animation: couponPop .35s var(--ease);
}
.ca-icon {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    background: linear-gradient(135deg, #00C853 0%, #00A847 100%);
    color: #fff;
    border-radius: 10px;
    display: grid; place-items: center;
    font-size: 1rem;
    box-shadow: 0 6px 14px -4px rgba(0, 200, 83, 0.4);
}
.ca-text { flex: 1; min-width: 0; line-height: 1.3; }
.ca-text strong {
    display: block;
    font-family: var(--font-display); font-weight: 700;
    color: var(--ink); font-size: 0.92rem; margin-bottom: 2px;
}
.ca-text code {
    font-family: 'Menlo', 'Monaco', monospace;
    font-size: 0.78rem;
    color: var(--muted);
    letter-spacing: 0.05em;
}
.ca-remove {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--bg-paper);
    border: 1px solid var(--line);
    color: var(--muted);
    cursor: pointer;
    display: grid; place-items: center;
    font-size: 0.85rem;
    transition: all .15s var(--ease);
}
.ca-remove:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 560px) {
    .coupon-won { padding: 14px 16px; }
    .cw-confetti { font-size: 1.5rem; }
    .cw-code { font-size: 0.88rem; }
    .cw-amount { font-size: 0.78rem; padding: 5px 10px; }
}

/* =====================================================================
   Welcome popup + PayTR
   ===================================================================== */

/* ---------- Welcome modal ---------- */
.welcome-modal {
    position: fixed; inset: 0; z-index: 130;
    display: grid; place-items: center;
    padding: 20px;
}
.welcome-dialog {
    position: relative; z-index: 1;
    width: 100%; max-width: 440px;
    background: var(--bg-paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 36px 30px 28px;
    animation: dialogPop .35s var(--ease);
    text-align: center;
    overflow: hidden;
}
.welcome-dialog::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: var(--accent-grad);
}
.welcome-confetti {
    position: absolute;
    top: 14px; left: 18px;
    font-size: 1.8rem;
    animation: confettiTilt 2s ease-in-out infinite;
    pointer-events: none;
}
.welcome-icon {
    width: 84px; height: 84px;
    margin: 0 auto 18px;
    border-radius: 22px;
    background: var(--accent-grad);
    color: #fff;
    display: grid; place-items: center;
    font-size: 2.4rem;
    box-shadow: 0 16px 36px -10px rgba(239, 35, 60, 0.5);
    animation: successPulse 2s ease-in-out infinite;
}
.welcome-dialog h3 {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--ink);
    letter-spacing: -0.02em;
}
.welcome-lead {
    margin: 0 0 16px;
    font-size: 0.95rem;
    color: var(--ink-soft);
    line-height: 1.55;
}
.welcome-lead strong { color: var(--ink); font-weight: 700; }
.welcome-perks {
    list-style: none;
    padding: 0; margin: 0 0 16px;
    display: flex; flex-direction: column;
    gap: 6px;
    text-align: left;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}
.welcome-perks li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    color: var(--ink-soft);
}
.welcome-perks li i { color: #00A847; font-size: 1rem; flex-shrink: 0; }

.welcome-fineprint {
    margin: 0 0 18px;
    font-size: 0.74rem;
    color: var(--muted-2);
    font-style: italic;
    line-height: 1.5;
}
.welcome-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    background: var(--accent-grad);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 14px 30px -8px rgba(239, 35, 60, 0.5);
    transition: all .2s var(--ease);
}
.welcome-cta:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -8px rgba(239, 35, 60, 0.6); }
.welcome-cta i { font-size: 1.1rem; }

@media (max-width: 560px) {
    .welcome-dialog { padding: 28px 22px 22px; }
    .welcome-icon { width: 70px; height: 70px; font-size: 2rem; }
    .welcome-dialog h3 { font-size: 1.3rem; }
    .welcome-lead { font-size: 0.88rem; }
}

/* ---------- PayTR ---------- */
.paytr-box {
    padding: 20px 22px;
    background: linear-gradient(135deg, #FFFAF3 0%, var(--bg-paper) 100%);
    border: 1.5px solid color-mix(in srgb, #FFB81C 30%, transparent);
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
}
.paytr-box::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 60%; height: 5px;
    background: linear-gradient(90deg, transparent 0%, #FFB81C 100%);
}
.paytr-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid color-mix(in srgb, #FFB81C 20%, transparent);
}
.paytr-logo {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.7rem;
    letter-spacing: -0.04em;
    line-height: 1;
}
.ptr-pay { color: #002B5C; }
.ptr-tr {
    color: #FFB81C;
    margin-left: 1px;
}
.paytr-secure {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: rgba(0, 200, 83, 0.10);
    border: 1px solid rgba(0, 200, 83, 0.3);
    border-radius: 999px;
    color: #00754F;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.74rem;
    width: fit-content;
}
.paytr-secure i { font-size: 0.85rem; }

.paytr-lead {
    margin: 0 0 14px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ink-soft);
}
.paytr-lead strong { color: var(--ink); font-weight: 700; }

.paytr-perks {
    list-style: none;
    padding: 0; margin: 0 0 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
}
@media (max-width: 560px) {
    .paytr-perks { grid-template-columns: 1fr; gap: 6px; }
}
.paytr-perks li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 0.82rem;
    color: var(--ink-soft);
    line-height: 1.4;
}
.paytr-perks li i { color: #00A847; font-size: 0.95rem; margin-top: 1px; flex-shrink: 0; }
.paytr-perks strong { color: var(--ink); font-weight: 700; }

.paytr-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, #FFB81C 18%, transparent);
}
.paytr-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--bg-paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.74rem;
    color: var(--ink-soft);
}
.paytr-trust-item i { color: #002B5C; font-size: 0.85rem; }

/* =====================================================================
   PayTR mini note + Submit button refinement
   ===================================================================== */

/* PayTR küçük not — sözleşmeler altı */
.paytr-note {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #FFFAF3 0%, var(--bg-paper) 100%);
    border: 1px solid color-mix(in srgb, #FFB81C 28%, transparent);
    border-radius: var(--radius);
    font-size: 0.82rem;
    color: var(--ink-soft);
    line-height: 1.45;
}
.paytr-note strong { color: var(--ink); font-weight: 700; }
.paytr-logo-sm {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.03em;
    line-height: 1;
}
.paytr-logo-sm .ptr-pay { color: #002B5C; }
.paytr-logo-sm .ptr-tr  { color: #FFB81C; margin-left: 1px; }

/* Submit butonu KDV dahil etiketi */
.btn-step-submit .btn-amount {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
    gap: 2px;
}
.btn-step-submit .btn-amount small {
    font-size: 0.62rem;
    font-weight: 600;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.85);
}
.btn-submit-label {
    font-family: var(--font-display);
    font-weight: 700;
}

@media (max-width: 560px) {
    .paytr-note { padding: 10px 12px; font-size: 0.76rem; gap: 10px; }
    .paytr-logo-sm { font-size: 1rem; }
    .btn-step-submit .btn-amount small { font-size: 0.55rem; }
}

/* =====================================================================
   PayTR modern logo + Step 4 color row + CTA button fix
   ===================================================================== */

/* PayTR modern logo — "paytr" lowercase blue + sarı nokta */
.paytr-logo-modern {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
}
.paytr-logo-modern .ptr-text {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.4rem;
    color: #001A4D;
    letter-spacing: -0.05em;
}
.paytr-logo-modern .ptr-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #FFC628;
    display: inline-block;
    margin-bottom: 3px;
    box-shadow: 0 1px 3px rgba(255, 198, 40, 0.5);
}

/* Eski paytr-logo-sm artık modern variant'a yönlendiriliyor — fallback */
.paytr-logo-sm { display: inline-flex; }

/* Step 4 recap — Color display row */
.oc-color-display-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.oc-color-name-display {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    font-size: 0.92rem;
}

/* CTA button — TL taşma fix */
.btn-step-submit .btn-amount {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    line-height: 1.1;
    gap: 1px;
    min-width: 0;
}
.btn-amount-main {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}
.btn-step-submit .btn-amount small {
    font-size: 0.6rem;
    font-weight: 600;
    opacity: 0.88;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.92);
    white-space: nowrap;
}

@media (max-width: 560px) {
    .paytr-logo-modern .ptr-text { font-size: 1.15rem; }
    .paytr-logo-modern .ptr-dot { width: 5px; height: 5px; }
    .btn-amount-main { font-size: 0.96rem; }
    .btn-step-submit .btn-amount small { font-size: 0.55rem; }
}

/* =====================================================================
   STEP 4 — Horizontal recap + bottom 2-grid (yeni layout)
   ===================================================================== */

/* Üst: tam genişlik horizontal recap kartı */
.recap-horizontal {
    margin-bottom: 24px;
}

.recap-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 16px 18px 18px;
}
@media (max-width: 880px) {
    .recap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .recap-grid { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
}

.recap-tile {
    padding: 12px 14px 14px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.recap-tile .oc-section-title {
    margin: 0;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--line);
}
.recap-tile-wide {
    grid-column: span 2;
}
.recap-tile-full {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-paper) 100%);
    border: 1.5px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
@media (max-width: 880px) {
    .recap-tile-wide { grid-column: span 2; }
}
@media (max-width: 560px) {
    .recap-tile-wide { grid-column: 1 / -1; }
}

/* Recap içindeki marka logo plate'i biraz küçült (tile içinde) */
.recap-tile .oc-brand-logo-wrap {
    min-height: 50px;
    padding: 8px 12px;
}
.recap-tile .oc-brand-logo-wrap img {
    max-height: 38px; max-width: 130px;
}

/* Recap içinde konsültan kart kompakt */
.recap-tile .oc-consultant { margin-top: 4px; }
.recap-tile .ocm-band { height: 6px; }
.recap-tile .ocm-body { padding: 12px 12px 10px; gap: 10px; }
.recap-tile .ocm-avatar { flex-basis: 52px; width: 52px; height: 52px; }
.recap-tile .ocm-name { font-size: 0.92rem; }
.recap-tile .ocm-title { font-size: 0.74rem; }
.recap-tile .ocm-phone { font-size: 0.78rem; }
.recap-tile .ocm-firm { padding: 8px 12px; }
.recap-tile .ocm-firm img { max-height: 26px; }

/* Recap içinde location chips kompakt */
.recap-tile .oc-locations { gap: 4px; }
.recap-tile .pc-loc-chip {
    padding: 6px 10px;
    font-size: 0.74rem;
}

/* Recap içinde audio kutusu kompakt */
.recap-tile .oc-audio {
    padding: 9px 11px;
    gap: 10px;
}
.recap-tile .oc-audio-icon { width: 30px; height: 30px; font-size: 0.82rem; }
.recap-tile .oc-audio-label { font-size: 0.86rem; }
.recap-tile .oc-audio-sub { font-size: 0.7rem; }
.recap-tile .oc-voice-preview { padding: 8px 12px 8px 30px; margin-top: 8px; }
.recap-tile .oc-voice-preview p { font-size: 0.78rem; }
.recap-tile .oc-voice-quote { top: 8px; left: 10px; font-size: 1rem; }

/* Recap içinde key-value satırları */
.recap-tile .oc-kv li { font-size: 0.8rem; }

/* Ödeme özeti — hero tile, yatay layout */
.oc-price-list--horizontal {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.oc-price-list--horizontal li {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    text-align: left;
    min-width: 0;
}
.oc-price-list--horizontal li > span:first-child {
    font-size: 0.72rem;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.oc-price-list--horizontal li > span:last-child {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--ink);
}
.oc-price-list--horizontal .oc-price-tax-tag {
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    margin-top: 2px;
}
.oc-price-list--horizontal .oc-price-discount {
    background: rgba(0, 200, 83, 0.08);
    border-color: rgba(0, 200, 83, 0.3);
}
.oc-price-list--horizontal .oc-price-discount > span:last-child { color: #00754F; }
.oc-price-list--horizontal .oc-price-vat > span:first-child { font-style: italic; }
.oc-price-list--horizontal .oc-price-vat > span:last-child { color: var(--muted); font-weight: 700; font-size: 1rem; }
.oc-price-list--horizontal .oc-price-total {
    background: var(--accent-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(239, 35, 60, 0.4);
}
.oc-price-list--horizontal .oc-price-total > span:first-child { color: rgba(255,255,255,0.85); }
.oc-price-list--horizontal .oc-price-total > span:last-child {
    color: #fff;
    font-size: 1.3rem;
}
.oc-price-list--horizontal .oc-price-total small {
    display: inline-block;
    color: rgba(255,255,255,0.75);
    font-weight: 500;
    margin-left: 4px;
    font-size: 0.6rem;
}

@media (max-width: 880px) {
    .oc-price-list--horizontal { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .oc-price-list--horizontal { grid-template-columns: 1fr; gap: 8px; }
    .oc-price-list--horizontal li { padding: 9px 12px; }
}

/* ---------- Alt 2-grid (kupon | sözleşmeler+paytr) ---------- */
.step4-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
@media (max-width: 880px) {
    .step4-bottom-grid { grid-template-columns: 1fr; }
}

.form-card--pay {
    display: flex;
    flex-direction: column;
}

/* Kupon hint (kart altında küçük not) */
.coupon-hint {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.45;
}
.coupon-hint i { color: var(--accent-2); flex-shrink: 0; margin-top: 1px; }
.coupon-hint p { margin: 0; }

/* PayTR CTA — sözleşmelerin altında */
.paytr-cta {
    margin-top: 18px;
    padding: 18px;
    background: linear-gradient(135deg, #F8FAFD 0%, var(--bg-paper) 100%);
    border: 1.5px solid color-mix(in srgb, #1A3C7A 18%, transparent);
    border-radius: var(--radius);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.paytr-cta-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.paytr-logo-img {
    height: 32px;
    width: auto;
    object-fit: contain;
}
.paytr-cta-brand small {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.btn-step-paytr {
    width: 100%;
    max-width: 360px;
    justify-content: center;
    background: linear-gradient(135deg, #002B5C 0%, #1A3C7A 100%);
    box-shadow: 0 10px 26px -8px rgba(0, 43, 92, 0.5);
}
.btn-step-paytr:hover {
    box-shadow: 0 16px 32px -8px rgba(0, 43, 92, 0.6);
    transform: translateY(-2px);
}
.paytr-cta-note {
    margin: 0;
    font-size: 0.74rem;
    color: var(--muted);
    line-height: 1.5;
    max-width: 380px;
}

/* Geri butonu sola yaslı */
.step-actions--left {
    justify-content: flex-start;
}
.step-actions--left .btn-step-back {
    margin-right: auto;
}

/* =====================================================================
   STEP 4 — Kompakt mini recap + odaklı action grid
   ===================================================================== */

/* ---------- Mini Sipariş Özeti ---------- */
.recap-mini {
    --brand-primary: #5E5C58;
    --brand-secondary: #0B0B0F;
    background: var(--bg-paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 14px 18px 16px;
    margin-bottom: 18px;
}

.rm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--line);
}
.rm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.rm-badge i { color: var(--accent); font-size: 0.95rem; }

.rm-edit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.74rem;
    cursor: pointer;
    transition: all .15s var(--ease);
}
.rm-edit:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.rm-edit i { font-size: 0.78rem; }

/* Info pills row */
.rm-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.rm-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--ink-soft);
    line-height: 1.2;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rm-pill > span { overflow: hidden; text-overflow: ellipsis; }
.rm-pill > i { color: var(--muted); font-size: 0.82rem; flex-shrink: 0; }
.rm-pill-brand {
    background: var(--bg-paper);
    border-color: var(--brand-primary);
    color: var(--brand-secondary);
    font-weight: 700;
    padding: 5px 12px 5px 9px;
}
.rm-pill-brand img {
    height: 18px;
    width: auto;
    max-width: 60px;
    object-fit: contain;
}
.rm-color-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--c);
    border: 2px solid var(--c);
    box-shadow: inset 0 0 0 2px var(--bg-paper);
    flex-shrink: 0;
}

/* Price row — yatay tek satır */
.rm-price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--bg-soft), var(--bg-paper));
    border-radius: var(--radius-sm);
}
.rm-price-item {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    font-family: var(--font-display);
}
.rm-price-item small {
    font-size: 0.62rem;
    color: var(--muted-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.rm-price-item > span:not(small) {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--ink-soft);
}
.rm-price-discount span:not(small) { color: #00754F; }
.rm-price-vat span:not(small) { color: var(--muted); font-style: italic; }

.rm-price-total {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
    padding: 6px 14px;
    background: var(--accent-grad);
    color: #fff;
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 14px -4px rgba(239, 35, 60, 0.35);
}
.rm-price-total small {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.85);
    margin-bottom: 2px;
}
.rm-price-total strong {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

@media (max-width: 560px) {
    .recap-mini { padding: 12px 14px; }
    .rm-badge { font-size: 0.7rem; }
    .rm-pill { font-size: 0.72rem; padding: 5px 10px; }
    .rm-price-row { padding: 8px 10px; gap: 8px; }
    .rm-price-item small { font-size: 0.58rem; }
    .rm-price-item > span:not(small) { font-size: 0.86rem; }
    .rm-price-total { padding: 5px 12px; }
    .rm-price-total strong { font-size: 1.1rem; }
}

/* ---------- PayTR butonu (yeni: logo içinde, navy gradient) ---------- */
.btn-step-paytr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 22px;
    background: linear-gradient(135deg, #001A4D 0%, #002B5C 50%, #003D7A 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    box-shadow: 0 10px 26px -8px rgba(0, 26, 77, 0.5);
    transition: all .2s var(--ease);
}
.btn-step-paytr:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -8px rgba(0, 26, 77, 0.65);
}
.btn-step-paytr.is-loading {
    opacity: 0.85; cursor: wait; pointer-events: none;
}
.paytr-logo-btn {
    height: 22px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);  /* logo beyaz */
    margin-right: 2px;
}
.btn-paytr-label {
    font-weight: 700;
    color: #fff;
}
.btn-step-paytr .btn-amount {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: auto;
    padding-left: 14px;
    border-left: 1px solid rgba(255,255,255,0.25);
    line-height: 1.1;
}
.btn-step-paytr .btn-amount-main {
    font-size: 1.1rem;
    font-weight: 800;
    white-space: nowrap;
}
.btn-step-paytr .btn-amount small {
    font-size: 0.58rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* PayTR cta wrapper */
.paytr-cta {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.paytr-cta-note {
    margin: 0;
    padding: 8px 12px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    font-size: 0.76rem;
    color: var(--muted);
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.paytr-cta-note i {
    color: #00754F;
    font-size: 0.88rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ---------- Kupon hint küçültme ---------- */
.coupon-hint {
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    font-size: 0.76rem;
    color: var(--muted);
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.coupon-hint i { color: var(--accent-2); font-size: 0.86rem; margin-top: 1px; flex-shrink: 0; }

/* Mobile spacing */
@media (max-width: 880px) {
    .btn-step-paytr { padding: 12px 18px; font-size: 0.9rem; flex-wrap: wrap; }
    .btn-step-paytr .btn-amount-main { font-size: 1rem; }
}


/* =====================================================================
   STEP 4 v38 — Yatay full-content recap grid + tek checkbox + trust
   ===================================================================== */

/* ---------- Recap horizontal (üst tam genişlik) ---------- */
.recap-horizontal {
    --brand-primary: #5E5C58;
    --brand-secondary: #0B0B0F;
    background: var(--bg-paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 18px;
    overflow: hidden;
}

.rh-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg-paper) 100%);
    border-bottom: 1px solid var(--line);
}
.rh-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--ink);
    letter-spacing: 0.03em;
}
.rh-title i { color: var(--accent); font-size: 1rem; }
.rh-edit-all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    background: var(--bg-paper);
    border: 1px solid var(--line);
    color: var(--muted);
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all .15s var(--ease);
}
.rh-edit-all:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.rh-edit-all i { font-size: 0.78rem; }

/* Tile grid — 4 sütun, mobilde küçülür */
.rh-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
}
@media (max-width: 1024px) { .rh-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .rh-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 10px; } }
@media (max-width: 480px)  { .rh-grid { grid-template-columns: 1fr; } }

.rh-tile {
    padding: 10px 12px 12px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.rh-tile-wide { grid-column: span 2; }
.rh-tile-full {
    grid-column: 1 / -1;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--bg-paper) 0%, var(--accent-soft) 100%);
    border: 1.5px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.rh-tile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.rh-tile-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.66rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.1;
}
.rh-tile-label i { font-size: 0.82rem; color: var(--accent-2); }
.rh-count {
    margin-left: 4px;
    padding: 1px 6px;
    background: var(--bg-paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.62rem;
    color: var(--ink-soft);
    letter-spacing: 0;
}
.rh-edit {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--bg-paper);
    border: 1px solid var(--line);
    color: var(--muted-2);
    cursor: pointer;
    display: grid; place-items: center;
    font-size: 0.64rem;
    transition: all .15s var(--ease);
}
.rh-edit:hover { color: var(--accent); border-color: var(--accent); }

/* Marka display */
.rh-brand-display {
    background: var(--bg-paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rh-brand-display img { max-height: 32px; max-width: 100%; object-fit: contain; }
.rh-brand-display span {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--ink);
}

/* Renk */
.rh-color-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.rh-color-dot {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--c);
    border: 2px solid var(--c);
    box-shadow: inset 0 0 0 2px var(--bg-paper);
    flex-shrink: 0;
}
.rh-color-name {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    font-size: 0.88rem;
}

/* Stack (Konum + Ada/Parsel) */
.rh-stack {
    display: flex; flex-direction: column; gap: 2px;
    font-family: var(--font-display);
}
.rh-row-label {
    font-size: 0.62rem;
    color: var(--muted-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}
.rh-row-val {
    font-weight: 700;
    color: var(--ink);
    font-size: 0.8rem;
    word-break: break-word;
}

/* Danışman Kartı mini brand-themed */
.rh-consultant {
    background: var(--bg-paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.rh-c-band {
    height: 5px;
    background: var(--brand-primary);
    position: relative;
    transition: background .4s var(--ease);
}
.rh-c-band::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 36%;
    background: var(--brand-secondary);
    transition: background .4s var(--ease);
}
.rh-c-body {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
}
.rh-c-avatar {
    flex: 0 0 38px;
    width: 38px; height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-soft);
    border: 2px solid var(--brand-primary);
    position: relative;
    transition: border-color .4s var(--ease);
}
.rh-c-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rh-c-avatar-placeholder {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    color: var(--muted-2);
    font-size: 1rem;
}
.rh-c-avatar.has-image .rh-c-avatar-placeholder { display: none; }
.rh-c-info { flex: 1; min-width: 0; line-height: 1.2; }
.rh-c-info strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--brand-secondary);
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .4s var(--ease);
}
.rh-c-info small {
    display: block;
    color: var(--muted);
    font-size: 0.66rem;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rh-c-phone {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--brand-secondary);
    font-size: 0.72rem;
    margin-top: 3px;
    transition: color .4s var(--ease);
}
.rh-c-phone i {
    color: var(--brand-primary);
    font-size: 0.66rem;
    transition: color .4s var(--ease);
}
.rh-c-firm {
    padding: 6px 10px;
    border-top: 1px solid var(--line);
    text-align: center;
    background: var(--bg-soft);
}
.rh-c-firm img {
    max-height: 22px;
    max-width: 60%;
    object-fit: contain;
}

/* Lokasyon list */
.rh-locations {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rh-locations li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    background: var(--brand-primary);
    color: #fff;
    border-radius: 6px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.7rem;
    line-height: 1.25;
    transition: background .4s var(--ease);
    box-shadow: 0 1px 4px -1px color-mix(in srgb, var(--brand-primary) 50%, transparent);
}
.rh-locations li i { font-size: 0.66rem; opacity: 0.9; flex-shrink: 0; }
.rh-locations .rh-empty {
    background: transparent;
    color: var(--muted-2);
    box-shadow: none;
    font-style: italic;
    font-weight: 500;
    padding: 4px 2px;
}
.rh-locations .rh-empty i { color: var(--muted-2); }

/* Ses */
.rh-audio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.rh-audio-icon {
    flex: 0 0 26px;
    width: 26px; height: 26px;
    border-radius: 8px;
    background: var(--brand-primary);
    color: #fff;
    display: grid; place-items: center;
    font-size: 0.78rem;
    transition: background .4s var(--ease);
}
.rh-audio-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.rh-audio-info strong {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    font-size: 0.78rem;
}
.rh-audio-info small { font-size: 0.66rem; color: var(--muted); margin-top: 1px; }
.rh-voice {
    margin-top: 6px;
    padding: 6px 10px 6px 26px;
    background: color-mix(in srgb, var(--brand-primary) 6%, var(--bg-paper));
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, transparent);
    position: relative;
    transition: background .4s var(--ease), border-color .4s var(--ease);
}
.rh-voice i {
    position: absolute; top: 6px; left: 8px;
    color: var(--brand-primary);
    font-size: 0.86rem;
    transition: color .4s var(--ease);
}
.rh-voice p {
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.45;
    color: var(--ink-soft);
    font-style: italic;
    word-break: break-word;
    max-height: 4em;
    overflow-y: auto;
}

/* İletişim & Fatura kv */
.rh-kv {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 12px;
}
.rh-kv > div {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.rh-kv > div > span {
    font-size: 0.6rem;
    color: var(--muted-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.rh-kv > div > strong {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    font-size: 0.76rem;
    word-break: break-word;
}
.rh-kv-full { grid-column: 1 / -1; }

@media (max-width: 560px) {
    .rh-kv { grid-template-columns: 1fr; }
}

/* Ödeme özeti — yatay full hero */
.rh-price-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 880px) { .rh-price-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .rh-price-row { grid-template-columns: 1fr; } }

.rh-price-item {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    background: var(--bg-paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    line-height: 1.2;
}
.rh-price-item small {
    font-size: 0.62rem;
    color: var(--muted-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.rh-price-item strong {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    color: var(--ink);
}
.rh-tax-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--bg-soft);
    text-transform: none;
    letter-spacing: 0;
    color: var(--muted);
    font-size: 0.58rem;
    font-weight: 600;
}
.rh-price-discount {
    background: rgba(0, 200, 83, 0.08);
    border-color: rgba(0, 200, 83, 0.3);
}
.rh-price-discount strong { color: #00754F; }
.rh-price-vat strong { color: var(--muted); font-weight: 700; font-style: italic; }
.rh-price-total {
    display: flex;
    flex-direction: column;
    padding: 8px 14px;
    background: var(--accent-grad);
    color: #fff;
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 14px -4px rgba(239, 35, 60, 0.35);
    line-height: 1.15;
}
.rh-price-total small {
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.05em;
    margin-bottom: 3px;
}
.rh-price-total strong {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.2rem;
    color: #fff;
}

/* ---------- Step 4 alt: 2 grid ---------- */
.step4-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
@media (max-width: 880px) {
    .step4-bottom-grid { grid-template-columns: 1fr; }
}

/* Trust badges — checkbox altı */
.paytr-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 14px;
    padding: 10px 12px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.ptb {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    background: var(--bg-paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.7rem;
    color: var(--ink-soft);
}
.ptb i {
    color: #00754F;
    font-size: 0.82rem;
}

/* ---------- PayTR butonu (tek satır + disabled state) ---------- */
.btn-step-paytr {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 22px;
    background: linear-gradient(135deg, #001A4D 0%, #002B5C 50%, #003D7A 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.96rem;
    cursor: pointer;
    box-shadow: 0 10px 26px -8px rgba(0, 26, 77, 0.55);
    transition: all .2s var(--ease);
    white-space: nowrap;
    overflow: hidden;
}
.btn-step-paytr:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -8px rgba(0, 26, 77, 0.7);
}
.btn-step-paytr:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    background: linear-gradient(135deg, #6B7280 0%, #4B5563 100%);
}
.btn-step-paytr.is-loading {
    opacity: 0.85; cursor: wait; pointer-events: none;
}
.paytr-logo-btn {
    height: 22px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
    filter: brightness(0) invert(1);
    margin-right: 2px;
}
.btn-paytr-label {
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-step-paytr .btn-amount {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: auto;
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,0.25);
    line-height: 1.1;
    flex-shrink: 0;
}
.btn-step-paytr .btn-amount-main {
    font-size: 1.1rem;
    font-weight: 800;
    white-space: nowrap;
}
.btn-step-paytr .btn-amount small {
    font-size: 0.58rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* PayTR cta note */
.paytr-cta-note {
    margin: 12px 0 0;
    padding: 8px 12px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    font-size: 0.74rem;
    color: var(--muted);
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.paytr-cta-note i {
    color: var(--accent-2);
    font-size: 0.86rem;
    margin-top: 1px;
    flex-shrink: 0;
}

@media (max-width: 560px) {
    .btn-step-paytr { padding: 12px 16px; font-size: 0.88rem; gap: 8px; }
    .paytr-logo-btn { height: 18px; }
    .btn-step-paytr .btn-amount-main { font-size: 0.98rem; }
    .ptb { font-size: 0.66rem; padding: 3px 8px; }
}

/* =====================================================================
   STEP 4 v39 — Premium checkout redesign
   ===================================================================== */

.s4-shell {
    max-width: 1040px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.step-head--checkout { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }

/* ---------- Generic card ---------- */
.s4-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.08);
    padding: 24px 26px;
}
@media (max-width: 640px) { .s4-card { padding: 18px 16px; border-radius: 16px; } }

.s4-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.s4-card-head--simple { margin-bottom: 14px; }
.s4-card-head-text { min-width: 0; }
.s4-card-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.s4-card-sub {
    margin: 4px 0 0;
    font-size: 0.84rem;
    color: var(--muted);
    line-height: 1.5;
}

.s4-edit-all {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    border-radius: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all .15s var(--ease);
}
.s4-edit-all:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.s4-edit-all i { font-size: 0.78rem; }
@media (max-width: 520px) { .s4-edit-all span { display: none; } .s4-edit-all { padding: 8px 10px; } }

/* ---------- Info grid ---------- */
.s4-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
}
@media (max-width: 880px) { .s4-info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .s4-info-grid { grid-template-columns: 1fr; gap: 14px; } }

.s4-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.s4-field-wide { grid-column: span 2; }
@media (max-width: 880px) { .s4-field-wide { grid-column: 1 / -1; } }

.s4-label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.s4-count {
    font-style: normal;
    padding: 1px 7px;
    background: var(--bg-soft);
    border-radius: 999px;
    font-size: 0.62rem;
    color: var(--ink-soft);
    letter-spacing: 0;
}
.s4-value {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    font-size: 0.95rem;
    line-height: 1.35;
    word-break: break-word;
}

/* brand / color value */
.s4-brand-value {
    display: flex; align-items: center; gap: 10px;
    min-height: 30px;
}
.s4-brand-value img { max-height: 26px; max-width: 100px; object-fit: contain; }
.s4-brand-value strong {
    font-family: var(--font-display);
    font-weight: 700; color: var(--ink); font-size: 0.95rem;
}
.s4-color-value { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.s4-color-dot {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--c);
    border: 2px solid var(--c);
    box-shadow: inset 0 0 0 2px #fff;
    flex-shrink: 0;
}
.s4-color-value strong { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 0.95rem; }

/* audio */
.s4-audio-value {
    display: flex; align-items: center; gap: 10px;
}
.s4-audio-icon {
    width: 32px; height: 32px;
    background: var(--bg-soft);
    border-radius: 10px;
    display: grid; place-items: center;
    color: var(--ink-soft);
    font-size: 0.88rem;
    flex-shrink: 0;
}
.s4-audio-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.s4-audio-text strong { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 0.88rem; }
.s4-audio-text small { color: var(--muted); font-size: 0.72rem; margin-top: 1px; }
.s4-voice {
    margin-top: 8px;
    padding: 8px 12px 8px 30px;
    background: var(--bg-soft);
    border-radius: 10px;
    position: relative;
}
.s4-voice i { position: absolute; top: 8px; left: 10px; color: var(--muted-2); font-size: 0.9rem; }
.s4-voice p { margin: 0; font-size: 0.78rem; color: var(--ink-soft); font-style: italic; line-height: 1.45; }

/* pins — kırmızı haplar, sakin */
.s4-pins {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 6px;
}
.s4-pins .pc-loc-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px;
    background: color-mix(in srgb, var(--accent) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent-deep);
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.74rem;
    line-height: 1.25;
}
.s4-pins .pc-loc-chip i { font-size: 0.7rem; opacity: 0.85; }
.s4-pins .oc-empty {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--muted-2); font-style: italic; font-size: 0.82rem;
}
.s4-pins .oc-empty i { font-size: 0.78rem; }

/* danışman kartı */
/* Danışman satırı: akordiyon zaten bir kart, içine ikinci kart konmaz. */
.s4-consultant { background: none; border: none; border-radius: 0; overflow: visible; }
.s4-c-band { display: none; }
.s4-c-body {
    display: flex; align-items: center; gap: 12px;
    padding: 0;
}
.s4-c-avatar {
    flex: 0 0 40px; width: 40px; height: 40px;
    border-radius: 50%; overflow: hidden;
    background: var(--bg-soft);
    border: 1px solid var(--line-strong, var(--line));
    transition: border-color .4s var(--ease);
}
.s4-c-avatar img { width: 100%; height: 100%; object-fit: cover; }
.s4-c-avatar-placeholder {
    width: 100%; height: 100%; display: grid; place-items: center;
    color: var(--muted-2); font-size: 1.2rem;
}
.s4-c-avatar.has-image .s4-c-avatar-placeholder { display: none; }
.s4-c-info { flex: 1; min-width: 0; line-height: 1.25; }
.s4-c-info strong {
    display: block;
    font-weight: 600;
    color: var(--ink);
    font-size: 0.88rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .4s var(--ease);
}
.s4-c-info small {
    display: block; color: var(--muted);
    font-size: 0.74rem; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s4-c-phone {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600;
    color: var(--ink);
    font-size: 0.78rem;
    margin-top: 4px;
    transition: color .4s var(--ease);
}
.s4-c-phone i { color: var(--brand-primary, var(--muted)); font-size: 0.72rem; transition: color .4s var(--ease); }
.s4-c-firm {
    flex: 0 0 auto;
    padding: 6px 10px;
    background: var(--bg-soft);
    border-radius: 8px;
    max-width: 88px;
}
.s4-c-firm img { max-height: 26px; max-width: 100%; object-fit: contain; display: block; }

/* iletişim & fatura kv */
.s4-kv {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 22px;
}
@media (max-width: 560px) { .s4-kv { grid-template-columns: 1fr; gap: 10px; } }
.s4-kv > div { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.s4-kv > div > span {
    font-family: var(--font-display);
    font-size: 0.62rem;
    color: var(--muted-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
}
.s4-kv > div > strong {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    font-size: 0.88rem;
    word-break: break-word;
}
.s4-kv-full { grid-column: 1 / -1; }

/* ---------- Fiyat Özeti ---------- */
.s4-price { padding-top: 20px; }
.s4-price-title {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.s4-price-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
}
.s4-price-list li {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 10px 0;
    font-family: var(--font-display);
    border-bottom: 1px dashed var(--line);
}
.s4-price-list .s4-price-label {
    color: var(--ink-soft);
    font-weight: 500;
    font-size: 0.92rem;
}
.s4-price-list .s4-price-val {
    color: var(--ink);
    font-weight: 700;
    font-size: 0.98rem;
    font-variant-numeric: tabular-nums;
}
.s4-price-list .s4-price-discount .s4-price-val { color: #00754F; }
.s4-price-total {
    margin-top: 6px;
    padding: 16px 18px !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, #fff) 0%, color-mix(in srgb, var(--accent) 4%, #fff) 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent) !important;
    border-radius: 14px;
}
.s4-price-total .s4-price-label {
    font-weight: 700 !important;
    color: var(--ink) !important;
    font-size: 1rem !important;
    display: flex; flex-direction: column; gap: 2px;
}
.s4-price-total .s4-price-label small {
    font-weight: 500; font-size: 0.7rem; color: var(--muted);
}
.s4-price-total .s4-price-val {
    color: var(--accent-deep) !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
}

/* ---------- Alt grid ---------- */
.s4-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 18px;
    align-items: stretch;
}
@media (max-width: 880px) { .s4-bottom { grid-template-columns: 1fr; } }

.s4-coupon, .s4-pay { display: flex; flex-direction: column; }

/* ---------- Kupon ---------- */
.s4-coupon-row {
    display: flex; gap: 10px;
}
@media (max-width: 480px) { .s4-coupon-row { flex-direction: column; } }

.s4-input {
    flex: 1; min-width: 0;
    height: 50px;
    padding: 0 16px;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ink);
    letter-spacing: 0.04em;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.s4-input::placeholder { color: var(--muted-2); font-weight: 500; letter-spacing: 0.08em; }
.s4-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.s4-coupon-apply {
    height: 50px;
    flex: 0 0 auto;
    padding: 0 24px;
    background: var(--ink);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background .15s var(--ease), transform .15s var(--ease);
}
.s4-coupon-apply:hover { background: #000; transform: translateY(-1px); }
@media (max-width: 480px) { .s4-coupon-apply { width: 100%; } }

/* ---------- Sözleşme onayı ---------- */
.s4-agr {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    background: var(--bg-soft);
    border: 1.5px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    transition: all .15s var(--ease);
    margin-bottom: 14px;
}
.s4-agr:hover { border-color: var(--muted-2); }
.s4-agr input[type="checkbox"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.s4-agr-box {
    flex: 0 0 22px;
    width: 22px; height: 22px;
    border: 2px solid var(--muted-2);
    border-radius: 6px;
    background: #fff;
    display: grid; place-items: center;
    color: transparent;
    transition: all .15s var(--ease);
    margin-top: 1px;
}
.s4-agr-box i { font-size: 0.92rem; line-height: 1; }
.s4-agr input:checked ~ .s4-agr-box {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.s4-agr input:focus-visible ~ .s4-agr-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.s4-agr:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 4%, #fff); }
.s4-agr-text {
    flex: 1;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--ink-soft);
}
.s4-agr-text a {
    color: var(--accent-deep);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    font-weight: 600;
}
.s4-agr-text a:hover { color: var(--accent); }

/* ---------- Trust rozetleri ---------- */
.s4-trust {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 16px;
}
.s4-trust-item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--ink-soft);
    line-height: 1;
}
.s4-trust-item i {
    color: #00754F;
    font-size: 0.84rem;
}

/* ---------- CTA butonu (eski btn-step-paytr CSS'ini override eder) ---------- */
.s4-cta.btn-step-paytr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 60px;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent) 60%, transparent);
    transition: transform .15s var(--ease), box-shadow .15s var(--ease), opacity .15s var(--ease);
    white-space: nowrap;
    overflow: hidden;
}
.s4-cta.btn-step-paytr:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.s4-cta.btn-step-paytr:disabled {
    background: #E5E7EB;
    color: #6B7280;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}
.s4-cta-label {
    font-weight: 700;
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.s4-cta-amount {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.28);
    flex-shrink: 0;
}
.s4-cta.btn-step-paytr:disabled .s4-cta-amount { border-left-color: rgba(0, 0, 0, 0.12); }
@media (max-width: 480px) {
    .s4-cta.btn-step-paytr { font-size: 0.9rem; padding: 12px 18px; min-height: 56px; }
    .s4-cta-amount { font-size: 1.02rem; padding-left: 12px; }
}

.s4-cta-note {
    margin: 12px 0 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-soft);
    border-radius: 10px;
    font-size: 0.76rem;
    color: var(--muted);
    line-height: 1.5;
}
.s4-cta-note i { color: #00754F; font-size: 0.9rem; margin-top: 2px; flex-shrink: 0; }

/* =====================================================================
   STEP 4 v40 — Renk psikolojisi düzeltmesi
   - PayTR alanı (CTA + accent) mavi
   - Fiyatlar siyah/koyu gri
   - İndirim ve kupon başarı durumu yeşil
   ===================================================================== */

:root {
    --s4-blue:        #0B5ED7;
    --s4-blue-deep:   #0A4FB3;
    --s4-blue-darker: #083F8C;
    --s4-blue-soft:   #EAF2FE;
    --s4-green:       #198754;
    --s4-green-deep:  #146C43;
    --s4-green-soft:  #E8F6EE;
    --s4-ink:         #0F172A;
}

/* ---------- Fiyat satırları: siyah/antrasit ---------- */
.s4-price-list .s4-price-label { color: #334155; }
.s4-price-list .s4-price-val   { color: var(--s4-ink); }

/* İndirim — yeşil */
.s4-price-list .s4-price-discount .s4-price-label { color: var(--s4-green-deep); font-weight: 600; }
.s4-price-list .s4-price-discount .s4-price-val   { color: var(--s4-green); }

/* Toplam Ödenecek Tutar — antrasit vurgu (kırmızı değil) */
.s4-price-total {
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%) !important;
    border: 1px solid #E2E8F0 !important;
}
.s4-price-total .s4-price-label { color: var(--s4-ink) !important; }
.s4-price-total .s4-price-label small { color: #64748B; }
.s4-price-total .s4-price-val   { color: var(--s4-ink) !important; }

/* ---------- Kupon: success yeşil state ---------- */
.coupon-applied {
    background: var(--s4-green-soft) !important;
    border: 1px solid color-mix(in srgb, var(--s4-green) 30%, transparent) !important;
    color: var(--s4-green-deep) !important;
}
.coupon-applied .ca-icon { background: var(--s4-green) !important; color: #fff !important; }
.coupon-applied .ca-text strong { color: var(--s4-green-deep) !important; }
.coupon-applied .ca-text code {
    background: #fff !important;
    color: var(--s4-green-deep) !important;
    border: 1px solid color-mix(in srgb, var(--s4-green) 30%, transparent);
}
.coupon-msg.is-success {
    color: var(--s4-green-deep) !important;
    background: var(--s4-green-soft) !important;
}

/* ---------- Sözleşme onaylanmış: yeşil değil mavi (PayTR teması) ---------- */
.s4-agr:has(input:checked) {
    border-color: color-mix(in srgb, var(--s4-blue) 40%, transparent) !important;
    background: var(--s4-blue-soft) !important;
}
.s4-agr input:checked ~ .s4-agr-box {
    background: var(--s4-blue) !important;
    border-color: var(--s4-blue) !important;
}
.s4-agr-text a { color: var(--s4-blue-deep) !important; }
.s4-agr-text a:hover { color: var(--s4-blue) !important; }

/* ---------- CTA: PayTR mavi ---------- */
.s4-cta.btn-step-paytr {
    background: linear-gradient(135deg, var(--s4-blue) 0%, var(--s4-blue-deep) 100%) !important;
    box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--s4-blue) 60%, transparent) !important;
}
.s4-cta.btn-step-paytr:not(:disabled):hover {
    background: linear-gradient(135deg, var(--s4-blue-deep) 0%, var(--s4-blue-darker) 100%) !important;
    box-shadow: 0 16px 32px -10px color-mix(in srgb, var(--s4-blue) 70%, transparent) !important;
}
.s4-cta.btn-step-paytr:disabled {
    background: #E5E7EB !important;
    color: #6B7280 !important;
}
.s4-cta-amount {
    color: #fff;
    background: rgba(255,255,255,0.10);
    padding: 6px 14px 6px 14px;
    border-radius: 10px;
    border-left: none !important;
    margin-left: 4px;
}
.s4-cta.btn-step-paytr:disabled .s4-cta-amount {
    background: rgba(0,0,0,0.05);
    color: #6B7280;
}

/* ---------- Loading spinner gibi nazik state ---------- */
.s4-cta.btn-step-paytr.is-loading {
    opacity: 0.85;
    cursor: wait;
    pointer-events: none;
}

/* ---------- Pinler artık çok kırmızı durmasın — sakin mavi-gri ---------- */
.s4-pins .pc-loc-chip {
    background: #F1F5F9 !important;
    border: 1px solid #E2E8F0 !important;
    color: #334155 !important;
}
.s4-pins .pc-loc-chip i { color: var(--s4-blue) !important; opacity: 1; }

/* ---------- Coupon apply butonu — mavi (sipariş aksiyonlarıyla uyumlu) ---------- */
.s4-coupon-apply {
    background: var(--s4-ink);
}
.s4-coupon-apply:hover { background: #000; }

/* =====================================================================
   STEP 4 v41 — CTA + Güvenli Ödeme hizalama düzeltmesi
   ===================================================================== */

/* Güvenli Ödeme kartı — sözleşme, trust ve CTA aynı genişlikte hizalı */
.s4-pay {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.s4-pay .s4-card-head { margin-bottom: 16px; }
.s4-pay .s4-agr       { margin: 0 0 12px; }
.s4-pay .s4-trust     { margin: 0 0 16px; }

/* Trust badges — tek satır, mobilde küçük yatay kaydırma */
.s4-pay .s4-trust {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 12px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.s4-pay .s4-trust::-webkit-scrollbar { display: none; }
.s4-pay .s4-trust-item {
    flex: 1 1 0;
    justify-content: center;
    white-space: nowrap;
    background: #fff;
    padding: 7px 10px;
    font-size: 0.7rem;
    line-height: 1;
}
.s4-pay .s4-trust-item i { font-size: 0.86rem; color: var(--s4-green); }

/* Dar ekranlarda padding küçült, kaydırılabilir kalsın */
@media (max-width: 720px) {
    .s4-pay .s4-trust-item { flex: 0 0 auto; font-size: 0.66rem; padding: 6px 9px; }
}

/* CTA — kartın tam genişliği, premium ölçü, hizalı içerik */
.s4-pay .s4-cta.btn-step-paytr {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 64px;
    padding: 16px 22px;
    border-radius: 14px;
    font-size: 1.02rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.s4-pay .s4-cta-label {
    flex: 1 1 auto;
    text-align: left;
    font-weight: 700;
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.s4-pay .s4-cta-amount {
    flex: 0 0 auto;
    font-size: 1.18rem;
    font-weight: 800;
    padding: 8px 16px;
    border-radius: 10px;
    background: rgba(255,255,255,0.14);
    color: #fff;
}

.s4-pay .s4-cta-note { margin: 12px 0 0; }

@media (max-width: 480px) {
    .s4-pay .s4-cta.btn-step-paytr {
        min-height: 58px;
        padding: 12px 16px;
        font-size: 0.92rem;
        gap: 10px;
    }
    .s4-pay .s4-cta-amount { font-size: 1.02rem; padding: 6px 12px; }
}

/* =====================================================================
   STEP 4 v42 — Güvenli Ödeme kartı yeniden yapı + PayTR logosu
   ===================================================================== */

/* Kart başlığı: başlık solda, PayTR markası sağda */
.s4-pay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}
.s4-pay-head-text { min-width: 0; flex: 1 1 auto; }
.s4-pay-head-text .s4-card-title { margin: 0; }
.s4-pay-head-text .s4-card-sub { margin: 4px 0 0; }

/* "Altyapı: [PayTR]" — sağ üstte sade marka şeridi */
.s4-pay-brand {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--s4-blue-soft);
    border: 1px solid color-mix(in srgb, var(--s4-blue) 18%, transparent);
    border-radius: 999px;
}
.s4-pay-brand small {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--s4-blue-deep);
}
.s4-pay-brand img {
    height: 18px;
    width: auto;
    object-fit: contain;
    display: block;
}
@media (max-width: 480px) {
    .s4-pay-brand small { display: none; }
    .s4-pay-brand { padding: 5px 9px; }
}

/* Trust badges — net tek satır, eşit bölünür, premium */
.s4-pay .s4-trust {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    overflow: visible !important;
    padding: 12px !important;
}
.s4-pay .s4-trust-item {
    flex: 1 1 0;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--line);
    color: #334155;
    font-weight: 600;
    font-size: 0.74rem;
    padding: 9px 8px !important;
    border-radius: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.s4-pay .s4-trust-item i { color: var(--s4-green) !important; font-size: 0.92rem; flex-shrink: 0; }

@media (max-width: 720px) {
    .s4-pay .s4-trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
    .s4-pay .s4-trust-item { font-size: 0.68rem; padding: 8px 6px !important; }
}

/* CTA: PayTR logosu solda beyaz çip, etiket ortada, fiyat sağda */
.s4-pay .s4-cta.btn-step-paytr {
    padding: 12px 14px 12px 12px;
    min-height: 68px;
    border-radius: 14px;
    gap: 14px;
}

.s4-cta-left {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}
.s4-cta-logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 14px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}
.s4-cta-logo img {
    height: 22px;
    width: auto;
    display: block;
    object-fit: contain;
    /* SVG/WEBP olduğu gibi renkli kalsın */
    filter: none !important;
}
.s4-pay .s4-cta-label {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.s4-pay .s4-cta-amount {
    background: rgba(255,255,255,0.16);
    color: #fff;
    font-size: 1.18rem;
    font-weight: 800;
    padding: 9px 16px;
    border-radius: 10px;
    border-left: none !important;
    margin-left: 0;
    flex-shrink: 0;
    letter-spacing: -0.01em;
}

/* Disabled — logo grayscale, fiyat çipi nötr */
.s4-pay .s4-cta.btn-step-paytr:disabled .s4-cta-logo { box-shadow: none; background: #F1F5F9; }
.s4-pay .s4-cta.btn-step-paytr:disabled .s4-cta-logo img { filter: grayscale(1) opacity(0.5) !important; }
.s4-pay .s4-cta.btn-step-paytr:disabled .s4-cta-amount { background: rgba(0,0,0,0.05); color: #6B7280; }

@media (max-width: 520px) {
    .s4-pay .s4-cta.btn-step-paytr { min-height: 62px; padding: 10px 12px; gap: 10px; }
    .s4-cta-logo { height: 38px; padding: 0 10px; }
    .s4-cta-logo img { height: 18px; }
    .s4-pay .s4-cta-label { font-size: 0.92rem; }
    .s4-pay .s4-cta-amount { font-size: 1rem; padding: 7px 12px; }
}
@media (max-width: 380px) {
    .s4-pay .s4-cta.btn-step-paytr { flex-wrap: wrap; }
    .s4-cta-left { width: 100%; justify-content: center; }
    .s4-pay .s4-cta-amount { width: 100%; text-align: center; }
}

/* =====================================================================
   STEP 4 v43 — Sipariş özeti gruplandırma + PayTR şeffaf logo düzeltmesi
   ===================================================================== */

/* ---------- Gruplandırma ---------- */
.s4-summary .s4-info-grid { padding-bottom: 0; border-bottom: none; }

.s4-group {
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}
.s4-group:first-of-type { padding-top: 4px; }
.s4-group:last-of-type  { padding-bottom: 8px; }

.s4-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.74rem;
    color: var(--s4-ink);
    text-transform: uppercase;
    letter-spacing: 0.09em;
}
.s4-group-head i {
    color: var(--s4-blue);
    font-size: 0.95rem;
    background: var(--s4-blue-soft);
    width: 26px; height: 26px;
    border-radius: 8px;
    display: grid; place-items: center;
}

/* 2-kolonlu mini grid (arsa bilgileri için) */
.s4-info-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 520px) {
    .s4-info-grid--2 { grid-template-columns: 1fr; }
}

/* Tam genişlikli alan (seslendirme metni) */
.s4-field-full { grid-column: 1 / -1; }

/* Seslendirme metnini grup içine ayrı satır olarak yerleştirdik */
.s4-voice-field .s4-voice { margin-top: 4px; }

/* Fiyat özeti grubu artık sade — gruplama border'ı zaten ayırıyor */
.s4-summary .s4-price {
    padding-top: 22px;
    border-top: 1px solid var(--line);
    margin-top: 4px;
}

/* ---------- PayTR markası (header rozeti) — koyu mavi ---------- */
.s4-pay-brand {
    background: var(--s4-blue-deep);
    border-color: var(--s4-blue-deep);
}
.s4-pay-brand small { color: rgba(255,255,255,0.78); }
.s4-pay-brand img {
    height: 16px;
    /* SVG beyaz — koyu zeminde net görünür */
}

/* ---------- CTA: PayTR logosu doğrudan mavi üzerinde (beyaz çip yok) ---------- */
.s4-cta-paytr {
    height: 26px;
    width: auto;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    /* SVG zaten beyaz, mavi gradyan üstünde okunur */
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18));
}

/* eski beyaz çip kuralını iptal et */
.s4-pay .s4-cta-logo { display: none !important; }

.s4-pay .s4-cta.btn-step-paytr {
    padding: 14px 18px;
    gap: 14px;
}
.s4-cta-left {
    gap: 10px;
}

/* Disabled — logo yarı şeffaf */
.s4-pay .s4-cta.btn-step-paytr:disabled .s4-cta-paytr {
    filter: grayscale(1) opacity(0.55);
}

@media (max-width: 520px) {
    .s4-cta-paytr { height: 22px; }
    .s4-pay .s4-cta-label { font-size: 0.92rem; }
}

/* ---------- Sipariş özeti kartı arası boşluk azalt, daha kompakt ---------- */
.s4-summary .s4-info-grid { gap: 16px 22px; }
.s4-summary .s4-card-head { margin-bottom: 6px; }

/* =====================================================================
   STEP 4 v44 — 2 kolonlu yerleşim + adres bölünmesi (scroll azaltma)
   ===================================================================== */

/* Eski tek kolonlu shell yerine 2 kolonlu grid */
.s4-layout {
    max-width: none;
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
    gap: 24px;
    align-items: start;
}
@media (min-width: 1400px) {
    .s4-layout { grid-template-columns: minmax(0, 1fr) 440px; gap: 28px; }
}
@media (max-width: 960px) {
    .s4-layout { grid-template-columns: 1fr; gap: 16px; }
}

.s4-col-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.s4-col-side { min-width: 0; }
.s4-side-sticky {
    display: flex; flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 12px;
}
/* Sağ kolon kartları daha kompakt — CTA ilk ekranda görünsün */
.s4-col-side .s4-card { padding: 16px 18px; }
.s4-col-side .s4-group-head--card { margin-bottom: 10px; padding-bottom: 8px; }
.s4-col-side .s4-price-card .s4-price-list li { padding: 6px 0; font-size: 0.9rem; }
.s4-col-side .s4-price-card .s4-price-list .s4-price-label { font-size: 0.88rem; }
.s4-col-side .s4-price-card .s4-price-list .s4-price-val { font-size: 0.94rem; }
.s4-col-side .s4-price-card .s4-price-total { padding: 12px 14px !important; }
.s4-col-side .s4-price-card .s4-price-total .s4-price-val { font-size: 1.3rem !important; }
.s4-col-side .s4-price-card .s4-price-total .s4-price-label { font-size: 0.92rem !important; }
.s4-col-side .s4-pay-head { margin-bottom: 12px; }
.s4-col-side .s4-pay-head .s4-card-sub { display: none; }

/* =====================================================================
   STEP 4 v45 — Sağ panel sade: Toplam + PayTR (kupon sola taşındı)
   ===================================================================== */

/* Sağ paneldeki tek kart: Toplam + PayTR — fold üstünde net dursun */
.s4-pay--solo { padding: 18px 20px; }
.s4-pay--solo .s4-pay-head { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.s4-pay--solo .s4-pay-head .s4-card-title { font-size: 1.05rem; }

.s4-price-list--solo {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}
.s4-price-list--solo li {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 7px 0;
    font-family: var(--font-display);
    border-bottom: 1px dashed var(--line);
}
.s4-price-list--solo .s4-price-label { color: #334155; font-weight: 500; font-size: 0.88rem; }
.s4-price-list--solo .s4-price-val   { color: var(--s4-ink); font-weight: 700; font-size: 0.94rem; font-variant-numeric: tabular-nums; }
.s4-price-list--solo .s4-price-discount .s4-price-label { color: var(--s4-green-deep); font-weight: 600; }
.s4-price-list--solo .s4-price-discount .s4-price-val   { color: var(--s4-green); }

.s4-price-list--solo .s4-price-total {
    margin-top: 8px;
    padding: 12px 14px !important;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border: 1px solid #E2E8F0;
    border-radius: 12px;
}
.s4-price-list--solo .s4-price-total .s4-price-label {
    display: flex; flex-direction: column; gap: 1px;
    font-weight: 700 !important; color: var(--s4-ink) !important;
    font-size: 0.94rem !important;
}
.s4-price-list--solo .s4-price-total .s4-price-label small {
    font-weight: 500; font-size: 0.68rem; color: #64748B;
}
.s4-price-list--solo .s4-price-total .s4-price-val {
    color: var(--s4-ink) !important; font-size: 1.45rem !important; font-weight: 800 !important;
    letter-spacing: -0.01em;
}

/* Solo kartta trust grid kompakt */
.s4-pay--solo .s4-trust {
    grid-template-columns: repeat(4, 1fr) !important;
    padding: 8px !important;
    margin-bottom: 12px;
    gap: 6px;
}
.s4-pay--solo .s4-trust-item { font-size: 0.66rem !important; padding: 7px 4px !important; }
@media (max-width: 1100px) and (min-width: 961px) {
    .s4-pay--solo .s4-trust { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 380px) {
    .s4-pay--solo .s4-trust { grid-template-columns: repeat(2, 1fr) !important; }
}

.s4-pay--solo .s4-agr { padding: 10px 12px; margin-bottom: 10px; }
.s4-pay--solo .s4-agr-text { font-size: 0.76rem; line-height: 1.45; }

.s4-pay--solo .s4-cta.btn-step-paytr {
    min-height: 60px;
    padding: 12px 16px;
    font-size: 1rem;
}
.s4-pay--solo .s4-cta-amount { font-size: 1.1rem; padding: 7px 13px; }
.s4-pay--solo .s4-cta-note { margin-top: 8px; font-size: 0.7rem; padding: 7px 10px; }

/* Sol kolondaki kupon — kompakt */
.s4-col-main .s4-coupon .s4-input { height: 44px; font-size: 0.88rem; }
.s4-col-main .s4-coupon .s4-coupon-apply { height: 44px; padding: 0 20px; font-size: 0.86rem; }

/* Step 4 başlığını sıkıştır — sağ CTA fold üstünde kalsın */
#step-4 .step-head--checkout { margin-bottom: 18px; }
#step-4 .step-head--checkout .step-title { font-size: 1.6rem; margin-bottom: 4px; }
#step-4 .step-head--checkout .step-sub   { font-size: 0.86rem; }
.s4-col-side .s4-pay .s4-trust { margin-bottom: 12px; }
.s4-col-side .s4-pay .s4-agr { padding: 10px 12px; margin-bottom: 10px; }
.s4-col-side .s4-pay .s4-agr-text { font-size: 0.76rem; line-height: 1.45; }
.s4-col-side .s4-pay .s4-cta-note { margin-top: 8px; font-size: 0.7rem; padding: 7px 10px; }
@media (max-width: 960px) {
    .s4-side-sticky { position: static; }
}

/* Kompakt kart (sadece grup başlığı + içerik) */
.s4-card--compact { padding: 18px 22px; }
@media (max-width: 640px) { .s4-card--compact { padding: 16px 14px; } }

/* Kart başlığı olarak kullanılan grup-head */
.s4-group-head--card {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

/* Sipariş özeti gruplarını sıkıştır */
.s4-summary { padding: 22px 24px; }
@media (max-width: 640px) { .s4-summary { padding: 18px 16px; } }
.s4-summary .s4-group { padding: 14px 0; }
.s4-summary .s4-group:first-of-type { padding-top: 8px; }
.s4-summary .s4-group:last-of-type  { padding-bottom: 2px; border-bottom: none; }
.s4-summary .s4-group-head { margin-bottom: 10px; }

/* Yan yana iki grup */
.s4-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 28px;
    border-bottom: 1px solid var(--line);
    padding: 4px 0;
}
.s4-row2 > .s4-group {
    border-bottom: none !important;
    padding: 10px 0 !important;
}
@media (max-width: 560px) {
    .s4-row2 { grid-template-columns: 1fr; gap: 0; }
}

/* Tam genişlik grup yardımcısı */
.s4-group--full { width: 100%; }

/* Mini grid: 5 kolon (Adres), 2 kolon (genel) */
.s4-mini-grid {
    display: grid;
    gap: 12px 18px;
    min-width: 0;
}
.s4-mini-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.s4-mini-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 780px) {
    .s4-mini-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .s4-mini-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .s4-mini-grid--2 { grid-template-columns: 1fr; }
}

/* Adres alanlarında değerler kompakt */
.s4-mini-grid--5 .s4-value { font-size: 0.9rem; }

/* Seslendirme metni içine ikon ekleyelim */
.s4-voice-field .s4-voice {
    margin-top: 0;
    padding: 10px 14px;
}
.s4-voice-field .s4-voice p {
    font-size: 0.82rem;
}

/* Pin sayacı başlıkta — daha kompakt */
.s4-summary .s4-pins { padding: 2px 0 0; }

/* ---------- Fiyat kartı: sade ve net ---------- */
.s4-price-card .s4-price-list { padding: 4px 0 0; }
.s4-price-card .s4-price-list li { padding: 8px 0; }
.s4-price-card .s4-price-total { margin-top: 8px; padding: 14px 16px !important; }
.s4-price-card .s4-price-total .s4-price-val { font-size: 1.4rem !important; }
.s4-price-card .s4-price-total .s4-price-label {
    display: flex; flex-direction: column; gap: 2px;
    font-size: 0.95rem !important;
}

/* ---------- Kupon kartı kompakt ---------- */
.s4-col-side .s4-coupon { padding: 18px 20px; }
.s4-col-side .s4-coupon .s4-input { height: 46px; font-size: 0.88rem; }
.s4-col-side .s4-coupon .s4-coupon-apply { height: 46px; padding: 0 18px; font-size: 0.86rem; }

/* ---------- Ödeme kartı (sağ kolonda) ---------- */
.s4-col-side .s4-pay { padding: 20px 22px; }
.s4-col-side .s4-pay .s4-pay-head { margin-bottom: 14px; }
.s4-col-side .s4-pay .s4-trust { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; padding: 8px !important; }
.s4-col-side .s4-pay .s4-trust-item { font-size: 0.7rem !important; padding: 7px 6px !important; }
.s4-col-side .s4-pay .s4-agr { padding: 12px 14px; margin-bottom: 12px; }
.s4-col-side .s4-pay .s4-agr-text { font-size: 0.78rem; }
.s4-col-side .s4-pay .s4-cta.btn-step-paytr { min-height: 60px; padding: 12px 14px; }
.s4-col-side .s4-pay .s4-cta-amount { font-size: 1.05rem; padding: 7px 12px; }
.s4-col-side .s4-pay .s4-cta-label { font-size: 0.95rem; }
.s4-col-side .s4-pay .s4-cta-note { margin-top: 10px; font-size: 0.72rem; padding: 8px 12px; }

/* Mobilde sağ kolon üstte değil altta kalsın — daha doğal akış */
@media (max-width: 960px) {
    .s4-col-side .s4-pay .s4-trust { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 480px) {
    .s4-col-side .s4-pay .s4-trust { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Eski .s4-shell / .s4-bottom kalıntılarını etkisizleştir */
.s4-shell, .s4-bottom { all: unset; }

/* Step 4 yalnızca tam genişlik kullansın — wizard-shell 1080px sınırını aş */
.wizard-shell:has(#step-4.is-active) { max-width: 1400px; }
@media (min-width: 1500px) {
    .wizard-shell:has(#step-4.is-active) { max-width: 1480px; }
}

/* Sipariş Özeti içeride biraz nefes alsın — adres 5 sütun rahat sığsın */
.s4-summary { padding: 24px 28px; }
@media (max-width: 640px) { .s4-summary { padding: 18px 16px; } }

/* CTA butonu sağ kolonda geniş kalsın — fold üstünde net dursun */
.s4-col-side .s4-pay { padding: 22px 24px; }
.s4-col-side .s4-pay .s4-cta.btn-step-paytr {
    min-height: 64px;
    padding: 14px 18px;
    font-size: 1rem;
}
.s4-col-side .s4-pay .s4-cta-label { font-size: 1rem; }
.s4-col-side .s4-pay .s4-cta-amount { font-size: 1.12rem; padding: 8px 14px; }

/* =====================================================================
   STEP 4 v44 — Accordion summary + focused pay panel
   ===================================================================== */

.s4n-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 22px;
    align-items: start;
    max-width: 1120px;
    margin: 0 auto;
}
@media (max-width: 980px) {
    .s4n-layout { grid-template-columns: 1fr; gap: 18px; }
}

.s4n-col-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.s4n-col-side { min-width: 0; }
.s4n-pay-sticky { position: sticky; top: 88px; }
@media (max-width: 980px) {
    .s4n-pay-sticky { position: static; }
}

/* ---------- Hero strip ---------- */
.s4n-hero {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -16px rgba(15,23,42,.08);
}
.s4n-hero-band {
    height: 6px;
    background: linear-gradient(90deg, var(--brand-primary, var(--accent)), var(--brand-secondary, var(--accent-2, var(--accent))));
}
.s4n-hero-body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
}
.s4n-hero-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent-soft, #eef2ff), #fff);
    border: 1px solid var(--line);
    display: grid; place-items: center;
    color: var(--accent);
    font-size: 1.35rem;
    flex-shrink: 0;
}
.s4n-hero-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.s4n-hero-tag {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--muted);
}
.s4n-hero-title {
    font-family: var(--font-display);
    font-size: 1.08rem;
    color: var(--ink);
    line-height: 1.2;
}
.s4n-hero-meta { font-size: .8rem; color: var(--muted); line-height: 1.4; }
.s4n-hero-edit {
    width: 38px; height: 38px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--muted);
    cursor: pointer;
    display: grid; place-items: center;
    transition: all .25s var(--ease);
    flex-shrink: 0;
}
.s4n-hero-edit:hover {
    border-color: var(--accent); color: var(--accent);
    background: var(--accent-soft, #eef2ff);
}

/* ---------- Accordion ---------- */
.s4n-acc { display: flex; flex-direction: column; gap: 10px; }

.s4n-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.s4n-item[open] {
    border-color: var(--accent, #6366f1);
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -18px rgba(99,102,241,.25);
}

.s4n-sum {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.s4n-sum::-webkit-details-marker { display: none; }
.s4n-sum::marker { content: ''; }

.s4n-sum-ico {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: var(--accent-soft, #eef2ff);
    color: var(--accent, #6366f1);
    display: grid; place-items: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: all .25s var(--ease);
}
.s4n-item[open] .s4n-sum-ico {
    background: var(--accent, #6366f1);
    color: #fff;
}

.s4n-sum-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.s4n-sum-text strong {
    font-family: var(--font-display);
    font-size: .98rem;
    color: var(--ink);
    line-height: 1.2;
}
.s4n-sum-text small {
    font-size: .78rem;
    color: var(--muted);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.s4n-sum-chev {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    color: var(--muted-2, var(--muted));
    transition: transform .3s var(--ease), color .25s var(--ease);
    flex-shrink: 0;
}
.s4n-item[open] .s4n-sum-chev {
    transform: rotate(180deg);
    color: var(--accent, #6366f1);
}

.s4n-body {
    padding: 6px 16px 18px;
    border-top: 1px dashed var(--line);
    margin-top: 4px;
    animation: s4nFade .25s var(--ease);
}
@keyframes s4nFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.s4n-grid {
    display: grid;
    gap: 14px;
    padding-top: 12px;
}
.s4n-grid-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
/* İçeriğe göre genişleyen ızgara: uzun mahalle adı dar sütuna sıkışıp kırılmaz. */
.s4n-grid-auto { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
.s4n-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.s4n-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 960px) {
    .s4n-grid-5 { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
    .s4n-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
}
@media (max-width: 560px) {
    .s4n-grid-5 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
    .s4n-grid-3 { grid-template-columns: 1fr; gap: 10px; }
    .s4n-grid-2 { grid-template-columns: 1fr; gap: 10px; }
    .s4n-grid { padding-top: 8px; }
}

.s4n-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.s4n-cell { gap: 3px; }
.s4n-cell-full { grid-column: 1 / -1; }
.s4n-cell > span {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted-2, var(--muted));
    line-height: 16px;
}
.s4n-cell > strong {
    font-weight: 600;
    color: var(--ink);
    font-size: .88rem;
    line-height: 20px;
    overflow-wrap: break-word;
}

.s4n-pins-wrap { margin-top: 14px; }
.s4-color-value, .s4-audio-value { margin-top: 1px; }
.s4-color-value strong, .s4-audio-text strong { font-weight: 600; font-size: .88rem; line-height: 20px; }
.s4-audio-text small { font-size: .74rem; line-height: 16px; color: var(--muted); }
.s4n-pins-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--ink-soft, var(--muted));
    text-transform: uppercase;
    letter-spacing: .05em;
}
.s4n-pins-head i { color: var(--accent); }
.s4n-count {
    margin-left: auto;
    font-style: normal;
    font-size: .72rem;
    color: var(--muted);
    background: var(--accent-soft, #eef2ff);
    padding: 3px 8px;
    border-radius: 999px;
}

/* ---------- Pay panel ---------- */
.s4n-pay {
    background: linear-gradient(180deg, #fff 0%, #fafbff 100%);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(15,23,42,.05), 0 24px 48px -28px rgba(15,23,42,.18);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.s4n-pay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.s4n-pay-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 700;
    color: #00754F;
    background: #e8f7ef;
    padding: 5px 10px;
    border-radius: 999px;
}
.s4n-pay-brand {
    display: flex;
    align-items: center;
    gap: 6px;
}
.s4n-pay-brand small { font-size: .65rem; color: var(--muted); }
.s4n-pay-brand img { height: 18px; }

/* Kupon */
/* Opsiyonel eklentiler */
.s4n-addons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.s4n-addons-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-soft, var(--ink));
}
.s4n-addons-head i { color: var(--accent); }
.s4n-addons-head small {
    margin-left: auto;
    font-weight: 500;
    font-size: .72rem;
    color: var(--muted);
}
.s4n-addon {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.s4n-addon:hover { border-color: var(--accent, #6366f1); }
.s4n-addon.is-on {
    border-color: var(--accent, #6366f1);
    background: linear-gradient(135deg, var(--accent-soft, #eef2ff), #fff);
    box-shadow: 0 2px 12px rgba(99,102,241,.10);
}
.s4n-addon-box {
    width: 20px; height: 20px;
    border: 2px solid var(--line);
    border-radius: 6px;
    display: grid; place-items: center;
    background: #fff;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all .2s var(--ease);
}
.s4n-addon-box i { color: #fff; font-size: .8rem; opacity: 0; transform: scale(.6); transition: all .2s var(--ease); }
.s4n-addon .s4-addon-cb { position: absolute; left: 0; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
.s4n-addon .s4-addon-cb:checked + .s4n-addon-box {
    background: var(--accent, #6366f1);
    border-color: var(--accent, #6366f1);
}
.s4n-addon .s4-addon-cb:checked + .s4n-addon-box i { opacity: 1; transform: scale(1); }
.s4n-addon-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.s4n-addon-title {
    display: flex; align-items: center; gap: 6px;
    font-weight: 700; font-size: .9rem; color: var(--ink);
}
.s4n-addon-title i { color: var(--accent); font-size: .95rem; }
.s4n-addon-desc { font-size: .76rem; line-height: 1.45; color: var(--ink-soft, var(--muted)); }
.s4n-addon-price {
    margin-left: auto;
    flex-shrink: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .95rem;
    color: var(--accent, #6366f1);
    white-space: nowrap;
}
/* İkili Paket — üstteki addon kartlarıyla birebir aynı görünüm.
   Sağda üstü çizili 398 + yeni 298 fiyat bloğu (diğerleriyle aynı renk). */
.s4n-bundle-priceblock {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    line-height: 1.1;
}
.s4n-bundle-old {
    font-size: .76rem;
    font-weight: 700;
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: rgba(220,38,38,.8);
    text-decoration-thickness: 2px;
}
.s4n-bundle-new {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 900;
    /* renk .s4n-addon-price'tan (accent) miras alınır — diğer fiyatlarla aynı */
}

/* ---------- İkili Paket — görselli tek kart ---------- */
.s4n-bundlecard {
    display: block;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.s4n-bundlecard:hover { border-color: var(--accent); }
.s4n-bundlecard.is-on {
    border-color: var(--accent);
    box-shadow: 0 2px 16px rgba(239,35,60,.18);
}
.s4n-bundlecard-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #FAF8F4;
}
.s4n-bundlecard-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.s4n-bundlecard-off {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--accent, #EF233C);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
    box-shadow: 0 4px 12px -3px rgba(239,35,60,.6);
}
.s4n-bundlecard-off i { font-size: .68rem; }
.s4n-bundlecard-body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 14px 15px;
}
.s4n-bundlecard-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.s4n-bundlecard-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--ink);
}
.s4n-bundlecard-title i { color: var(--accent); }
/* CTA satırı: gizli checkbox + özel kutu + metin */
.s4n-bundlecard-cta {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #FAFAFA;
    transition: background .18s var(--ease), border-color .18s var(--ease);
}
.s4n-bundlecard.is-on .s4n-bundlecard-cta {
    background: var(--accent-soft, #FFF1EC);
    border-color: var(--accent);
}
.s4n-bundlecard .s4-addon-cb {
    position: absolute;
    left: 0;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    margin: 0;
}
.s4n-bundlecard .s4-addon-cb:checked + .s4n-addon-box {
    background: var(--accent, #EF233C);
    border-color: var(--accent, #EF233C);
}
.s4n-bundlecard .s4-addon-cb:checked + .s4n-addon-box i { opacity: 1; transform: scale(1); }
.s4n-bundlecard-ctatext {
    font-weight: 700;
    font-size: .92rem;
    color: var(--ink);
}
.s4n-bundlecard.is-on .s4n-bundlecard-ctatext { color: var(--accent-deep, var(--accent)); }
.s4n-bundlecard.is-on .s4n-bundlecard-ctatext::after { content: " ✓"; }

/* === Kompakt yatay paket kartı (görsel sol thumbnail — yer kaplamasın) === */
.s4n-bundlecard { display: flex; align-items: stretch; }
.s4n-bundlecard-media {
    width: 108px;
    flex-shrink: 0;
    aspect-ratio: auto;
    align-self: stretch;
}
.s4n-bundlecard-media img { height: 100%; }
.s4n-bundlecard-off { display: none; } /* indirim ₺398→₺298 fiyatından belli */
.s4n-bundlecard-body { flex: 1; min-width: 0; gap: 7px; padding: 11px 13px; }
.s4n-bundlecard-desc, .s4n-bundlecard .s4n-addon-desc { font-size: .74rem; line-height: 1.4; }
.s4n-bundlecard-cta { padding: 9px 11px; }

/* === Katlanır kupon linki === */
.s4n-coupon-link {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 11px 13px;
    background: #fff;
    border: 1px dashed var(--line);
    border-radius: 12px;
    color: var(--ink);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease);
}
.s4n-coupon-link:hover { border-color: var(--accent); }
.s4n-coupon-link > i:first-child { color: var(--accent); }
.s4n-coupon-chev { margin-left: auto; font-size: .85rem; color: var(--muted); transition: transform .25s var(--ease); }
.s4n-coupon-link.is-open { border-style: solid; border-color: var(--accent); }
.s4n-coupon-link.is-open .s4n-coupon-chev { transform: rotate(180deg); }
.s4n-coupon[hidden] { display: none; }
.s4n-coupon { margin-top: 8px; }

/* === Mobil sabit ödeme barı (en önemli buton hep görünür) === */
.s4n-paybar {
    display: none; /* masaüstünde gizli */
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    align-items: center; gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.97);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 22px -10px rgba(15,23,42,.22);
}
.s4n-paybar-info { display: flex; flex-direction: column; line-height: 1.15; }
.s4n-paybar-label { font-size: .72rem; color: var(--muted); font-weight: 600; }
.s4n-paybar-total { font-family: var(--font-display); font-size: 1.18rem; font-weight: 800; color: var(--ink); }
.s4n-paybar-btn {
    margin-left: auto; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 20px;
    border: none; border-radius: 12px;
    background: var(--accent-grad, linear-gradient(135deg, #EF233C, #FB8500));
    color: #fff;
    font-family: var(--font-display); font-weight: 800; font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 6px 16px -6px rgba(239,35,60,.7);
    transition: transform .12s var(--ease), opacity .15s var(--ease);
}
.s4n-paybar-btn img { height: 20px; width: auto; display: block; }
.s4n-paybar-btn:active { transform: scale(.97); }
.s4n-paybar-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.s4n-paybar-btn.is-loading { opacity: .7; pointer-events: none; }

@media (max-width: 980px) {
    .s4n-paybar { display: flex; }
    #step-4 { padding-bottom: 86px; }       /* sabit bar içeriği örtmesin */
    #step-4 .s4n-cta { display: none; }      /* inline CTA gizli — sticky bar yerini alır */
    #step-4 .s4n-trust { margin-bottom: 2px; }
}

/* Ödeme adımında (step 4) sabit ödeme barı varken canlı destek balonu
   "Güvenli Öde" butonunu kapatmasın: balonu barın üstüne kaldır. */
body:has(#step-4.is-active) .amx-chat {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
/* Dar ekranda bar tüm genişliği kaplar — balonu tamamen gizle. */
@media (max-width: 640px) {
    body:has(#step-4.is-active) .amx-chat { display: none; }
}

.s4n-coupon {
    background: #fff;
    border: 1px dashed var(--line);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.s4n-coupon-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-soft, var(--ink));
}
.s4n-coupon-head i { color: var(--accent); }

/* Price list */
.s4n-price {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.s4n-price li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .9rem;
    color: var(--ink-soft, var(--ink));
}
.s4n-price li > span:last-child { font-weight: 600; color: var(--ink); }
.s4n-price-disc > span:last-child { color: #00754F !important; }

.s4n-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--accent-soft, #eef2ff), #fff);
    border-radius: 14px;
    border: 1px solid var(--line);
}
.s4n-total-l { display: flex; flex-direction: column; line-height: 1.2; }
.s4n-total-l span { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1rem; }
.s4n-total-l small { color: var(--muted); font-size: .72rem; }
.s4n-total-v {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--accent, #6366f1);
    font-size: 1.5rem;
    letter-spacing: -.02em;
}

/* Agreement */
.s4n-agr {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
    user-select: none;
}
.s4n-agr-box {
    width: 20px; height: 20px;
    border: 2px solid var(--line);
    border-radius: 6px;
    display: grid; place-items: center;
    background: #fff;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all .2s var(--ease);
}
.s4n-agr-box i { color: #fff; font-size: .8rem; opacity: 0; transform: scale(.6); transition: all .2s var(--ease); }
.s4n-agr .s4-agr-cb { position: absolute; left: 0; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
.s4n-agr .s4-agr-cb:checked + .s4n-agr-box {
    background: var(--accent, #6366f1);
    border-color: var(--accent, #6366f1);
}
.s4n-agr .s4-agr-cb:checked + .s4n-agr-box i { opacity: 1; transform: scale(1); }
.s4n-agr-text {
    font-size: .78rem;
    color: var(--ink-soft, var(--muted));
    line-height: 1.5;
}
.s4n-agr-text a { color: var(--accent, #6366f1); text-decoration: none; font-weight: 600; }
.s4n-agr-text a:hover { text-decoration: underline; }

/* CTA */
.s4n-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent-2, #8b5cf6));
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 10px 24px -10px rgba(99,102,241,.55);
    transition: transform .15s var(--ease), box-shadow .25s var(--ease), opacity .25s var(--ease);
}
.s4n-cta:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(99,102,241,.65); }
.s4n-cta:active:not(:disabled) { transform: translateY(0); }
.s4n-cta:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.s4n-cta-l { display: flex; align-items: center; gap: 10px; }
.s4n-cta-l i { font-size: 1.1rem; }
.s4n-cta-r {
    background: rgba(255,255,255,.18);
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 1.05rem;
    letter-spacing: -.01em;
}

/* Trust */
.s4n-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    justify-content: center;
}
.s4n-trust span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .7rem;
    color: var(--muted);
    background: #f6f8fb;
    padding: 4px 9px;
    border-radius: 999px;
}
.s4n-trust i { color: var(--accent, #6366f1); font-size: .78rem; }

.s4n-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: .72rem;
    color: var(--muted);
    line-height: 1.45;
    margin: 0;
    text-align: left;
}
.s4n-note i { color: var(--muted-2, var(--muted)); margin-top: 2px; }

/* Mobile pay panel: sticky bottom */
@media (max-width: 980px) {
    .s4n-pay { border-radius: 18px; padding: 16px; }
}

/* =====================================================================
   STEP 4 v45 — PayTR CTA logo + Modal refresh
   ===================================================================== */

/* CTA: PayTR logosu sola, beyaz pill içinde net görünür */
.s4n-cta-logo {
    height: 22px;
    width: auto;
    padding: 4px 8px;
    background: #fff;
    border-radius: 6px;
    display: block;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.s4n-cta-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .98rem;
    letter-spacing: .005em;
}
@media (max-width: 420px) {
    .s4n-cta { padding: 12px 14px; }
    .s4n-cta-logo { height: 18px; padding: 3px 6px; }
    .s4n-cta-label { font-size: .9rem; }
    .s4n-cta-r { font-size: .98rem; padding: 5px 10px; }
}

/* ---------------------------------------------------------------------
   MODAL REFRESH — unified premium look for all step-4 modals
   --------------------------------------------------------------------- */

/* Backdrop: daha derin blur + dark gradient */
.um-backdrop {
    background: radial-gradient(ellipse at center, rgba(20, 22, 35, .55) 0%, rgba(8, 10, 18, .78) 100%) !important;
    backdrop-filter: blur(8px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
}

/* Ortak dialog shell */
.um-dialog,
.success-dialog,
.otp-dialog,
.dm-dialog,
.welcome-dialog {
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.6) inset,
        0 24px 56px -16px rgba(15, 23, 42, .35),
        0 8px 20px -10px rgba(15, 23, 42, .18) !important;
    border: 1px solid rgba(255,255,255,.7);
    overflow: hidden;
    animation: m4Pop .35s cubic-bezier(.18,.89,.32,1.28) !important;
}
@keyframes m4Pop {
    from { opacity: 0; transform: scale(.92) translateY(14px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Yumuşak üst aksent şeridi */
.um-dialog::before,
.success-dialog::before,
.otp-dialog::before,
.dm-dialog::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent, #6366f1), var(--accent-2, #8b5cf6), var(--accent, #6366f1));
    background-size: 200% 100%;
    animation: m4Shimmer 4s linear infinite;
    z-index: 2;
}
@keyframes m4Shimmer {
    from { background-position: 0% 0; }
    to   { background-position: 200% 0; }
}

/* Close button — daha rafine */
.um-close {
    width: 36px !important; height: 36px !important;
    border-radius: 12px !important;
    background: rgba(241, 243, 249, .9) !important;
    border: 1px solid rgba(0,0,0,.04) !important;
    color: var(--muted) !important;
    backdrop-filter: blur(4px);
    transition: all .2s var(--ease) !important;
    z-index: 3 !important;
}
.um-close:hover {
    background: #fff !important;
    color: var(--ink) !important;
    transform: rotate(90deg);
    box-shadow: 0 4px 12px rgba(15,23,42,.12) !important;
}

/* ---------- Success modal ---------- */
.success-dialog {
    padding: 40px 32px 28px !important;
    max-width: 460px !important;
}
.success-icon {
    width: 88px !important; height: 88px !important;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    box-shadow:
        0 0 0 8px rgba(16, 185, 129, .12),
        0 0 0 16px rgba(16, 185, 129, .06),
        0 16px 40px -12px rgba(16, 185, 129, .55) !important;
    font-size: 2.6rem !important;
}
.success-dialog h3 { font-size: 1.55rem !important; letter-spacing: -.01em; }
.success-actions { margin-top: 4px; gap: 10px !important; }
.success-actions .um-btn { padding: 11px 22px !important; }

/* ---------- OTP modal ---------- */
.otp-dialog {
    padding: 36px 28px 24px !important;
    max-width: 440px !important;
}
.otp-head { text-align: center; margin-bottom: 22px; }
.otp-head-icon {
    width: 64px !important; height: 64px !important;
    background: linear-gradient(135deg, var(--accent-soft, #eef2ff), #fff) !important;
    border: 1px solid var(--line);
    color: var(--accent, #6366f1) !important;
    font-size: 1.6rem !important;
    margin: 0 auto 14px !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 20px -8px rgba(99,102,241,.35);
}
.otp-head h3 { font-size: 1.35rem !important; letter-spacing: -.01em; margin-bottom: 6px !important; }
.otp-head p { color: var(--muted) !important; }
.otp-inputs { gap: 8px !important; justify-content: center; margin: 18px 0; }
.otp-digit {
    width: 48px !important; height: 56px !important;
    border-radius: 12px !important;
    border: 2px solid var(--line) !important;
    background: #fafbff !important;
    font-family: var(--font-display);
    font-size: 1.4rem !important;
    font-weight: 700;
    text-align: center;
    color: var(--ink);
    transition: all .2s var(--ease);
}
.otp-digit:focus {
    outline: none;
    border-color: var(--accent, #6366f1) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,.15);
    transform: translateY(-1px);
}
.otp-modal.is-error .otp-digit {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
    animation: m4Shake .4s ease;
}
@keyframes m4Shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* ---------- Disclaimer modal ---------- */
.dm-dialog {
    max-width: 620px !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
}
.dm-head {
    padding: 28px 28px 18px !important;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #fafbff 0%, #fff 100%);
    display: flex; gap: 14px; align-items: flex-start;
}
.dm-head-icon {
    width: 48px !important; height: 48px !important;
    border-radius: 14px;
    background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
    color: #b45309 !important;
    display: grid; place-items: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -4px rgba(180, 83, 9, .35);
}
.dm-head h3 { font-size: 1.25rem !important; letter-spacing: -.01em; margin: 0 0 4px !important; }
.dm-head p { font-size: .85rem !important; color: var(--muted) !important; margin: 0; }
.dm-body {
    padding: 18px 28px;
    overflow-y: auto;
    flex: 1;
}
.dm-list { padding-left: 18px; margin: 0; }
.dm-list li {
    padding: 10px 0;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--ink-soft);
    border-bottom: 1px dashed var(--line);
}
.dm-list li:last-child { border-bottom: 0; }
.dm-list li strong { color: var(--ink); font-weight: 700; }
.dm-actions {
    padding: 18px 28px;
    background: #fafbff;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: flex-end;
}
.dm-actions .um-btn-primary { padding: 12px 28px !important; }

/* ---------- Upload modal ---------- */
.um-dialog {
    padding: 32px 28px 24px !important;
    max-width: 480px !important;
}
.um-head h3 { font-size: 1.2rem !important; letter-spacing: -.01em; }
.um-dropzone {
    border-radius: 16px !important;
    padding: 36px 20px !important;
    background: linear-gradient(180deg, #fafbff 0%, #fff 100%) !important;
    border: 2px dashed var(--line-strong) !important;
    transition: all .25s var(--ease) !important;
}
.um-dropzone:hover, .um-dropzone.is-drag {
    border-color: var(--accent, #6366f1) !important;
    background: var(--accent-soft, #eef2ff) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -12px rgba(99,102,241,.35);
}
.um-dropzone i {
    font-size: 2.4rem !important;
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent-2, #8b5cf6));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- Welcome modal ---------- */
.welcome-dialog {
    padding: 36px 30px 28px !important;
    max-width: 480px !important;
    text-align: center;
}
.welcome-icon {
    width: 80px; height: 80px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    color: #fff;
    display: grid; place-items: center;
    font-size: 2.2rem;
    box-shadow:
        0 0 0 8px rgba(249, 115, 22, .12),
        0 16px 40px -10px rgba(249, 115, 22, .55);
}
.welcome-confetti {
    position: absolute;
    top: 14px; left: 50%;
    transform: translateX(-50%);
    font-size: 1.4rem;
    animation: m4Float 2.4s ease-in-out infinite;
    opacity: .85;
}
@keyframes m4Float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-6px); }
}
.welcome-perks {
    list-style: none;
    padding: 14px 16px;
    margin: 16px 0;
    background: #fafbff;
    border: 1px solid var(--line);
    border-radius: 14px;
    text-align: left;
}
.welcome-perks li {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0;
    font-size: .86rem;
    color: var(--ink-soft);
}
.welcome-perks li i { color: #10B981; font-size: 1rem; flex-shrink: 0; }
.welcome-fineprint {
    font-size: .72rem !important;
    color: var(--muted-2, var(--muted)) !important;
    line-height: 1.5;
    margin: 12px 0 18px !important;
}
.welcome-cta {
    width: 100%;
    padding: 14px 20px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent-2, #8b5cf6));
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 10px 24px -10px rgba(99,102,241,.55);
    transition: all .25s var(--ease);
}
.welcome-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -12px rgba(99,102,241,.65);
}

/* Mobile compact */
@media (max-width: 560px) {
    .um-dialog, .otp-dialog, .success-dialog, .welcome-dialog { padding: 28px 20px 22px !important; border-radius: 18px !important; }
    .dm-dialog { border-radius: 18px !important; }
    .dm-head, .dm-body, .dm-actions { padding-left: 20px !important; padding-right: 20px !important; }
    .otp-digit { width: 40px !important; height: 50px !important; font-size: 1.2rem !important; }
}

/* =====================================================================
   STEP 4 v46 — CTA & header logo fix (PayTR SVG = white-fill)
   ===================================================================== */

/* PayTR logosu beyaz dolgulu → koyu zemin gerekli */
.s4n-cta-logo {
    background: #0b1437 !important;
    padding: 6px 10px !important;
    height: 28px !important;
    border-radius: 7px !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 2px 6px rgba(0,0,0,.18) !important;
}

/* CTA: amount pill ile label çakışmasın — gap, min-width ve nowrap */
.s4n-cta {
    flex-wrap: nowrap;
    gap: 10px;
    padding: 13px 14px 13px 14px;
}
.s4n-cta-l {
    flex: 1 1 auto;
    min-width: 0;
    gap: 10px;
}
.s4n-cta-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .92rem !important;
}
.s4n-cta-r {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 1rem;
    padding: 7px 12px;
}
@media (max-width: 1080px) and (min-width: 981px) {
    .s4n-cta-label { font-size: .85rem !important; }
    .s4n-cta-r { font-size: .95rem; padding: 6px 10px; }
}

/* Header'daki "Altyapı" + PayTR logosu da koyu zeminde */
.s4n-pay-brand {
    background: #0b1437;
    padding: 5px 9px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.s4n-pay-brand small { color: rgba(255,255,255,.6) !important; font-size: .62rem !important; }
.s4n-pay-brand img { height: 14px !important; display: block; }

/* =====================================================================
   STEP 4 v47 — Infra line + CTA brand pill
   ===================================================================== */

/* Üstte "AraziMax, [PAYTR] altyapısını kullanmaktadır." satırı */
.s4n-pay-head { justify-content: center !important; }
.s4n-infra {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.4;
    text-align: center;
    justify-content: center;
}
.s4n-infra-amx {
    height: 18px;
    width: auto;
    display: block;
}
.s4n-infra-text { color: var(--ink-soft, var(--muted)); }
.s4n-infra-paytr {
    display: inline-flex;
    align-items: center;
    background: #0b1437;
    padding: 4px 9px;
    border-radius: 7px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.s4n-infra-paytr img { height: 14px; width: auto; display: block; }

/* CTA: lacivert brand pill içinde logo + "ile Öde" */
.s4n-cta-logo { display: none !important; } /* eski sınıf devre dışı */
.s4n-cta-label { display: none !important; }

.s4n-cta {
    padding: 10px 12px !important;
    gap: 10px;
}
.s4n-cta-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #0b1437;
    padding: 9px 16px;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 2px 6px rgba(0,0,0,.2);
    color: #fff;
    flex-shrink: 0;
}
.s4n-cta-brand img {
    height: 34px;
    width: auto;
    display: block;
}
.s4n-cta-brand span {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .95rem;
    color: #fff;
    white-space: nowrap;
    letter-spacing: .01em;
}
.s4n-cta-r {
    margin-left: auto;
    background: rgba(255,255,255,.2);
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
}

/* =====================================================================
   STEP 4 v48 — AraziMax wordmark + Mobile polish
   ===================================================================== */

/* AraziMax: text wordmark (logo görseli yerine) */
.s4n-infra {
    font-size: .92rem;
    gap: 8px;
}
.s4n-infra-amx {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.02em;
    background: linear-gradient(135deg, var(--accent, #ef233c), var(--accent-2, #ff6a00));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}
.s4n-infra-paytr { padding: 5px 10px; }
.s4n-infra-paytr img { height: 16px; }

/* ---------------------------------------------------------------------
   MOBILE — Step 4 full polish (≤ 980px)
   --------------------------------------------------------------------- */
@media (max-width: 980px) {
    .s4n-layout { gap: 14px; padding: 0; }
    .step-head--checkout { padding: 0 4px; }

    /* Pay panel mobilde altta, kart boyu daha rahat */
    .s4n-pay-sticky { position: static; margin-top: 4px; }
    .s4n-pay { padding: 16px 14px; gap: 14px; border-radius: 18px; }

    /* Hero strip */
    .s4n-hero-body { padding: 14px; gap: 12px; }
    .s4n-hero-icon { width: 42px; height: 42px; font-size: 1.15rem; border-radius: 12px; }
    .s4n-hero-title { font-size: 1rem; }
    .s4n-hero-meta { font-size: .75rem; }
    .s4n-hero-edit { width: 34px; height: 34px; }

    /* Accordion */
    .s4n-sum { padding: 12px 14px; gap: 12px; }
    .s4n-sum-ico { width: 34px; height: 34px; font-size: .92rem; border-radius: 10px; }
    .s4n-sum-text strong { font-size: .92rem; }
    .s4n-sum-text small { font-size: .74rem; }
    .s4n-body { padding: 4px 14px 14px; }

    /* Infra satırı 2 satıra düşebilir */
    .s4n-infra { font-size: .82rem; gap: 6px; line-height: 1.5; }
    .s4n-infra-amx { font-size: 1rem; }
    .s4n-infra-paytr { padding: 4px 8px; }
    .s4n-infra-paytr img { height: 13px; }

    /* CTA */
    .s4n-cta { padding: 10px 10px !important; gap: 8px; }
    .s4n-cta-brand { padding: 7px 10px; gap: 7px; }
    .s4n-cta-brand img { height: 24px; }
    .s4n-cta-brand span { font-size: .88rem; }
    .s4n-cta-r { padding: 7px 10px; font-size: .98rem; }

    /* Toplam kartı */
    .s4n-total { padding: 12px 14px; }
    .s4n-total-v { font-size: 1.35rem; }

    /* Trust badges tek satırda kalmasın, hizala */
    .s4n-trust { justify-content: flex-start; }
    .s4n-trust span { font-size: .68rem; padding: 3px 8px; }

    /* Kupon */
    .s4n-coupon { padding: 11px; gap: 8px; }
    .s4-coupon-row { gap: 6px; }
    .s4n-coupon .s4-input { font-size: .9rem; padding: 10px 12px; }
    .s4n-coupon .s4-coupon-apply { padding: 10px 14px; font-size: .88rem; }

    /* Sözleşme */
    .s4n-agr-text { font-size: .76rem; }
}

/* Çok dar: 420px altı */
@media (max-width: 420px) {
    .s4n-hero-body { padding: 12px; gap: 10px; }
    .s4n-hero-icon { width: 38px; height: 38px; font-size: 1.05rem; }
    .s4n-hero-title { font-size: .95rem; }
    .s4n-hero-edit { width: 32px; height: 32px; border-radius: 10px; }

    .s4n-sum { padding: 11px 12px; gap: 10px; }
    .s4n-sum-ico { width: 32px; height: 32px; font-size: .88rem; }
    .s4n-sum-chev { width: 24px; height: 24px; }

    /* Accordion body grid → tek kolon */
    .s4n-grid-5, .s4n-grid-3 { grid-template-columns: 1fr 1fr !important; gap: 10px; }
    .s4n-cell > strong { font-size: .88rem; }

    /* CTA dar ekranda 2 satıra düşsün, hem brand hem tutar net görünsün */
    .s4n-cta { flex-wrap: wrap; gap: 8px; }
    .s4n-cta-brand { width: 100%; justify-content: center; }
    .s4n-cta-r { width: 100%; text-align: center; margin-left: 0; }

    /* Infra satırı kompakt */
    .s4n-infra { font-size: .78rem; }
    .s4n-infra-amx { font-size: .95rem; }

    /* Modal dialogları */
    .otp-digit { width: 38px !important; height: 46px !important; font-size: 1.1rem !important; }
}

/* =====================================================================
   STEP 3 v49 — Membership panel (replaces sipariş özeti)
   ===================================================================== */

.step3-membership {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
@media (max-width: 880px) {
    .step3-membership {
        position: static;
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }
}

.memb-head {
    padding: 0 4px 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.memb-head strong {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--ink);
}
.memb-head small { color: var(--muted); font-size: .82rem; line-height: 1.4; }

/* Stack varyantı: dik 3 buton kartı */
.auth-modes--stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.auth-mode--stack {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px !important;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    transition: all .25s var(--ease);
    flex-direction: row !important;
}
/* Sol accent şerit — hover/active'de büyür */
.auth-mode--stack::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--accent, #ef233c), var(--accent-2, #ff6a00));
    opacity: 0;
    transition: opacity .25s var(--ease), width .25s var(--ease);
}
.auth-mode--stack:hover {
    border-color: var(--accent, #ef233c);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -14px rgba(239,35,60,.30);
}
.auth-mode--stack:hover::before { opacity: 1; }
.auth-mode--stack.is-active {
    border-color: var(--accent, #ef233c);
    background: linear-gradient(135deg, #fff 0%, var(--accent-soft, #fff5f6) 100%);
    box-shadow: 0 12px 28px -14px rgba(239,35,60,.40);
}
.auth-mode--stack.is-active::before { opacity: 1; width: 4px; }

/* Featured (Üye Ol) — fazladan boy ve glow */
.auth-mode--featured {
    padding: 22px 18px 18px !important;
    background: linear-gradient(135deg, #fff 0%, var(--accent-soft, #fff5f6) 100%);
    border-color: rgba(239,35,60,.35);
}
.auth-mode--featured.is-active {
    box-shadow: 0 16px 36px -16px rgba(239,35,60,.50);
}
.am-ribbon {
    position: absolute;
    top: -1px; right: 14px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px 5px;
    background: linear-gradient(135deg, var(--accent, #ef233c), var(--accent-2, #ff6a00));
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 4px 10px -4px rgba(239,35,60,.55);
}
.am-ribbon i { font-size: .72rem; }

.auth-mode--stack .am-icon {
    width: 46px; height: 46px;
    border-radius: 13px;
    background: var(--accent-soft, #fff5f6);
    color: var(--accent, #ef233c);
    display: grid; place-items: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: all .25s var(--ease);
}
.auth-mode--featured .am-icon {
    width: 52px; height: 52px;
    font-size: 1.35rem;
    background: linear-gradient(135deg, var(--accent, #ef233c), var(--accent-2, #ff6a00));
    color: #fff;
    box-shadow: 0 8px 18px -6px rgba(239,35,60,.55);
}
.auth-mode--stack.is-active .am-icon {
    background: linear-gradient(135deg, var(--accent, #ef233c), var(--accent-2, #ff6a00));
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(239,35,60,.55);
}
.auth-mode--stack .am-text {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
}
.auth-mode--stack .am-text strong {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--ink);
    line-height: 1.2;
}
.auth-mode--featured .am-text strong {
    font-size: 1.1rem;
}
.auth-mode--stack .am-text small {
    font-size: .8rem;
    color: var(--muted);
    line-height: 1.35;
}
.auth-mode--featured .am-text small {
    font-size: .85rem;
}
.auth-mode--stack .am-pop {
    color: var(--accent, #ef233c);
    font-weight: 700;
}
.auth-mode--stack .am-chev {
    color: var(--muted-2, var(--muted));
    font-size: 1rem;
    transition: transform .25s var(--ease), color .25s var(--ease);
}
.auth-mode--stack:hover .am-chev,
.auth-mode--stack.is-active .am-chev {
    color: var(--accent, #ef233c);
    transform: translateX(3px);
}

/* Logged-in card */
.memb-logged {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fff 0%, var(--accent-soft, #fff5f6) 100%);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 8px 20px -14px rgba(15,23,42,.18);
}
.memb-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent, #ef233c), var(--accent-2, #ff6a00));
    color: #fff;
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 8px 20px -8px rgba(239,35,60,.55);
}
.memb-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    gap: 2px;
    line-height: 1.25;
}
.memb-info strong {
    font-family: var(--font-display);
    font-size: .98rem;
    color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.memb-info small {
    font-size: .76rem;
    color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 4px;
}
.memb-info small i { color: var(--accent, #ef233c); font-size: .7rem; }
.memb-logout {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--muted);
    display: grid; place-items: center;
    text-decoration: none;
    transition: all .2s var(--ease);
    flex-shrink: 0;
}
.memb-logout:hover {
    color: var(--accent, #ef233c);
    border-color: var(--accent, #ef233c);
    background: var(--accent-soft, #fff5f6);
}

/* Perk list */
.memb-perk-list {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 16px;
}
.memb-perk-head {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .82rem;
    color: var(--ink);
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--line);
}
.memb-perk-head i { color: var(--accent, #ef233c); }
.memb-perk-list ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.memb-perk-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .82rem;
    color: var(--ink-soft, var(--muted));
    line-height: 1.4;
}
.memb-perk-list li i {
    color: var(--accent, #ef233c);
    font-size: .88rem;
    margin-top: 2px;
    flex-shrink: 0;
}
.memb-perk-list li strong { color: var(--ink); }

/* Mobile */
@media (max-width: 560px) {
    .memb-logged { padding: 14px; }
    .memb-avatar { width: 42px; height: 42px; font-size: 1rem; }
    .auth-mode--stack { padding: 12px !important; }
    .auth-mode--stack .am-icon { width: 38px; height: 38px; font-size: 1rem; }
}

/* =====================================================================
   STEP 4 v50 — Coupon note + Mobile CTA fix
   ===================================================================== */

/* Kupon altındaki bilgi notu */
.s4n-coupon-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0;
    padding: 10px 12px;
    background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
    border: 1px solid #fde68a;
    border-radius: 10px;
    font-size: .75rem;
    color: #92400e;
    line-height: 1.45;
}
.s4n-coupon-note i {
    color: #d97706;
    font-size: .9rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.s4n-coupon-note strong { color: #78350f; font-weight: 700; }

/* Mobil CTA: yatay, tam genişlik, hizalı */
@media (max-width: 980px) {
    .s4n-cta {
        flex-wrap: nowrap !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        width: 100%;
    }
    .s4n-cta-brand {
        flex-shrink: 0;
        padding: 8px 12px;
        gap: 8px;
        width: auto;
        justify-content: flex-start;
    }
    .s4n-cta-brand img { height: 32px; }
    .s4n-cta-brand span { font-size: .92rem; }
    .s4n-cta-r {
        margin-left: auto !important;
        width: auto !important;
        text-align: right !important;
        padding: 8px 12px;
        font-size: 1.02rem;
        flex-shrink: 0;
    }
}

@media (max-width: 420px) {
    .s4n-cta { padding: 11px 12px !important; gap: 8px !important; }
    .s4n-cta-brand { padding: 8px 12px; gap: 7px; }
    .s4n-cta-brand img { height: 28px; }
    .s4n-cta-brand span { font-size: .86rem; }
    .s4n-cta-r { padding: 7px 10px; font-size: .96rem; }
}

/* SMS toast — OTP success sonrası "kupon SMS ile gönderildi" bildirimi */
.sms-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 20px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: #0F172A;
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 20px 40px -16px rgba(0,0,0,.45);
    font-size: .9rem;
    font-weight: 500;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
    max-width: calc(100vw - 32px);
}
.sms-toast i {
    color: var(--accent-2, #ff6a00);
    font-size: 1.05rem;
}
.sms-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* === OTP Success Modal — telefon doğrulama sonrası === */
.otp-ok-modal {
    position: fixed; inset: 0;
    z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.otp-ok-modal[hidden] { display: none; }
.oo-backdrop {
    position: absolute; inset: 0;
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(4px);
    animation: ooFadeIn .2s ease;
}
.oo-dialog {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 22px;
    padding: 32px 28px 24px;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.4);
    text-align: center;
    animation: ooPopIn .3s cubic-bezier(.34,1.56,.64,1);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
@keyframes ooFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes ooPopIn  { from { opacity: 0; transform: translateY(20px) scale(.95) } to { opacity: 1; transform: none } }

.oo-close {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px;
    border: none; background: transparent;
    color: #94A3B8; cursor: pointer;
    border-radius: 8px;
    display: grid; place-items: center;
    transition: all .15s;
}
.oo-close:hover { background: #F1F5F9; color: #0F172A; }

.oo-check {
    width: 64px; height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22C55E, #16A34A);
    display: grid; place-items: center;
    color: #fff;
    font-size: 2rem;
    box-shadow: 0 14px 28px -10px rgba(34,197,94,.55);
    animation: ooCheckPop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ooCheckPop {
    0%   { transform: scale(0); opacity: 0 }
    60%  { transform: scale(1.15) }
    100% { transform: scale(1); opacity: 1 }
}

.oo-title {
    margin: 0 0 6px;
    font-family: var(--font-display, inherit);
    font-size: 1.3rem;
    color: #0F172A;
    font-weight: 700;
}
.oo-lead {
    margin: 0 0 18px;
    font-size: .9rem;
    color: #64748B;
    line-height: 1.4;
}

/* SMS simülasyonu — sahte mesaj kabarcığı */
.oo-sms {
    text-align: left;
    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 14px 14px 12px;
    margin-bottom: 16px;
}
.oo-sms-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
    font-size: .8rem;
}
.oo-sms-head strong { color: #0F172A; flex: 1; font-weight: 600; }
.oo-sms-head .oo-sms-time { color: #94A3B8; font-size: .72rem; }
.oo-sms-dot {
    width: 8px; height: 8px;
    background: #22C55E;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(34,197,94,.18);
    animation: ooDot 1.8s ease-in-out infinite;
}
@keyframes ooDot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,.18) }
    50%      { box-shadow: 0 0 0 6px rgba(34,197,94,.08) }
}
.oo-sms-bubble {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: .85rem;
    color: #334155;
    line-height: 1.45;
    word-wrap: break-word;
}
.oo-sms-note {
    margin: 8px 0 0;
    display: flex; gap: 5px;
    font-size: .72rem;
    color: #94A3B8;
    line-height: 1.35;
}
.oo-sms-note i { font-size: .78rem; flex-shrink: 0; margin-top: 1px; }

/* Kupon kodu büyük gösterim */
.oo-coupon {
    background: linear-gradient(135deg, #FFF5F6 0%, #FFE8EA 100%);
    border: 1.5px dashed #FCA5A5;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 18px;
    text-align: center;
}
.oo-coupon-lbl {
    display: block;
    font-size: .72rem;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    margin-bottom: 6px;
}
.oo-coupon-row {
    display: flex; align-items: center; gap: 8px;
    justify-content: center;
}
.oo-coupon-code {
    font-family: ui-monospace, SF Mono, Menlo, monospace;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: .15em;
    color: #ef233c;
    background: #fff;
    border-radius: 10px;
    padding: 8px 16px;
    border: 1px solid #FCA5A5;
}
.oo-coupon-copy {
    width: 40px; height: 40px;
    border: 1.5px solid #FCA5A5;
    background: #fff;
    color: #ef233c;
    border-radius: 10px;
    cursor: pointer;
    display: grid; place-items: center;
    font-size: 1rem;
    transition: all .15s;
}
.oo-coupon-copy:hover { background: #ef233c; color: #fff; }
.oo-coupon-copy.copied { background: #22C55E; color: #fff; border-color: #22C55E; }
.oo-coupon-amount {
    display: block;
    margin-top: 8px;
    font-size: .8rem;
    color: #475569;
    font-weight: 600;
}

.oo-cta {
    width: 100%;
    padding: 14px 18px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent, #ef233c) 0%, var(--accent-2, #ff6a00) 100%);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    box-shadow: 0 12px 24px -10px rgba(239,35,60,.5);
    transition: transform .15s, box-shadow .15s;
}
.oo-cta:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -10px rgba(239,35,60,.6); }

/* ============================================================
   STEP 4 v51 — KONSEPT 1: Dijital Fiş + Sabit Ödeme Tabanı
   Tek ortalanmış sütun. Eski .s4n-layout/.s4n-pay/.s4n-col-*
   markup'ı kaldırıldı; bu blok yeni .s4k-* yapısını stiller.
   Marka teması korunur (--accent / --accent-2 / --accent-grad).
   ============================================================ */
#step-4 .s4k {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* Sabit ödeme tabanı içeriği örtmesin */
    padding-bottom: 150px;
}
.s4k-topnav { max-width: 600px; margin: 0 auto 12px; }
.s4k-back {
    display: inline-flex; align-items: center; gap: 7px;
    background: transparent; border: none; cursor: pointer;
    font-size: .9rem; font-weight: 600; color: var(--muted);
    padding: 4px 2px;
}
.s4k-back:hover { color: var(--accent); }
.s4k-left, .s4k-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.s4k-foot { display: flex; flex-direction: column; gap: 12px; }

/* ≥860px: iki kolonlu grid — scroll'suz tek bakış */
@media (min-width: 860px) {
    #step-4 .s4k {
        max-width: 960px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: 16px 20px;
        padding-bottom: 96px;
    }
    /* Sağ kolon (kupon+fiyat+sözleşme) tam yükseklik; detay sola, footer tam genişlik altta */
    .s4k-left   { grid-column: 1; grid-row: 1; }
    .s4k-right  { grid-column: 2; grid-row: 1 / span 2; }
    .s4k-detacc { grid-column: 1; grid-row: 2; }
    .s4k-foot   { grid-column: 1 / -1; grid-row: 3; align-items: center; }
    .s4k-topnav { max-width: 960px; margin-bottom: 6px; }
    .s4k-paybar-inner, .s4k-paybar-lock { max-width: 760px; }
    /* Başlığı kompaktla — içeriği yukarı çek, sağ kolon barın üstüne sığsın */
    #step-4 .step-head--checkout { margin-bottom: 12px; }
    #step-4 .step-head--checkout .step-tag { margin-bottom: 4px; }
    #step-4 .step-head--checkout .step-title { font-size: 1.55rem; margin-bottom: 2px; }
    #step-4 .step-head--checkout .step-sub { display: none; }
}

/* ---------- Hero şerit ---------- */
.s4k-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    position: relative;
    overflow: hidden;
}
.s4k-hero::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--brand-primary, var(--accent));
}
.s4k-hero-icon {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 13px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.25rem;
}
.s4k-hero-info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.s4k-hero-tag {
    font-size: .7rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted);
}
.s4k-hero-title { font-family: var(--font-display); font-size: 1.12rem; font-weight: 800; color: var(--ink); }
.s4k-hero-pill {
    margin-left: auto; flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .72rem; font-weight: 700; color: #0f7a3d;
    background: #e7f7ee; border: 1px solid #b9ebcd;
    padding: 5px 10px; border-radius: 999px;
}

/* ---------- İkili Paket (yatay kompakt kart) ---------- */
.s4k-addons { display: block; }
.s4k-bundle {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .12s;
}
.s4k-bundle:hover { border-color: var(--accent-2); box-shadow: 0 8px 22px rgba(251,133,0,.12); }
.s4k-bundle.is-on { border-color: var(--accent); box-shadow: 0 8px 24px rgba(239,35,60,.16); }
.s4k-bundle-media {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f3f0ea;
}
/* Görsel tam boyutta — kırpılmadan, doğal en-boy oranıyla */
.s4k-bundle-media img { width: 100%; height: auto; display: block; }
.s4k-bundle-off {
    position: absolute; top: 8px; left: 8px;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .72rem; font-weight: 800; color: #fff;
    background: var(--accent-grad);
    padding: 4px 9px; border-radius: 999px;
    box-shadow: 0 3px 10px rgba(239,35,60,.35);
}
.s4k-bundle-body {
    flex: 1 1 auto;
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px 14px;
    min-width: 0;
}
.s4k-bundle-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.s4k-bundle-title {
    font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--ink);
    display: inline-flex; align-items: center; gap: 6px;
}
.s4k-bundle-title i { color: var(--accent-2); }
.s4k-bundle-title { flex-wrap: wrap; }
.s4k-bundle-title-sub {
    font-family: var(--font-display); font-weight: 800;
    font-size: .82rem; color: var(--accent);
}
.s4k-bundle-price { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.s4k-bundle-old { font-size: .82rem; color: var(--muted); text-decoration: line-through; }
.s4k-bundle-new { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--accent); }
.s4k-bundle-desc { font-size: .82rem; line-height: 1.45; color: var(--muted); }
.s4k-bundle-foot {
    margin-top: 6px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.s4k-bundle-cta {
    position: relative;
    display: inline-flex; align-items: center; gap: 9px;
    font-size: .86rem; font-weight: 700; color: var(--ink);
}
.s4k-bundle-cta input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; }
.s4k-bundle-box {
    width: 22px; height: 22px; border-radius: 7px;
    border: 2px solid var(--line); background: #fff;
    display: grid; place-items: center;
    color: #fff; transition: all .15s;
}
.s4k-bundle-box i { font-size: .85rem; opacity: 0; transform: scale(.5); transition: all .15s; }
.s4k-bundle.is-on .s4k-bundle-box { background: var(--accent); border-color: var(--accent); }
.s4k-bundle.is-on .s4k-bundle-box i { opacity: 1; transform: scale(1); }
.s4k-bundle.is-on .s4k-bundle-ctatext::after { content: "li"; }
.s4k-bundle .s4k-bundle-ctatext::before { content: "Siparişime ekle"; }
.s4k-bundle .s4k-bundle-ctatext { font-size: 0; }
.s4k-bundle .s4k-bundle-ctatext::before,
.s4k-bundle .s4k-bundle-ctatext::after { font-size: .86rem; }
.s4k-bundle.is-on .s4k-bundle-ctatext::before { content: "Eklendi"; color: var(--accent); }
.s4k-bundle.is-on .s4k-bundle-ctatext::after { content: ""; }

/* ---------- Kupon (katlanır) ---------- */
.s4k-coupon-link {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 12px 15px;
    background: #fff;
    border: 1px dashed var(--line);
    border-radius: 14px;
    font-size: .9rem; font-weight: 600; color: var(--ink);
    cursor: pointer; transition: border-color .2s, background .2s;
}
.s4k-coupon-link:hover { border-color: var(--accent-2); background: var(--accent-soft); }
.s4k-coupon-link > i:first-child { color: var(--accent-2); font-size: 1.05rem; }
.s4k-coupon-chev { margin-left: auto; color: var(--muted); transition: transform .22s; }
.s4k-coupon-link.is-open .s4k-coupon-chev { transform: rotate(180deg); }
.s4k-coupon {
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
}
.s4k-coupon .s4-coupon-row { display: flex; gap: 8px; }
.s4k-coupon .s4-input {
    flex: 1 1 auto; min-width: 0;
    padding: 11px 13px; font-size: .92rem;
    border: 1px solid var(--line); border-radius: 11px;
    background: var(--bg); color: var(--ink);
}
.s4k-coupon .s4-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(239,35,60,.12); }
.s4k-coupon .s4-coupon-apply {
    flex: 0 0 auto;
    padding: 11px 18px; font-size: .9rem; font-weight: 700; color: #fff;
    background: var(--accent-grad); border: none; border-radius: 11px; cursor: pointer;
}
.s4k-coupon .s4-coupon-apply:disabled { opacity: .6; cursor: default; }

/* ---------- Fiyat fişi ---------- */
.s4k-price {
    list-style: none; margin: 0; padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
}
.s4k-price li {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    font-size: .92rem; color: var(--ink);
    padding: 7px 0;
}
.s4k-price li > span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.s4k-price-addon { color: var(--muted); }
.s4k-price-addon > span:first-child { padding-left: 2px; }
.s4k-price-disc { color: #0f7a3d; }
.s4k-price-disc > span:last-child { color: #0f7a3d; font-weight: 700; }
.s4k-price-total {
    margin-top: 6px; padding-top: 14px !important;
    border-top: 1.5px solid var(--line);
}
.s4k-price-total > span:first-child {
    font-family: var(--font-display); font-weight: 800; font-size: 1.02rem;
    display: flex; flex-direction: column; line-height: 1.15;
}
.s4k-price-total > span:first-child small { font-size: .7rem; font-weight: 600; color: var(--muted); }
.s4k-price-total strong {
    font-family: var(--font-display); font-size: 1.5rem; font-weight: 800;
    color: var(--accent); font-variant-numeric: tabular-nums;
}

/* ---------- Sözleşme onayı ---------- */
.s4k-agr {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    cursor: pointer; transition: border-color .2s, background .2s;
}
.s4k-agr.is-checked { border-color: var(--accent); background: var(--accent-soft); }
.s4k-agr { position: relative; }
.s4k-agr input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; }
.s4k-agr-box {
    flex: 0 0 auto;
    width: 24px; height: 24px; border-radius: 7px;
    border: 2px solid var(--line); background: #fff;
    display: grid; place-items: center; color: #fff;
    transition: all .15s; margin-top: 1px;
}
.s4k-agr-box i { font-size: .92rem; opacity: 0; transform: scale(.5); transition: all .15s; }
.s4k-agr.is-checked .s4k-agr-box { background: var(--accent); border-color: var(--accent); }
.s4k-agr.is-checked .s4k-agr-box i { opacity: 1; transform: scale(1); }
.s4k-agr-text { font-size: .84rem; line-height: 1.5; color: var(--ink); }
.s4k-agr-text a { color: var(--accent); font-weight: 600; text-decoration: underline; }

/* ---------- Sipariş detayları (katlanır) ---------- */
.s4k-detacc {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
.s4k-detacc-sum {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 16px;
    font-size: .9rem; font-weight: 700; color: var(--ink);
    cursor: pointer; list-style: none;
}
.s4k-detacc-sum::-webkit-details-marker { display: none; }
.s4k-detacc-sum > i:first-child { color: var(--accent); font-size: 1.05rem; }
.s4k-detacc-chev { margin-left: auto; color: var(--muted); transition: transform .22s; }
.s4k-detacc[open] .s4k-detacc-chev { transform: rotate(180deg); }
.s4k-detacc-body {
    display: flex; flex-direction: column; gap: 0;
    padding: 0 16px 16px;
}
.s4k-det { border-top: 1px solid var(--line); padding: 16px 0; }
.s4k-det:first-child { border-top: none; padding-top: 4px; }
.s4k-det:last-child { padding-bottom: 0; }
/* Bölüm başlığı bir etikettir; asıl bilgi değerlerdedir, bu yüzden sessiz durur. */
.s4k-det-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px;
}
.s4k-det-ico {
    flex: 0 0 auto; width: 20px; height: 20px;
    display: grid; place-items: center;
    background: none; color: var(--accent); font-size: .82rem;
}
.s4k-det-head strong {
    font-size: .7rem; line-height: 16px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--muted);
}
.s4k-det-grid { display: grid; gap: 12px 20px; margin-bottom: 0; }

/* ---------- iyzico altyapı + trust + not ---------- */
.s4k-infra {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 8px;
    font-size: .82rem; color: var(--muted);
    padding: 4px 0;
}
.s4k-infra-amx { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: .95rem; }
.s4k-infra-iyz img { height: 17px; width: auto; display: block; vertical-align: middle; }
.s4k-trust {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 8px;
}
.s4k-trust span {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .72rem; font-weight: 600; color: var(--muted);
    background: #fff; border: 1px solid var(--line);
    padding: 5px 11px; border-radius: 999px;
}
.s4k-trust i { color: #0f7a3d; }
.s4k-note {
    display: flex; align-items: flex-start; gap: 7px;
    font-size: .76rem; line-height: 1.5; color: var(--muted);
    text-align: center; justify-content: center;
    margin: 0;
}
.s4k-note i { color: var(--accent-2); margin-top: 2px; }

/* ---------- SABİT ÖDEME TABANI (masaüstü + mobil) ---------- */
.s4k-paybar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 30px rgba(20,20,40,.10);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}
.s4k-paybar-inner {
    max-width: 600px; margin: 0 auto;
    display: flex; align-items: center; gap: 14px;
}
.s4k-paybar-info { display: flex; flex-direction: column; line-height: 1.15; flex: 0 0 auto; }
.s4k-paybar-label { font-size: .7rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.s4k-paybar-kdv { font-size: .68rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.s4k-paybar-total { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.s4k-paybar-btn {
    flex: 1 1 auto;
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 11px;
    white-space: nowrap;
    padding: 15px 20px;
    background: var(--accent-grad);
    border: none; border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(239,35,60,.32);
    transition: transform .12s, box-shadow .2s, opacity .2s, filter .2s;
    position: relative; overflow: hidden;
}
/* üstten hafif parlama */
.s4k-paybar-btn::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
    pointer-events: none;
}
.s4k-paybar-btn:hover { box-shadow: 0 12px 30px rgba(239,35,60,.45); transform: translateY(-1px); }
.s4k-paybar-btn:active { transform: scale(.98); }
.s4k-paybar-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; filter: grayscale(.35); transform: none; }
.s4k-paybar-btn.is-loading { opacity: .7; pointer-events: none; }
.s4k-paybar-btn-lock { font-size: 1rem; color: #fff; flex: 0 0 auto; }
.s4k-paybar-btn-text {
    font-family: var(--font-display); font-size: 1.08rem; font-weight: 800; color: #fff;
    letter-spacing: .01em;
}
/* iyzico — ayraçla sağda, "iyzico güvencesi" hissi */
.s4k-paybar-btn-iyz {
    flex: 0 0 auto;
    display: inline-flex; align-items: center;
    margin-left: 4px; padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,.38);
}
.s4k-paybar-btn-iyz img { height: 22px; width: auto; display: block; }
.s4k-paybar-lock {
    max-width: 600px; margin: 7px auto 0;
    text-align: center; font-size: .74rem; color: var(--muted);
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.s4k-paybar-lock i { color: var(--accent-2); }
/* Sözleşme onaylanıp buton aktifleşince kilit notu gizlenir */
.s4k-paybar:has(.s4k-paybar-btn:not(:disabled)) .s4k-paybar-lock { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    #step-4 .s4k { gap: 12px; padding-bottom: 96px; }
    .s4k-hero { padding: 12px 14px; gap: 11px; }
    .s4k-hero-icon { width: 40px; height: 40px; font-size: 1.1rem; }
    .s4k-hero-title { font-size: 1rem; }
    .s4k-hero-pill { font-size: .66rem; padding: 4px 8px; }
    .s4k-bundle-body { padding: 12px 13px; }
    .s4k-bundle-desc { font-size: .78rem; }
    .s4k-bundle-title-sub { font-size: .76rem; }
    .s4k-price { padding: 14px 15px; }
    .s4k-price-total strong { font-size: 1.35rem; }

    /* Ödeme barı: TEK SATIR — kilit notu + uzun label gizli, tutar + buton yan yana */
    .s4k-paybar { padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px)); }
    .s4k-paybar-lock { display: none !important; }
    .s4k-paybar-label { display: none; }
    .s4k-paybar-inner { gap: 10px; align-items: center; }
    .s4k-paybar-info { flex: 0 0 auto; }
    .s4k-paybar-total { font-size: 1.28rem; line-height: 1.1; }
    .s4k-paybar-btn { padding: 13px 12px; gap: 8px; }
    .s4k-paybar-btn-lock { font-size: .9rem; }
    .s4k-paybar-btn-text { font-size: 1rem; }
    .s4k-paybar-btn-iyz { margin-left: 0; padding-left: 9px; }
    .s4k-paybar-btn-iyz img { height: 18px; }
}
/* Çok dar ekranda iyzico logosunu gizle, "Güvenli Öde" kalsın (tek satır korunur) */
@media (max-width: 340px) {
    .s4k-paybar-btn-iyz { display: none; }
}

/* ============================================================
   Video hakkı ile ücretsiz oluşturma (3'lü paket sahibi)
   ============================================================ */
.s4k-credit {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: linear-gradient(135deg, rgba(27,135,63,.07), rgba(27,135,63,.02));
    border: 1px solid rgba(27,135,63,.28);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.s4k-credit:hover { border-color: rgba(27,135,63,.5); }
.s4k-credit input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.s4k-credit-box {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 1px;
    border: 2px solid #1B873F;
    border-radius: 7px;
    display: grid;
    place-items: center;
    color: #fff;
    transition: background .2s;
}
.s4k-credit-box i { opacity: 0; font-size: .9rem; }
.s4k-credit input:checked + .s4k-credit-box { background: #1B873F; }
.s4k-credit input:checked + .s4k-credit-box i { opacity: 1; }
.s4k-credit-text { display: flex; flex-direction: column; gap: 3px; font-size: .9rem; line-height: 1.4; color: var(--ink-soft); }
.s4k-credit-text strong { font-size: .98rem; color: #15803D; display: inline-flex; align-items: center; gap: 7px; }
.s4k-credit-text b { color: #15803D; }
body.use-credit .s4k-credit {
    border-color: #1B873F;
    background: linear-gradient(135deg, rgba(27,135,63,.13), rgba(27,135,63,.04));
}