/* =========================================================
   WimoCP Tema · NOVA — Yönetim paneli
   Müşteri panelinin kabuğunu (panel.css) ve bileşenlerini (pages.css) kullanır;
   burada yalnızca admin'e özgü parçalar var.
   ========================================================= */

/* Sidebar: yönetim rozeti + bölüm başlıkları */
.sb-head .sb-admin { position: absolute; left: 50%; bottom: .2rem; transform: translateX(-50%); padding: .05rem .45rem; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--navy-900); }
[data-theme="dark"] .sb-head .sb-admin { color: #061b28; background: var(--hl); }
.sb-sec { margin: .9rem .75rem .3rem; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.sb-sec:first-child { margin-top: .2rem; }
.sb-cron { display: grid; gap: .55rem; padding: .9rem; border-radius: 16px; background: var(--pn-bg); box-shadow: inset 0 0 0 1px var(--border); }
.sb-cron-row { display: flex; align-items: center; gap: .5rem; font-size: 12.5px; color: var(--text-soft); }
.sb-cron-row b { margin-left: auto; font-weight: 600; color: var(--text); }
.sb-cron-row .st-dot { margin: 0; }
.sb-cron-row .st-dot.is-warn { background: #f59e0b; }
.sb-cron a { justify-self: start; font-size: 12.5px; font-weight: 600; color: var(--hl); }

/* Kırmızı durum etiketi (müşteri panelinde yok) */
.pill.is-danger { color: var(--danger); background: rgb(220 38 38 / .1); }

/* Gösterge paneli: KPI kartları */
.akpi { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.25rem; }
@media (min-width: 1100px) { .akpi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.akpi .stat b { font-variant-numeric: tabular-nums; }
.akpi .stat em.down { color: var(--danger); }
.akpi .stat em.down svg { transform: scaleY(-1); }

/* Gelir grafiği (tek seri, çubuk) */
.rev { position: relative; }
.rev-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; margin-bottom: 1rem; }
.rev-sum b { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.rev-sum small { font-size: 13px; color: var(--text-muted); }
.rev-sum .up { color: var(--ok); font-weight: 600; }
.rev-plot { position: relative; height: 15rem; }
.rev-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rev-grid line { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; }
.rev-axis text { font-size: 11px; fill: var(--text-muted); font-family: inherit; }
.rev-bar { fill: var(--navy-900); transition: opacity .25s var(--ui-spring); }
[data-theme="dark"] .rev-bar { fill: var(--hl); }
.rev-bar.is-now { fill: url(#rev-hatch); }
.rev-plot.is-hover .rev-bar:not(.is-on) { opacity: .35; }
.rev-hit { fill: transparent; cursor: default; }
.rev-tip { position: absolute; z-index: 5; min-width: 9rem; padding: .55rem .7rem; border-radius: 12px; font-size: 12.5px; color: var(--text-soft); background: var(--surface); box-shadow: 0 0 0 1px var(--border), 0 16px 32px -18px rgb(12 60 90 / .45); transform: translate(-50%, calc(-100% - 10px)); pointer-events: none; white-space: nowrap; }
.rev-tip b { display: block; font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.rev-tip[hidden] { display: none; }
.rev-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .75rem; font-size: 12px; color: var(--text-muted); }
.rev-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.rev-legend i { width: .7rem; height: .7rem; border-radius: 3px; background: var(--navy-900); }
[data-theme="dark"] .rev-legend i { background: var(--hl); }
.rev-legend i.is-now { background: repeating-linear-gradient(135deg, var(--navy-900) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--navy-900); }
[data-theme="dark"] .rev-legend i.is-now { background: repeating-linear-gradient(135deg, var(--hl) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--hl); }

/* Bekleyen işler */
.todo { display: grid; gap: .45rem; }
.todo a { display: flex; align-items: center; gap: .75rem; padding: .65rem .7rem; border-radius: 14px; background: var(--pn-bg); transition: background-color .2s, transform .3s var(--ui-spring); }
.todo a:hover { background: var(--hover); }
.todo a:active { transform: scale(.99); }
.todo-ico { width: 2.2rem; height: 2.2rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; color: var(--hl); background: rgb(12 90 130 / .1); }
.todo-ico.is-warn { color: var(--warn); background: var(--warn-soft); }
.todo-ico.is-danger { color: var(--danger); background: rgb(220 38 38 / .1); }
.todo-ico svg { width: 1.05rem; height: 1.05rem; }
.todo a > span:nth-child(2) { flex: 1; min-width: 0; }
.todo b { display: block; font-size: 14px; color: var(--text); }
.todo small { font-size: 12.5px; color: var(--text-muted); }
.todo em { min-width: 2rem; height: 1.6rem; display: grid; place-items: center; padding-inline: .5rem; border-radius: 999px; font-style: normal; font-size: 13px; font-weight: 700; color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }

/* Sunucu durumu */
.srv { display: grid; gap: .8rem; }
.srv li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .75rem; align-items: center; }
.srv li > div:first-child b { display: block; font-size: 13.5px; color: var(--text); }
.srv li > div:first-child small { font-size: 12px; color: var(--text-muted); }
.srv-bars { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.srv-bar { display: grid; gap: .25rem; font-size: 11.5px; color: var(--text-muted); }
.srv-bar span { display: flex; justify-content: space-between; }
.srv-bar span b { font-weight: 600; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.srv-bar i { height: .35rem; border-radius: 999px; background: var(--hover); overflow: hidden; }
.srv-bar i::after { content: ""; display: block; height: 100%; width: var(--v); border-radius: inherit; background: var(--navy-900); }
[data-theme="dark"] .srv-bar i::after { background: var(--hl); }
.srv-bar i.is-warn::after { background: #f59e0b; }

/* Aktivite akışı */
.feed { display: grid; }
.feed li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; padding: .6rem 0; }
.feed li + li::before { content: ""; position: absolute; left: .95rem; top: -.35rem; height: .7rem; width: 1px; background: var(--border); }
.feed-ico { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; color: var(--text-soft); background: var(--pn-bg); box-shadow: inset 0 0 0 1px var(--border); }
.feed-ico svg { width: .9rem; height: .9rem; }
.feed p { font-size: 13.5px; line-height: 1.45; color: var(--text-soft); }
.feed p b { color: var(--text); font-weight: 600; }
.feed time { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* Tablo: seçim kutuları + toplu işlem çubuğu */
.ptable .t-chk { width: 2.5rem; }
.chk { position: relative; display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; }
.chk input { appearance: none; -webkit-appearance: none; width: 1.15rem; height: 1.15rem; margin: 0; border-radius: 6px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border-strong, var(--border)); cursor: pointer; transition: background-color .2s, box-shadow .2s; }
.chk input:checked, .chk input:indeterminate { background: var(--navy-900); box-shadow: none; }
[data-theme="dark"] .chk input:checked, [data-theme="dark"] .chk input:indeterminate { background: var(--hl); }
.chk input:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--hl); }
.chk::after { content: ""; position: absolute; width: .32rem; height: .6rem; margin-top: -.12rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .25s var(--ui-spring); pointer-events: none; }
.chk:has(input:checked)::after { transform: rotate(45deg) scale(1); }
[data-theme="dark"] .chk::after { border-color: #061b28; }
.chk:has(input:indeterminate)::after { width: .55rem; height: 0; margin: 0; border-width: 0 0 2px; transform: none; }
.ptable tr.is-sel td { background: rgb(12 90 130 / .05); }
.bulk { position: sticky; bottom: 1rem; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; padding: .55rem .55rem .55rem 1rem; border-radius: 16px; color: #fff; background: #0a2f45; box-shadow: 0 20px 40px -20px rgb(10 47 69 / .8); animation: pop-in .4s var(--ui-spring); }
.bulk[hidden] { display: none; }
.bulk b { margin-right: auto; font-size: 14px; }
.bulk .pbtn { color: #fff; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
.bulk .pbtn:hover { background: rgb(255 255 255 / .18); }
.bulk .pbtn.is-danger { color: #fecaca; }
@media (max-width: 1023px) { .bulk { bottom: 5.5rem; } }

/* Müşteri detayı */
.cust-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.cust-head .av { width: 3.6rem; height: 3.6rem; font-size: 1.1rem; }
.cust-head h1 { font-family: var(--font-display); font-size: clamp(22px, 3vw, 28px); letter-spacing: -.03em; color: var(--text); }
.cust-head p { font-size: 13.5px; color: var(--text-muted); }
.cust-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.note-list { display: grid; gap: .55rem; }
.note-list li { padding: .7rem .8rem; border-radius: 12px; font-size: 13.5px; line-height: 1.55; color: var(--text-soft); background: #fff8e6; box-shadow: inset 0 0 0 1px #f6e2a8; }
[data-theme="dark"] .note-list li { background: rgb(251 191 36 / .08); box-shadow: inset 0 0 0 1px rgb(251 191 36 / .2); }
.note-list small { display: block; margin-top: .3rem; font-size: 12px; color: var(--text-muted); }
.note-form { display: grid; gap: .5rem; margin-top: .75rem; }
.note-form textarea { width: 100%; min-height: 4.5rem; padding: .7rem .85rem; border: 0; border-radius: 12px; resize: vertical; font: inherit; font-size: 13.5px; color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)); outline: 0; }
.note-form textarea:focus { box-shadow: inset 0 0 0 1.5px var(--hl), 0 0 0 4px rgb(12 90 130 / .12); }
.note-form .pbtn { justify-self: end; }

/* Destek: iç not (müşteri görmez) */
.msg.is-internal .msg-box { background: #fff8e6; box-shadow: inset 0 0 0 1px #f6e2a8; }
[data-theme="dark"] .msg.is-internal .msg-box { background: rgb(251 191 36 / .08); box-shadow: inset 0 0 0 1px rgb(251 191 36 / .22); }
.msg.is-internal .av { background: linear-gradient(135deg, #d97706, #92400e); }
.msg-role.is-internal { color: #b45309; background: rgb(245 158 11 / .14); }
.reply-mode { display: inline-flex; padding: .25rem; border-radius: 12px; background: var(--pn-bg); box-shadow: inset 0 0 0 1px var(--border); }
.reply-mode label { position: relative; }
.reply-mode input { position: absolute; opacity: 0; }
.reply-mode span { display: inline-flex; align-items: center; gap: .35rem; height: 2.1rem; padding-inline: .8rem; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: color .2s, background-color .25s var(--ui-spring), box-shadow .25s; }
.reply-mode span svg { width: .95rem; height: .95rem; }
.reply-mode input:checked + span { color: var(--text); background: var(--surface); box-shadow: 0 1px 2px rgb(12 60 90 / .12), inset 0 0 0 1px var(--border); }
.reply-mode input:focus-visible + span { box-shadow: 0 0 0 2px var(--hl); }
.reply.is-internal textarea { background: #fffcf2; box-shadow: inset 0 0 0 1px #f6e2a8; }
[data-theme="dark"] .reply.is-internal textarea { background: rgb(251 191 36 / .05); box-shadow: inset 0 0 0 1px rgb(251 191 36 / .25); }
.canned { display: flex; flex-wrap: wrap; gap: .35rem; }
.canned button { height: 1.9rem; padding-inline: .7rem; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-soft); background: var(--pn-bg); box-shadow: inset 0 0 0 1px var(--border); transition: color .2s, box-shadow .25s; }
.canned button:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)), 0 0 0 3px var(--shell); }

/* Ürün kartları */
.prods { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.prod { display: grid; gap: .8rem; padding: 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); }
.prod-top { display: flex; align-items: center; gap: .7rem; }
.prod-top > div { flex: 1; min-width: 0; }
.prod-top b { display: block; font-size: 15px; color: var(--text); }
.prod-top small { font-size: 12.5px; color: var(--text-muted); }
.prod-ico { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 12px; color: var(--hl); background: rgb(12 90 130 / .1); }
.prod-ico svg { width: 1.15rem; height: 1.15rem; }
.prod-price { display: flex; align-items: baseline; gap: .3rem; font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -.03em; color: var(--text); }
.prod-price small { font-family: var(--font-body, inherit); font-size: 12.5px; letter-spacing: 0; color: var(--text-muted); }
.prod-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding-top: .8rem; border-top: 1px dashed var(--border); }
.prod-meta div { font-size: 12px; color: var(--text-muted); }
.prod-meta b { display: block; font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.prod-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.prod.is-off { opacity: .65; }

/* Ayarlar: sol menü */
.set-wrap { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 1024px) { .set-wrap { grid-template-columns: 15rem minmax(0, 1fr); } .set-nav { position: sticky; top: 5.5rem; } }
.set-nav { display: grid; gap: .15rem; padding: .4rem; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.set-nav a { display: flex; align-items: center; gap: .6rem; height: 2.5rem; padding-inline: .75rem; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--text-soft); transition: background-color .2s, color .2s; }
.set-nav a svg { width: 1rem; height: 1rem; color: var(--text-muted); }
.set-nav a:hover { background: var(--hover); color: var(--text); }
.set-nav a[aria-current="true"] { color: var(--text); font-weight: 600; background: var(--pn-bg); box-shadow: inset 0 0 0 1px var(--border); }
.set-nav a[aria-current="true"] svg { color: var(--hl); }
@media (max-width: 1023px) { .set-nav { display: flex; overflow-x: auto; scrollbar-width: none; } .set-nav a { flex-shrink: 0; } }
.set-wrap > div { display: grid; gap: 1.25rem; }

/* =========================================================
   GELİŞMİŞ TABLO — sıralama, sayfalama, sütun seçimi, kayıtlı görünümler (admin.js · [data-atable])
   ========================================================= */
.th-sort { display: inline-flex; align-items: center; gap: .3rem; margin: -.3rem -.4rem; padding: .3rem .4rem; border-radius: 8px; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; transition: background-color .2s, color .2s; }
.th-sort:hover { color: var(--text); background: var(--hover); }
.th-sort svg { width: .8rem; height: .8rem; opacity: .35; transition: transform .35s var(--ui-spring), opacity .2s; }
th[aria-sort] .th-sort { color: var(--text); }
th[aria-sort] .th-sort svg { opacity: 1; color: var(--hl); }
th[aria-sort="descending"] .th-sort svg { transform: rotate(180deg); }
.th-sort:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--hl); }
.t-num .th-sort { flex-direction: row-reverse; }
.ptable tr.is-paged { display: none; }
.ptable [data-col-off] { display: none !important; }

.tt-cols { position: relative; margin-left: auto; }
.tt-cols > button { display: inline-flex; align-items: center; gap: .4rem; height: 2.75rem; padding-inline: .9rem; border-radius: 14px; font-size: 13.5px; font-weight: 600; color: var(--text-soft); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)); transition: box-shadow .3s var(--ui-spring), color .2s; }
.tt-cols > button:hover, .tt-cols > button[aria-expanded="true"] { color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)), 0 0 0 4px var(--shell); }
.tt-cols > button svg { width: 1rem; height: 1rem; }
.tt-menu { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30; min-width: 14rem; display: grid; gap: .1rem; padding: .4rem; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--border), 0 0 0 6px var(--shell), 0 24px 50px -20px rgb(12 60 90 / .35); animation: pop-in .35s var(--ui-spring); }
.tt-menu[hidden] { display: none; }
.tt-menu p { padding: .35rem .55rem .25rem; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.tt-menu label { display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: 10px; font-size: 13.5px; color: var(--text-soft); cursor: pointer; }
.tt-menu label:hover { background: var(--hover); color: var(--text); }

.views { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: 1rem; }
.views > span { margin-right: .2rem; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.view-chip { display: inline-flex; align-items: center; gap: .35rem; height: 2rem; padding-inline: .75rem; border-radius: 999px; font-size: 12.5px; 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 .25s var(--ui-spring), box-shadow .25s; }
.view-chip svg { width: .85rem; height: .85rem; }
.view-chip:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)), 0 0 0 3px var(--shell); }
.view-chip[aria-pressed="true"] { color: #fff; background: var(--navy-900); box-shadow: none; }
[data-theme="dark"] .view-chip[aria-pressed="true"] { color: #061b28; background: var(--hl); }
.view-chip.is-add { color: var(--hl); background: transparent; box-shadow: inset 0 0 0 1px dashed var(--border); border: 1px dashed var(--border-strong, var(--border)); box-shadow: none; }
.view-chip .vc-x { display: grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-right: -.35rem; border-radius: 50%; opacity: .7; }
.view-chip .vc-x:hover { opacity: 1; background: rgb(0 0 0 / .08); }
.view-new { display: inline-flex; align-items: center; gap: .3rem; }
.view-new input { height: 2rem; width: 11rem; padding-inline: .75rem; border: 0; border-radius: 999px; font: inherit; font-size: 12.5px; color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--hl); outline: 0; }

.tpage { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); }
.tpage-size { display: inline-flex; align-items: center; gap: .45rem; }
.tpage-size select { height: 2rem; padding: 0 1.6rem 0 .6rem; border: 0; border-radius: 10px; font: inherit; font-size: 13px; color: var(--text); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .45rem center; box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)); appearance: none; -webkit-appearance: none; cursor: pointer; }
.tpage-info { font-variant-numeric: tabular-nums; }
.tpage-nav { display: inline-flex; gap: .25rem; margin-left: auto; }
.tpage-nav button { min-width: 2rem; height: 2rem; display: grid; place-items: center; padding-inline: .5rem; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--text-soft); transition: background-color .2s, color .2s; }
.tpage-nav button:hover:not(:disabled) { color: var(--text); background: var(--hover); }
.tpage-nav button[aria-current="page"] { color: #fff; background: var(--navy-900); }
[data-theme="dark"] .tpage-nav button[aria-current="page"] { color: #061b28; background: var(--hl); }
.tpage-nav button:disabled { opacity: .35; cursor: default; }
.tpage-nav svg { width: 1rem; height: 1rem; }

/* =========================================================
   RAPORLAR
   ========================================================= */
.seg { display: inline-flex; padding: .25rem; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.seg button { height: 2.2rem; padding-inline: .9rem; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--text-muted); transition: color .2s, background-color .3s var(--ui-spring); }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { color: #fff; background: var(--navy-900); }
[data-theme="dark"] .seg button[aria-pressed="true"] { color: #061b28; background: var(--hl); }

.lchart { position: relative; height: 16rem; }
.lchart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lc-line { fill: none; stroke: var(--navy-900); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lc-area { fill: var(--navy-900); opacity: .08; }
[data-theme="dark"] .lc-line { stroke: var(--hl); }
[data-theme="dark"] .lc-area { fill: var(--hl); opacity: .12; }
.lc-cross { stroke: var(--border-strong, var(--text-muted)); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.lc-dot { position: absolute; width: .7rem; height: .7rem; margin: -.35rem 0 0 -.35rem; border-radius: 50%; background: var(--navy-900); box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
[data-theme="dark"] .lc-dot { background: var(--hl); }
.lc-dot[hidden], .lc-tip[hidden] { display: none; }
.lc-tip { position: absolute; z-index: 5; padding: .5rem .7rem; border-radius: 12px; font-size: 12.5px; color: var(--text-soft); background: var(--surface); box-shadow: 0 0 0 1px var(--border), 0 16px 32px -18px rgb(12 60 90 / .45); transform: translate(-50%, calc(-100% - 14px)); pointer-events: none; white-space: nowrap; }
.lc-tip b { display: block; font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }

.hbars { display: grid; gap: .85rem; }
.hbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .75rem; align-items: baseline; }
.hbar span { font-size: 13.5px; color: var(--text-soft); }
.hbar b { font-size: 13.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.hbar b small { margin-left: .35rem; font-weight: 500; color: var(--text-muted); }
.hbar i { grid-column: 1 / -1; height: .55rem; border-radius: 0 4px 4px 0; background: var(--hover); overflow: hidden; }
.hbar i::after { content: ""; display: block; height: 100%; width: var(--v); border-radius: inherit; background: var(--navy-900); transform-origin: left; animation: hbar-in .9s var(--ui-spring) both; }
[data-theme="dark"] .hbar i::after { background: var(--hl); }
.hbar.is-warn i::after { background: #d97706; }
.hbar.is-danger i::after { background: var(--danger); }
@keyframes hbar-in { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .hbar i::after { animation: none; } }

/* =========================================================
   EKİP VE ROLLER
   ========================================================= */
.perm { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.perm-wrap { overflow-x: auto; margin-inline: -.25rem; padding-inline: .25rem; }
.perm th, .perm td { padding: .65rem .6rem; text-align: center; border-bottom: 1px solid var(--border); }
.perm thead th { position: sticky; top: 0; font-size: 12px; font-weight: 700; color: var(--text-soft); background: var(--surface); }
.perm thead th small { display: block; font-weight: 500; color: var(--text-muted); }
.perm th[scope="row"], .perm td:first-child { text-align: left; font-weight: 500; color: var(--text-soft); white-space: nowrap; }
.perm tr.perm-grp th { padding-top: 1.1rem; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); text-align: left; background: transparent; }
.perm tbody tr:not(.perm-grp):hover td, .perm tbody tr:not(.perm-grp):hover th { background: var(--pn-bg); }
.perm .chk input:disabled { opacity: .55; cursor: not-allowed; }
.savebar { position: sticky; bottom: 1rem; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1rem; padding: .6rem .6rem .6rem 1rem; border-radius: 16px; color: #fff; background: #0a2f45; box-shadow: 0 20px 40px -20px rgb(10 47 69 / .8); animation: pop-in .4s var(--ui-spring); }
.savebar[hidden] { display: none; }
.savebar b { margin-right: auto; font-size: 14px; }
.savebar .pbtn { color: #fff; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
.savebar .pbtn.is-primary { color: #0a2f45; background: #fff; box-shadow: none; }
@media (max-width: 1023px) { .savebar { bottom: 5.5rem; } }
.roles { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); margin-bottom: 1.25rem; }
.role { display: grid; gap: .3rem; padding: .9rem 1rem; border-radius: 16px; background: var(--pn-bg); box-shadow: inset 0 0 0 1px var(--border); }
.role b { display: flex; align-items: center; gap: .45rem; font-size: 14px; color: var(--text); }
.role b svg { width: 1rem; height: 1rem; color: var(--hl); }
.role small { font-size: 12.5px; color: var(--text-muted); }

/* =========================================================
   MÜŞTERİ DETAYI — sekmeler + hızlı işlemler
   ========================================================= */
.qact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.qact button, .qact a { display: grid; justify-items: start; gap: .35rem; padding: .75rem; border-radius: 14px; text-align: left; font-size: 13px; font-weight: 600; color: var(--text); background: var(--pn-bg); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .3s var(--ui-spring), transform .3s var(--ui-spring); }
.qact button:hover, .qact a:hover { box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)), 0 0 0 4px var(--shell); }
.qact button:active, .qact a:active { transform: scale(.98); }
.qact svg { width: 1.05rem; height: 1.05rem; color: var(--hl); }
.qact .is-danger svg { color: var(--danger); }
.tabpanel[hidden] { display: none; }
.tabpanel { display: grid; gap: 1.25rem; animation: pn-rise .45s var(--ui-spring) both; }
.mail-list li { cursor: default; }

/* =========================================================
   HİZMET DETAYI (admin/hizmet.html)
   ========================================================= */
.svc-title { display: flex; align-items: center; gap: 1rem; }
.svc-title-ico { width: 3.4rem; height: 3.4rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 16px; color: var(--hl); background: rgb(12 90 130 / .1); box-shadow: 0 0 0 4px var(--shell), 0 0 0 5px var(--shell-line); }
.svc-title-ico svg { width: 1.5rem; height: 1.5rem; }
.svc-title h1 { font-family: var(--font-display); font-size: clamp(22px, 3vw, 28px); letter-spacing: -.03em; color: var(--text); }
.svc-order { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.svc-order b { color: var(--text); }
.svc-cust { display: flex; align-items: center; gap: .75rem; padding: .7rem; border-radius: 14px; background: var(--pn-bg); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .3s var(--ui-spring); }
.svc-cust:hover { box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)), 0 0 0 4px var(--shell); }
.svc-cust > span:nth-child(2) { flex: 1; min-width: 0; }
.svc-cust b { display: block; font-size: 14.5px; color: var(--text); }
.svc-cust small { font-size: 12.5px; color: var(--text-muted); }
.svc-cust > svg { width: 1rem; height: 1rem; color: var(--text-muted); }
.svc-sublabel { margin: 1.1rem 0 .55rem; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.svc-acts { display: flex; flex-wrap: wrap; gap: .4rem; }
.svc-acts button { display: inline-flex; align-items: center; gap: .4rem; height: 2.2rem; padding-inline: .8rem; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-soft); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)); transition: color .2s, box-shadow .3s var(--ui-spring), background-color .2s, transform .2s var(--ui-spring); }
.svc-acts button svg { width: .95rem; height: .95rem; }
.svc-acts button:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)), 0 0 0 4px var(--shell); }
.svc-acts button:active { transform: scale(.97); }
.svc-acts [data-tone="ok"] svg { color: var(--ok); }
.svc-acts [data-tone="warn"] svg { color: var(--warn); }
.svc-acts [data-tone="danger"] { color: var(--danger); }
.svc-acts [data-tone="danger"]:hover { color: var(--danger); background: rgb(220 38 38 / .06); }
.svc-inv { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .85rem; border-radius: 14px; background: var(--pn-bg); }
.svc-inv small { display: block; font-size: 12px; color: var(--text-muted); }
.svc-inv-acts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.svc-price { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr); }
@media (max-width: 639px) { .svc-price { grid-template-columns: 1fr; } }
.svc-price.is-off { opacity: .55; }
.svc-ptype { justify-self: start; }
.svc-form { display: grid; gap: 1.25rem; }
.svc-form input[type="date"], .svc-form input[type="datetime-local"], .tabpanel .pform input[type="text"]:not([class]) { width: 100%; }
.pform .mf-field input[type="date"], .pform .mf-field input[type="datetime-local"], .mf-field > input[type="text"], .mf-field > input[type="number"] { width: 100%; min-height: 2.75rem; padding: .65rem .9rem; border: 0; border-radius: 14px; font: inherit; font-size: 14px; 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); color-scheme: light; }
[data-theme="dark"] .pform .mf-field input[type="date"], [data-theme="dark"] .pform .mf-field input[type="datetime-local"] { color-scheme: dark; }
.mf-field > input:focus, .pform .mf-field input[type="date"]:focus, .pform .mf-field input[type="datetime-local"]:focus { box-shadow: inset 0 0 0 1.5px var(--hl), 0 0 0 4px rgb(12 90 130 / .12); }
.mf-field > input:disabled { color: var(--text-muted); background: var(--pn-bg); cursor: not-allowed; }
.mf-field textarea { width: 100%; padding: .7rem .9rem; border: 0; border-radius: 14px; resize: vertical; font: inherit; font-size: 14px; line-height: 1.55; 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); }
.mf-field textarea:focus { box-shadow: inset 0 0 0 1.5px var(--hl), 0 0 0 4px rgb(12 90 130 / .12); }
.mf-check { display: flex; align-items: center; gap: .5rem; font-size: 13.5px; color: var(--text-soft); cursor: pointer; }
.mf-check input { width: 1rem; height: 1rem; accent-color: var(--navy-900); }

/* Dosya bırakma alanı */
.drop { position: relative; display: grid; place-items: center; align-content: center; gap: .35rem; min-height: 11rem; padding: 1.5rem; border-radius: 18px; text-align: center; border: 1.5px dashed var(--border-strong, var(--border)); background: var(--pn-bg); cursor: pointer; transition: border-color .25s, background-color .25s; }
.drop:hover, .drop.is-over { border-color: var(--hl); background: rgb(12 90 130 / .04); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-ico { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border-radius: 50%; color: var(--hl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.drop-ico svg { width: 1.25rem; height: 1.25rem; }
.drop b { font-size: 14px; color: var(--text); }
.drop small { font-size: 12.5px; color: var(--text-muted); }
.drop:focus-within { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--hl); }

/* Modül paneli */
.seg button { display: inline-flex; align-items: center; gap: .35rem; }
.seg button svg { width: .95rem; height: .95rem; }
.mod-head { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }
.mod-ico { width: 3rem; height: 3rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #0e6a98, #083b57); box-shadow: 0 10px 20px -12px rgb(12 90 130 / .8); }
.mod-ico svg { width: 1.3rem; height: 1.3rem; }
.mod-name { min-width: 0; }
.mod-name b { display: block; font-size: 16px; color: var(--text); }
.mod-name small { font-size: 12.5px; color: var(--text-muted); }
.mod-acts { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }
.mod-tools { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .mod-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mod-tools button { display: grid; justify-items: start; gap: .2rem; padding: .85rem; border-radius: 16px; text-align: left; font-size: 13.5px; font-weight: 600; color: var(--text); background: var(--pn-bg); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .3s var(--ui-spring), transform .3s var(--ui-spring); }
.mod-tools button:hover { box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)), 0 0 0 4px var(--shell); transform: translateY(-1px); }
.mod-tools button:active { transform: scale(.98); }
.mod-tools button > span { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; margin-bottom: .35rem; border-radius: 10px; color: var(--hl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.mod-tools button > span svg { width: 1rem; height: 1rem; }
.mod-tools small { font-size: 12px; font-weight: 500; color: var(--text-muted); }

/* Bilgi blokları */
.blocks { display: grid; gap: .75rem; }
.block { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: start; padding: .9rem; border-radius: 16px; background: var(--pn-bg); box-shadow: inset 0 0 0 1px var(--border); animation: pn-rise .45s var(--ui-spring) both; }
.block-grip { padding-top: 2rem; color: var(--text-muted); cursor: grab; }
.block-grip svg { width: 1rem; height: 1rem; }
.block .icon-btn { margin-top: 1.7rem; }
.icon-btn { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 10px; color: var(--text-muted); transition: background-color .2s, color .2s; }
.icon-btn:hover { color: var(--danger); background: rgb(220 38 38 / .08); }
.icon-btn svg { width: 1rem; height: 1rem; }

/* Yükselt / düşür */
.up-list { display: grid; gap: .55rem; }
.up-opt { position: relative; display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-radius: 16px; cursor: pointer; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)); transition: box-shadow .3s var(--ui-spring); }
.up-opt input { position: absolute; opacity: 0; }
.up-opt > span { flex: 1; min-width: 0; }
.up-opt b { display: block; font-size: 14.5px; color: var(--text); }
.up-opt small { font-size: 12.5px; color: var(--text-muted); }
.up-opt em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.up-opt em.is-up { color: var(--text); }
.up-opt em.is-down { color: var(--ok); }
.up-opt:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--hl), 0 0 0 4px rgb(12 90 130 / .1); }
.up-opt:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--hl), 0 0 0 4px rgb(12 90 130 / .2); }
.up-opt.is-cur { background: var(--pn-bg); }

/* İptal ve iade */
.cx-bar { height: .7rem; border-radius: 999px; background: rgb(16 185 129 / .18); overflow: hidden; }
.cx-bar i { display: block; height: 100%; width: var(--v); border-radius: 999px 0 0 999px; background: var(--navy-900); }
[data-theme="dark"] .cx-bar i { background: var(--hl); }
.cx-legend { display: flex; justify-content: space-between; gap: 1rem; margin-top: .7rem; }
.cx-legend span { display: grid; }
.cx-legend span:last-child { justify-items: end; text-align: right; }
.cx-legend small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.cx-legend b { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -.02em; color: var(--text); }
.cx-legend span:last-child b { color: var(--ok); }
.cx-legend em { font-style: normal; font-size: 12.5px; color: var(--text-muted); }
.refund { display: grid; gap: .45rem; }
.ref-opt { position: relative; display: flex; align-items: center; gap: .7rem; padding: .75rem .85rem; border-radius: 14px; cursor: pointer; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)); transition: box-shadow .3s var(--ui-spring); }
.ref-opt input { position: absolute; opacity: 0; }
.ref-opt::before { content: ""; width: 1rem; height: 1rem; flex-shrink: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--border-strong, var(--border)); transition: box-shadow .25s var(--ui-spring); }
.ref-opt:has(input:checked)::before { box-shadow: inset 0 0 0 5px var(--navy-900); }
[data-theme="dark"] .ref-opt:has(input:checked)::before { box-shadow: inset 0 0 0 5px var(--hl); }
.ref-opt:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--hl), 0 0 0 4px rgb(12 90 130 / .1); }
.ref-opt:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--hl), 0 0 0 4px rgb(12 90 130 / .2); }
.ref-opt > span { flex: 1; min-width: 0; }
.ref-opt b { display: block; font-size: 14px; color: var(--text); }
.ref-opt small { font-size: 12px; color: var(--text-muted); }
.ref-opt em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cx-will { display: grid; gap: .45rem; }
.cx-will li { display: flex; align-items: center; gap: .55rem; font-size: 13.5px; color: var(--text-soft); }
.cx-will svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--text-muted); }
.cx-warn { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; padding: .6rem .75rem; border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--danger); background: rgb(220 38 38 / .07); }
.cx-warn svg { width: 1rem; height: 1rem; flex-shrink: 0; }