/* =========================================================
   WimoCP Tema · NOVA — Müşteri paneli iç sayfaları
   Ortak bileşenler (sayfa başlığı, sekmeler, araç çubuğu, tablo, form, anahtar, boş durum)
   ve sayfaya özel bölümler. Renk/hareket dili panel.css ile aynıdır.
   ========================================================= */

/* ---------- Sayfa başlığı ---------- */
.ph { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; padding-top: .75rem; }
.ph-k { display: inline-flex; align-items: center; gap: .45rem; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hl); }
.ph-k::before { content: ""; width: 1.1rem; height: 2px; border-radius: 2px; background: currentColor; }
.ph h1 { margin-top: .45rem; font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.15rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.12; color: var(--text); }
.ph p { margin-top: .4rem; max-width: 42rem; font-size: 15px; color: var(--text-muted); }
.ph-acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.ph-back { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .2rem; font-size: 13.5px; font-weight: 500; color: var(--text-muted); transition: color .2s; }
.ph-back svg { width: 1rem; height: 1rem; transition: transform .45s var(--ui-spring); }
.ph-back:hover { color: var(--text); }
.ph-back:hover svg { transform: translateX(-3px); }

/* Butonlar (panel içi) */
.pbtn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.6rem; padding-inline: 1.05rem; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--text-soft); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), 0 0 0 4px var(--shell); transition: transform .25s var(--ui-spring), color .2s, box-shadow .3s var(--ui-spring), background-color .2s; }
.pbtn svg { width: 1rem; height: 1rem; }
.pbtn:hover { color: var(--text); transform: translateY(-1px); }
.pbtn:active { transform: scale(.97); }
.pbtn.is-primary { color: #fff; background: var(--navy-900); box-shadow: 0 8px 18px -10px rgb(12 90 130 / .8); }
.pbtn.is-primary:hover { box-shadow: 0 0 0 4px var(--shell), 0 12px 24px -12px rgb(12 90 130 / .8); }
[data-theme="dark"] .pbtn.is-primary { color: #061b28; background: var(--hl); }
.pbtn.is-danger { color: var(--danger); box-shadow: inset 0 0 0 1px rgb(220 38 38 / .3); }
.pbtn.is-danger:hover { color: #fff; background: #dc2626; box-shadow: none; }
.pbtn.is-sm { height: 2.1rem; padding-inline: .8rem; font-size: 13px; }
.pbtn .go { width: 1.8rem; height: 1.8rem; margin-right: -.6rem; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / .16); transition: transform .45s var(--ui-spring); }
.pbtn:hover .go { transform: translate(2px, -2px) scale(1.06); }
.pbtn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--hl); }
.pbtn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- Sekmeler: hap tepsi + kayan lacivert gösterge (vps.html tasarımının ortak hali) ---------- */
.ptabs { position: relative; display: flex; width: fit-content; max-width: 100%; gap: .2rem; padding: .3rem; overflow-x: auto; scrollbar-width: none; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), 0 0 0 5px var(--shell), 0 0 0 6px var(--shell-line); }
.ptabs::-webkit-scrollbar { display: none; }
.ptabs button, .ptabs a { position: relative; z-index: 1; flex-shrink: 0; display: inline-flex; align-items: center; gap: .45rem; height: 2.5rem; padding-inline: .95rem; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; transition: color .3s var(--ui-spring); }
.ptabs button svg, .ptabs a svg { width: 1rem; height: 1rem; transition: transform .5s var(--ui-spring); }
.ptabs button:hover, .ptabs a:hover { color: var(--text); }
.ptabs button:hover svg, .ptabs a:hover svg { transform: scale(1.1) rotate(-6deg); }
.ptabs [aria-selected="true"], .ptabs [aria-selected="true"]:hover { color: #fff; }
[data-theme="dark"] .ptabs [aria-selected="true"], [data-theme="dark"] .ptabs [aria-selected="true"]:hover { color: #061b28; }
.ptabs b { min-width: 1.35rem; height: 1.35rem; display: inline-grid; place-items: center; padding-inline: .35rem; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--text-muted); background: var(--hover); transition: color .3s, background-color .3s; }
.ptabs [aria-selected="true"] b { color: var(--navy-900); background: #fff; }
[data-theme="dark"] .ptabs [aria-selected="true"] b { color: var(--hl); background: #061b28; }
.ptabs-ind { position: absolute; z-index: 0; left: 0; top: .3rem; bottom: .3rem; border-radius: 12px; background: var(--navy-900); box-shadow: 0 8px 18px -10px rgb(12 90 130 / .8), inset 0 1px 0 rgb(255 255 255 / .15); transition: transform .55s var(--ui-spring), width .55s var(--ui-spring); pointer-events: none; }
[data-theme="dark"] .ptabs-ind { background: var(--hl); }
.ptabs button:focus-visible, .ptabs a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--hl); }
@media (max-width: 639px) { .ptabs { width: auto; } .ptabs button, .ptabs a { padding-inline: .8rem; } }
.tpanel[hidden] { display: none; }
.tpanel { animation: pn-rise .5s var(--ui-spring) both; }

/* ---------- Araç çubuğu (arama + süzgeç) ---------- */
.ptool { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-bottom: 1rem; }
.psearch { flex: 1 1 16rem; display: flex; align-items: center; gap: .55rem; height: 2.75rem; padding-inline: .95rem; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)); transition: box-shadow .3s var(--ui-spring); }
.psearch:focus-within { box-shadow: inset 0 0 0 1.5px var(--hl), 0 0 0 4px rgb(12 90 130 / .12); }
.psearch svg { width: 1rem; height: 1rem; color: var(--text-muted); flex-shrink: 0; }
.psearch input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14.5px; color: var(--text); }
.ptool .ts-wrapper { min-width: 11rem; }
.ptool .ts-control { min-height: 2.75rem; }

/* ---------- Tablo (mobilde kart) ---------- */
.ptable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.ptable th { padding: .7rem .9rem; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-align: left; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
.ptable td { padding: .9rem; border-bottom: 1px solid var(--border); color: var(--text-soft); vertical-align: middle; }
.ptable tbody tr { transition: background-color .2s; }
.ptable tbody tr:hover { background: var(--hover); }
.ptable tbody tr:last-child td { border-bottom: 0; }
.ptable .t-main b { display: block; font-weight: 600; color: var(--text); }
.ptable .t-main small { display: block; margin-top: .1rem; font-size: 12.5px; color: var(--text-muted); }
.ptable .t-num { text-align: right; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ptable .t-act { width: 1%; text-align: right; white-space: nowrap; }
.ptable a.t-link { font-weight: 600; color: var(--text); }
.ptable a.t-link:hover { color: var(--hl); }
.t-flex { display: flex; align-items: center; gap: .8rem; }
.t-ico { width: 2.35rem; height: 2.35rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; color: var(--hl); background: rgb(12 90 130 / .08); }
[data-theme="dark"] .t-ico { background: rgb(92 184 230 / .12); }
.t-ico svg { width: 1.1rem; height: 1.1rem; }
.card-flush { padding: .35rem; }
.card-flush .ptable th:first-child, .card-flush .ptable td:first-child { padding-left: 1.1rem; }
.card-flush .ptable th:last-child, .card-flush .ptable td:last-child { padding-right: 1.1rem; }
@media (max-width: 760px) {
  .ptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ptable, .ptable tbody, .ptable tr, .ptable td { display: block; width: 100%; }
  .ptable tr { padding: .75rem .9rem; border-bottom: 1px solid var(--border); }
  .ptable tbody tr:last-child { border-bottom: 0; }
  .ptable td { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .3rem 0 !important; border: 0; text-align: right; }
  .ptable td[data-label]::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--text-muted); text-align: left; }
  .ptable td:first-child { justify-content: flex-start; text-align: left; padding-bottom: .5rem !important; }
  .ptable .t-act { width: auto; justify-content: flex-end; }
}
.pempty { display: grid; justify-items: center; gap: .45rem; padding: 2.5rem 1rem; text-align: center; }
.pempty svg { width: 1.8rem; height: 1.8rem; margin-bottom: .3rem; color: var(--text-faint, var(--text-muted)); }
.pempty b { font-size: 15px; color: var(--text); }
.pempty small { font-size: 13.5px; color: var(--text-muted); }
.pempty[hidden] { display: none; }

/* ---------- Form ve ayar satırları ---------- */
.pform { display: grid; gap: 1.1rem; }
.pgrid-2 { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .pgrid-2 { grid-template-columns: 1fr 1fr; } }
.pform .mf-field input[type="text"], .pform .mf-field input[type="email"], .pform .mf-field input[type="tel"], .pform .mf-field input[type="password"], .pform .mf-field input[type="number"], .pform .mf-field textarea { width: 100%; padding: .75rem .95rem; border: 0; border-radius: 14px; font: inherit; font-size: 14.5px; color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)); outline: 0; transition: box-shadow .3s var(--ui-spring); }
.pform .mf-field input:focus, .pform .mf-field textarea:focus { box-shadow: inset 0 0 0 1.5px var(--hl), 0 0 0 4px rgb(12 90 130 / .12); }
.pform .mf-field input[readonly] { color: var(--text-muted); background: var(--pn-bg); }
.pform .mf-hint { font-size: 12.5px; color: var(--text-muted); }
.pform-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.pform-foot .pform-note { margin-right: auto; font-size: 13px; color: var(--text-muted); }
.saved { display: inline-flex; align-items: center; gap: .35rem; font-size: 13px; font-weight: 600; color: var(--ok); opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .45s var(--ui-spring); }
.saved.is-on { opacity: 1; transform: none; }
.saved svg { width: 1rem; height: 1rem; }

.prow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--border); }
.prow:first-of-type { border-top: 0; padding-top: .25rem; }
.prow b { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); }
.prow small { display: block; margin-top: .15rem; font-size: 13px; color: var(--text-muted); }

/* Anahtar (switch) */
.sw { position: relative; flex-shrink: 0; width: 2.75rem; height: 1.6rem; }
.sw input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sw i { position: absolute; inset: 0; border-radius: 999px; background: var(--hover-strong, var(--border)); box-shadow: inset 0 0 0 1px var(--border); transition: background-color .3s var(--ui-spring); }
.sw i::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .45s var(--ui-spring); }
.sw input:checked + i { background: var(--navy-900); box-shadow: none; }
[data-theme="dark"] .sw input:checked + i { background: var(--hl); }
.sw input:checked + i::after { transform: translateX(1.15rem); }
.sw input:focus-visible + i { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--hl); }

/* Mini istatistik */
.mstats { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .mstats { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); } }
.mstat { padding: 1.05rem 1.15rem; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), 0 0 0 5px var(--shell), 0 0 0 6px var(--shell-line); }
.mstat small { display: block; font-size: 13px; color: var(--text-muted); }
.mstat b { display: block; margin-top: .2rem; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -.04em; color: var(--text); font-variant-numeric: tabular-nums; }
.mstat em { font-style: normal; font-size: 12.5px; color: var(--text-muted); }
.mstat.is-ok b { color: var(--ok); } .mstat.is-warn b { color: var(--warn); }

.cols-main { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 1100px) { .cols-main { grid-template-columns: minmax(0, 1fr) 21rem; } }
.side-stack { display: grid; gap: 1.25rem; }

/* ---------- Hizmet yönetimi ---------- */
.svc-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.svc-hero .t-ico { width: 3.2rem; height: 3.2rem; border-radius: 16px; }
.svc-hero .t-ico svg { width: 1.4rem; height: 1.4rem; }
.creds { display: grid; gap: .55rem; }
.cred { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; border-radius: 14px; background: var(--pn-bg); box-shadow: inset 0 0 0 1px var(--border); }
.cred span { flex: 1; min-width: 0; }
.cred small { display: block; font-size: 12px; color: var(--text-muted); }
.cred code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13.5px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--text); }
.icon-btn { width: 2.1rem; height: 2.1rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; color: var(--text-muted); transition: color .2s, background-color .2s, transform .2s var(--ui-spring); }
.icon-btn:hover { color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.icon-btn:active { transform: scale(.92); }
.icon-btn svg { width: 1rem; height: 1rem; }
.icon-btn.is-done { color: var(--ok); }
.actgrid { display: grid; gap: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .actgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.actcard { display: grid; justify-items: start; gap: .55rem; padding: 1rem; border-radius: 18px; text-align: left; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); transition: transform .4s var(--ui-spring), box-shadow .3s; }
.actcard:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--border), 0 18px 30px -22px rgb(12 90 130 / .5); }
.actcard:active { transform: scale(.98); }
.actcard span { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 12px; color: var(--hl); background: rgb(12 90 130 / .08); }
.actcard span svg { width: 1.1rem; height: 1.1rem; }
.actcard b { font-size: 14px; font-weight: 600; color: var(--text); }
.actcard small { font-size: 12.5px; color: var(--text-muted); }
.actcard.is-danger span { color: var(--danger); background: rgb(220 38 38 / .08); }

/* ---------- Destek: konuşma ---------- */
.thread { display: grid; gap: 1.1rem; }
.msg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; }
.msg .av { width: 2.4rem; height: 2.4rem; font-size: 12.5px; }
.msg.is-staff .av { background: linear-gradient(135deg, #0e6a98, #083b57); }
.msg-box { padding: .95rem 1.1rem; border-radius: 4px 18px 18px 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.msg.is-me .msg-box { background: rgb(12 90 130 / .06); box-shadow: inset 0 0 0 1px rgb(12 90 130 / .14); }
[data-theme="dark"] .msg.is-me .msg-box { background: rgb(92 184 230 / .08); }
.msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-bottom: .45rem; font-size: 13px; color: var(--text-muted); }
.msg-head b { font-size: 14px; color: var(--text); }
.msg-role { padding: .1rem .5rem; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--hl); background: rgb(12 90 130 / .1); }
.msg-body { font-size: 14.5px; line-height: 1.65; color: var(--text-soft); white-space: pre-line; }
.msg-files { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.msg-file { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; font-size: 12.5px; color: var(--text-soft); background: var(--pn-bg); box-shadow: inset 0 0 0 1px var(--border); }
.msg-file svg { width: .85rem; height: .85rem; }
.msg.is-new { animation: pn-rise .6s var(--ui-spring) both; }
.reply { display: grid; gap: .75rem; }
.reply textarea { width: 100%; min-height: 8rem; padding: .9rem 1rem; border: 0; border-radius: 16px; resize: vertical; font: inherit; font-size: 14.5px; line-height: 1.6; color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)); outline: 0; transition: box-shadow .3s var(--ui-spring); }
.reply textarea:focus { box-shadow: inset 0 0 0 1.5px var(--hl), 0 0 0 4px rgb(12 90 130 / .12); }
.reply-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.reply-bar .mf-file { flex: 1 1 14rem; padding: .6rem .9rem; }
.reply-bar small { font-size: 12.5px; color: var(--text-muted); }
.typing { display: inline-flex; align-items: center; gap: .5rem; font-size: 13px; color: var(--text-muted); }
.typing i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--hl); animation: typing 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ---------- Fatura detayı ---------- */
.inv { padding: clamp(1.25rem, 3vw, 2.25rem); }
.inv-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.inv-top .logo { font-size: 22px; }
.inv-no { text-align: right; }
.inv-no b { display: block; font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -.03em; color: var(--text); }
.inv-no small { font-size: 13px; color: var(--text-muted); }
.inv-parties { display: grid; gap: 1.25rem; padding-block: 1.5rem; }
@media (min-width: 640px) { .inv-parties { grid-template-columns: repeat(3, 1fr); } }
.inv-parties h3 { margin-bottom: .45rem; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.inv-parties p { font-size: 14px; line-height: 1.6; color: var(--text-soft); }
.inv-parties p b { color: var(--text); }
.inv-total { display: grid; justify-content: end; gap: .45rem; padding-top: 1.25rem; font-size: 14px; }
.inv-total div { display: flex; justify-content: space-between; gap: 3rem; color: var(--text-soft); }
.inv-total div b { color: var(--text); font-variant-numeric: tabular-nums; }
.inv-total .is-grand { margin-top: .35rem; padding-top: .75rem; border-top: 1px solid var(--border); font-size: 16px; font-weight: 600; color: var(--text); }
.inv-total .is-grand b { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -.03em; color: var(--navy-900); }
[data-theme="dark"] .inv-total .is-grand b { color: var(--hl); }
.inv-stamp { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; padding: .3rem .8rem; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--warn); box-shadow: inset 0 0 0 1.5px currentColor; }
.inv-note { margin-top: 1.5rem; padding: 1rem; border-radius: 14px; font-size: 13px; line-height: 1.6; color: var(--text-muted); background: var(--pn-bg); }

/* ---------- Ödeme yöntemleri: kart görselleri ---------- */
.ccards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.cc { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1.586; padding: 1.25rem 1.35rem; border-radius: 20px; color: #fff; overflow: hidden; background: radial-gradient(70% 80% at 100% 0%, rgb(108 195 236 / .45), transparent 70%), linear-gradient(135deg, #0e6a98, #083b57); box-shadow: 0 0 0 6px var(--shell), 0 26px 40px -24px rgb(8 40 60 / .7); transition: transform .5s var(--ui-spring); }
.cc:hover { transform: translateY(-4px) rotate(-.5deg); }
.cc.is-alt { background: radial-gradient(70% 80% at 100% 0%, rgb(16 185 129 / .4), transparent 70%), linear-gradient(135deg, #1f2937, #0b1220); }
.cc::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgb(255 255 255 / .12) 1px, transparent 1px); background-size: 16px 16px; -webkit-mask-image: linear-gradient(120deg, transparent 30%, #000); mask-image: linear-gradient(120deg, transparent 30%, #000); }
.cc > * { position: relative; }
.cc-top { display: flex; justify-content: space-between; align-items: center; }
.cc-chip { width: 2.4rem; height: 1.75rem; border-radius: 6px; background: linear-gradient(135deg, #f5d27a, #c99a3b); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); }
.cc-brand { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; font-style: italic; letter-spacing: -.02em; }
.cc-num { font: 500 1.15rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .14em; }
.cc-bot { display: flex; justify-content: space-between; align-items: flex-end; font-size: 12.5px; }
.cc-bot small { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.cc-def { position: absolute; top: 1.15rem; left: 50%; transform: translateX(-50%); padding: .2rem .6rem; border-radius: 999px; font-size: 11px; font-weight: 700; color: #063247; background: #6ee7b7; }
.cc-actions { display: flex; gap: .4rem; margin-top: .75rem; }
.cc-add { display: grid; place-content: center; justify-items: center; gap: .5rem; aspect-ratio: 1.586; border-radius: 20px; color: var(--text-muted); border: 1.5px dashed var(--border-strong, var(--border)); transition: color .2s, border-color .2s, transform .4s var(--ui-spring); }
.cc-add:hover { color: var(--hl); border-color: var(--hl); transform: translateY(-3px); }
.cc-add svg { width: 1.6rem; height: 1.6rem; }
.cc-add b { font-size: 14px; }
.cc-preview { margin-bottom: 1.25rem; max-width: 20rem; margin-inline: auto; }

/* ---------- Hediye çarkı ---------- */
.wheel-wrap { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 960px) { .wheel-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.wheel { position: relative; width: min(100%, 26rem); aspect-ratio: 1; margin-inline: auto; }
.wheel-disc { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 10px var(--surface), 0 0 0 11px var(--border), 0 0 0 22px var(--shell), 0 40px 70px -30px rgb(8 40 60 / .5); transition: transform 5.2s cubic-bezier(.12, .8, .1, 1); }
.wheel-disc svg { display: block; width: 100%; height: 100%; }
.wheel-disc text { font: 700 13px var(--font-sans); fill: #fff; }
.wheel-pin { position: absolute; left: 50%; top: -14px; z-index: 2; width: 0; height: 0; margin-left: -14px; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 26px solid #ef4444; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .3)); }
.wheel-btn { position: absolute; left: 50%; top: 50%; z-index: 2; width: 5.5rem; height: 5.5rem; margin: -2.75rem 0 0 -2.75rem; border-radius: 50%; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--navy-900); background: #fff; box-shadow: 0 0 0 6px rgb(255 255 255 / .5), 0 10px 25px -8px rgb(0 0 0 / .4); transition: transform .3s var(--ui-spring); }
.wheel-btn:hover:not(:disabled) { transform: scale(1.06); }
.wheel-btn:active:not(:disabled) { transform: scale(.95); }
.wheel-btn:disabled { color: var(--text-muted); cursor: not-allowed; }
.wheel-btn small { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.prizes { display: grid; gap: .55rem; list-style: none; padding: 0; }
.prizes li { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border-radius: 14px; background: var(--pn-bg); box-shadow: inset 0 0 0 1px var(--border); font-size: 14px; color: var(--text-soft); }
.prizes i { width: .8rem; height: .8rem; flex-shrink: 0; border-radius: 4px; }
.prizes b { margin-left: auto; font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.spins { display: flex; align-items: center; gap: .6rem; font-size: 14px; color: var(--text-soft); }
.spins b { font-family: var(--font-display); font-size: 1.6rem; color: var(--text); }

/* ---------- API ---------- */
.key { display: flex; align-items: center; gap: .5rem; padding: .25rem .25rem .25rem .7rem; border-radius: 10px; font: 500 13px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--text-soft); background: var(--pn-bg); box-shadow: inset 0 0 0 1px var(--border); }
.key span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scopes { display: flex; flex-wrap: wrap; gap: .3rem; }
.scope { padding: .15rem .5rem; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--hl); background: rgb(12 90 130 / .08); }
.code { position: relative; overflow: hidden; border-radius: 16px; background: #0b1722; box-shadow: 0 0 0 1px rgb(255 255 255 / .06); }
.code-tabs { display: flex; gap: .2rem; padding: .4rem .5rem 0; border-bottom: 1px solid rgb(255 255 255 / .08); }
.code-tabs button { height: 2.3rem; padding-inline: .8rem; border-radius: 8px 8px 0 0; font-size: 13px; font-weight: 600; color: #8fb3c9; transition: color .2s, background-color .2s; }
.code-tabs button[aria-selected="true"] { color: #fff; background: rgb(255 255 255 / .06); }
.code pre { margin: 0; padding: 1.1rem 1.2rem; overflow-x: auto; font: 13px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; color: #d6e6f0; }
.code pre[hidden] { display: none; }
.code .c-k { color: #6cc3ec; } .code .c-s { color: #5eead4; } .code .c-c { color: #6b8799; }
.code .icon-btn { position: absolute; top: .4rem; right: .5rem; color: #8fb3c9; }
.code .icon-btn:hover { color: #fff; background: rgb(255 255 255 / .08); box-shadow: none; }
.newkey { display: flex; align-items: center; gap: .6rem; padding: .8rem; border-radius: 14px; background: rgb(16 185 129 / .08); box-shadow: inset 0 0 0 1px rgb(16 185 129 / .25); }
.newkey code { flex: 1; min-width: 0; overflow-wrap: anywhere; font: 600 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--text); }

/* ---------- Duyurular ---------- */
.ann-list { display: grid; gap: 1rem; }
.ann { position: relative; display: grid; gap: .55rem; padding: 1.25rem 1.35rem; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), 0 0 0 5px var(--shell); transition: transform .45s var(--ui-spring), box-shadow .3s; }
.ann:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--border), 0 0 0 5px var(--shell), 0 22px 40px -28px rgb(12 90 130 / .45); }
.ann.is-unread::before { content: ""; position: absolute; left: -1px; top: 1.4rem; bottom: 1.4rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--hl); }
.ann-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; font-size: 12.5px; color: var(--text-muted); }
.ann h2 { font-family: var(--font-display); font-size: 17.5px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.ann p { font-size: 14.5px; line-height: 1.65; color: var(--text-soft); }
.ann-more { overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ui-spring); }
.ann-more > div { min-height: 0; }
.ann.is-open .ann-more { grid-template-rows: 1fr; }
.ann-more p { padding-top: .5rem; }
.ann-toggle { justify-self: start; display: inline-flex; align-items: center; gap: .3rem; font-size: 13.5px; font-weight: 600; color: var(--hl); }
.ann-toggle svg { width: .95rem; height: .95rem; transition: transform .45s var(--ui-spring); }
.ann.is-open .ann-toggle svg { transform: rotate(180deg); }
.ann[hidden] { display: none; }

/* ---------- Davet et ---------- */
.ref-hero { position: relative; overflow: hidden; display: grid; gap: 1.25rem; padding: 1.75rem; border-radius: 24px; color: #e6f1f8; background: radial-gradient(50% 80% at 100% 0%, rgb(108 195 236 / .35), transparent 70%), radial-gradient(40% 70% at 0% 100%, rgb(16 185 129 / .22), transparent 70%), linear-gradient(135deg, #0e6a98, #083b57); box-shadow: 0 0 0 6px var(--shell), 0 0 0 7px var(--shell-line); }
@media (min-width: 900px) { .ref-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; padding: 2.25rem; } }
.ref-hero h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.12; color: #fff; }
.ref-hero h2 span { color: #9fdcf7; }
.ref-hero p { margin-top: .5rem; font-size: 15px; color: rgb(230 241 248 / .78); }
.ref-link { display: flex; align-items: center; gap: .5rem; padding: .4rem .4rem .4rem 1rem; border-radius: 999px; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
.ref-link code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px ui-monospace, SFMono-Regular, Consolas, monospace; color: #fff; }
.ref-copy { display: inline-flex; align-items: center; gap: .4rem; height: 2.5rem; padding-inline: 1rem; border-radius: 999px; font-size: 14px; font-weight: 600; color: #083b57; background: #fff; transition: transform .25s var(--ui-spring); }
.ref-copy:active { transform: scale(.96); }
.ref-copy svg { width: 1rem; height: 1rem; }
.ref-share { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .85rem; }
.ref-share a { display: inline-flex; align-items: center; gap: .4rem; height: 2.2rem; padding-inline: .85rem; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); transition: background-color .2s; }
.ref-share a:hover { background: rgb(255 255 255 / .18); }
.ref-share svg { width: .95rem; height: .95rem; }
.steps3 { display: grid; gap: 1rem; counter-reset: s; }
@media (min-width: 760px) { .steps3 { grid-template-columns: repeat(3, 1fr); } }
.steps3 li { list-style: none; padding: 1.15rem; border-radius: 18px; background: var(--pn-bg); box-shadow: inset 0 0 0 1px var(--border); }
.steps3 li::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: .7rem; border-radius: 50%; font-size: 13.5px; font-weight: 700; color: #fff; background: var(--navy-900); }
[data-theme="dark"] .steps3 li::before { color: #061b28; background: var(--hl); }
.steps3 b { display: block; font-size: 14.5px; color: var(--text); }
.steps3 small { display: block; margin-top: .2rem; font-size: 13px; line-height: 1.55; color: var(--text-muted); }

/* ---------- Bakiye ekle ---------- */
.amounts { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .amounts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.amount { position: relative; display: grid; justify-items: center; gap: .1rem; padding: 1rem .5rem; border-radius: 16px; cursor: pointer; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .3s var(--ui-spring), transform .35s var(--ui-spring); }
.amount:hover { transform: translateY(-2px); }
.amount input { position: absolute; opacity: 0; }
.amount b { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -.03em; color: var(--text); }
.amount small { font-size: 12px; color: var(--ok); font-weight: 600; }
.amount small:empty { visibility: hidden; }
.amount:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--hl), 0 0 0 4px rgb(12 90 130 / .1); }
.amount:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--hl), 0 0 0 4px rgb(12 90 130 / .2); }
.amount-custom { display: flex; align-items: center; height: 3.4rem; margin-top: .75rem; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)); transition: box-shadow .3s var(--ui-spring); }
.amount-custom:focus-within { box-shadow: inset 0 0 0 1.5px var(--hl), 0 0 0 4px rgb(12 90 130 / .12); }
.amount-custom span { padding-inline: 1rem; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--text-muted); }
.amount-custom input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 700 1.2rem var(--font-display); color: var(--text); }
.sum { display: grid; gap: .6rem; font-size: 14px; }
.sum div { display: flex; justify-content: space-between; gap: 1rem; color: var(--text-soft); }
.sum b { color: var(--text); font-variant-numeric: tabular-nums; }
.sum .is-bonus b { color: var(--ok); }
.sum .is-grand { padding-top: .75rem; border-top: 1px solid var(--border); font-size: 15.5px; font-weight: 600; color: var(--text); }
.sum .is-grand b { font-family: var(--font-display); font-size: 1.45rem; letter-spacing: -.03em; color: var(--navy-900); }
[data-theme="dark"] .sum .is-grand b { color: var(--hl); }
.balance-card { padding: 1.35rem; border-radius: 22px; color: #e6f1f8; background: radial-gradient(60% 80% at 100% 0%, rgb(108 195 236 / .35), transparent 70%), linear-gradient(135deg, #0e6a98, #083b57); box-shadow: 0 0 0 6px var(--shell); }
.balance-card small { font-size: 13px; color: rgb(230 241 248 / .75); }
.balance-card b { display: block; margin-top: .2rem; font-family: var(--font-display); font-size: 2.1rem; letter-spacing: -.04em; color: #fff; }

/* ---------- Hesap hareketleri ---------- */
.amt-in { color: var(--ok) !important; }
.amt-out { color: var(--text) !important; }
.tx-type { display: inline-flex; align-items: center; gap: .4rem; font-size: 13.5px; color: var(--text-soft); }
.tx-type i { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 10px; }
.tx-type i svg { width: .95rem; height: .95rem; }
.tx-type .is-in { color: var(--ok); background: var(--ok-soft); }
.tx-type .is-out { color: var(--hl); background: rgb(12 90 130 / .08); }
.tx-type .is-gift { color: #8b5cf6; background: rgb(139 92 246 / .1); }

/* Konfeti (çark kazancı) */
.confetti { position: fixed; inset: 0; z-index: 450; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: confetti 1.6s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes confetti { to { transform: translate(var(--dx), 105vh) rotate(var(--rot)); opacity: .9; } }

/* Yazdırma: yalnızca fatura */
@media print {
  .sb, .tb, .ph-acts, .ph-back, .pn-foot, .side-stack, .toast, .no-print { display: none !important; }
  .pn { display: block; } .pn-body { background: #fff; }
  .card { box-shadow: none !important; }
  .cols-main { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .wheel-disc { transition-duration: .01s; }
  .typing i, .confetti i, .tpanel, .msg.is-new { animation: none !important; }
}

/* 2FA: QR önizlemesi (temsili desen; gerçek QR sunucuda üretilir), OTP alanı, yedek kodlar */
.qr { position: relative; width: 11rem; aspect-ratio: 1; margin: .25rem auto 0; border-radius: 14px; background-color: #fff; box-shadow: 0 0 0 1px var(--border), 0 0 0 6px var(--shell);
  background-image:
    radial-gradient(circle at 18% 18%, transparent 9%, #0b1722 9.5%, #0b1722 14%, transparent 14.5%),
    radial-gradient(circle at 82% 18%, transparent 9%, #0b1722 9.5%, #0b1722 14%, transparent 14.5%),
    radial-gradient(circle at 18% 82%, transparent 9%, #0b1722 9.5%, #0b1722 14%, transparent 14.5%),
    repeating-conic-gradient(#0b1722 0 25%, transparent 0 50%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 14px 14px; background-position: 0 0, 0 0, 0 0, 7px 3px; }
.qr::after { content: ""; position: absolute; inset: 28% 28%; border-radius: 8px; background: #fff; box-shadow: 0 0 0 4px #fff; }
.otp { text-align: center; letter-spacing: .5em; font: 600 1.35rem/1 ui-monospace, SFMono-Regular, Consolas, monospace !important; }
.wmm .mf-field input.otp { width: 100%; padding: .8rem; border: 0; border-radius: 14px; color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)); outline: 0; }
.wmm .mf-field input.otp:focus { box-shadow: inset 0 0 0 1.5px var(--hl), 0 0 0 4px rgb(12 90 130 / .12); }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.codes code { padding: .6rem; border-radius: 10px; text-align: center; font: 600 14px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; color: var(--text); background: var(--pn-bg); box-shadow: inset 0 0 0 1px var(--border); }
/* Modal içindeki sayfa formları */
.wmm .pform .mf-field input { width: 100%; padding: .75rem .95rem; border: 0; border-radius: 14px; font: inherit; font-size: 14.5px; color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)); outline: 0; transition: box-shadow .3s var(--ui-spring); }
.wmm .pform .mf-field input:focus { box-shadow: inset 0 0 0 1.5px var(--hl), 0 0 0 4px rgb(12 90 130 / .12); }

/* =========================================================
   HESAP / MUHASEBE EK SAYFALARI
   ========================================================= */
/* Onay kutusu (panel formları) */
.af-check { display: flex; align-items: flex-start; gap: .65rem; font-size: 13.5px; line-height: 1.5; color: var(--text-soft); cursor: pointer; }
.af-check input { appearance: none; -webkit-appearance: none; position: relative; flex-shrink: 0; width: 1.15rem; height: 1.15rem; margin-top: .1rem; border-radius: 6px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border-strong, var(--border)); cursor: pointer; transition: background-color .25s var(--ui-spring), box-shadow .25s var(--ui-spring); }
.af-check input::after { content: ""; position: absolute; left: .38rem; top: .17rem; width: .3rem; height: .58rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .35s var(--ui-spring); }
.af-check input:checked { background: var(--navy-900); box-shadow: none; }
.af-check input:checked::after { transform: rotate(45deg) scale(1); }
.af-check input:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--hl); }

/* Kontak kartları */
.contact .card-head h2 { font-size: 16px; }

/* Veri işleme sözleşmesi */
.dpa-doc { max-height: 32rem; overflow-y: auto; padding-right: .5rem; scrollbar-width: thin; outline: none; }
.dpa-doc:focus-visible { box-shadow: 0 0 0 2px var(--hl); border-radius: 8px; }
.dpa-doc h3 { margin: 1.15rem 0 .35rem; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); }
.dpa-doc h3:first-child { margin-top: 0; }
.dpa-doc p { font-size: 14.5px; line-height: 1.7; color: var(--text-soft); }
.dpa-note { margin-top: 1.25rem; padding: .85rem 1rem; border-radius: 12px; font-size: 13px !important; color: var(--text-muted) !important; background: var(--pn-bg); }
.dpa-check { margin-top: .25rem; }
.dpa-done { display: grid; justify-items: center; gap: .35rem; padding: 1rem 0 .25rem; text-align: center; }
.dpa-done b { font-size: 15px; color: var(--text); }
.dpa-done small { font-size: 13px; color: var(--text-muted); }
.dpa-seal { width: 3.4rem; height: 3.4rem; margin-bottom: .4rem; display: grid; place-items: center; border-radius: 50%; color: var(--ok); background: var(--ok-soft); box-shadow: 0 0 0 7px rgb(16 185 129 / .06); animation: wmm-pop .6s cubic-bezier(.34, 1.56, .64, 1) both; }
.dpa-seal svg { width: 1.6rem; height: 1.6rem; }
.dpa-done[hidden], [data-dpa-form][hidden] { display: none; }

/* Resmi fatura önizlemesi */
.doc-prev { padding: 1.25rem; border-radius: 14px; background: #fff; color: #1e293b; box-shadow: inset 0 0 0 1px #e2e8f0; }
.doc-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; margin-bottom: .5rem; border-bottom: 2px solid #0c5a82; }
.doc-head b { display: block; font-size: 15px; } .doc-head small { font-size: 12px; color: #64748b; }
.doc-gib { text-align: right; } .doc-gib b { color: #0c5a82; letter-spacing: .06em; }
.doc-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px dashed #e2e8f0; font-size: 13.5px; }
.doc-row span { color: #64748b; } .doc-row b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.doc-row.is-total { border-bottom: 0; font-size: 15px; } .doc-row.is-total b { color: #0c5a82; font-size: 17px; }
.doc-note { margin-top: .75rem; font-size: 12px; color: #64748b; }

/* =========================================================
   SİPARİŞ AKIŞI
   ========================================================= */
.osteps { display: flex; gap: .5rem; list-style: none; padding: 0; counter-reset: none; }
.osteps li { flex: 1; display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: 14px; font-size: 14px; color: var(--text-muted); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); transition: color .3s, box-shadow .3s var(--ui-spring); }
.osteps li span { width: 1.8rem; height: 1.8rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 700; color: var(--text-muted); background: var(--pn-bg); box-shadow: inset 0 0 0 1px var(--border); transition: background-color .3s, color .3s; }
.osteps li.is-on { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--hl), 0 0 0 4px rgb(12 90 130 / .1); }
.osteps li.is-on span { color: #fff; background: var(--navy-900); box-shadow: none; }
.osteps li.is-done span { color: #fff; background: #10b981; box-shadow: none; }
.osteps li.is-done { color: var(--text-soft); }
@media (max-width: 559px) { .osteps li b { display: none; } .osteps li { justify-content: center; } }
.ostep-foot { display: flex; justify-content: space-between; gap: .6rem; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.oplans { display: grid; gap: .85rem; margin-top: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.oplan { position: relative; display: grid; gap: .35rem; padding: 1.15rem; border-radius: 18px; cursor: pointer; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .3s var(--ui-spring), transform .4s var(--ui-spring); }
.oplan:hover { transform: translateY(-2px); }
.oplan input { position: absolute; opacity: 0; }
.oplan:has(input:checked) { box-shadow: inset 0 0 0 2px var(--hl), 0 0 0 5px rgb(12 90 130 / .1); }
.oplan:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--hl), 0 0 0 5px rgb(12 90 130 / .25); }
.oplan-n { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text); }
.oplan-p { font-size: 13px; color: var(--text-muted); }
.oplan-p b { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -.03em; color: var(--text); }
.oplan ul { display: grid; gap: .3rem; margin-top: .5rem; list-style: none; padding: 0; font-size: 13.5px; color: var(--text-soft); }
.oplan li { display: flex; align-items: center; gap: .45rem; }
.oplan li::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: #10b981; }
.oplan-badge { position: absolute; top: -.65rem; right: 1rem; padding: .15rem .6rem; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--navy-900); }
[data-theme="dark"] .oplan-badge { color: #061b28; background: var(--hl); }
.ocycle, .oloc { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.ocycle label, .oloc label { position: relative; cursor: pointer; }
.ocycle input, .oloc input { position: absolute; opacity: 0; }
.ocycle span, .oloc span { display: grid; gap: .1rem; padding: .75rem .9rem; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .3s var(--ui-spring); }
.ocycle b, .oloc b { font-size: 14px; color: var(--text); }
.ocycle small, .oloc small { font-size: 12.5px; color: var(--text-muted); }
.ocycle small { color: var(--ok); font-weight: 600; }
.ocycle input:checked + span, .oloc input:checked + span { box-shadow: inset 0 0 0 1.5px var(--hl), 0 0 0 4px rgb(12 90 130 / .1); }
.ocycle input:focus-visible + span, .oloc input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--hl); }
.oinput, .ocoupon input { width: 100%; margin-top: .55rem; padding: .75rem .95rem; border: 0; border-radius: 14px; font: inherit; font-size: 14.5px; color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)); outline: 0; }
.oinput:focus, .ocoupon input:focus { box-shadow: inset 0 0 0 1.5px var(--hl), 0 0 0 4px rgb(12 90 130 / .12); }
.oaddons { display: grid; gap: .5rem; }
.oaddon { padding: .75rem .9rem; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--border); }
.oaddon b { display: block; font-size: 14px; color: var(--text); } .oaddon small { font-size: 12.5px; color: var(--text-muted); }
.ocoupon { display: flex; gap: .5rem; align-items: center; }
.ocoupon input { margin: 0; text-transform: uppercase; }
.osum-wrap { position: sticky; top: 5rem; }
.osum-lines { display: grid; gap: .55rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--border); list-style: none; }
.osum-lines li { display: flex; justify-content: space-between; gap: 1rem; font-size: 14px; color: var(--text-soft); }
.osum-lines b { color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.osum-lines .is-empty { color: var(--text-muted); font-style: italic; }
.osum-note { margin-top: .85rem; font-size: 12.5px; color: var(--text-muted); }
.odom-search { margin-top: 1rem; padding-right: .3rem; }
.odom-list { display: grid; gap: .45rem; margin-top: .9rem; list-style: none; padding: 0; }
.odom-list li { display: flex; align-items: center; gap: .9rem; padding: .75rem .9rem; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); animation: pn-rise .45s var(--ui-spring) both; }
.odom-list li span { flex: 1; min-width: 0; } .odom-list b { display: block; color: var(--text); } .odom-list small { font-size: 12.5px; color: var(--ok); }
.odom-list .is-taken small { color: var(--text-muted); } .odom-list .is-taken b { color: var(--text-muted); }
.odom-list em { font-style: normal; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.spin { animation: as-spin-p .8s linear infinite; }

/* Alan adı / hosting */
.dns-type { display: inline-grid; place-items: center; min-width: 3.4rem; padding: .2rem .5rem; border-radius: 8px; font: 700 12px ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--hl); background: rgb(12 90 130 / .08); }
.dns-table code, .ptable td > code { font: 13px ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--text); overflow-wrap: anywhere; }
tr.is-new { animation: pn-rise .5s var(--ui-spring) both; }
.mini-bar { display: inline-block; width: 4rem; height: 5px; margin-right: .4rem; vertical-align: middle; border-radius: 5px; background: linear-gradient(90deg, var(--hl) var(--v), var(--hover-strong, var(--border)) var(--v)); }
.mail-addr { display: flex; align-items: center; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)); }
.mail-addr input { box-shadow: none !important; border-radius: 14px 0 0 14px !important; }
.mail-addr em { padding: 0 .9rem; font-style: normal; font-size: 14px; color: var(--text-muted); white-space: nowrap; }
.mail-addr:focus-within { box-shadow: inset 0 0 0 1.5px var(--hl), 0 0 0 4px rgb(12 90 130 / .12); }
.hosting-quick .actcard { padding: .9rem; }

/* =========================================================
   BİLGİ BANKASI
   ========================================================= */
.kb-hero { position: relative; overflow: hidden; display: grid; justify-items: center; gap: .6rem; padding: clamp(1.75rem, 4vw, 3rem) 1.25rem; border-radius: 24px; text-align: center; color: #e6f1f8; background: radial-gradient(50% 80% at 100% 0%, rgb(108 195 236 / .35), transparent 70%), radial-gradient(40% 70% at 0% 100%, rgb(16 185 129 / .2), transparent 70%), linear-gradient(135deg, #0e6a98, #083b57); box-shadow: 0 0 0 6px var(--shell), 0 0 0 7px var(--shell-line); }
.kb-hero h1 { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 700; letter-spacing: -.04em; color: #fff; }
.kb-search { display: flex; align-items: center; gap: .6rem; width: min(100%, 36rem); height: 3.4rem; margin-top: .5rem; padding-inline: 1.1rem; border-radius: 16px; background: #fff; box-shadow: 0 0 0 6px rgb(255 255 255 / .15), 0 18px 40px -18px rgb(0 0 0 / .5); }
.kb-search svg { width: 1.15rem; height: 1.15rem; color: #64748b; }
.kb-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15.5px; color: #0f172a; }
.kb-pop { font-size: 13px; color: rgb(230 241 248 / .75); }
.kb-pop button { margin-left: .35rem; padding: .2rem .6rem; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #fff; background: rgb(255 255 255 / .12); }
.kb-pop button:hover { background: rgb(255 255 255 / .2); }
.kb-cats { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.kb-cat { display: grid; justify-items: start; gap: .35rem; padding: 1.1rem; border-radius: 18px; text-align: left; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), 0 0 0 5px var(--shell); transition: transform .4s var(--ui-spring), box-shadow .3s; }
.kb-cat:hover, .kb-cat[aria-pressed="true"] { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--hl), 0 0 0 5px var(--shell); }
.kb-cat span { width: 2.4rem; height: 2.4rem; margin-bottom: .2rem; display: grid; place-items: center; border-radius: 12px; color: var(--hl); background: rgb(12 90 130 / .08); }
.kb-cat span svg { width: 1.15rem; height: 1.15rem; }
.kb-cat b { font-size: 14.5px; color: var(--text); } .kb-cat small { font-size: 12.5px; color: var(--text-muted); }
.kb-list { display: grid; list-style: none; padding: 0; }
.kb-list a { display: flex; align-items: center; gap: .85rem; padding: .85rem .5rem; border-top: 1px solid var(--border); border-radius: 12px; transition: background-color .2s; }
.kb-list li:first-child a { border-top: 0; }
.kb-list a:hover { background: var(--hover); }
.kb-list a > span:nth-child(2) { flex: 1; min-width: 0; }
.kb-list b { display: block; font-size: 14.5px; color: var(--text); } .kb-list small { font-size: 12.5px; color: var(--text-muted); }
.kb-list a > svg:last-child { width: 1rem; height: 1rem; color: var(--text-muted); transition: transform .4s var(--ui-spring); }
.kb-list a:hover > svg:last-child { transform: translateX(3px); color: var(--hl); }
.kb-list li[hidden] { display: none; }
.kb-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.4rem; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), 0 0 0 5px var(--shell); }
.kb-cta b { display: block; font-size: 15.5px; color: var(--text); } .kb-cta small { font-size: 13px; color: var(--text-muted); }
.kb-body { padding: clamp(1.25rem, 3vw, 2rem); }
.kb-body h2 { margin: 1.6rem 0 .6rem; font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--text); scroll-margin-top: 5.5rem; }
.kb-body p { font-size: 15px; line-height: 1.75; color: var(--text-soft); }
.kb-lead { font-size: 16.5px !important; color: var(--text) !important; }
.kb-body .creds { margin-top: .8rem; }
.kb-steps { display: grid; gap: .6rem; counter-reset: k; list-style: none; padding: 0; }
.kb-steps li { position: relative; padding-left: 2.4rem; font-size: 15px; line-height: 1.65; color: var(--text-soft); }
.kb-steps li::before { counter-increment: k; content: counter(k); position: absolute; left: 0; top: .05rem; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; font-size: 12.5px; font-weight: 700; color: var(--hl); background: rgb(12 90 130 / .1); }
.kb-steps b { color: var(--text); }
.kb-tip { display: flex; gap: .7rem; margin-top: 1.4rem; padding: 1rem 1.1rem; border-radius: 14px; font-size: 14px; line-height: 1.6; color: var(--text-soft); background: rgb(245 158 11 / .1); box-shadow: inset 0 0 0 1px rgb(245 158 11 / .3); }
.kb-tip svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; color: var(--warn); }
.kb-tip b { color: var(--text); }
.kb-vote { display: grid; justify-items: center; gap: .7rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); text-align: center; }
.kb-vote b { font-size: 15px; color: var(--text); } .kb-vote > div { display: flex; gap: .5rem; }
.kb-thanks { font-size: 14px; color: var(--text-muted); }
.kb-toc { position: sticky; top: 5rem; }
.kb-toc ol { display: grid; gap: .2rem; list-style: none; padding: 0; }
.kb-toc a { display: block; padding: .45rem .6rem; border-radius: 10px; font-size: 14px; color: var(--text-soft); transition: background-color .2s, color .2s; }
.kb-toc a:hover { color: var(--text); background: var(--hover); }
.rows a { color: inherit; } .rows a:hover { color: var(--hl); }

/* =========================================================
   BİLDİRİMLER
   ========================================================= */
.nt-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.nt-filters button { height: 2.15rem; padding-inline: .85rem; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-soft); background: var(--pn-bg); box-shadow: inset 0 0 0 1px var(--border); transition: color .2s, background-color .2s; }
.nt-filters button[aria-pressed="true"] { color: #fff; background: var(--navy-900); box-shadow: none; }
[data-theme="dark"] .nt-filters button[aria-pressed="true"] { color: #061b28; background: var(--hl); }
.nt-list { display: grid; list-style: none; padding: 0; }
.nt-list li { position: relative; display: flex; align-items: center; gap: .85rem; padding: .85rem .6rem .85rem 1rem; border-top: 1px solid var(--border); border-radius: 12px; transition: background-color .2s; }
.nt-list li:first-child { border-top: 0; }
.nt-list li:hover { background: var(--hover); }
.nt-list li.is-unread::before { content: ""; position: absolute; left: .2rem; top: 50%; width: .45rem; height: .45rem; margin-top: -.225rem; border-radius: 50%; background: var(--hl); }
.nt-list li.is-unread b { font-weight: 700; }
.nt-list a { flex: 1; min-width: 0; }
.nt-list a b { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); }
.nt-list a small { display: block; font-size: 13px; color: var(--text-muted); }
.nt-list time { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.nt-acts { display: flex; gap: .15rem; opacity: .5; transition: opacity .2s; }
.nt-list li:hover .nt-acts, .nt-acts:focus-within { opacity: 1; }
.nt-list li[hidden] { display: none; }
.nt-pref td[data-label] { width: 6rem; }
@media (max-width: 639px) { .nt-list time { display: none; } }

/* =========================================================
   SİSTEM DURUMU
   ========================================================= */
.st-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; padding: 1.4rem 1.5rem; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px rgb(16 185 129 / .35), 0 0 0 6px rgb(16 185 129 / .08); }
.st-banner > div { flex: 1; min-width: 14rem; }
.st-banner h1 { font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem); font-weight: 700; letter-spacing: -.03em; color: var(--text); }
.st-banner p { margin-top: .15rem; font-size: 14px; color: var(--text-muted); }
.st-pulse { position: relative; width: 1rem; height: 1rem; border-radius: 50%; background: #10b981; }
.st-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #10b981; animation: st-ping 2s cubic-bezier(.2, .6, .4, 1) infinite; }
@keyframes st-ping { to { transform: scale(2.6); opacity: 0; } }
.st-plan p { font-size: 14.5px; line-height: 1.65; color: var(--text-soft); }
.st-plan a { font-weight: 600; color: var(--hl); }
.st-legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: 12.5px; color: var(--text-muted); }
.st-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.st-legend i { width: .7rem; height: .7rem; border-radius: 3px; }
.st-legend .ok, .st-bars .ok { background: #10b981; }
.st-legend .minor, .st-bars .minor { background: #f59e0b; }
.st-legend .major, .st-bars .major { background: #ef4444; }
.st-list { display: grid; gap: 1.2rem; list-style: none; padding: 0; }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.st-row b { font-size: 14.5px; color: var(--text); }
.st-bars { display: grid; grid-template-columns: repeat(90, 1fr); gap: 2px; height: 2.1rem; }
.st-bars i { border-radius: 3px; opacity: .85; transition: opacity .2s, transform .25s var(--ui-spring); }
.st-bars i:hover { opacity: 1; transform: scaleY(1.12); }
.st-list small { display: block; margin-top: .35rem; font-size: 12.5px; color: var(--text-muted); text-align: right; }
@media (max-width: 639px) { .st-bars { grid-template-columns: repeat(45, 1fr); } .st-bars i:nth-child(-n+45) { display: none; } }
.st-dot { display: inline-block; width: .45rem; height: .45rem; margin-right: .35rem; border-radius: 50%; background: #10b981; vertical-align: 1px; }

/* =========================================================
   YENİLEME TAKVİMİ: tek serili sütun grafik (tek ton, ince sütun, 4px yuvarlak uç, ipucu)
   ========================================================= */
.rn-chart { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; height: 15rem; }
.rn-grid { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 1.7rem; font-size: 11.5px; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.rn-bars { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 2px; padding-bottom: 1.7rem; background-image: linear-gradient(var(--border) 1px, transparent 1px); background-size: 100% calc((100% - 1.7rem) / 2); background-repeat: repeat-y; }
.rn-bar { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-radius: 6px; }
.rn-bar i { width: min(60%, 1.6rem); height: max(var(--h), 2px); border-radius: 4px 4px 0 0; background: #6fa9c7; transform-origin: bottom; animation: bar-grow .9s var(--ui-spring) both; transition: background-color .2s; }
.rn-bar.is-now i { background: var(--navy-900); }
[data-theme="dark"] .rn-bar i { background: #3f7896; } [data-theme="dark"] .rn-bar.is-now i { background: var(--hl); }
.rn-bar:hover i, .rn-bar:focus-visible i { background: var(--navy-900); }
[data-theme="dark"] .rn-bar:hover i, [data-theme="dark"] .rn-bar:focus-visible i { background: var(--hl); }
.rn-bar span { position: absolute; bottom: -1.5rem; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.rn-bar:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--hl); }
@keyframes bar-grow { from { transform: scaleY(0); } }
.rn-tip { position: absolute; z-index: 3; padding: .45rem .7rem; border-radius: 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--text); background: var(--surface); box-shadow: 0 0 0 1px var(--border), 0 10px 24px -12px rgb(8 40 60 / .45); transform: translate(-50%, -100%); pointer-events: none; }
.rn-month + .rn-month { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.rn-month h3 { display: flex; justify-content: space-between; margin-bottom: .35rem; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); text-transform: capitalize; }
.rn-month h3 b { font-variant-numeric: tabular-nums; }
.rn-month .rows em { min-width: 6rem; }
.rn-auto { padding: .15rem .55rem; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--warn); background: var(--warn-soft); white-space: nowrap; }
.rn-auto.is-on { color: var(--ok); background: var(--ok-soft); }
@media (max-width: 639px) { .rn-bar span { font-size: 10px; } .rn-chart { height: 12rem; } .rn-auto { display: none; } }

/* =========================================================
   GENEL BAKIŞ: yeni müşteri karşılaması ve yükleniyor iskeleti
   ========================================================= */
.onboard { display: none; }
.pn-new .onboard { display: block; padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), 0 0 0 6px var(--shell), 0 0 0 7px var(--shell-line); }
.pn-new .notice, .pn-new .stats, .pn-new .grid-2, .pn-new .grid-3 { display: none; }
.pn-new .hello-p { visibility: hidden; }
.onboard-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.25rem; }
.onboard-ico { width: 3rem; height: 3rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #0e6a98, #10b981); }
.onboard-head h2 { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--text); }
.onboard-head p { font-size: 14px; color: var(--text-muted); }
.onboard-steps { display: grid; gap: .6rem; list-style: none; padding: 0; }
.onboard-steps li { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; border-radius: 16px; background: var(--pn-bg); box-shadow: inset 0 0 0 1px var(--border); }
.onboard-steps li > span { width: 2rem; height: 2rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 700; color: var(--hl); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border-strong, var(--border)); }
.onboard-steps li.is-done > span { color: #fff; background: #10b981; box-shadow: none; }
.onboard-steps li.is-done b { text-decoration: line-through; color: var(--text-muted); }
.onboard-steps li > div { flex: 1; min-width: 0; }
.onboard-steps b { display: block; font-size: 14.5px; color: var(--text); } .onboard-steps small { font-size: 12.5px; color: var(--text-muted); }

.pn-loading .stat, .pn-loading .card { position: relative; overflow: hidden; }
.pn-loading .stat > *, .pn-loading .card > * { visibility: hidden; }
.pn-loading .stat::before, .pn-loading .card::before { content: ""; position: absolute; inset: 1.1rem; border-radius: 10px; background:
  linear-gradient(var(--hover-strong, var(--border)) 0 0) 0 0 / 40% .8rem no-repeat,
  linear-gradient(var(--hover-strong, var(--border)) 0 0) 0 1.6rem / 70% 1.4rem no-repeat,
  linear-gradient(var(--hover-strong, var(--border)) 0 0) 0 3.8rem / 55% .7rem no-repeat,
  linear-gradient(var(--hover-strong, var(--border)) 0 0) 0 5.2rem / 85% .7rem no-repeat; }
.pn-loading .stat::after, .pn-loading .card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .55) 50%, transparent 70%); transform: translateX(-100%); animation: sk-shine 1.2s ease-in-out infinite; }
[data-theme="dark"] .pn-loading .stat::after, [data-theme="dark"] .pn-loading .card::after { background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .06) 50%, transparent 70%); }
@keyframes sk-shine { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .st-pulse::after, .rn-bar i, .pn-loading .stat::after, .pn-loading .card::after, .odom-list li, tr.is-new { animation: none !important; }
}

.ostep h2:focus, .ostep h2:focus-visible { outline: none; }

/* =========================================================
   VPS: canlı kullanım kartları (tek ton çizgi grafik)
   ========================================================= */
.vps-live { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .vps-live { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vstat { display: grid; gap: .55rem; padding: 1rem 1.1rem; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), 0 0 0 5px var(--shell), 0 0 0 6px var(--shell-line); }
.vstat-h { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.vstat-h span { display: inline-flex; align-items: center; gap: .4rem; font-size: 13px; color: var(--text-muted); }
.vstat-h svg { width: 1rem; height: 1rem; color: var(--hl); }
.vstat-h b { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.vstat small { font-size: 12.5px; color: var(--text-muted); }
.spark { width: 100%; height: 2.4rem; overflow: visible; }
.spark-line { fill: none; stroke: var(--hl); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark-area { fill: rgb(12 90 130 / .08); }
[data-theme="dark"] .spark-area { fill: rgb(92 184 230 / .12); }
.vbar { height: 2.4rem; display: flex; align-items: center; }
.vbar::before { content: ""; width: 100%; height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--navy-900), var(--hl)) 0 0 / var(--v) 100% no-repeat, var(--hover-strong, var(--border)); }

/* =========================================================
   VPS WEB KONSOLU — her iki temada koyu terminal
   ========================================================= */
#m-console .wmm-scroll { padding: 0; display: flex; }
#m-console .wmm-scroll > .wmm-content { flex: 1; display: flex; animation: none; }
.term { --term-fs: 14px; flex: 1; display: flex; flex-direction: column; min-height: min(70vh, 34rem); background: #0b1722; color: #d6e6f0; }
.wmm-dialog.is-full .term { min-height: 0; }
.term-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .55rem .7rem; background: #0f1f2d; border-bottom: 1px solid rgb(255 255 255 / .07); }
.term-status { display: inline-flex; align-items: center; gap: .5rem; padding: 0 .4rem; font-size: 12.5px; font-weight: 600; color: #8fb3c9; white-space: nowrap; }
.term-led { width: .55rem; height: .55rem; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 3px rgb(245 158 11 / .18); animation: term-blink 1s steps(2) infinite; }
.term[data-state="online"] .term-led { background: #10b981; box-shadow: 0 0 0 3px rgb(16 185 129 / .2); animation: none; }
.term[data-state="online"] .term-status { color: #6ee7b7; }
.term[data-state="rebooting"] .term-led { background: #ef4444; box-shadow: 0 0 0 3px rgb(239 68 68 / .2); }
@keyframes term-blink { 50% { opacity: .35; } }
.term-sep { width: 1px; height: 1.2rem; margin: 0 .2rem; background: rgb(255 255 255 / .1); }
.term-grow { flex: 1; }
.term-btn { display: inline-flex; align-items: center; gap: .35rem; height: 2rem; padding: 0 .65rem; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #b9d0de; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); transition: background-color .2s, color .2s, transform .2s var(--ui-spring); }
.term-btn:hover { color: #fff; background: rgb(255 255 255 / .1); }
.term-btn:active { transform: scale(.95); }
.term-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px #6cc3ec; }
.term-btn svg { width: .95rem; height: .95rem; }
.term-btn.is-icon { width: 2rem; padding: 0; justify-content: center; }
@media (max-width: 639px) { .term-btn span { display: none; } .term-btn { width: 2rem; padding: 0; justify-content: center; } }
.term-screen { flex: 1; min-height: 0; overflow-y: auto; padding: .75rem 1rem 1rem; font: var(--term-fs)/1.5 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; cursor: text; scrollbar-width: thin; scrollbar-color: #27445a transparent; outline: none; }
.term-screen:focus-visible { box-shadow: inset 0 0 0 2px #6cc3ec; }
.term-out .tline { min-height: 1.5em; white-space: pre-wrap; word-break: break-word; }
.term-out .t-dim { color: #6b8799; } .term-out .t-acc { color: #6cc3ec; } .term-out .t-cmd { color: #fff; }
.term-out .t-err { color: #f87171; } .term-out .t-warn { color: #fbbf24; }
.term-line { display: flex; align-items: baseline; gap: .6ch; }
.term-ps { color: #5eead4; white-space: nowrap; }
.term-in { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; color: #fff; caret-color: #6cc3ec; }
.term-line[hidden] { display: none; }
.term-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; padding: .45rem .9rem; font-size: 11.5px; color: #6b8799; background: #0f1f2d; border-top: 1px solid rgb(255 255 255 / .07); }
.term-foot span { display: inline-flex; align-items: center; gap: .35rem; }
.term-foot svg { width: .8rem; height: .8rem; }
.term-foot kbd { min-width: auto; height: 1.2rem; padding: 0 .35rem; font-size: 10.5px; color: #b9d0de; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
@media (max-width: 639px) { .term-foot span:nth-child(2) { display: none; } }
@media (prefers-reduced-motion: reduce) { .term-led { animation: none; } }

/* =========================================================
   VPS · SKILL RÖTUŞU (taste-skill + soft-skill) — yalnızca vps.html
   Yapı/renk aynı; derinlik, yaylı hareket, dokunsal tepki, sıralı girişler.
   ========================================================= */
[data-page="vps"] .vps-k { margin: 0; }
[data-page="vps"] .svc-hero .t-ico { box-shadow: 0 0 0 6px var(--shell), 0 0 0 7px var(--shell-line), 0 14px 26px -16px rgb(12 90 130 / .55); transition: transform .5s var(--ui-spring); }
[data-page="vps"] .svc-hero:hover .t-ico { transform: rotate(-6deg) scale(1.04); }
/* Durum: nabız gibi atan nokta */
[data-page="vps"] .vps-state.is-ok::before { animation: vps-pulse 2s cubic-bezier(.2, .6, .4, 1) infinite; }
@keyframes vps-pulse { 0% { box-shadow: 0 0 0 0 rgb(16 185 129 / .55); } 80%, 100% { box-shadow: 0 0 0 6px rgb(16 185 129 / 0); } }
/* Konsol: button-in-button */
[data-page="vps"] .vps-console-btn { padding-right: .35rem; gap: .5rem; }
[data-page="vps"] .vps-console-btn .go { margin: 0; width: 1.85rem; height: 1.85rem; color: #fff; }
[data-theme="dark"] [data-page="vps"] .vps-console-btn .go { color: #061b28; background: rgb(12 90 130 / .14); }
[data-page="vps"] .ph-acts .pbtn svg:first-child { transition: transform .5s var(--ui-spring); }
[data-page="vps"] .ph-acts .pbtn:hover svg:first-child { transform: rotate(-12deg); }
[data-page="vps"] .ph-acts [data-power]:hover svg:first-child { transform: scale(1.12); }

/* Canlı kartlar: yaylı yükselme, çizgi grafik çizilerek gelir, değer değişince kısa vurgu */
[data-page="vps"] .vstat { transition: transform .5s var(--ui-spring), box-shadow .35s var(--ui-spring); }
[data-page="vps"] .vstat:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--border), 0 0 0 5px var(--shell), 0 0 0 6px var(--shell-line), 0 24px 40px -28px rgb(12 90 130 / .5); }
[data-page="vps"] .vstat-h svg { transition: transform .5s var(--ui-spring); }
[data-page="vps"] .vstat:hover .vstat-h svg { transform: scale(1.15) rotate(-8deg); }
[data-page="vps"] .vstat-h b { transition: color .4s; }
[data-page="vps"] .vstat-h b.is-tick { animation: vps-tick .6s var(--ui-spring); }
@keyframes vps-tick { 30% { color: var(--hl); transform: translateY(-1px); } }
/* Grafik yalnızca ilk açılışta soldan sağa açılır (svg kalıcı; içi her ölçümde yenilenir) */
[data-page="vps"] .spark { animation: vps-draw 1.4s var(--ui-spring) .2s both; }
@keyframes vps-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
[data-page="vps"] .vbar::before { animation: vps-fill 1.2s var(--ui-spring) .3s both; }
@keyframes vps-fill { from { background-size: 0 100%, auto; } }

/* Sekme içeriği: sıralı, bulanıktan netliğe */
[data-page="vps"] .tpanel:not([hidden]) > * { animation: vps-in .6s var(--ui-spring) both; }
[data-page="vps"] .tpanel:not([hidden]) > :nth-child(2) { animation-delay: .05s; }
[data-page="vps"] .tpanel:not([hidden]) > :nth-child(3) { animation-delay: .1s; }
[data-page="vps"] .tpanel:not([hidden]) > :nth-child(n+4) { animation-delay: .15s; }
@keyframes vps-in { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } }

/* Bağlantı bilgileri: satır hover, kopyala düğmesi öne çıkar */
[data-page="vps"] .cred { transition: box-shadow .3s var(--ui-spring), transform .4s var(--ui-spring); }
[data-page="vps"] .cred:hover { transform: translateX(2px); box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)), 0 0 0 4px var(--shell); }
[data-page="vps"] .cred .icon-btn { transition: color .2s, background-color .2s, transform .35s var(--ui-spring); }
[data-page="vps"] .cred:hover .icon-btn { color: var(--hl); }
[data-page="vps"] .cred .icon-btn.is-done { transform: scale(1.12); }

/* Anlık görüntü / geçmiş satırları ve tablo satırları */
[data-page="vps"] .rows li { border-radius: 12px; transition: background-color .2s, transform .4s var(--ui-spring); }
[data-page="vps"] .rows li:hover { background: var(--hover); transform: translateX(2px); }
[data-page="vps"] .rows li .t-ico { transition: transform .45s var(--ui-spring); }
[data-page="vps"] .rows li:hover .t-ico { transform: scale(1.08) rotate(-6deg); }
[data-page="vps"] .ptable tbody tr td:first-child { transition: box-shadow .25s; }
[data-page="vps"] .ptable tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--hl); }
[data-page="vps"] tr.is-new td { animation: vps-new 1.6s ease both; }
@keyframes vps-new { from { background: rgb(16 185 129 / .14); } }

/* Tehlikeli bölge */
[data-page="vps"] .vps-danger { box-shadow: inset 0 0 0 1px rgb(220 38 38 / .28), 0 0 0 5px rgb(220 38 38 / .06), 0 0 0 6px rgb(220 38 38 / .12); }
[data-page="vps"] .vps-danger-k { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .9rem; padding: .25rem .7rem; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--danger); background: rgb(220 38 38 / .08); }
[data-page="vps"] .vps-danger-k svg { width: .9rem; height: .9rem; }

/* Yan kartlar */
[data-page="vps"] .side-stack .card { transition: transform .5s var(--ui-spring), box-shadow .35s var(--ui-spring); }
[data-page="vps"] .side-stack .card:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  [data-page="vps"] *, [data-page="vps"] *::before { animation: none !important; transition-duration: .01s !important; }
}

/* =========================================================
   VPS: bağlantı bilgileri 2 sütun · hap sekmeler
   ========================================================= */
.creds-2 { display: grid; gap: .55rem; }
@media (min-width: 720px) { .creds-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Hap sekmeler: tepsi + seçili sekmenin altında kayan beyaz hap (indicator pages.js'ten gelir) */
.vtabs { gap: .2rem; padding: .3rem; border: 0; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), 0 0 0 5px var(--shell), 0 0 0 6px var(--shell-line); }
.vtabs [role="tab"] { position: relative; z-index: 1; height: 2.5rem; gap: .45rem; padding-inline: .95rem; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--text-muted); transition: color .3s var(--ui-spring); }
.vtabs [role="tab"] svg { width: 1rem; height: 1rem; transition: transform .5s var(--ui-spring), color .3s; }
.vtabs [role="tab"]:hover { color: var(--text); }
.vtabs [role="tab"]:hover svg { transform: scale(1.1) rotate(-6deg); }
.vtabs [aria-selected="true"] { color: #fff; }
.vtabs [aria-selected="true"] svg { color: #fff; }
[data-theme="dark"] .vtabs [aria-selected="true"], [data-theme="dark"] .vtabs [aria-selected="true"] svg { color: #061b28; }
.vtabs .ptabs-ind { z-index: 0; top: .3rem; bottom: .3rem; height: auto; border-radius: 12px; background: var(--navy-900); box-shadow: 0 8px 18px -10px rgb(12 90 130 / .8), inset 0 1px 0 rgb(255 255 255 / .15); transition: transform .55s var(--ui-spring), width .55s var(--ui-spring); }
[data-theme="dark"] .vtabs .ptabs-ind { background: var(--hl); }
.vtabs [role="tab"]:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--hl); }
.vt-s { display: none; }
/* Mobil / tablet: 6 eşit sütun, ikon + kısa etiket; uzun ad ekran okuyucu için kalır */
@media (max-width: 899px) {
  .vtabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; gap: .15rem; padding: .25rem; }
  .vtabs [role="tab"] { flex-direction: column; justify-content: center; gap: .2rem; height: 3.35rem; padding: 0 .1rem; border-radius: 11px; }
  .vtabs [role="tab"] svg { width: 1.1rem; height: 1.1rem; }
  .vtabs [role="tab"] > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vt-s { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 600; letter-spacing: -.01em; }
  .vtabs .ptabs-ind { top: .25rem; bottom: .25rem; border-radius: 11px; }
}

/* =========================================================
   TEŞVİK BİLEŞENLERİ — uzun dönem önerisi, tasarruf, otomatik ödeme
   ========================================================= */
:root { --inc-soft: color-mix(in srgb, var(--navy-900) 10%, transparent); --inc-ink: var(--navy-900); }
[data-theme="dark"] { --inc-soft: color-mix(in srgb, var(--hl) 15%, transparent); --inc-ink: var(--hl); }

/* Sipariş: uzun dönem önerisi */
.upsell { width: 100%; display: flex; align-items: center; gap: .7rem; margin-top: .9rem; padding: .7rem; border-radius: 14px; text-align: left; background: var(--ok-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 30%, transparent); transition: transform .3s var(--ui-spring), box-shadow .3s var(--ui-spring); animation: pop-in .45s var(--ui-spring); }
.upsell:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 55%, transparent), 0 0 0 4px var(--ok-soft); }
.upsell:active { transform: scale(.98); }
.upsell-ico { width: 2.2rem; height: 2.2rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; color: #fff; background: var(--ok); }
.upsell-ico svg { width: 1.1rem; height: 1.1rem; }
.upsell-txt { flex: 1; min-width: 0; }
.upsell-txt b { display: block; font-size: 13.5px; color: var(--text); }
.upsell-txt small { font-size: 12px; color: var(--text-muted); }
.upsell-go svg { width: 1rem; height: 1rem; color: var(--ok); transition: transform .35s var(--ui-spring); }
.upsell:hover .upsell-go svg { transform: translateX(3px); }

/* Tasarruf fırsatları (yenileme takvimi) */
.saves { margin-bottom: 1.25rem; }
.saves .card-head p b { color: var(--ok); }
.saves-list { display: grid; gap: .5rem; }
.saves-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem .85rem; padding: .75rem; border-radius: 14px; background: var(--pn-bg); }
.saves-list li > div b { display: block; font-size: 14px; color: var(--text); }
.saves-list li > div small { font-size: 12.5px; color: var(--text-muted); }
.saves-list em { font-style: normal; font-size: 15px; font-weight: 700; color: var(--ok); white-space: nowrap; text-align: right; }
.saves-list em small { font-size: 11.5px; font-weight: 500; color: var(--text-muted); }
.saves-list .pbtn { grid-column: 2 / -1; justify-self: start; }
.sv-ico { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 11px; color: var(--ok); background: var(--ok-soft); }
.sv-ico svg { width: 1.05rem; height: 1.05rem; }
@media (min-width: 720px) { .saves-list li { grid-template-columns: auto 1fr auto auto; } .saves-list .pbtn { grid-column: auto; } }

/* Otomatik ödeme teşviki */
.apay { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1rem; margin-block: 1.25rem; padding: 1rem 1.1rem; border-radius: 18px; background: linear-gradient(120deg, var(--ok-soft), transparent 70%), var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 28%, var(--border)); }
.apay-ico { width: 2.6rem; height: 2.6rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 13px; color: #fff; background: var(--ok); box-shadow: 0 8px 18px -10px rgb(5 150 105 / .8); }
.apay-ico svg { width: 1.2rem; height: 1.2rem; }
.apay-txt { flex: 1 1 18rem; min-width: 0; }
.apay-txt b { display: block; font-size: 14.5px; color: var(--text); }
.apay-txt small { font-size: 12.5px; color: var(--text-muted); }
.apay-txt small span { font-weight: 600; color: var(--text-soft); }



/* Grid öğeleri sekme tepsisinin genişliğiyle büyümesin (mobil taşma) */
.pn-content > *, .cols-main > *, .side-stack > *, .grid-2 > *, .grid-3 > * { min-width: 0; }
@media (max-width: 639px) { .rows li[data-incoming] { flex-wrap: wrap; } .rows li[data-incoming] > div { flex: 1 1 calc(100% - 3rem); min-width: 0; } .rows li[data-incoming] .pbtn { flex: 1; justify-content: center; } }
.creds > * { min-width: 0; } .cred > span { min-width: 0; } .cred code { overflow-wrap: anywhere; }