/* Müşteri portalı: ortalanmış kart (giriş/aktivasyon) ve sekmeli panel */
body{display:flex;flex-direction:column;min-height:100vh}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 24px;border-bottom:1px solid var(--line);background:var(--surface)}
.top-r{display:flex;gap:12px;align-items:center;min-width:0}
.lang-btn{font-family:var(--mono);letter-spacing:.06em;min-width:40px}
.logo .brand-t{font:inherit;letter-spacing:inherit;color:inherit}
.top-r .small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:40px 20px 64px}
.foot{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;padding:20px;border-top:1px solid var(--line)}
.foot a{color:inherit}
.foot .pay-band{flex-basis:100%;height:24px;width:auto;max-width:100%;object-fit:contain;margin-bottom:4px}
.pay-logo{display:block;height:22px;width:auto;margin:2px 0 4px}

.card{width:100%;max-width:420px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:28px;display:grid;gap:18px}
.card.wide{max-width:640px}
.card-h{display:grid;gap:6px}
.card-h p{color:var(--ink-soft);font-size:14.5px}

.steps{display:flex;gap:6px;flex-wrap:wrap;font-size:12.5px;font-weight:600}
.steps span{padding:4px 10px;border-radius:999px;background:var(--sunk);color:var(--muted)}
.steps .done{background:var(--ok-wash);color:var(--ok)}
.steps .now{background:var(--accent);color:#fff}

.code-input{font-family:var(--mono)!important;font-size:26px!important;letter-spacing:.5em;text-align:center;padding:12px 8px 12px calc(8px + .5em)!important}
.pw-rules{display:grid;gap:3px;font-size:12.5px;color:var(--muted);margin:0;padding:0;list-style:none}
.pw-rules li::before{content:"○ "}
.pw-rules li.met{color:var(--ok)}
.pw-rules li.met::before{content:"✓ "}

.contract-row{display:flex;gap:10px;justify-content:space-between;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.contract-row:first-child{border-top:0;padding-top:0}
.contract-row .check{flex:1;min-width:0}
details.legal summary{cursor:pointer;color:var(--accent-ink);font-size:13.5px}
details.legal div{margin-top:8px;font-size:13px;color:var(--ink-soft);background:var(--sunk);border-radius:5px;padding:12px;max-height:180px;overflow:auto}

/* Panel */
.p-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.p-head .small{display:block;margin-top:4px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto;scrollbar-width:none}
.tab{font:inherit;font-size:14px;font-weight:700;color:var(--muted);background:none;border:0;border-bottom:2px solid transparent;padding:10px 12px;cursor:pointer;white-space:nowrap;margin-bottom:-1px}
.tab[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tile-v{font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mods-row{display:flex;gap:6px;flex-wrap:wrap}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:14px}
.next-step{border:1px dashed var(--line-2);background:var(--bg)}
@media (max-width:760px){.tiles,.two{grid-template-columns:1fr}#app{padding-top:24px}.top{padding:12px 16px}.card{padding:22px}}
.pending-box{border-color:var(--warn);background:var(--warn-wash);margin-bottom:20px}
.pending-box .contract-row{border-top-color:rgba(154,98,0,.2)}
.pay-result{margin-bottom:18px}
.pay-issue{border-color:var(--bad);background:var(--bad-wash)}
.card-line{font-family:var(--mono);font-size:15px}