/* MJF Studio ticari site — app.css
 *
 * design/site/handoff-2026-09-14/README.md'nin kod karşılığı (design handoff, hifi).
 * Sınıf adları korundu; eklenenler "YENİ" ile işaretli.
 *
 * İki kural:
 *   1. --icon metinde kullanılmaz — yalnızca ikon, kenarlık, pasif nokta.
 *   2. --navy yalnızca iki yerde: marka işareti karesi ve .band-trust.
 */

:root {
    color-scheme: light;

    /* ---- nötr ---- */
    --ground: #EEF1F5;        /* sayfa zemini */
    --surface: #FFFFFF;       /* kart, panel, dönüşümlü bölüm */
    --sunken: #F9FAFC;        /* panel/tablo başlığı, kilitli alan */
    --line: #E1E5EA;          /* kart kenarlığı */
    --line-soft: #EEF0F3;     /* satır ayracı */
    --rule: #D6DBE3;          /* açık gri zemin üzerinde bölüm çizgisi */
    --field: #D3D8DF;         /* input ve ikincil düğme kenarlığı */
    --frame: #C3CAD3;         /* dış çerçeve, ekran taklidi kenarlığı */

    --ink: #0F1725;           /* başlık, birincil metin */
    --ink2: #344054;          /* menü, etiket, kart içi gövde */
    --dim: #475467;           /* gövde, .lead */
    --faint: #5C6675;         /* ikincil metin, alt not */
    --muted: #667085;         /* mono meta, mikro etiket */
    --icon: #98A2B3;          /* YALNIZCA ikon ve kenarlık */

    /* ---- işlevsel ---- */
    --accent: #1B5FCB;
    --accent-deep: #154BA0;
    --accent-row: #F5F9FF;
    --accent-soft: #EBF1FC;
    --accent-line: #C9DCF6;
    --accent-line-2: #D6E3F7;
    --accent-ring: #E5EEFB;

    --ok: #067647;
    --ok-soft: #E7F6EE;
    --ok-line: #CFE9DC;
    --ok-deep: #0A5236;       /* yeşil zemin üzerinde metin */

    --amber: #B54708;
    --amber-soft: #FDF3E7;
    --amber-line: #F2E3CC;

    --bad: #B42318;
    --bad-soft: #FDECEA;
    --bad-line: #F6D6D2;

    --navy: #111C33;
    --navy-dim: #A9BAD6;      /* koyu zeminde eyebrow */
    --navy-body: #C4D2E8;     /* koyu zeminde gövde */

    /* ---- ölçü ---- */
    --r: 8px;                 /* kart, panel */
    --rs: 6px;                /* düğme, input, rozet-kutu */
    --rb: 4px;                /* mikro etiket */

    --sh-card: 0 1px 2px rgba(15, 23, 37, .05);
    --sh-btn: 0 1px 2px rgba(15, 23, 37, .16);
    --sh-hi: 0 4px 16px rgba(27, 95, 203, .09);
    --sh-shot: 0 10px 28px rgba(15, 23, 37, .10);

    --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, h4, p { margin: 0; }

/* ═══════════════════════════════ tipografi ═══════════════════════════════ */

h1 { font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
h1.hero-title { font-size: 46px; letter-spacing: -.032em; max-width: 19ch; }     /* YENİ */
h1.form-title { font-size: 36px; letter-spacing: -.028em; line-height: 1.12; }   /* YENİ */

h2 { font-size: 31px; font-weight: 600; letter-spacing: -.026em; line-height: 1.18; text-wrap: pretty; }
h2.sub { font-size: 22px; letter-spacing: -.018em; }                             /* YENİ */
h2.sub-sm { font-size: 19px; letter-spacing: -.016em; }                          /* YENİ */

h3 { font-size: 17px; font-weight: 600; letter-spacing: -.014em; }
h3.lg { font-size: 20px; letter-spacing: -.018em; }                              /* YENİ */
h3.sm { font-size: 16px; letter-spacing: -.012em; }                              /* YENİ */

.lead { font-size: 17px; line-height: 1.62; color: var(--dim); max-width: 64ch; text-wrap: pretty; }
.dim { color: var(--dim); }
.faint { color: var(--faint); }                                                  /* YENİ */
.mono { font-family: var(--mono); }

.eyebrow {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--accent);
}

/* Sayı içeren her hücre */
.num { font-variant-numeric: tabular-nums; }                                     /* YENİ */

/* ═══════════════════════════════ yerleşim ════════════════════════════════ */

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 560px; }

section { padding: 72px 0; }
section.alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.sec-head { max-width: 760px; margin-bottom: 38px; }
.sec-head h2 { margin: 12px 0 12px; }

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }  /* YENİ */

/* İçerik + yan panel. Form sayfalarında 400px, /satin-al'da 420px. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 52px; align-items: start; }      /* YENİ */
.split.wide-aside { grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; }                              /* YENİ */
.aside { display: flex; flex-direction: column; gap: 16px; }                                               /* YENİ */

/* Üstten çizgili madde ızgarası — ana sayfa güven bölümü, modül detayı */
.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 44px; }                /* YENİ */
.rules > div { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--rule); }
.rules h3 { font-size: 16.5px; letter-spacing: -.012em; }
.rules p { font-size: 14.5px; line-height: 1.62; color: var(--dim); }

@media (max-width: 980px) {
    .split, .split.wide-aside { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .rules { grid-template-columns: minmax(0, 1fr); }
    .grid3, .grid4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    h1.hero-title { font-size: 36px; }
    section { padding: 56px 0; }
}

/* ═══════════════════════════════ üst çubuk ═══════════════════════════════ */

.top { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.nav { display: flex; align-items: center; gap: 30px; height: 64px; }

.brand { display: flex; align-items: center; gap: 10px; font-size: 16.5px; font-weight: 600; letter-spacing: -.012em; color: var(--ink); }
.brand:hover { text-decoration: none; }

/* Marka işareti: lacivert kare + nabız çizgisi (SVG işaretlemede) */
.brand .mark {
    flex: none; width: 24px; height: 24px; border-radius: var(--rs);
    background: var(--navy);
    display: flex; align-items: center; justify-content: center;
}
.brand .mark svg { stroke: #FFFFFF; stroke-width: 2.8; }

.nav nav { display: flex; gap: 24px; }
.nav nav a { font-size: 14.5px; color: var(--ink2); }
.nav nav a.on { font-weight: 500; color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); padding-bottom: 2px; }  /* YENİ */
.nav .right { margin-left: auto; display: flex; align-items: center; gap: 16px; }                                      /* YENİ */
.nav .right > a:not(.btn) { font-size: 14.5px; color: var(--ink2); }
.nav .btn { height: 38px; padding: 0 17px; font-size: 14px; }

/* Satın alma akışı adım göstergesi — YENİ */
.steps { margin-left: auto; display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; }
.steps .now { color: var(--ink); }
.steps .next { color: var(--icon); }
.steps .done { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); }
.steps .bar { width: 26px; height: 1px; background: var(--frame); }

@media (max-width: 780px) { .nav nav, .steps { display: none; } }

/* ═══════════════════════════════ düğmeler ════════════════════════════════ */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    height: 44px; padding: 0 22px;
    border: 1px solid var(--field); border-radius: var(--rs);
    background: var(--surface); color: var(--ink2);
    font: inherit; font-size: 15px; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--sunken); color: var(--ink); text-decoration: none; }

.btn.primary { background: var(--accent); border-color: var(--accent); color: #FFF; font-weight: 500; box-shadow: var(--sh-btn); }
.btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #FFF; }

.btn.big { height: 50px; padding: 0 26px; font-size: 16px; }
.btn.full { width: 100%; }                                                       /* YENİ */

.btn:disabled { border-color: var(--line); background: var(--sunken); color: var(--muted); cursor: default; box-shadow: none; }

/* ════════════════════════════ kart ve rozet ══════════════════════════════ */

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-card); }
.card.pad { padding: 22px; }                                                     /* YENİ */
.card.hi { background: var(--accent-row); border-color: var(--accent-line); box-shadow: var(--sh-hi); }   /* YENİ */
.card.dashed { border-style: dashed; border-color: var(--frame); box-shadow: none; }                      /* YENİ */

/* Numaralı ikon kutusu — platform kartları, iletişim kartları */
.ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--rs);
    background: var(--accent-soft); color: var(--accent);
    font-family: var(--mono); font-size: 12px; font-weight: 500;
}

.pill { display: inline-flex; align-items: center; gap: 7px; height: 22px; padding: 0 10px 0 8px; border-radius: 11px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.pill::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.on { background: var(--ok-soft); border: 1px solid var(--ok-line); color: var(--ok); }
.pill.off { background: var(--sunken); border: 1px solid var(--line); color: var(--faint); }
.pill.off::before { background: none; border: 1.5px solid var(--icon); }
.pill.warn { background: var(--amber-soft); border: 1px solid var(--amber-line); color: var(--amber); }
.pill.bad { background: var(--bad-soft); border: 1px solid var(--bad-line); color: var(--bad); }

/* Noktasız küçük etiket — Premium işareti, işlem tipi */
.tag { display: inline-flex; align-items: center; height: 21px; padding: 0 9px; border-radius: 11px; font-size: 11px; font-weight: 500; }  /* YENİ */
.tag.blue { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.bad { background: var(--bad-soft); color: var(--bad); }

/* Mono çip — modül yetenek listesi */
.chip { font-family: var(--mono); font-size: 11.5px; color: var(--ink2); background: var(--surface); border: 1px solid var(--accent-line-2); border-radius: var(--rb); padding: 3px 8px; }  /* YENİ */

/* ═════════════════════════════ bilgi bantları ════════════════════════════ */

.note { padding: 14px 18px; border-radius: var(--rs); font-size: 14px; line-height: 1.6; }
.note.info { background: var(--accent-row); border: 1px solid var(--accent-line); border-left: 3px solid var(--accent); color: var(--ink2); }
.note.ok { background: var(--ok-soft); border: 1px solid var(--ok-line); color: var(--ok-deep); }
.note.warn { background: var(--amber-soft); border: 1px solid var(--amber-line); border-left: 3px solid var(--amber); color: var(--amber); }
.note.bad { background: var(--bad-soft); border: 1px solid var(--bad-line); border-left: 3px solid var(--bad); color: #8E2318; }
.note svg { flex: none; }
.note.icon { display: flex; align-items: flex-start; gap: 12px; }                /* YENİ */

/* ═══════════════════════════════ kahraman ════════════════════════════════ */

.hero { background: var(--surface); border-bottom: 1px solid var(--line); padding: 76px 0 80px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 52px; align-items: center; }
.hero h1 { margin: 16px 0 18px; }
.hero .lead { max-width: 52ch; }
.hero .cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero .facts { display: flex; gap: 16px; margin-top: 26px; font-size: 13.5px; color: var(--faint); flex-wrap: wrap; }
.hero .facts .sep { color: var(--frame); }

@media (max-width: 980px) {
    .hero { padding: 56px 0 60px; }
    .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* ════════════════════════════ ekran taklidi ══════════════════════════════
 * ÖRTÜŞME GEOMETRİSİ — DİKKAT
 * .stop opak beyaz ve .shot'ın üstüne biniyor. .shot'ın SON satırında
 * padding-bottom:46px var; bu boşluk örtüşmenin metne binmesini engelliyor.
 * İki değer birlikte çalışır — birini değiştirirken diğerini de ölçün.
 * Tek kolonda (≤980px) örtüşme kaldırılır.
 * ───────────────────────────────────────────────────────────────────────── */

.shot { border: 1px solid var(--frame); border-radius: var(--r); overflow: hidden; background: var(--surface); box-shadow: var(--sh-shot); font-size: 13.5px; }
.shot .bar { height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 14px; background: var(--sunken); border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 500; }
.shot .bar .mono { margin-left: auto; font-size: 11px; color: var(--muted); }
.shot .row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 92px; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); }
.shot .row .alt { display: block; margin-top: 2px; font-size: 11.5px; color: var(--faint); }
.shot .row .val { text-align: right; font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.shot .row:last-child { border-bottom: 0; padding-bottom: 46px; }   /* .stop için boşluk */

.stop { position: relative; width: 80%; margin: -30px 0 0 auto; background: var(--surface); border: 1px solid var(--frame); border-left: 3px solid var(--bad); border-radius: var(--r); overflow: hidden; box-shadow: 0 12px 32px rgba(15, 23, 37, .14); }
.stop .bar { height: 32px; display: flex; align-items: center; padding: 0 13px; background: var(--sunken); border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 500; }
.stop .body { display: flex; gap: 12px; padding: 14px; }
.stop .x { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--bad-soft); border: 1px solid var(--bad-line); color: var(--bad); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; }
.stop strong { font-size: 13.5px; font-weight: 600; }
.stop p { font-size: 12.5px; line-height: 1.5; color: var(--dim); }

@media (max-width: 980px) {
    .shot .row:last-child { padding-bottom: 11px; }
    .stop { width: 100%; margin: 16px 0 0; }
}

/* ═════════════════════════════ adım kartları ═════════════════════════════ */

.step { display: flex; flex-direction: column; overflow: hidden; }
.step .head { padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 9px; }
.step .n { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--accent); }
.step p { font-size: 14.5px; line-height: 1.6; color: var(--dim); }
.step .box { margin-top: auto; padding: 15px 22px; background: var(--sunken); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }
.step .box .k { font-size: 11.5px; color: var(--muted); }
.step .box .mono { font-size: 12.5px; color: var(--ink); }

/* ════════════════════════════ modül listesi ══════════════════════════════
 * Yayında olmayan modül "yakında/geliyor" DEMEZ — .pill.off "Yayında değil".
 * ───────────────────────────────────────────────────────────────────────── */

.modules { display: flex; flex-direction: column; gap: 12px; }                   /* YENİ */
.module-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 24px; align-items: center; padding: 19px 26px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.module-row h3 { color: var(--ink2); }
.module-row p { font-size: 14.5px; line-height: 1.6; color: var(--faint); max-width: 80ch; }
.module-row .title { display: flex; align-items: center; gap: 12px; }

.module-row.live { padding: 24px 26px; background: var(--accent-row); border-color: var(--accent-line); }
.module-row.live h3 { font-size: 20px; letter-spacing: -.018em; color: var(--ink); }
.module-row.live p { color: var(--dim); max-width: 78ch; }
.module-row.live .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px; }
.module-row .actions { display: flex; flex-direction: column; gap: 9px; }
.module-row .actions a.link { text-align: center; font-size: 13.5px; }

@media (max-width: 720px) {
    .module-row, .module-row.live { grid-template-columns: minmax(0, 1fr); }
}

/* ═════════════════════════════ güven bölümü ══════════════════════════════
 * Sitedeki TEK koyu blok. Başka sayfada koyu zemin kullanılmaz.
 * ───────────────────────────────────────────────────────────────────────── */

.band-trust { background: var(--navy); padding: 72px 0; }                        /* YENİ */
.band-trust .eyebrow { color: var(--navy-dim); }
.band-trust h2 { color: #FFFFFF; }
.band-trust .rules > div { border-top-color: rgba(255, 255, 255, .16); }
.band-trust .rules h3 { color: #FFFFFF; }
.band-trust .rules p { color: var(--navy-body); }

/* CTA bandı — YENİ */
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-band .btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ═════════════════════════════ fiyatlandırma ═════════════════════════════ */

.module-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 13px; margin-bottom: 20px; border-bottom: 1px solid var(--rule); }
.module-head h2 { font-size: 22px; letter-spacing: -.018em; }
.module-head .tail { margin-left: auto; font-size: 13.5px; color: var(--faint); }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.plan { position: relative; padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.plan h3 { font-size: 18px; letter-spacing: -.014em; }
.plan .sub { font-size: 13.5px; line-height: 1.55; color: var(--faint); }
.plan .price { font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.plan .vat { font-size: 13px; color: var(--faint); }
.plan ul { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 9px; }
.plan li { display: flex; gap: 9px; font-size: 14px; line-height: 1.5; color: var(--ink2); }
.plan li::before { content: "✓"; flex: none; color: var(--ok); font-weight: 600; }
.plan li.no { color: var(--faint); }
.plan li.no::before { content: "—"; color: var(--icon); font-weight: 400; }
.plan .btn { margin-top: auto; }

.plan.hi { background: var(--accent-row); border-color: var(--accent-line); box-shadow: var(--sh-hi); }
.plan.hi .sub, .plan.hi .vat { color: var(--dim); }
.plan.hi ul { border-top-color: var(--accent-line-2); }
.plan.hi li { color: var(--ink); }
.plan.hi .flag { position: absolute; top: -10px; left: 26px; display: inline-flex; align-items: center; height: 20px; padding: 0 10px; border-radius: 10px; background: var(--accent); color: #FFF; font-size: 11px; font-weight: 500; }

@media (max-width: 900px) { .plans { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }

/* SSS — iki kolon */
.faq { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: start; }   /* YENİ */
.faq h2 { font-size: 22px; letter-spacing: -.018em; }
.faq .items { display: flex; flex-direction: column; }
.faq .item { display: flex; flex-direction: column; gap: 7px; padding: 16px 0; border-top: 1px solid var(--rule); }
.faq .item:last-child { border-bottom: 1px solid var(--rule); }
.faq h3 { font-size: 15.5px; letter-spacing: 0; }
.faq p { font-size: 14.5px; line-height: 1.62; color: var(--dim); }

@media (max-width: 780px) { .faq { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* ═══════════════════════ hazır kontroller kataloğu ═══════════════════════ */

.catalog { overflow: hidden; }                                                   /* YENİ */
.catalog .group { display: flex; align-items: baseline; gap: 12px; padding: 13px 22px; background: var(--sunken); border-bottom: 1px solid var(--line); }
.catalog .group h2 { font-size: 16px; letter-spacing: -.014em; }
.catalog .group .mono { font-size: 11.5px; color: var(--muted); }
.catalog .group .count { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.catalog .row { display: grid; grid-template-columns: minmax(0, 1fr) 200px 96px; gap: 20px; align-items: baseline; padding: 12px 22px; border-bottom: 1px solid var(--line-soft); }
.catalog .row:last-child { border-bottom: 0; }
.catalog .row .name { font-size: 14.5px; color: var(--ink); }
.catalog .row .ops { font-size: 13px; color: var(--faint); }
.catalog .row .tag { justify-self: end; }

@media (max-width: 720px) {
    .catalog .row { grid-template-columns: minmax(0, 1fr) 96px; }
    .catalog .row .ops { grid-column: 1; }
}

/* ══════════════════════════════ kurulum ══════════════════════════════════ */

.numsteps { display: flex; flex-direction: column; }                             /* YENİ */
.numsteps .item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start; padding: 15px 0; border-top: 1px solid var(--rule); }
.numsteps .item:last-child { border-bottom: 1px solid var(--rule); }
.numsteps .n { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.numsteps p { font-size: 15px; line-height: 1.6; color: var(--dim); }

/* Etiket/değer listesi — gereksinimler kartı, şirket bilgileri */
.kv { display: flex; flex-direction: column; gap: 12px; }
.kv .pair { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.kv .pair:first-child { padding-top: 0; border-top: 0; }
.kv .k { font-size: 12.5px; color: var(--muted); }
.kv .v { font-size: 14px; line-height: 1.5; color: var(--ink); }

/* Yatay tablo — ödeme bilgileri */
.kv-table { display: flex; flex-direction: column; }                             /* YENİ */
.kv-table .pair { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 12px 0; border-top: 1px solid var(--rule); }
.kv-table .pair:last-child { border-bottom: 1px solid var(--rule); }
.kv-table .k { font-size: 13.5px; color: var(--faint); }
.kv-table .v { font-size: 14.5px; color: var(--ink); }

/* ═══════════════════════════════ formlar ═════════════════════════════════ */

.form { display: flex; flex-direction: column; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13.5px; font-weight: 500; color: var(--ink2); }
.field label .opt { font-weight: 400; color: var(--faint); }
.field .hint { font-size: 12.5px; color: var(--faint); }

.field input, .field textarea, .field select {
    height: 44px; padding: 0 13px;
    border: 1px solid var(--field); border-radius: var(--rs);
    background: var(--surface); color: var(--ink);
    font: inherit; font-size: 15px;
}
.field textarea { height: auto; min-height: 64px; padding: 11px 13px; line-height: 1.5; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input.mono { font-family: var(--mono); font-size: 14.5px; }

/* /satin-al adım 1'de tek alan daha büyük */
.field.lg input { height: 48px; padding: 0 14px; font-size: 15.5px; }            /* YENİ */

.fieldset { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-card); display: flex; flex-direction: column; gap: 16px; }
.fieldset h3 { font-size: 16px; letter-spacing: -.012em; }
.fieldset .hint { font-size: 13px; line-height: 1.6; color: var(--faint); }
.fieldset .sub { padding-top: 16px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 9px; }  /* YENİ */

.check { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; line-height: 1.55; color: var(--ink2); }
.check input { flex: none; margin-top: 2px; width: 17px; height: 17px; accent-color: var(--accent); }

/* Radio kartları — paket ve ödeme yöntemi seçimi */
.choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.choice label { padding: 14px; background: var(--surface); border: 1px solid var(--field); border-radius: var(--rs); display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.choice input { flex: none; margin-top: 1px; width: 16px; height: 16px; accent-color: var(--accent); }
.choice .t { display: block; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.choice .d { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--faint); }
.choice label:has(input:checked) { background: var(--accent-row); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.choice label:has(input:checked) .d { color: var(--dim); }
.choice.one { grid-template-columns: minmax(0, 1fr); }                           /* YENİ — ödeme yöntemi */

@media (max-width: 720px) { .choice { grid-template-columns: minmax(0, 1fr); } }

/* Kilitli alan — modül, bağlantıdan gelir ve değiştirilemez */
.locked { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--rs); }  /* YENİ */
.locked .name { font-size: 15px; font-weight: 600; color: var(--ink); }
.locked .desc { font-size: 13.5px; color: var(--faint); }
.locked svg { margin-left: auto; flex: none; stroke: var(--icon); }

/* Doğrulanmış e-posta bandı */
.verified { align-self: flex-start; display: flex; align-items: center; gap: 9px; padding: 9px 14px; background: var(--ok-soft); border: 1px solid var(--ok-line); border-radius: var(--rs); font-size: 14px; color: var(--ok-deep); }  /* YENİ */
.verified .ck { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: var(--ok); color: #FFF; }
.verified .mono { font-size: 13.5px; font-weight: 500; }

/* ═══════════════════════════ sipariş sonucu ══════════════════════════════ */

.done-mark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ok-soft); border: 1px solid var(--ok-line); color: var(--ok); margin-bottom: 22px; }  /* YENİ */

.order-no {
    padding: 24px 26px; margin-bottom: 26px;
    background: var(--accent-row); border: 1px solid var(--accent-line); border-radius: var(--r);
    display: flex; flex-direction: column; gap: 7px;
}
.order-no .k { font-size: 13px; color: var(--dim); }
.order-no .v { font-family: var(--mono); font-size: 38px; font-weight: 500; letter-spacing: .02em; line-height: 1.1; color: var(--ink); }
.order-no .hint { font-size: 12.5px; color: var(--faint); }

/* Sipariş durumu — dikey adım listesi */
.track { display: flex; flex-direction: column; gap: 11px; }                     /* YENİ */
.track .item { display: flex; gap: 11px; align-items: flex-start; }
.track .dot { flex: none; margin-top: 5px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--icon); }
.track .dot.on { background: var(--ok); border-color: var(--ok); }
.track .t { display: block; font-size: 13.5px; color: var(--dim); }
.track .item.on .t { color: var(--ink); }
.track .d { display: block; font-size: 12.5px; color: var(--faint); }
.track .foot { margin-top: 4px; padding-top: 11px; border-top: 1px solid var(--line-soft); font-size: 12.5px; line-height: 1.55; color: var(--faint); }

/* Toplam satırları */
.totals { display: flex; flex-direction: column; gap: 9px; padding-top: 14px; border-top: 1px solid var(--line-soft); }  /* YENİ */
.totals .r { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; }
.totals .r .k { color: var(--faint); }
.totals .r .v { color: var(--ink); font-variant-numeric: tabular-nums; }
.totals .r.sum { padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 15px; font-weight: 600; }
.totals .r.sum .k, .totals .r.sum .v { color: var(--ink); }

/* ═══════════════════════════════ breadcrumb ══════════════════════════════ */

.crumb { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; }  /* YENİ */
.crumb .sep { color: var(--frame); }
.crumb .now { color: var(--muted); }

/* Kural kartı — modül detay sayfası (YENİ) */
.rulecard .body { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.rulecard .sentence { font-size: 16px; line-height: 1.6; color: var(--ink2); }
.rulecard .sentence b { color: var(--ink); }
.rulecard .msg { padding: 12px 14px; border-left: 3px solid var(--bad); background: var(--sunken); font-size: 14px; line-height: 1.55; color: var(--ink2); }
.rulecard .foot { display: flex; align-items: center; gap: 10px; padding: 12px 22px; background: var(--sunken); border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }

/* ═══════════════════════════════ prose ═══════════════════════════════════ */

.page { padding: 56px 0 72px; }
.page h1 { margin: 12px 0 10px; }

.prose { max-width: 720px; }
.prose h2 { font-size: 22px; letter-spacing: -.018em; margin: 32px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 15px; line-height: 1.68; color: var(--dim); margin-bottom: 12px; }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 22px; color: var(--dim); font-size: 15px; line-height: 1.68; }
.prose li { margin-bottom: 6px; }
.prose b { color: var(--ink); }

/* ═══════════════════════════════ alt bilgi ═══════════════════════════════ */

.foot { background: var(--ground); padding: 44px 0 30px; }
.foot .cols { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot .cols > div { display: flex; flex-direction: column; gap: 9px; }
.foot strong { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.foot .head { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.foot p { font-size: 13.5px; line-height: 1.65; color: var(--faint); max-width: 36ch; }
.foot a { font-size: 13.5px; color: var(--dim); }
.foot .brand-row { display: flex; align-items: center; gap: 9px; }
.foot .brand-row .mark { flex: none; width: 20px; height: 20px; border-radius: 5px; background: var(--navy); display: flex; align-items: center; justify-content: center; }
.foot .brand-row .mark svg { stroke: #FFFFFF; stroke-width: 2.8; }
.foot .legal { margin: 30px 0 0; padding-top: 18px; border-top: 1px solid #DDE2E8; font-size: 12.5px; line-height: 1.7; color: var(--faint); max-width: none; }

/* Ödeme rozetleri — iyzico üyelik şartı; resmî logo paketi gelince img ile değişir */
.paylogos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.paylogo { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--rs); background: var(--surface); font-size: 12px; color: var(--ink2); font-weight: 500; }
.paylogo.visa { font-family: Georgia, serif; font-style: italic; font-weight: 700; color: #1A1F71; letter-spacing: .04em; }
.paylogo.mc i { display: inline-block; width: 13px; height: 13px; border-radius: 50%; background: #EB001B; }
.paylogo.mc i + i { background: #F79E1B; margin-left: -6px; opacity: .9; }
.paylogo.iyz { color: #1E64FF; font-weight: 700; }
.paylogo.ssl { color: var(--ok); }

@media (max-width: 780px) { .foot .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ═══════════════════════════════ yazdırma ════════════════════════════════ */

@media print {
    .top, .foot, .cta, .btn { display: none; }
    body { background: #FFF; }
    .band-trust { background: #FFF; }
    .band-trust h2, .band-trust .rules h3 { color: #000; }
    .band-trust .rules p, .band-trust .eyebrow { color: #333; }
}

/* Menü açılır listesi — JS yok, hover/focus ile (YENİ). Kayıt Denetimi altında modül sayfaları. */
.nav .menu { position: relative; display: inline-flex; align-items: center; }
.nav .menu > a { display: inline-flex; align-items: center; gap: 5px; }
.nav .menu > a svg { stroke: var(--icon); }
.nav .drop { display: none; position: absolute; top: 100%; left: -14px; margin-top: 14px; min-width: 260px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 8px 24px rgba(15, 23, 37, .09); z-index: 6; }
.nav .drop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* boşluk köprüsü */
.nav .menu:hover .drop, .nav .menu:focus-within .drop { display: flex; flex-direction: column; gap: 2px; }
.nav .drop a { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: var(--rs); font-size: 14px; color: var(--ink); }
.nav .drop a:hover { background: var(--sunken); text-decoration: none; }
.nav .drop a b { font-weight: 500; }
.nav .drop a span { font-size: 12.5px; color: var(--faint); }