/* ===== Teklif Yazılımı — admin chrome (strictly black & white, responsive) ===== */
:root{
    --ink:#000;
    --paper:#fff;
    --line:#000;
    --shade:#ededed;
    --soft:#f7f7f7;
    --muted:#666;
    --hair:#cfcfcf;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
    font:14px/1.45 "Arial","Liberation Sans",-apple-system,sans-serif;
    color:var(--ink); background:var(--paper);
    -webkit-font-smoothing:antialiased;
}
a{ color:var(--ink); }
h2{ font-size:20px; margin:0 0 4px; }
h3{ font-size:15px; margin:0 0 10px; text-transform:uppercase; letter-spacing:.4px; }
.muted{ color:var(--muted); font-weight:400; }
.mono{ font-family:"SF Mono",Menlo,Consolas,monospace; font-size:13px; }
.ar{ text-align:right; }

/* ---------- Top bar ---------- */
.topbar{
    display:flex; align-items:center; gap:18px;
    background:var(--ink); color:var(--paper);
    padding:0 18px; height:52px; position:sticky; top:0; z-index:50;
}
.topbar .brand{ color:var(--paper); font-weight:800; letter-spacing:2px; text-decoration:none; font-size:16px; }
.mainnav{ display:flex; gap:4px; flex:1; }
.mainnav a{
    color:var(--paper); text-decoration:none; padding:8px 12px; border-radius:0;
    opacity:.8; font-weight:600;
}
.mainnav a:hover{ opacity:1; }
.mainnav a.active{ opacity:1; background:var(--paper); color:var(--ink); }
.userbox{ display:flex; align-items:center; gap:12px; }
.userbox .uname{ color:var(--paper); opacity:.85; font-size:13px; }
.btn-link{ background:none; border:none; color:var(--paper); cursor:pointer; text-decoration:underline; font:inherit; padding:6px; }
.nav-toggle, .nav-burger{ display:none; }

/* ---------- Page ---------- */
.page{ max-width:1180px; margin:0 auto; padding:22px 18px 60px; }
.narrow{ max-width:520px; margin:30px auto; padding:0 16px; }
.toolbar-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.toolbar-actions{ display:flex; gap:10px; }

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    border:1.5px solid var(--ink); background:var(--paper); color:var(--ink);
    padding:8px 14px; font:inherit; font-weight:700; cursor:pointer; border-radius:0;
    text-decoration:none; white-space:nowrap; line-height:1.1;
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--paper); color:var(--ink); }
.btn-ghost{ border-color:var(--hair); font-weight:600; }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-sm{ border:1.5px solid var(--ink); background:var(--paper); color:var(--ink); padding:5px 9px; font:inherit; font-weight:700; cursor:pointer; font-size:12.5px; }
.btn-sm:hover{ background:var(--ink); color:var(--paper); }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:default; }

/* ---------- Cards / forms ---------- */
.card{ border:1.5px solid var(--ink); background:var(--paper); padding:16px; margin-bottom:18px; }
.form-grid{ display:flex; flex-direction:column; gap:12px; }
.field{ display:flex; flex-direction:column; gap:4px; }
.field > span{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; color:#222; }
input[type=text],input[type=password],input[type=search],input[type=date],input[type=number],textarea,select{
    border:1.5px solid var(--ink); background:var(--paper); color:var(--ink);
    padding:8px 10px; font:inherit; border-radius:0; width:100%;
}
textarea{ resize:vertical; }
input:focus,textarea:focus,select:focus{ outline:2px solid var(--ink); outline-offset:-1px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.form-actions{ display:flex; gap:10px; margin-top:4px; }
.inline{ display:inline; }
.inline-form{ display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.chk{ display:inline-flex; align-items:center; gap:6px; font-size:13px; white-space:nowrap; }
.chk input{ width:auto; }

/* ---------- Filters ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:12px; }
.filters .grow{ flex:1 1 240px; }
.filters select, .filters input[type=date]{ width:auto; }
.inline-field{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#333; }
.inline-field input{ width:auto; }

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; border:1.5px solid var(--ink); }
table.list{ border-collapse:collapse; width:100%; background:var(--paper); }
table.list th, table.list td{ border-bottom:1px solid var(--hair); padding:9px 11px; text-align:left; vertical-align:middle; }
table.list thead th{ background:var(--shade); border-bottom:1.5px solid var(--ink); font-size:12px; text-transform:uppercase; letter-spacing:.3px; }
table.list tbody tr:hover{ background:var(--soft); }
table.list .sub{ font-size:12px; color:var(--muted); }
table.list .empty{ text-align:center; color:var(--muted); padding:24px; }
.row-inactive{ opacity:.5; }
.actions{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.actions-col{ width:1%; white-space:nowrap; }
.mini{ padding:4px 6px; font-size:12px; width:auto; }
.mini-num{ width:54px; padding:4px 6px; }
.reset-form{ display:inline-flex; gap:4px; align-items:center; }
.reset-form .mini{ width:110px; }

/* status badges (B/W) */
.badge{ display:inline-block; border:1px solid var(--ink); padding:2px 8px; font-size:11.5px; font-weight:700; text-transform:uppercase; }
.badge-draft{ background:var(--paper); color:var(--ink); }
.badge-sent{ background:var(--shade); }
.badge-accepted{ background:var(--ink); color:var(--paper); }
.badge-rejected{ background:var(--paper); text-decoration:line-through; }
.badge-expired{ background:var(--paper); color:var(--muted); border-color:var(--muted); }
.badge-archived{ background:var(--soft); color:var(--muted); }

/* ---------- Split layout (catalog / users) ---------- */
.split{ display:grid; grid-template-columns:1fr 360px; gap:20px; align-items:start; }
.split-side .card{ position:sticky; top:70px; }

/* ---------- Settings ---------- */
.settings-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.settings-grid .wide{ grid-column:1 / -1; }
.label-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.label-grid .field > span{ font-size:10.5px; text-transform:none; color:var(--muted); }
.brand-previews{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.bp{ display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:700; }
.bp-img{ border:1px solid var(--hair); height:90px; display:flex; align-items:center; justify-content:center; background:var(--soft); }
.bp-img img{ max-width:100%; max-height:100%; object-fit:contain; }
.tmpl-list{ list-style:none; margin:0; padding:0; }
.tmpl-list li{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--hair); }

/* ---------- Flash ---------- */
.flash{ border:1.5px solid var(--ink); padding:10px 14px; margin:0 0 14px; font-weight:600; }
.flash-ok{ background:var(--soft); }
.flash-error{ background:var(--ink); color:var(--paper); }
.flash-warn{ background:var(--shade); }

/* ---------- Login ---------- */
.login-body{ background:var(--paper); }
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card{ width:340px; border:2px solid var(--ink); padding:28px 24px; display:flex; flex-direction:column; gap:14px; }
.login-title{ text-align:center; font-size:18px; letter-spacing:2px; margin:0 0 6px; }

/* ---------- Editor chrome ---------- */
.editor-toolbar{
    position:sticky; top:52px; z-index:40;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:var(--paper); border-bottom:2px solid var(--ink);
    padding:9px 16px; flex-wrap:wrap;
}
.editor-toolbar .tb-left,.editor-toolbar .tb-right,.editor-toolbar .tb-center{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.qnum{ font-weight:700; }
.save-status{ font-size:13px; color:var(--muted); font-style:italic; }
.save-status.ok{ color:var(--ink); font-style:normal; font-weight:700; }
.save-status.saving,.save-status.pending{ color:var(--muted); }
.save-status.error{ color:var(--ink); font-style:normal; font-weight:800; text-decoration:underline; }
.kdv-rate-wrap{ gap:2px; }

.editor-stage{ display:flex; justify-content:center; overflow:auto; padding:18px 16px 60px; background:var(--paper); }
/* hidden until editor.js sizes/centers it -> no "load from the right" flash; revealed in init */
.sheet-fit{ position:relative; visibility:hidden; }
.sheet-fit.ready{ visibility:visible; }
.sheet-scaler{ position:absolute; top:0; left:0; transform-origin:top left; }

/* autocomplete / catalog dropdown */
.ac-dropdown{
    position:absolute; z-index:200; background:var(--paper); border:1.5px solid var(--ink);
    max-height:280px; overflow:auto; min-width:220px; box-shadow:none;
}
.ac-item{ padding:8px 10px; cursor:pointer; border-bottom:1px solid var(--hair); display:flex; flex-direction:column; gap:2px; }
.ac-item:last-child{ border-bottom:none; }
.ac-item:hover{ background:var(--ink); color:var(--paper); }
.ac-item .ac-meta{ font-size:11.5px; color:var(--muted); }
.ac-item:hover .ac-meta{ color:var(--paper); }

/* print page standalone */
.print-body{ background:var(--paper); }
.print-toolbar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:2px solid var(--ink); background:var(--paper); }
.print-stage{ display:flex; justify-content:center; padding:24px 16px 60px; overflow:auto; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
    .split{ grid-template-columns:1fr; }
    .split-side .card{ position:static; }
    .settings-grid{ grid-template-columns:1fr; }
    .label-grid{ grid-template-columns:1fr 1fr; }
    .brand-previews{ grid-template-columns:1fr; }
}
@media (max-width:760px){
    .nav-burger{ display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:24px; color:var(--paper); margin-left:auto; width:40px; height:40px; }
    .mainnav{
        display:none; position:absolute; top:52px; left:0; right:0;
        flex-direction:column; background:var(--ink); padding:6px 0; gap:0;
    }
    .nav-toggle:checked ~ .mainnav{ display:flex; }
    .mainnav a{ padding:12px 18px; }
    .userbox{ order:3; }
    .userbox .uname{ display:none; }
    .row2,.row3,.label-grid{ grid-template-columns:1fr; }
    .editor-toolbar{ top:52px; }
    .page{ padding:16px 12px 50px; }
}
@media (max-width:480px){
    .topbar{ gap:10px; padding:0 12px; }
    .editor-toolbar{ position:static; }
}

/* ---------- templates_admin.php: type tabs ---------- */
.tabs{ display:flex; flex-wrap:wrap; gap:2px; margin-bottom:14px; border-bottom:1.5px solid var(--ink); }
.tab{ padding:8px 14px; text-decoration:none; color:var(--ink); font-weight:600; font-size:13px; border:1px solid transparent; border-bottom:none; }
.tab:hover{ background:var(--soft); }
.tab.active{ border-color:var(--ink); background:var(--paper); font-weight:800; }

/* ---------- service_edit.php: option groups / options / packages ---------- */
.group-block{ margin-bottom:16px; }
.group-block:last-of-type{ margin-bottom:0; }
.row-template{ display:none !important; }
.group-head{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px; }
.group-head .grow{ flex:1 1 220px; }
.group-head select{ width:auto; }
.sec-tools-static{ display:flex; gap:2px; margin-left:auto; }
.help-text{ margin-bottom:8px; }
.opt-table{ border-collapse:collapse; width:100%; font-size:12.5px; }
.opt-table th,.opt-table td{ border:1px solid var(--hair); padding:5px 6px; vertical-align:top; }
.opt-table thead th{ background:var(--shade); font-size:11px; text-transform:uppercase; text-align:left; }
.opt-table input[type=text],.opt-table textarea{ padding:5px 6px; font-size:12.5px; }
.opt-table .mini{ width:64px; }
.qty-cells{ display:flex; flex-direction:column; gap:3px; min-width:150px; }
.qty-cells input{ width:100%; }
.opt-tools{ display:flex; gap:2px; white-space:nowrap; }
.sectool{
    width:22px; height:22px; line-height:18px; text-align:center; padding:0;
    border:1px solid var(--ink); background:var(--paper); color:var(--ink); cursor:pointer; font-size:13px;
}
.sectool:hover{ background:var(--ink); color:var(--paper); }
.preset-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; padding-top:8px; border-top:1px solid var(--hair); }
.preset-label{ font-size:12px; font-weight:700; text-transform:uppercase; color:var(--muted); width:100%; }

/* ---------- wizard.php: stepper, service picker, config cards, live summary ---------- */
.steps{ display:flex; gap:4px; }
.step{ display:flex; align-items:center; gap:6px; padding:6px 10px; cursor:pointer; opacity:.5; font-size:12.5px; font-weight:700; }
.step .step-num{ width:20px; height:20px; border:1.5px solid var(--ink); border-radius:0; display:flex; align-items:center; justify-content:center; font-size:11px; }
.step.active{ opacity:1; }
.step.active .step-num{ background:var(--ink); color:var(--paper); }
.step.done{ opacity:.85; }
.step.done .step-num{ background:var(--shade); }
.step-label{ display:none; }
@media (min-width:760px){ .step-label{ display:inline; } }

.wiz-draft-flash{ display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1.5px solid var(--ink); background:var(--shade); }

.wizard-stage{ display:grid; grid-template-columns:1fr 360px; gap:20px; padding:18px 16px 90px; align-items:start; max-width:1180px; margin:0 auto; }
.wizard-main{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.wizard-summary{ position:sticky; top:70px; }
.wiz-card h3{ margin-bottom:12px; }
.wiz-card .row2,.wiz-card .row3{ margin-top:0; }

.chip-row{ display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; }
.chip{ border:1px solid var(--hair); }
.field-error{ color:var(--ink); font-weight:700; font-size:12px; }
.req-star{ color:#c62828; font-weight:800; }

/* service picker (Adım 2) */
.cat-tabs{ display:flex; flex-wrap:wrap; gap:4px; margin:10px 0; border-bottom:1px solid var(--hair); padding-bottom:8px; }
.cat-tab{ border:1px solid var(--hair); background:var(--paper); padding:6px 12px; font:inherit; font-weight:600; font-size:12.5px; cursor:pointer; }
.cat-tab.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.svc-list{ display:flex; flex-direction:column; gap:2px; }
.svc-row{ display:grid; grid-template-columns:auto 1fr auto; gap:4px 12px; align-items:center; padding:10px 8px; border-bottom:1px solid var(--hair); cursor:pointer; }
.svc-row:hover{ background:var(--soft); }
.svc-row input{ width:auto; grid-row:1 / 3; }
.svc-name{ font-weight:700; display:flex; align-items:center; gap:8px; }
.svc-summary{ grid-column:2; font-size:12px; color:var(--muted); }
.svc-from{ grid-column:3; grid-row:1 / 3; font-size:12px; font-weight:700; white-space:nowrap; }

/* wizard-only badge variant (ÖNERİLEN, TEK SEFERLİK/AYLIK/YILLIK) — smaller than the status .badge above */
.badge-wiz{ display:inline-block; border:1px solid var(--ink); padding:1px 7px; font-size:10.5px; font-weight:700; text-transform:uppercase; }

/* service config cards (Adım 3) */
.svc-config-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.svc-config-sub{ font-weight:700; font-size:13px; }
.svc-config-sub.error{ text-decoration:underline; cursor:help; }
.cfg-group{ margin-bottom:14px; }
.cfg-group-name{ font-weight:700; font-size:12.5px; text-transform:uppercase; margin-bottom:6px; }
.cfg-help{ display:block; font-weight:400; text-transform:none; font-size:11.5px; color:var(--muted); }
.tier-cards{ display:flex; flex-wrap:wrap; gap:8px; }
.tier-card{
    position:relative; border:1.5px solid var(--hair); padding:10px 14px; cursor:pointer; font-weight:700;
    font-size:13px; min-width:110px; text-align:center;
}
.tier-card:hover{ border-color:var(--ink); }
.tier-card.selected{ border-color:var(--ink); background:var(--ink); color:var(--paper); }
.tier-card.recommended .badge{ position:absolute; top:-9px; left:50%; transform:translateX(-50%); background:var(--paper); color:var(--ink); }
.tier-card.selected.recommended .badge{ background:var(--ink); color:var(--paper); border-color:var(--paper); }
.tier-price{ display:block; font-weight:400; font-size:11.5px; margin-top:4px; }
/* Wizard (Adım 3) option rows are flex <label>/<div>. The service_edit catalog form ALSO uses
   .opt-row, but on <tr> inside .opt-table — flexing a table row detaches its cells from the
   header columns (they visibly slide out of alignment), so this flex layout excludes table rows. */
.opt-row:not(tr){ display:flex; align-items:center; gap:8px; padding:6px 0; font-size:13.5px; }
.opt-row input[type=checkbox]{ width:auto; }
.opt-price{ margin-left:auto; color:var(--muted); font-size:12px; white-space:nowrap; }
.qty-stepper-row{ justify-content:space-between; }
.qty-stepper{ display:inline-flex; align-items:center; gap:0; }
.qbtn{
    width:26px; height:26px; border:1.5px solid var(--ink); background:var(--paper); color:var(--ink);
    font-size:15px; cursor:pointer; padding:0; line-height:1;
}
.qbtn:hover{ background:var(--ink); color:var(--paper); }
.qty-input{ width:44px; text-align:center; border-top:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); border-left:none; border-right:none; }
.manual-item-row{ display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.manual-item-row .mini{ width:90px; }

/* live price summary (sticky sidebar; fixed bottombar on mobile) */
.wiz-sum-inner{ border:1.5px solid var(--ink); padding:16px; display:flex; flex-direction:column; gap:14px; }
.wiz-sum-block .wiz-sum-label{ font-size:11.5px; font-weight:700; text-transform:uppercase; color:var(--muted); }
.wiz-sum-block .wiz-sum-value{ font-size:22px; font-weight:800; }
.wiz-sum-free ul{ margin:4px 0 0; padding-left:18px; font-size:12.5px; }
.wiz-sum-note{ font-size:11.5px; color:var(--muted); border-top:1px solid var(--hair); padding-top:10px; }

/* Always visible (it's the wizard's only prev/next control) — pinned to the viewport
   bottom only on narrow screens, where the sticky summary sidebar also collapses away. */
.wizard-bottombar{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:var(--paper); border-top:2px solid var(--ink); padding:10px 16px;
    max-width:1180px; margin:0 auto;
}
.wb-summary{ font-weight:800; }
@media (max-width:980px){
    .wizard-stage{ grid-template-columns:1fr; padding-bottom:110px; }
    .wizard-summary{ position:static; }
    .wizard-bottombar{ position:fixed; left:0; right:0; bottom:0; z-index:45; max-width:none; }
}

.wiz-preview-stage{ display:flex; justify-content:center; overflow:auto; padding:10px 0 40px; background:var(--paper); }
.wiz-preview-stage .sheet-fit{ position:relative; }
.wiz-preview-stage .sheet-scaler{ position:relative; transform-origin:top left; }