/* JARGOLA Hesabim + Satin al (hesap.js). Web ve mobil ortak; renkler sayfanin --bg/--ink/--acc degiskenlerinden. */
body.hsp-open { overflow: hidden; }
.hsp { position: fixed; inset: 0; z-index: 70; background: var(--bg, #0E1524); color: var(--ink, #F4F1E8); overflow-y: auto;
  background-image: radial-gradient(ellipse at 50% -10%, #23324F 0%, var(--bg, #0E1524) 60%); }
.hsp-in { max-width: 560px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px calc(env(safe-area-inset-bottom, 0px) + 28px); }
.hsp-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 12px; }
.hsp-top b { font-family: var(--display, 'Archivo Black'); font-weight: 400; font-size: 17px; letter-spacing: .03em; }
.hsp-x { background: var(--bg-2, #16213A); border: 1px solid var(--line, #2B3A5C); color: inherit; border-radius: 999px; width: 36px; height: 36px; font-size: 16px; cursor: pointer; }
.hsp-body { display: flex; flex-direction: column; gap: 12px; }
#hspTab { display: flex; flex-direction: column; gap: 12px; }
.hsp-box { background: var(--bg-2, #16213A); border: 1px solid var(--line, #2B3A5C); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.hsp-box h3 { margin: 0; font-size: 15px; }
.hsp-box.danger { border-color: #6B2B2B; }
.hsp-form { display: flex; flex-direction: column; gap: 10px; }
.hsp label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-dim, #A9B1BF); font-weight: 600; }
.hsp input, .hsp select { font: 600 15px var(--body, sans-serif); color: var(--ink, #F4F1E8); background: var(--bg-3, #1F2D4C);
  border: 1px solid var(--line-2, #33415F); border-radius: 12px; padding: 10px 12px; min-width: 0; width: 100%; box-sizing: border-box; }
.hsp a { color: var(--acc, #E2BC5C); }
.hsp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hsp-lbl { font-size: 13px; color: var(--ink-dim, #A9B1BF); font-weight: 600; }
.hsp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hsp-chip { border: 1px solid var(--line-2, #33415F); background: none; color: var(--ink-dim, #A9B1BF); border-radius: 999px; padding: 6px 11px; font: 600 13px var(--body, sans-serif); cursor: pointer; }
.hsp-chip[aria-pressed="true"] { background: var(--acc, #E2BC5C); color: #14233F; border-color: transparent; }
.hsp-cta { border: 0; border-radius: 999px; background: var(--acc, #E2BC5C); color: #14233F; font: 800 15px var(--body, sans-serif); padding: 12px 18px; cursor: pointer; }
.hsp-cta:disabled { opacity: .45; cursor: default; }
.hsp-ghost { border: 1px solid var(--line-2, #33415F); background: none; color: var(--ink, #F4F1E8); border-radius: 999px; font: 700 14px var(--body, sans-serif); padding: 10px 16px; cursor: pointer; }
.hsp-ghost.sm { padding: 6px 12px; font-size: 12px; }
.hsp-ghost.danger { border-color: #D8453F; color: #FF8A84; }
.hsp-err { color: #FF8A84; font-size: 13px; margin: 0; min-height: 0; }
.hsp-err:empty { display: none; }
.hsp-dim { color: var(--ink-dim, #A9B1BF); font-size: 14px; margin: 0; }
.hsp-dim.sm { font-size: 12.5px; }
.hsp-gift { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(77, 179, 126, .14); color: #BFF0D5; font-size: 14px; }
.hsp-head { display: flex; gap: 12px; align-items: center; }
.hsp-head b { display: block; font-size: 17px; }
.hsp-head small { display: block; color: var(--ink-dim, #A9B1BF); font-size: 12.5px; margin-top: 2px; word-break: break-all; }
.hsp-av { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--acc, #E2BC5C); color: #14233F; display: grid; place-items: center; font: 800 20px var(--body, sans-serif); }
.hsp-badge { display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; padding: 3px 8px; border-radius: 6px; background: #2B3A5C; color: #DCE3EE; }
.hsp-badge.ok { background: rgba(77, 179, 126, .2); color: #8FE0B5; }
.hsp-badge.off { background: rgba(216, 69, 63, .18); color: #FF9C96; }
.hsp-tabs { display: flex; gap: 4px; background: var(--bg-3, #1F2D4C); border-radius: 12px; padding: 3px; overflow-x: auto; }
.hsp-tabs button { flex: 1; white-space: nowrap; border: 0; background: none; color: var(--ink-dim, #A9B1BF); font: 700 13.5px var(--body, sans-serif); padding: 9px 8px; border-radius: 9px; cursor: pointer; }
.hsp-tabs button.on { background: var(--acc, #E2BC5C); color: #14233F; }
.hsp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hsp-stats div { background: var(--bg-2, #16213A); border: 1px solid var(--line, #2B3A5C); border-radius: 12px; padding: 10px 6px; text-align: center; font-size: 11.5px; color: var(--ink-dim, #A9B1BF); }
.hsp-stats b { display: block; font-size: 18px; color: var(--ink, #F4F1E8); }
.hsp-deck { display: flex; flex-direction: column; gap: 6px; text-align: left; background: none; border: 0; border-top: 1px solid var(--line, #2B3A5C); color: inherit; padding: 10px 0 2px; cursor: pointer; }
.hsp-deck small, .hsp-sub small, .hsp-ord small, .hsp-optname small, .hsp-plan small { display: block; color: var(--ink-dim, #A9B1BF); font-size: 12px; font-weight: 500; }
.hsp-bar { display: block; height: 6px; border-radius: 3px; background: var(--bg-3, #1F2D4C); overflow: hidden; }
.hsp-bar i { display: block; height: 100%; border-radius: 3px; }
.hsp-sub, .hsp-ord { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--line, #2B3A5C); padding-top: 10px; font-size: 14px; }
.hsp-sub.off b { color: var(--ink-dim, #A9B1BF); }
.hsp-ord em { font-style: normal; font-size: 11.5px; font-weight: 800; margin-left: 6px; }
.hsp-ord .st-odendi { color: #8FE0B5; } .hsp-ord .st-basarisiz { color: #FF9C96; } .hsp-ord .st-bekliyor { color: #F2C66B; }
.hsp-opt { background: var(--bg-2, #16213A); border: 2px solid var(--line, #2B3A5C); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.hsp-opt.on { border-color: var(--acc, #E2BC5C); }
.hsp-optname { background: none; border: 0; color: inherit; text-align: left; padding: 0; cursor: pointer; font-size: 15px; }
.hsp-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hsp-plan { background: var(--bg-3, #1F2D4C); border: 1px solid var(--line-2, #33415F); color: inherit; border-radius: 12px; padding: 10px; text-align: left; cursor: pointer; }
.hsp-plan b { font-size: 18px; }
.hsp-plan.on { border-color: var(--acc, #E2BC5C); box-shadow: 0 0 0 1px var(--acc, #E2BC5C) inset; }
.hsp-check { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-weight: 500 !important; line-height: 1.45; }
.hsp-check input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--acc, #E2BC5C); }
.hsp-result { align-items: center; text-align: center; }
.hsp-big { font-size: 44px; }
.hsp-toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); transform: translate(-50%, 20px); opacity: 0; z-index: 80;
  background: #22304D; color: #F4F1E8; padding: 10px 16px; border-radius: 999px; font: 600 14px var(--body, sans-serif); transition: .2s; pointer-events: none; max-width: 90vw; }
.hsp-toast.on { opacity: 1; transform: translate(-50%, 0); }
/* deste kilidi (onizleme) bandi: app.js / mobile.js deste ekraninda kullanir */
.lockbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border: 1px solid var(--acc, #E2BC5C);
  background: rgba(226, 188, 92, .1); border-radius: 14px; padding: 10px 14px; font-size: 14px; }
.lockbar b { color: var(--acc, #E2BC5C); }
@media (max-width: 420px) { .hsp-row2 { grid-template-columns: 1fr; } .hsp-stats { grid-template-columns: repeat(2, 1fr); } }
.hsp-old { color: var(--ink-dim, #A9B1BF); font-size: 12px; font-weight: 600; margin-left: 4px; }

/* e-posta kodu satiri (12.10.2026) */
.hsp-kod { display: flex; gap: 8px; align-items: flex-end; }
.hsp-kod label { flex: 1; }
.hsp-kod .hsp-ghost { white-space: nowrap; margin-bottom: 2px; }
/* Ilerleme: grup basliklari acilir-kapanir (12.10.2026) */
.hsp-grp { border-top: 1px solid var(--line, #2B3A5C); }
.hsp-grp summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 10px 0 10px 18px; position: relative; }
.hsp-grp summary::-webkit-details-marker { display: none; }
.hsp-grp summary::before { content: '▸'; position: absolute; left: 0; top: 10px; color: var(--acc, #E2BC5C); transition: transform .15s; }
.hsp-grp[open] summary::before { transform: rotate(90deg); }
.hsp-grp summary b { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; color: var(--acc, #E2BC5C); }
.hsp-grp summary small { color: var(--ink-dim, #A9B1BF); font-size: 12px; }
.hsp-grp .hsp-deck { margin-left: 18px; width: calc(100% - 18px); }
/* e-posta dogrulama uyarisi (12.10.2026) */
.hsp-verify { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; padding: 12px; border-radius: 14px; background: rgba(255, 198, 26, .12); border: 1px solid rgba(255, 198, 26, .45); }
.hsp-verify b { color: #FFC61A; } .hsp-verify > span { font-size: 13px; color: var(--ink-dim, #A9B1BF); }
.hsp-verify .hsp-kod input { flex: 1; min-width: 0; }
.hsp-cta.sm { padding: 8px 14px; font-size: 13px; }

/* profil ozeti ve rozetler (13.10.2026) */
.hsp-ozet h3 small { font-weight: 600; margin-left: 4px; }
.hsp-ozet .hsp-stats { grid-template-columns: repeat(5, 1fr); }
.hsp-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.hsp-badges span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 700;
  border: 1px dashed var(--line, #2B3A5C); color: var(--ink-dim, #A9B1BF); opacity: .55; }
.hsp-badges span i { font-style: normal; filter: grayscale(1); }
.hsp-badges span.on { border-style: solid; border-color: #FFC61A; color: var(--ink, #F4F1E8); background: rgba(255, 198, 26, .1); opacity: 1; }
.hsp-badges span.on i { filter: none; }
.hsp-gift.sm { font-size: 13px; margin-top: 8px; }
@media (max-width: 420px) { .hsp-ozet .hsp-stats { grid-template-columns: repeat(3, 1fr); } }