/* ==========================================================================
   HCTech V2 — Dijital Kart
   1) Müşteri ekranları (site.css değişkenleriyle): giriş, düzenleyici, pano
   2) Herkese açık kart sayfası (_KartLayout; site.css yüklenmez, kendi değişkenleri var)
   ========================================================================== */

/* ── 1) Müşteri ekranları ───────────────────────────────────────────── */
.kart-shell { padding: var(--s5) 0 var(--s7); background: var(--surface); min-height: 70vh; }
.kart-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.kart-topbar h1 { font-size: clamp(26px, 3vw, 36px); margin: 0; }
.kart-topbar .who { color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: var(--s2); }
.kart-topbar .who form { margin: 0; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--brand-ink); font-weight: 600; cursor: pointer; }
.link-btn:hover { color: var(--brand); }
.link-btn.danger { color: var(--danger); }

.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3); box-shadow: var(--shadow-1); }
.panel + .panel { margin-top: var(--s3); }
.panel h2 { font-size: 20px; margin-bottom: var(--s1); }
.panel .sub { color: var(--muted); font-size: 14px; margin-bottom: var(--s2); }

/* Giriş */
.login-card { max-width: 460px; margin: 0 auto; text-align: center; }
.login-card .mini-card { width: 100%; max-width: 320px; margin: 0 auto var(--s3); }
.btn-google { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 52px; border-radius: 12px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-weight: 700; font-size: 16px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.btn-google:hover { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-glow); color: var(--ink); }
.btn-google svg { width: 20px; height: 20px; }
.login-note { font-size: 13px; color: var(--muted); margin-top: var(--s2); }

/* Düzenleyici: adımlar + canlı önizleme */
.editor { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 992px) { .editor { grid-template-columns: minmax(0, 1fr) 360px; } .editor-preview { position: sticky; top: 96px; } }
.stepper { display: flex; gap: var(--s1); overflow-x: auto; margin-bottom: var(--s3); scrollbar-width: none; }
.stepper::-webkit-scrollbar { display: none; }
.stepper button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 var(--s2); border-radius: 999px; border: 1px solid var(--line); background: var(--white); font: inherit; font-weight: 700; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.stepper button .n { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.stepper button.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.stepper button.active .n { background: var(--accent); color: #2b1a00; }
.stepper button.has-error { border-color: var(--danger); }
.step-pane { display: none; }
.step-pane.active { display: block; }
.js-off .step-pane { display: block; margin-bottom: var(--s3); }
.step-nav { display: flex; justify-content: space-between; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; }
.field { margin-bottom: var(--s2); }
.field label { font-weight: 600; color: var(--ink); font-size: 14px; margin-bottom: 6px; display: block; }
.field .opt { font-weight: 400; color: var(--muted); }
.field textarea.form-control { min-height: 96px; }
.input-prefix { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--white); }
.input-prefix span { display: inline-flex; align-items: center; padding: 0 12px; background: var(--surface); color: var(--muted); font-size: 14px; border-right: 1px solid var(--line); white-space: nowrap; }
.input-prefix .form-control { border: 0; border-radius: 0; }
.input-prefix:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-glow); }
.slug-state { font-size: 13px; margin-top: 4px; min-height: 18px; }
.slug-state.ok { color: #0f7a5c; }
.slug-state.bad { color: var(--danger); }

.photo-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.photo-row .avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--muted); font-size: 26px; flex: 0 0 auto; }
.photo-row .avatar img { width: 100%; height: 100%; object-fit: cover; }

.link-rows { display: grid; gap: var(--s1); }
.link-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 44px; gap: var(--s1); align-items: start; }
@media (max-width: 575px) { .link-row { grid-template-columns: minmax(0, 1fr) 44px; } .link-row .form-select { grid-column: 1 / -1; } }
.icon-btn { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--white); color: var(--muted); cursor: pointer; }
.icon-btn:hover { border-color: var(--danger); color: var(--danger); }

.theme-swatches { display: flex; flex-wrap: wrap; gap: var(--s2); }
.theme-swatches label { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.theme-swatches input { position: absolute; opacity: 0; pointer-events: none; }
.theme-swatches .sw { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--line); }
.theme-swatches input:checked + .sw { box-shadow: 0 0 0 3px var(--ink); }
.theme-swatches input:focus-visible + .sw { outline: 3px solid var(--accent); outline-offset: 2px; }

.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; padding: var(--s2); border-radius: 12px; background: var(--brand-soft); }
.consent input { margin-top: 4px; }

/* Telefon çerçevesinde önizleme */
.phone-frame { border-radius: 36px; border: 10px solid var(--ink); background: var(--ink); box-shadow: var(--shadow-2); overflow: hidden; max-width: 340px; margin: 0 auto; }
.phone-frame .screen { background: #f4f6fa; border-radius: 26px; overflow: hidden; max-height: 640px; overflow-y: auto; }
.preview-label { text-align: center; color: var(--muted); font-size: 13px; margin-top: var(--s1); }

/* Pano */
.dash { display: grid; gap: var(--s3); }
@media (min-width: 992px) { .dash { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }
.share-box { display: flex; gap: var(--s1); flex-wrap: wrap; align-items: center; }
.share-url { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 48px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-weight: 600; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.qr-box { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.qr-box .qr { width: 220px; height: 220px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.qr-box .qr svg { width: 100%; height: 100%; display: block; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.stat { padding: var(--s2); border-radius: 12px; background: var(--surface); }
.stat strong { display: block; font-family: var(--font-head); font-size: 28px; color: var(--ink); line-height: 1.1; }
.stat span { font-size: 13px; color: var(--muted); }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 64px; margin-top: var(--s2); }
.spark i { flex: 1 1 0; background: var(--brand); opacity: .75; border-radius: 3px 3px 0 0; min-height: 2px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.status-pill.on { background: #e3f5ee; color: #0f7a5c; }
.status-pill.off { background: #fdecea; color: var(--danger); }
.tag-list { list-style: none; padding: 0; margin: 0 0 var(--s2); display: grid; gap: var(--s1); }
.tag-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 10px 14px; border-radius: 10px; background: var(--surface); }
.tag-list code { font-size: 15px; font-weight: 700; letter-spacing: .08em; color: var(--ink); }
.inline-form { display: flex; gap: var(--s1); flex-wrap: wrap; }
.inline-form .form-control { flex: 1 1 180px; height: 48px; text-transform: uppercase; letter-spacing: .08em; }

/* Tanıtım sayfası: dik telefon + arkasında NFC kart + iki bilgi rozeti */
.kart-showcase { position: relative; width: 100%; max-width: 520px; min-height: 620px; margin: 0 auto; }
.showcase-phone { position: absolute; left: 50%; top: 0; transform: translateX(-38%); width: 300px; max-width: none; z-index: 2; border-width: 9px; border-radius: 44px; }
.showcase-phone .screen { border-radius: 35px; max-height: 600px; height: 600px; overflow: hidden; }
.showcase-phone .dk-head { padding-top: 44px; }
.phone-notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 92px; height: 22px; border-radius: 0 0 14px 14px; background: var(--ink); z-index: 3; }
.showcase-nfc { position: absolute; left: 0; top: 150px; width: 290px; height: 182px; padding: 20px 22px; border-radius: 18px; color: #fff; z-index: 1;
    background: linear-gradient(135deg, #0b1530 0%, #102766 55%, #0042d7 100%); box-shadow: 0 24px 48px rgba(11, 21, 48, .28); transform: rotate(-14deg); }
.showcase-nfc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 85% 10%, rgba(255, 255, 255, .18), transparent 45%); pointer-events: none; }
.nfc-top { display: flex; justify-content: space-between; align-items: center; }
.nfc-brand { font-family: var(--font-head); font-weight: 800; letter-spacing: .02em; }
.nfc-wave { transform: rotate(90deg); opacity: .85; }
.nfc-name { margin-top: 44px; font-family: var(--font-head); font-weight: 700; font-size: 20px; }
.nfc-role { font-size: 13px; color: #b9c8ec; }
.nfc-qr { position: absolute; right: 18px; bottom: 16px; width: 44px; height: 44px; border-radius: 8px; background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.showcase-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-2); font-size: 14px; color: var(--ink); }
.showcase-chip strong { display: block; font-weight: 700; line-height: 1.2; }
.showcase-chip small { display: block; color: var(--muted); font-size: 12px; }
.chip-saved { left: 4px; bottom: 96px; }
.chip-saved .ok { width: 32px; height: 32px; border-radius: 50%; background: #e3f5ee; color: #0f7a5c; display: flex; align-items: center; justify-content: center; }
.chip-tap { right: -8px; top: 64px; }
.chip-tap > i { font-size: 20px; color: var(--brand); }
@media (max-width: 991px) { .kart-showcase { margin-top: var(--s3); } }
@media (max-width: 575px) {
    .kart-showcase { min-height: 610px; }
    .showcase-phone { transform: translateX(-50%) scale(.92); transform-origin: top center; }
    .showcase-nfc, .chip-tap { display: none; }
    .chip-saved { left: 50%; transform: translateX(-50%); bottom: 24px; white-space: nowrap; }
}
.how-grid { display: grid; gap: var(--s3); }
@media (min-width: 768px) { .how-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── 2) Kart (önizleme ve herkese açık sayfa ortak) ─────────────────── */
.dk { --c: #0042d7; --c-ink: #fff; font-family: "Figtree", "Segoe UI", system-ui, sans-serif; color: #2f3a55; background: #f4f6fa; }
.dk-head { background: var(--c); color: var(--c-ink); padding: 28px 20px 64px; text-align: center; position: relative; }
.dk-head::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40px; background: #f4f6fa; border-radius: 24px 24px 0 0; }
.dk-avatar { position: relative; z-index: 1; width: 112px; height: 112px; margin: 0 auto -40px; border-radius: 50%; border: 4px solid #fff; background: #e7eeff; overflow: hidden; display: flex; align-items: center; justify-content: center; font-family: "Bricolage Grotesque Variable", "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; font-size: 40px; color: var(--c); box-shadow: 0 8px 24px rgba(11, 21, 48, .18); }
.dk-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Firma logosu (Pro): başlığın sol üstünde, fotoğraftan ayrı */
.dk-logo { position: absolute; top: 14px; left: 14px; z-index: 2; width: 56px; height: 56px; border-radius: 14px; background: #fff; padding: 6px; box-shadow: 0 4px 14px rgba(11, 21, 48, .18); display: flex; align-items: center; justify-content: center; }
.dk-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dk-body { padding: 52px 20px 24px; text-align: center; }
.dk-name { font-family: "Bricolage Grotesque Variable", "Bricolage Grotesque", system-ui, sans-serif; font-size: 26px; font-weight: 800; color: #0b1530; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 4px; }
.dk-role { color: #5f6b85; font-size: 15px; margin: 0; }
.dk-bio { color: #2f3a55; font-size: 15px; margin: 14px auto 0; max-width: 420px; white-space: pre-line; }
.dk-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 10px; margin: 20px 0 0; }
.dk-action { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; background: #fff; color: #0b1530; font-size: 13px; font-weight: 700; text-decoration: none; box-shadow: 0 1px 2px rgba(11, 21, 48, .06), 0 4px 12px rgba(11, 21, 48, .05); }
.dk-action i { font-size: 20px; color: var(--c); }
.dk-save { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px; margin-top: 14px; border-radius: 14px; background: var(--c); color: var(--c-ink); font-weight: 800; font-size: 16px; text-decoration: none; border: 0; cursor: pointer; }
.dk-save:hover { color: var(--c-ink); filter: brightness(1.08); }
.dk-section { margin-top: 20px; text-align: left; }
.dk-section h2 { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #5f6b85; margin: 0 0 8px 4px; font-family: inherit; }
.dk-links { display: grid; gap: 8px; }
.dk-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #fff; color: #0b1530; font-weight: 700; text-decoration: none; box-shadow: 0 1px 2px rgba(11, 21, 48, .06); }
.dk-link i:first-child { width: 22px; text-align: center; font-size: 18px; color: var(--c); }
.dk-link .grow { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-link .go { color: #98a2b8; font-size: 13px; }
.dk-iban { padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(11, 21, 48, .06); }
.dk-iban .num { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 15px; font-weight: 700; color: #0b1530; word-break: break-all; }
.dk-iban .holder { font-size: 13px; color: #5f6b85; }
.dk-copy { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 1px solid #e3e8f2; background: #fff; font: inherit; font-size: 13px; font-weight: 700; color: #0b1530; cursor: pointer; }
.dk-foot { padding: 20px; text-align: center; font-size: 13px; color: #5f6b85; }
.dk-foot a { color: #0b1530; font-weight: 700; text-decoration: none; }
.dk-owner-bar { background: #0b1530; color: #cdd7ec; font-size: 13px; padding: 10px 16px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.dk-owner-bar a { color: #fff; font-weight: 700; text-decoration: none; }
.dk-share-row { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.dk-ghost { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid #e3e8f2; background: #fff; color: #0b1530; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; }
.dk-qr-dialog { border: 0; border-radius: 20px; padding: 24px; text-align: center; max-width: 320px; box-shadow: 0 16px 40px rgba(11, 21, 48, .25); }
.dk-qr-dialog::backdrop { background: rgba(11, 21, 48, .55); }
.dk-qr-dialog .qr svg { width: 240px; height: 240px; display: block; margin: 0 auto 12px; }
.dk-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #0b1530; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.dk-toast.show { opacity: 1; }

/* Herkese açık sayfa iskeleti */
.dk-page { margin: 0; min-height: 100vh; background: #f4f6fa; }
.dk-page .dk-wrap { max-width: 480px; margin: 0 auto; background: #f4f6fa; min-height: 100vh; }
@media (min-width: 520px) { .dk-page { background: #e7ebf3; } .dk-page .dk-wrap { box-shadow: 0 0 40px rgba(11, 21, 48, .08); } }
.dk-empty { text-align: center; padding: 96px 24px; }
.dk-empty h1 { font-family: "Bricolage Grotesque Variable", system-ui, sans-serif; color: #0b1530; font-size: 26px; }
.dk-empty p { color: #5f6b85; }

/* Önizlemede küçük ölçek */
.phone-frame .dk-name { font-size: 22px; }
.phone-frame .dk-avatar { width: 92px; height: 92px; font-size: 32px; margin-bottom: -34px; }
.phone-frame .dk-body { padding-top: 44px; }

/* bootstrap-grid gap yardımcıları her sürümde yok */
.kart-shell .gap-2 { gap: 8px; }
.kart-shell .gap-3 { gap: 16px; }

/* QR logosu */
.qr-logo-box { width: 100%; text-align: center; padding-top: var(--s2); border-top: 1px solid var(--line); }
.qr-logo-box .opt { font-weight: 400; color: var(--muted); }
.qr-file { position: relative; overflow: hidden; }
.qr-file form { position: absolute; inset: 0; margin: 0; }
.qr-file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

/* ── Abonelik paneli (Hesabım → Kartım) ─────────────────────────────────── */
.sub-panel { margin-bottom: var(--s3); border-left: 4px solid var(--brand); }
.sub-panel.sub-trial { border-left-color: #2b7de9; }
.sub-panel.sub-active { border-left-color: #0f7a5c; }
.sub-panel.sub-grace { border-left-color: #c77700; background: #fffaf0; }
.sub-panel.sub-expired { border-left-color: var(--danger); background: #fff6f5; }
.sub-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2); flex-wrap: wrap; }
.sub-plan { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--ink); margin-right: 8px; }
.sub-pill { background: var(--brand-soft); color: var(--brand-ink); vertical-align: middle; }
.sub-active .sub-pill { background: #e3f5ee; color: #0f7a5c; }
.sub-grace .sub-pill { background: #fff0d6; color: #8a5300; }
.sub-expired .sub-pill { background: #fdecea; color: var(--danger); }
.sub-date { text-align: right; }
.sub-date strong { display: block; color: var(--ink); font-size: 16px; }
.sub-date span { color: var(--muted); font-size: 13px; }
.sub-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: var(--s2) 0; }
.sub-bar i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.sub-grace .sub-bar i { background: #c77700; }
.sub-note { color: var(--ink-2); font-size: 14px; margin: var(--s1) 0 var(--s2); }
.sub-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s2); }
.sub-offer { border: 1px solid var(--line); border-radius: 14px; padding: var(--s2); display: flex; flex-direction: column; gap: 10px; background: var(--white); }
.sub-offer.pro { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.sub-offer-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sub-offer-head strong { font-size: 18px; color: var(--ink); }
.sub-offer-head span { color: var(--muted); font-size: 14px; font-weight: 600; }
.sub-offer ul { list-style: none; padding: 0; margin: 0; font-size: 14px; color: var(--ink-2); flex: 1 1 auto; }
.sub-offer li { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.sub-offer li i { color: #0f7a5c; font-size: 12px; }
.sub-offer .btn-x { align-self: flex-start; }
.sub-orders { margin-top: var(--s2); font-size: 14px; }
.sub-orders summary { cursor: pointer; font-weight: 700; color: var(--brand-ink); padding: 6px 0; }
.sub-orders table, .sum-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sub-orders th, .sub-orders td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sub-orders th { color: var(--muted); font-weight: 600; font-size: 13px; }
.sub-orders { overflow-x: auto; }

/* ── Satın alma özeti ───────────────────────────────────────────────────── */
.sum-table th, .sum-table td { padding: 10px 0; border-bottom: 1px solid var(--line); }
.sum-table th { color: var(--muted); font-weight: 600; text-align: left; }
.sum-table td { text-align: right; color: var(--ink); font-weight: 600; }
.sum-table tr.total th, .sum-table tr.total td { border-bottom: 0; font-size: 18px; color: var(--ink); font-weight: 800; padding-top: 14px; }

/* ── Tanıtım: fiyatlar ──────────────────────────────────────────────────── */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s3); max-width: 820px; margin: 0 auto; }
.price-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); box-shadow: var(--shadow-1); }
.price-card.pro { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-glow), var(--shadow-1); }
.price-card h3 { margin: 0; font-size: 20px; }
.price-card .price { font-family: var(--font-head); font-size: 36px; font-weight: 800; color: var(--ink); line-height: 1; }
.price-card .price small { font-size: 15px; font-weight: 600; color: var(--muted); }
.price-card ul { list-style: none; padding: 0; margin: 0; flex: 1 1 auto; }
.price-card li { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; color: var(--ink-2); }
.price-card li i { color: #0f7a5c; }
.price-note { text-align: center; color: var(--muted); font-size: 14px; margin-top: var(--s3); }
@media (max-width: 575.98px) { .sub-date { text-align: left; } }

/* ── Ana ekrana ekle kutusu (pano) ─────────────────────────────────────── */
.install-box [hidden], [data-install-reopen][hidden] { display: none !important; }
.install-box { margin-bottom: var(--s3); border: 1px solid var(--brand); box-shadow: 0 0 0 4px var(--brand-glow); }
.install-row { display: flex; gap: var(--s2); align-items: center; }
.install-row img { border-radius: 14px; flex: 0 0 auto; }
.install-row strong { display: block; color: var(--ink); font-size: 16px; }
.install-row p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.install-steps { margin-top: var(--s2); padding: var(--s2); border-radius: 12px; background: var(--surface); font-size: 14px; color: var(--ink-2); }
.install-steps ol { margin: 0; padding-left: 20px; }
.install-steps li { margin-bottom: 6px; }
.install-steps p { margin: 0; }
.install-steps i { color: var(--brand); }
.install-actions { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s2); flex-wrap: wrap; }

/* ── Tam ekran QR (/hesabim/kartim/qr) ──────────────────────────────────── */
.qr-full { font-family: "Figtree", "Segoe UI", system-ui, sans-serif; color: #2f3a55; min-height: 100vh; min-height: 100dvh; background: #fff; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.qr-full-top { padding: 14px 18px; }
.qr-full-back { color: #0b1530; font-weight: 700; text-decoration: none; font-size: 15px; display: inline-flex; gap: 8px; align-items: center; }
.qr-full-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 20px 28px; text-align: center; }
.qr-full-name { font-family: "Bricolage Grotesque Variable", system-ui, sans-serif; font-size: 26px; font-weight: 800; color: #0b1530; margin: 0; line-height: 1.2; }
.qr-full-role { color: #5f6b85; margin: 6px 0 0; font-size: 15px; }
.qr-full-code { margin: 22px 0 10px; padding: 16px; border-radius: 24px; border: 3px solid var(--c, #0042d7); background: #fff; width: min(82vw, 360px); }
.qr-full-code .qr { width: 100%; aspect-ratio: 1; }
.qr-full-code .qr svg, .qr-full-code .qr img { width: 100%; height: 100%; display: block; }
.qr-full-hint { color: #5f6b85; font-size: 13px; margin: 4px 0 0; }
.qr-full-url { font-weight: 700; color: #0b1530; margin: 8px 0 18px; word-break: break-all; }
.qr-full-actions .dk-ghost { font-family: inherit; }
.qr-full-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.qr-full-warn { margin-top: 16px; background: #fdecea; color: #a1281b; border-radius: 12px; padding: 12px 14px; font-size: 14px; max-width: 380px; }
.qr-full-warn a { color: inherit; font-weight: 700; }

/* ── Kapanmış kart sayfası (/k/{adres}, abonelik ve ek süre dolmuş) ────── */
.dk-closed { text-align: center; padding: 64px 22px 48px; font-family: "Figtree", "Segoe UI", system-ui, sans-serif; color: #2f3a55; }
.dk-closed-icon { width: 72px; height: 72px; border-radius: 50%; background: #fff3e0; color: #b46a00; display: inline-flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: 18px; }
.dk-closed h1 { font-family: "Bricolage Grotesque Variable", system-ui, sans-serif; color: #0b1530; font-size: 26px; line-height: 1.25; margin: 0 0 12px; }
.dk-closed > p { color: #5f6b85; line-height: 1.6; margin: 0 auto; max-width: 400px; }
.dk-closed-box { margin: 26px auto 0; max-width: 400px; background: #fff; border: 1px solid #e3e8f2; border-radius: 18px; padding: 22px 20px; text-align: left; box-shadow: 0 6px 24px rgba(11, 21, 48, .06); }
.dk-closed-box p { margin: 0 0 10px; line-height: 1.55; font-size: 15px; }
.dk-closed-lead { font-weight: 800; color: #0f7a5c; }
.dk-closed-who { font-weight: 700; color: #0b1530; margin-top: 16px !important; }
.dk-closed-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border-radius: 12px; background: #0042d7; color: #fff; font-weight: 800; font-size: 16px; text-decoration: none; margin: 14px 0 18px; }
.dk-closed-btn:hover { background: #0036b3; color: #fff; }
.dk-closed-alt { color: #5f6b85; font-size: 14px !important; }
.dk-closed-del { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 12px; border: 1px solid #f1c4bf; color: #b42318; background: #fff; font-weight: 700; text-decoration: none; }
.dk-closed-del:hover { background: #fdecea; color: #b42318; }
.dk-closed-note { font-size: 13px !important; color: #8a94ab; margin: 14px 0 0 !important; text-align: center; }
.dk-closed-note a { color: #0042d7; font-weight: 600; }

/* Pano: süresi dolmuş kart için işlem satırı */
.sub-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: 0 0 var(--s2); }
.sub-actions .danger-link { color: var(--danger); font-weight: 700; font-size: 14px; }
.dk-closed-keep { font-size: 14px !important; color: #8a5300; background: #fff7e6; border-radius: 10px; padding: 10px 12px; }

/* Satın alma: fatura türü */
.inv-type { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 var(--s2); }
.inv-type label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 14px; background: var(--white); }
.inv-type label:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.field [hidden], [data-corp][hidden] { display: none !important; }
.inv-cell { white-space: nowrap; }
.inv-cell a, .inv-cell button { font-size: 13px; }

/* Düzenleyici: logo alanı */
.logo-thumb { border-radius: 14px !important; background: #fff !important; border: 1px solid var(--line); }
.logo-thumb img { object-fit: contain !important; padding: 6px; }
.logo-locked { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--surface); color: var(--ink-2); font-size: 14px; }
.logo-locked i { color: var(--muted); }

/* ── NFC kart siparişi (2026-10-13) ─────────────────────────────────────────────────────── */
.nfc-step { margin-top: var(--s4); }
.nfc-products { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-bottom: 4px; }
.nfc-product { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.nfc-product input { position: absolute; opacity: 0; pointer-events: none; }
.nfc-product:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.nfc-product:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.nfc-product .swatch { height: 52px; border-radius: 8px; border: 1px solid var(--line); }
.nfc-product strong { color: var(--ink); }
.nfc-product .price { font-weight: 700; color: var(--brand-ink); }
.nfc-product .price small { font-weight: 400; color: var(--muted); }
.qty-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
.qty-row label { margin: 0; }
.qty-row .form-control { width: 104px; }
.consent-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.nfc-logo-thumb { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 6px; }

/* Kart önizlemesi — gerçek oran 85,6 × 54 mm; yazı boyutları kart genişliğine göre (cqw). */
.pcard { --pc-bg: #ffffff; --pc-ink: #0b1530; position: relative; width: 100%; max-width: 360px; margin: 0 auto; aspect-ratio: 85.6 / 54; border-radius: 14px;
         background: var(--pc-bg); color: var(--pc-ink); border: 1px solid rgba(11, 21, 48, .12); box-shadow: var(--shadow-2); overflow: hidden; container-type: inline-size; }
.pcard .pc-text { position: absolute; left: 7%; right: 7%; bottom: 9%; }
.pcard .pc-name { font-family: var(--font-head); font-weight: 800; font-size: 6.6cqw; line-height: 1.1; overflow-wrap: anywhere; }
.pcard .pc-title { font-size: 3.9cqw; opacity: .8; margin-top: .6cqw; }
.pcard .pc-company { font-size: 3.9cqw; font-weight: 700; margin-top: 1cqw; }
.pcard .pc-lines { font-size: 3.3cqw; margin-top: 2cqw; opacity: .85; line-height: 1.35; }
.pcard [data-pc]:empty { display: none; }
.pcard .pc-logo { position: absolute; top: 8%; right: 7%; max-width: 32%; max-height: 30%; object-fit: contain; }
.pcard .pc-nfc { position: absolute; top: 9%; left: 7%; font-size: 5cqw; opacity: .4; transform: rotate(90deg); }
.pcard .pc-mark { position: absolute; right: 4%; bottom: 4.5%; font-family: var(--font-head); font-weight: 800; font-size: 2.6cqw; letter-spacing: .02em; opacity: .5; }
.pcard.l-orta .pc-text { text-align: center; top: 50%; bottom: auto; transform: translateY(-40%); }
.pcard.l-orta.has-logo .pc-text { top: auto; bottom: 9%; transform: none; }
.pcard.l-orta .pc-logo { right: auto; left: 50%; transform: translateX(-50%); max-height: 24%; }
.pcard.l-orta .pc-nfc, .pcard.l-logo-ust .pc-nfc { left: auto; right: 7%; }
.pcard.l-logo-ust .pc-logo { right: auto; left: 7%; }
.pcard.back { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqw; }
.pcard.back .pc-qr { width: 34%; aspect-ratio: 1; background: #fff; padding: 1.6cqw; border-radius: 2cqw; }
.pcard.back .pc-qr svg { width: 100%; height: 100%; display: block; }
.pcard.back .pc-code { font-family: var(--font-head); font-weight: 800; font-size: 3.4cqw; letter-spacing: .16em; }
.pcard.mini { max-width: 300px; }
.pcard + .preview-label { margin-bottom: var(--s2); }

/* Ödeme: abonelik eki */
.addon-opts { display: grid; gap: 10px; }
.addon-opts label { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); cursor: pointer; }
.addon-opts label:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.addon-opts input { margin-top: 4px; }
.addon-opts span { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.addon-opts small { color: var(--muted); }
.addon-opts b { white-space: nowrap; color: var(--ink); }

/* Pano ve sipariş takibi */
.nfc-offer { display: flex; gap: var(--s2); align-items: flex-start; margin-bottom: var(--s2); }
.nfc-offer-card { flex: 0 0 auto; width: 92px; aspect-ratio: 85.6 / 54; border-radius: 9px; background: linear-gradient(135deg, #0b1530, #23345f); color: #fff; position: relative; box-shadow: var(--shadow-1); }
.nfc-offer-card i { position: absolute; top: 8px; left: 9px; font-size: 12px; transform: rotate(90deg); opacity: .8; }
.nfc-offer-card span { position: absolute; right: 7px; bottom: 5px; font-size: 8px; font-weight: 800; opacity: .7; }
.nfc-orders { margin-bottom: var(--s2); }
.nfc-orders li { flex-wrap: wrap; }
.nfc-subhead { font-size: 15px; font-weight: 700; margin: var(--s2) 0 6px; }
.status-pill.wait { background: #fff4e0; color: #8a5300; }
.status-pill.info { background: var(--brand-soft); color: var(--brand-ink); }
.nfc-timeline { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0; margin: 0 0 var(--s2); counter-reset: none; }
.nfc-timeline li { position: relative; padding-top: 36px; text-align: center; font-size: 13px; color: var(--muted); }
.nfc-timeline li::before { content: attr(data-n); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%;
                           background: var(--surface-2); color: var(--ink-2); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.nfc-timeline li::after { content: ""; position: absolute; top: 13px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px; background: var(--line); }
.nfc-timeline li:last-child::after { display: none; }
.nfc-timeline li.done::before { content: "✓"; background: #0f7a5c; color: #fff; }
.nfc-timeline li.done::after { background: #0f7a5c; }
.nfc-timeline li.current { color: var(--ink); font-weight: 700; }
.nfc-timeline li.current::before { background: var(--brand); color: #fff; }
.proof-box img { max-width: 100%; border-radius: 12px; border: 1px solid var(--line); }
.nfc-bullets { list-style: none; padding: 0; margin: 0 0 var(--s3); display: grid; gap: 8px; }
.nfc-bullets i { color: var(--brand); margin-right: 8px; }
@media (max-width: 575px) { .nfc-offer { flex-direction: column; } .nfc-timeline li { font-size: 12px; } }