:root{
  --ink:#0f2038; --ink-soft:#4c6584; --navy:#123a66; --navy-deep:#0b2547;
  --blue:#1f74b4; --blue-tint:#e8f1fa; --amber:#ef6a15; --amber-ink:#7a3300;
  --paper:#f5f8fb; --surface:#ffffff; --surface-2:#eef3f9; --line:#d7e1ee;
  --danger:#c8372e; --danger-tint:#fbe9e7;
  --shadow: 0 20px 45px -25px rgba(15,32,56,.35);
  --radius-s:10px; --radius-m:16px; --radius-l:22px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#edf2f9; --ink-soft:#a7bcd6; --navy:#1d4d84; --navy-deep:#0e2745;
    --blue:#4fa3e0; --blue-tint:#132840; --amber:#ff8a3d; --amber-ink:#2c1200;
    --paper:#0a1524; --surface:#101f34; --surface-2:#152740; --line:#22394f;
    --danger:#e2645c; --danger-tint:#3a1512;
    --shadow: 0 20px 45px -25px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ink:#edf2f9; --ink-soft:#a7bcd6; --navy:#1d4d84; --navy-deep:#0e2745;
  --blue:#4fa3e0; --blue-tint:#132840; --amber:#ff8a3d; --amber-ink:#2c1200;
  --paper:#0a1524; --surface:#101f34; --surface-2:#152740; --line:#22394f;
  --danger:#e2645c; --danger-tint:#3a1512;
  --shadow: 0 20px 45px -25px rgba(0,0,0,.6);
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Public Sans","Segoe UI",Arial,sans-serif;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
}
h1,h2,h3{ font-family:"Archivo","Segoe UI",Arial,sans-serif; font-weight:800; margin:0; color:var(--ink); text-wrap:balance; }
p{ margin:0; color:var(--ink-soft); line-height:1.6; }
a{ color:var(--blue); text-decoration:none; }
label{ font-size:13.5px; font-weight:600; color:var(--ink); display:block; margin-bottom:6px; }
input, textarea, select{
  width:100%; font-family:inherit; font-size:14.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-s);
  padding:10px 12px;
}
input:focus, textarea:focus, select:focus{ outline:2px solid var(--blue); outline-offset:1px; }
/* The width:100% above is meant for text/email/password/select fields —
   applied to a radio/checkbox it stretches the control itself (this has
   broken three different pages so far). Reset those back to their natural
   size globally instead of overriding per-component every time one shows up. */
input[type="radio"], input[type="checkbox"]{ width:auto; padding:0; background:none; border:none; }
.field{ margin-bottom:16px; }
.wrap{ max-width:1180px; margin:0 auto; }
body > main.wrap{ padding-block:40px; }
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  font-weight:700; font-size:14.5px; text-decoration:none; cursor:pointer;
  border-radius:999px; padding:11px 20px; border:1px solid transparent; white-space:nowrap;
}
.btn-primary{ background:var(--amber); color:#fff; }
.btn-primary:hover{ background:color-mix(in srgb, var(--amber) 85%, black); }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
.btn-danger{ background:var(--danger); color:#fff; }

.app-shell{ display:flex; align-items:stretch; min-height:100vh; }

.sidebar{
  width:250px; flex:none; display:flex; flex-direction:column;
  background:var(--surface); border-right:1px solid var(--line);
  position:sticky; top:0; height:100vh; padding:22px 16px;
}
.sidebar .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; padding:0 10px 22px; }
.sidebar .brand img{ height:28px; width:auto; }
.sidebar .brand .tag{ font-size:12px; font-weight:700; color:var(--ink-soft); letter-spacing:.02em; }
:root[data-theme="dark"] .sidebar .brand img{ filter:brightness(0) invert(1); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sidebar .brand img{ filter:brightness(0) invert(1); }
}

.site-switcher{ padding:0 10px 14px; }
.site-switcher select{ width:100%; padding:9px 10px; border-radius:var(--radius-s); border:1px solid var(--line); background:var(--surface); font-size:13px; font-weight:600; color:var(--ink); }
.site-switcher-single{ padding:0 10px 14px; font-size:13px; font-weight:600; color:var(--ink-soft); }

.sidebar-nav{ display:flex; flex-direction:column; gap:4px; }
.sidebar-section{ display:flex; flex-direction:column; gap:2px; }
.sidebar-title{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 14px; margin-bottom:0; font-size:12.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink); background:none; border:0; width:100%; font-family:inherit; cursor:pointer; border-radius:var(--radius-s);
}
.sidebar-title-label{ display:flex; align-items:center; gap:10px; min-width:0; }
.sidebar-title:hover{ background:var(--surface-2); }
.sidebar-section.open .sidebar-title{ color:var(--blue); background:var(--blue-tint); }
.sidebar-section.open .sidebar-title:hover{ background:var(--blue-tint); }
.sidebar-title .chev{ font-size:10px; transition:transform .15s ease; opacity:.6; flex:none; }
.sidebar-section.open .sidebar-title .chev{ transform:rotate(180deg); opacity:1; }
.sidebar-links{ display:none; flex-direction:column; gap:2px; padding-bottom:8px; }
.sidebar-section.open .sidebar-links{ display:flex; }
.sidebar-section a{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 14px 10px 40px; border-radius:var(--radius-s); font-size:14.5px; font-weight:600; color:var(--ink-soft);
}
.sidebar-badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--danger); color:#fff; font-size:10.5px; font-weight:700; line-height:1; flex:none;
}
.sidebar-badge-warn{ background:var(--amber); }
.sidebar-badge-info{ background:var(--blue); }
.sidebar-section a:hover{ color:var(--blue); background:var(--surface-2); }
.sidebar-section a.active{ background:var(--blue-tint); color:var(--blue); }
.sidebar-link-top{
  display:flex; align-items:center; gap:10px; padding:10px 14px; margin-bottom:0; font-size:12.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink); border-radius:var(--radius-s);
}
.sidebar-link-top:hover{ background:var(--surface-2); }
.sidebar-link-top.active{ background:var(--blue-tint); color:var(--blue); }
.nav-icon{ width:17px; height:17px; flex:none; opacity:.72; }
.sidebar-link-top:hover .nav-icon,.sidebar-link-top.active .nav-icon,
.sidebar-title:hover .nav-icon,.sidebar-section.open .sidebar-title .nav-icon{ opacity:1; }

.sidebar-support-box{
  display:flex; align-items:center; gap:10px; margin:8px 10px 2px; padding:11px 13px; border-radius:var(--radius-s);
  border:1.5px dashed var(--blue); background:var(--blue-tint); color:var(--blue); font-size:13px; font-weight:700;
}
.sidebar-support-box:hover{ background:color-mix(in srgb, var(--blue-tint) 60%, var(--surface)); }
.sidebar-support-box .sidebar-badge{ margin-left:auto; }

.sidebar-bottom{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:14px; }
.sidebar-actions{ display:flex; flex-direction:column; gap:10px; padding:0 4px; }
.sidebar-actions-row{ display:flex; align-items:center; gap:10px; }
.icon-toggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); cursor:pointer; flex:none; }
.icon-toggle svg{ width:17px; height:17px; }
.btn-sm{ padding:9px 16px; font-size:13.5px; }

.content-area{ flex:1; min-width:0; display:flex; flex-direction:column; }
.content-area .wrap{ max-width:none; margin:0; padding-inline:40px; }
.content-area main{ padding-block:40px; flex:1; }
.topbar{ display:flex; justify-content:flex-end; padding-top:18px; }
.notif-badge{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--surface-2); color:var(--ink); }
.notif-badge:hover{ background:var(--blue-tint); color:var(--blue); }
.notif-badge .nav-icon{ width:20px; height:20px; }
.notif-count{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--danger); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1; }
.panel-footer{ border-top:1px solid var(--line); }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; padding-block:20px; font-size:13px; color:var(--ink-soft); }
.footer-inner a{ color:var(--ink-soft); }
.footer-inner a:hover{ color:var(--blue); }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:24px; }
.card + .card{ margin-top:20px; }
.head{ margin-bottom:24px; }
.head h1{ font-size:26px; }
.head p{ margin-top:6px; }
.eyebrow{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); }

.flash{ padding:12px 16px; border-radius:var(--radius-s); margin-bottom:18px; font-size:14px; }
.flash-error{ background:var(--danger-tint); color:var(--danger); }
.flash-ok{ background:var(--blue-tint); color:var(--blue); }

.auth-shell{ max-width:420px; margin:60px auto; }
.auth-shell .card{ box-shadow:var(--shadow); }
.auth-shell .logo{ text-align:center; margin-bottom:18px; }
.auth-shell .logo img{ height:36px; width:auto; margin:0 auto; }

.onboarding-shell{ max-width:680px; margin:48px auto; }
.onboarding-shell-wide{ max-width:680px; }
.onboarding-shell .card{ box-shadow:var(--shadow); }
.onboarding-shell .logo{ text-align:center; margin-bottom:18px; }
.onboarding-shell .logo img{ height:36px; width:auto; margin:0 auto; }
.onboarding-steps{ display:flex; justify-content:space-between; gap:6px; margin-bottom:22px; font-size:11.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.onboarding-steps span{ flex:1; min-width:0; text-align:center; padding-bottom:8px; border-bottom:2px solid var(--line); }
.onboarding-steps .ob-step-active{ color:var(--blue); border-color:var(--blue); }
.onboarding-steps .ob-step-done{ color:var(--ink); border-color:var(--ink-soft); }

.sector-pick-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
.sector-pick-card{ position:relative; display:flex; align-items:flex-start; gap:8px; border:1px solid var(--line); border-radius:var(--radius-m); padding:14px; cursor:pointer; font-size:13.5px; font-weight:600; min-width:0; }
@media (max-width:480px){
  .sector-pick-grid{ grid-template-columns:1fr; }
}
.sector-pick-card:has(input:checked){ border-color:var(--blue); background:var(--blue-tint); color:var(--blue); }
.sector-pick-card input{ width:auto; margin:2px 0 0; flex-shrink:0; }
.sector-pick-label{ flex:1; line-height:1.35; min-width:0; }
.sector-pick-badge-price{
  background:var(--amber); color:#fff; font-size:15px; font-weight:800;
  padding:8px 16px; border-radius:10px; box-shadow:0 6px 14px -6px color-mix(in srgb, var(--amber) 60%, transparent);
}

.lang-switcher{ display:flex; gap:4px; }
.lang-switcher a{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; padding:5px 9px; border-radius:8px; text-decoration:none; opacity:.55; }
.lang-switcher a:hover{ opacity:.85; }
.lang-switcher a.active{ opacity:1; background:var(--surface-2); }
.lang-switcher-loggedout{ display:flex; justify-content:flex-end; margin-bottom:10px; }
.lang-switcher-loggedout a{ font-size:13px; font-weight:600; color:var(--ink-soft); }
.lang-switcher-loggedout a.active{ color:var(--blue); }
.flag-icon{ display:inline-block; width:18px; height:13px; flex:none; background-size:cover; background-position:center; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.12); }
.flag-tr{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'><rect width='24' height='16' fill='%23E30A17'/><circle cx='9' cy='8' r='4' fill='%23fff'/><circle cx='10.5' cy='8' r='3.2' fill='%23E30A17'/><polygon points='15,6.2 15.41,7.43 16.71,7.44 15.67,8.22 16.06,9.46 15,8.7 13.94,9.46 14.33,8.22 13.29,7.44 14.59,7.43' fill='%23fff'/></svg>"); }
.flag-gb{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'><rect width='24' height='16' fill='%23012169'/><path d='M0,0 L24,16 M24,0 L0,16' stroke='%23fff' stroke-width='3.2'/><path d='M0,0 L24,16 M24,0 L0,16' stroke='%23C8102E' stroke-width='1.2'/><path d='M12,0 V16 M0,8 H24' stroke='%23fff' stroke-width='5.4'/><path d='M12,0 V16 M0,8 H24' stroke='%23C8102E' stroke-width='3.2'/></svg>"); }

.term-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.term-tab{ appearance:none; background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); font-family:inherit; font-weight:700; font-size:12.5px; padding:8px 14px; border-radius:999px; cursor:pointer; }
.term-tab.active{ background:var(--blue); border-color:var(--blue); color:#fff; }
.term-discount{ font-size:10.5px; font-weight:700; margin-left:4px; opacity:.85; }

/* Renewal term picker (billing/renew.html) — a grid of selectable term
   cards, each showing either "your current plan" or its discount, so a
   customer immediately sees which one they're already on before
   picking a different one. Separate from .term-tab/.term-discount above
   (still used by onboarding/package.html) rather than restyling those,
   so this doesn't change that page's look too. */
.term-card-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px; }
.term-card{ appearance:none; background:var(--surface); border:2px solid var(--line); border-radius:var(--radius-m); padding:16px 14px; cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:8px; font-family:inherit; transition:border-color .15s, background .15s; }
.term-card:hover{ border-color:var(--blue); }
.term-card.active{ border-color:var(--blue); background:var(--blue-tint); }
.term-card-label{ font-size:15px; font-weight:800; color:var(--ink); }
.term-card-badge{ font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px; width:fit-content; }
.term-card-badge-current{ background:var(--surface-2); color:var(--ink-soft); }
.term-card-badge-discount{ background:#e3f5e9; color:#1a8754; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .term-card-badge-discount{ background:#12351f; color:#5fd996; }
}
:root[data-theme="dark"] .term-card-badge-discount{ background:#12351f; color:#5fd996; }
.sector-pick-disabled{ cursor:not-allowed; opacity:.55; }
.sector-pick-badge{ flex-shrink:0; margin-left:auto; align-self:flex-start; font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--surface-2); color:var(--ink-soft); white-space:nowrap; }

.theme-pick-card{ cursor:pointer; display:block; }
/* The radio itself is position:absolute+opacity:0 (see onboarding/theme.html)
   with no positioned ancestor, so its containing block is the viewport —
   the global `input{width:100%}` rule then resolves to 100% of the
   *viewport*, not the card, stretching it out from wherever its static
   position happens to be and blowing out the whole page's scroll width.
   Overriding back to width:auto here is required, not cosmetic. */
.theme-pick-card input[type="radio"]{ width:auto; }
.theme-pick-card .theme-preview{ padding:0; overflow:hidden; }
.theme-pick-card .theme-preview img{ width:100%; max-width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.theme-demo-link{ font-size:12px; font-weight:600; color:var(--blue); white-space:nowrap; }

.domain-choice-card{ display:flex; align-items:flex-start; gap:12px; border:1px solid var(--line); border-radius:var(--radius-m); padding:16px; cursor:pointer; }
/* Same global input{width:100%} problem as .sector-pick-card/.theme-pick-card
   input — a bare radio with no width override inherits that and, being a
   flex child, shrinks back unpredictably instead of to its natural size. */
.domain-choice-card input{ width:auto; flex-shrink:0; margin-top:4px; }
.domain-choice-active{ border-color:var(--blue); background:var(--blue-tint); }

.domain-tabs{ display:flex; gap:8px; margin-bottom:16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.domain-tab{ appearance:none; background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px; padding:10px 16px; font-family:inherit; font-size:13px; font-weight:700; color:var(--ink-soft); cursor:pointer; text-decoration:none; display:inline-block; position:relative; }
.domain-tabs > .domain-tab:not(:last-child)::after{ content:''; position:absolute; right:-4px; top:50%; transform:translateY(-50%); width:1px; height:16px; background:var(--line); }
.domain-tab.active{ color:var(--blue); border-color:var(--blue); }
.domain-tab:disabled, .domain-tab-disabled{ color:var(--line); cursor:not-allowed; }
/* Nested sub-tabs (e.g. the "Domain Yönetimi" tab's own Genel Bakış/WHOIS/
   İsim Sunucuları switch) reuse .domain-tab markup for click wiring, but
   need to read as clearly one level down — an underline bar identical to
   the parent tab bar right above it just looks like a stacking bug. A
   compact segmented-control look (pill background, no underline) makes
   the hierarchy obvious at a glance instead. */
.mgmt-tabs{ display:inline-flex; gap:2px; background:var(--surface-2); border:none; border-radius:10px; padding:3px; margin-bottom:18px; }
.mgmt-tab{ border-bottom:none; margin-bottom:0; padding:7px 14px; font-size:12.5px; font-weight:600; border-radius:7px; }
.mgmt-tab.active{ background:var(--surface); color:var(--ink); border-color:transparent; box-shadow:0 1px 2px rgba(15,32,56,.08); }
.domain-panel .hint{ font-size:12.5px; color:var(--ink-soft); margin-bottom:10px; }
.ns-box{ display:flex; flex-direction:column; gap:8px; margin:12px 0 18px; }
.ns-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--blue-tint); border:1px solid var(--line); border-radius:var(--radius-s); padding:12px 14px; }
.ns-item code{ font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; font-size:15px; font-weight:700; color:var(--blue); }
.copy-btn{ appearance:none; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); font-family:inherit; font-size:12px; font-weight:700; padding:6px 12px; border-radius:8px; cursor:pointer; white-space:nowrap; flex:none; }
.copy-btn:hover{ border-color:var(--blue); color:var(--blue); }
.copy-btn.copied{ border-color:var(--blue); background:var(--blue); color:#fff; }
.slug-status{ font-size:12.5px; margin-top:6px; min-height:1em; }
.slug-status-checking{ color:var(--ink-soft); }
.slug-status-ok{ color:#1a8754; font-weight:700; }
.slug-status-error{ color:#d64545; font-weight:600; }
:root[data-theme="dark"] .auth-shell .logo img{ filter:brightness(0) invert(1); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .auth-shell .logo img{ filter:brightness(0) invert(1); }
}

table{ width:100%; border-collapse:collapse; font-size:14px; }
table th, table td{ text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
table th{ color:var(--ink-soft); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; }
/* A single long unbroken token in a cell (a URL, an IPv6 address, a
   certbot error dump — see billing/domain.html's fulfillment_note) can
   still force the table itself wider than the viewport even with
   overflow-wrap above, since that only stops overflow *within* a cell,
   not the table's own computed width. Scope the fallback horizontal
   scroll to mobile only — desktop has room and shouldn't ever need it. */
@media (max-width:760px){
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

.section-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.item-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.item-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:18px; }
.item-card h3{ font-size:16px; margin-bottom:4px; }
.item-card .meta{ display:flex; gap:10px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-soft); margin:8px 0; }
.item-card .price{ font-family:"Archivo",sans-serif; font-weight:700; font-size:19px; color:var(--navy); margin-bottom:8px; }
.item-card .actions{ display:flex; gap:8px; margin-top:12px; }
.badge{ display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; }
.badge-satilik{ background:var(--blue-tint); color:var(--blue); }
.badge-kiralik{ background:color-mix(in srgb, var(--amber) 20%, transparent); color:var(--amber-ink); }
.form-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
.form-grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
@media (max-width:640px){
  .form-grid, .form-grid-3{ grid-template-columns:1fr; }
}
.combo{ position:relative; }
/* z-index must clear Leaflet's own internal panes/controls (up to 1000,
   see editor/listing_form.html's map picker) — the İl/İlçe/Mahalle combo
   sits above the map field in the same form, and a lower z-index here
   let the map's zoom control paint over this dropdown's open list. */
.combo-panel{ position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:1200; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-s); box-shadow:0 8px 24px rgba(0,0,0,.14); overflow:hidden; }
.combo-list{ max-height:220px; overflow-y:auto; }
.combo-option{ padding:9px 12px; font-size:13.5px; cursor:pointer; }
.combo-option:hover{ background:var(--blue-tint); color:var(--blue); }
.combo-empty{ padding:9px 12px; font-size:12.5px; color:var(--ink-soft); }
/* Turkish-labeled file picker — the native <input type="file"> button
   text ("Choose File") is browser-chrome, not translatable via HTML/CSS
   attributes; this hides it (accessibly, not display:none) behind a
   normal styled <label for> that triggers the same input on click. */
.file-upload-tr{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.file-upload-input{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.file-upload-btn{ display:inline-flex; align-items:center; padding:9px 16px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--surface-2); color:var(--ink); font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.file-upload-btn:hover{ border-color:var(--blue); color:var(--blue); }
.file-upload-name{ font-size:13px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; max-width:260px; }
.widget-row{ padding-top:14px; margin-top:14px; border-top:1px dashed var(--line); }
.widget-row:first-child{ padding-top:0; margin-top:0; border-top:none; }
.empty-state{ text-align:center; padding:40px 20px; color:var(--ink-soft); }

.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.tab-btn{ background:none; border:none; cursor:pointer; padding:11px 16px; font-size:14.5px; font-weight:600; color:var(--ink-soft); border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab-btn:hover{ color:var(--blue); }
.tab-btn.active{ color:var(--blue); border-bottom-color:var(--blue); }

.dropzone{ border:2px dashed color-mix(in srgb, var(--blue) 45%, var(--line)); border-radius:var(--radius-m); padding:28px 16px; text-align:center; cursor:pointer; color:var(--ink-soft); background:var(--surface-2); transition:border-color .15s, background .15s; }
.dropzone:hover, .dropzone.dragover{ border-color:var(--blue); background:var(--blue-tint); }
.dropzone .btn{ margin-top:12px; pointer-events:none; }
.photo-preview-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:10px; margin-top:12px; }
.photo-preview-item{ position:relative; }
.photo-preview-item img{ width:100%; height:90px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.photo-preview-item button{ position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%; border:none; background:var(--danger); color:#fff; font-size:14px; line-height:1; cursor:pointer; }
.qr-box{ margin-top:12px; padding:16px; background:var(--surface-2); border-radius:var(--radius-m); text-align:center; }
.qr-box svg{ background:#fff; padding:8px; border-radius:8px; }

.live-toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.live-tab{ background:var(--surface); border:1px solid var(--line); cursor:pointer; padding:9px 16px; border-radius:999px; font-size:14px; font-weight:600; color:var(--ink-soft); }
.live-tab:hover{ color:var(--blue); border-color:var(--blue); }
.live-tab.active{ background:var(--blue); color:#fff; border-color:var(--blue); }
#listing-picker, #widget-add-picker, #theme-picker{ width:auto; max-width:200px; border-radius:999px; padding:9px 16px; }
.live-toolbar-spacer{ flex:1; }
.live-brand-color-label{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; padding:4px; cursor:pointer; }
.live-brand-color-label input[type="color"]{ width:32px; height:32px; padding:0; border:none; border-radius:50%; cursor:pointer; background:none; }
.live-brand-color-label input[type="color"]::-webkit-color-swatch-wrapper{ padding:0; border-radius:50%; }
.live-brand-color-label input[type="color"]::-webkit-color-swatch{ border:none; border-radius:50%; }
.live-frame{ width:100%; height:calc(100vh - 260px); min-height:520px; border:1px solid var(--line); border-radius:var(--radius-m); background:#fff; }
.live-status{ margin-bottom:12px; padding:10px 16px; border-radius:var(--radius-m); font-size:13.5px; font-weight:600; }
.live-status-ok{ background:rgba(46,158,91,.12); color:#1f7a42; }
.live-status-error{ background:rgba(217,68,68,.12); color:#b23a3a; }

.lightbox-overlay{ position:fixed; inset:0; background:rgba(10,21,36,.88); z-index:1000; display:flex; align-items:center; justify-content:center; padding:30px; }
.lightbox-overlay[hidden]{ display:none; }
.lightbox-image{ max-width:100%; max-height:100%; border-radius:var(--radius-s); box-shadow:0 10px 40px rgba(0,0,0,.4); }
.lightbox-close{ position:absolute; top:18px; right:22px; background:none; border:none; color:#fff; font-size:30px; line-height:1; cursor:pointer; }

.support-layout{ display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; margin-top:16px; }
.support-layout > .card{ flex:1 1 380px; min-width:320px; margin-top:0; }
.support-ticket-list{ display:flex; flex-direction:column; gap:10px; }
.support-ticket-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-s); text-decoration:none; color:inherit; }
.support-ticket-row:hover{ border-color:var(--blue); }
.support-ticket-row strong{ flex:1; font-size:14px; font-weight:600; }
.support-ticket-row-date{ font-size:12px; color:var(--ink-soft); white-space:nowrap; }
.upload-progress-wrap{ margin:10px 0; display:flex; align-items:center; gap:10px; }
.upload-progress-bar{ flex:1; height:8px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.upload-progress-fill{ height:100%; width:0%; background:var(--blue); transition:width .15s ease; }
.upload-progress-label{ font-size:12px; color:var(--ink-soft); min-width:32px; text-align:right; }

.screenshot-fab{
  position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:500;
  display:flex; align-items:center; justify-content:center; width:40px; height:48px;
  border:1px solid var(--line); border-right:none; border-radius:10px 0 0 10px;
  background:var(--surface); color:var(--ink-soft); box-shadow:var(--shadow); cursor:pointer;
}
.screenshot-fab:hover{ color:var(--blue); width:46px; }
#support-screenshot-status.hint{ min-height:16px; }

.ai-chat-fab{
  position:fixed; right:22px; bottom:22px; z-index:500;
  display:flex; align-items:center; justify-content:center; width:54px; height:54px;
  border:none; border-radius:50%;
  background:var(--blue); color:#fff; box-shadow:var(--shadow); cursor:pointer;
}
.ai-chat-fab:hover{ background:color-mix(in srgb, var(--blue) 85%, black); }
.ai-chat-panel{
  position:fixed; right:22px; bottom:86px; z-index:500;
  width:340px; max-width:calc(100vw - 32px); max-height:min(520px, calc(100vh - 120px));
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); box-shadow:var(--shadow);
  overflow:hidden;
}
.ai-chat-panel[hidden]{ display:none; }
.ai-chat-header{
  display:flex; align-items:center; justify-content:space-between; padding:12px 14px;
  background:var(--blue); color:#fff; font-size:14px; font-weight:700; flex:none;
}
.ai-chat-close{ background:none; border:none; color:#fff; font-size:20px; line-height:1; cursor:pointer; padding:0 4px; }
.ai-chat-tabs{ display:flex; border-bottom:1px solid var(--line); flex:none; }
.ai-chat-tab{
  flex:1; appearance:none; background:none; border:none; border-bottom:2px solid transparent;
  padding:9px 0; font-size:12.5px; font-weight:700; color:var(--ink-soft); cursor:pointer;
}
.ai-chat-tab.active{ color:var(--blue); border-bottom-color:var(--blue); }
.ai-chat-tabpanel{ display:flex; flex-direction:column; flex:1; min-height:0; }
.ai-chat-tabpanel[hidden]{ display:none; }
.ai-chat-history-list{ flex:1; overflow-y:auto; }
.ai-chat-history-row{
  display:flex; flex-direction:column; gap:3px; width:100%; text-align:left; appearance:none;
  background:none; border:none; border-bottom:1px solid var(--line); padding:12px 14px; cursor:pointer;
}
.ai-chat-history-row:hover{ background:var(--surface-2); }
.ai-chat-history-preview{ font-size:13px; color:var(--ink); }
.ai-chat-history-date{ font-size:11.5px; color:var(--ink-soft); }
.ai-chat-messages{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.ai-chat-msg{ max-width:85%; padding:9px 12px; border-radius:var(--radius-s); font-size:13.5px; line-height:1.5; white-space:pre-wrap; }
.ai-chat-msg-assistant{ align-self:flex-start; background:var(--surface-2); color:var(--ink); }
.ai-chat-msg-user{ align-self:flex-end; background:var(--blue-tint); color:var(--blue); }
.ai-chat-form{ display:flex; gap:8px; padding:10px 14px; border-top:1px solid var(--line); flex:none; align-items:flex-end; }
.ai-chat-form textarea{ flex:1; resize:none; min-height:72px; max-height:140px; }
.ai-chat-form button{ flex:none; }
.ai-chat-escalate{
  flex:none; margin:0 14px 12px; appearance:none; background:transparent; border:none;
  color:var(--ink-soft); font-size:12px; text-decoration:underline; cursor:pointer; text-align:left; padding:0;
}
@media (max-width:760px){
  .ai-chat-panel{ right:16px; bottom:78px; }
  .ai-chat-fab{ right:16px; bottom:16px; }
}

.modal-overlay{ position:fixed; inset:0; background:rgba(15,32,56,.45); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-overlay[hidden]{ display:none; }
.modal-box{ background:var(--surface); border-radius:var(--radius-m); padding:28px; max-width:440px; width:100%; box-shadow:var(--shadow); }
.modal-box-wide{ max-width:680px; }
.rich-editor{ border:1px solid var(--line); border-radius:var(--radius-s); padding:12px 14px; min-height:170px; max-height:400px; overflow-y:auto; font-size:14.5px; line-height:1.65; font-family:inherit; color:var(--ink); background:var(--surface); }
.rich-editor:focus{ outline:2px solid var(--blue); outline-offset:1px; }
.rich-editor:empty:before{ content:attr(data-placeholder); color:var(--ink-soft); }

.ann-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.ann-row:last-child{ border-bottom:none; }
.ann-row-main{ flex:1; min-width:200px; }
.ann-status{ display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:2px 9px; border-radius:999px; background:rgba(46,158,91,.12); color:#1f7a42; margin-bottom:6px; }
.ann-status-archived{ background:var(--surface-2); color:var(--ink-soft); }
.ann-row-text{ font-weight:600; }
.ann-row-link{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.ann-row-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.proj-row-thumb{ width:56px; height:56px; object-fit:cover; border-radius:8px; flex:none; }

.theme-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; }
.theme-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; min-width:0; }
.theme-card-active{ border-color:var(--blue); box-shadow:0 0 0 2px var(--blue) inset; }
.theme-preview{ height:130px; }
.theme-preview-classic{ background:linear-gradient(135deg,#e8f1fa 0%,#e8f1fa 55%,#1f74b4 55%,#1f74b4 75%,#ef6a15 75%,#ef6a15 100%); }
.theme-preview-nova{ background:linear-gradient(135deg,#f7f5f0 0%,#f7f5f0 55%,#132a38 55%,#132a38 78%,#a9793f 78%,#a9793f 100%); }
.theme-preview-nova2{ background:linear-gradient(135deg,#f5f3ed 0%,#f5f3ed 55%,#173d31 55%,#173d31 78%,#315b4b 78%,#315b4b 100%); }
.theme-preview-nova3{ background:linear-gradient(135deg,#ffffff 0%,#ffffff 55%,#10212d 55%,#10212d 78%,#007b89 78%,#007b89 100%); }
.theme-preview-nova6{ background:linear-gradient(135deg,#e8f2ff 0%,#e8f2ff 55%,#07142d 55%,#07142d 78%,#1b4feb 78%,#1b4feb 100%); }
.theme-preview-ferah{ background:linear-gradient(135deg,#e5f4fe 0%,#e5f4fe 55%,#071b39 55%,#071b39 78%,#0065b9 78%,#0065b9 100%); }
.theme-card-body{ padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.theme-card-body h3{ font-size:15.5px; }
.theme-current-badge{ font-size:12.5px; font-weight:700; color:#1f7a42; }

.bbcode-toolbar{ display:flex; gap:6px; margin-bottom:6px; }
.bbcode-btn{ width:32px; height:30px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); cursor:pointer; font-size:13px; }
.bbcode-btn:hover{ border-color:var(--blue); color:var(--blue); }

.stat-row{ display:flex; gap:24px; flex-wrap:wrap; margin-bottom:24px; }
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:18px 22px; flex:1; min-width:180px; }
.stat b{ display:block; font-family:"Archivo",sans-serif; font-size:22px; }
.stat span{ font-size:12.5px; color:var(--ink-soft); }
.pill{ display:inline-block; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--blue-tint); color:var(--blue); }

.widget-picker summary::-webkit-details-marker{ display:none; }
.widget-picker summary{ list-style:none; }
/* the global input{width:100%} rule (meant for text inputs) also stretched
   these checkboxes to fill the row, pushing their label text far to the
   right — pin them back to their natural size. */
.widget-picker-row{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:400; margin-bottom:0; }
.widget-picker-row input[type="checkbox"]{ width:auto; flex:none; }

.dashboard-widgets{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; margin-top:16px; }
.dashboard-widgets .card{ margin-top:0; }
.dashboard-widget-wide{ grid-column:1 / -1; }
@media (max-width:760px){
  .dashboard-widgets{ grid-template-columns:1fr; }
}

.visitor-chart{ display:flex; align-items:flex-end; gap:14px; height:140px; padding-top:8px; }
.visitor-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; height:100%; }
.visitor-bar-track{ flex:1; width:100%; max-width:32px; display:flex; align-items:flex-end; }
.visitor-bar{ width:100%; min-height:3px; background:var(--blue); border-radius:4px 4px 0 0; transition:height .2s ease; }
.visitor-bar-count{ font-size:11.5px; font-weight:700; color:var(--ink); margin-top:6px; }
.visitor-bar-label{ font-size:11px; color:var(--ink-soft); margin-top:2px; }

.trial-progress-track{ width:100%; height:10px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); overflow:hidden; }
.trial-progress-fill{ height:100%; background:var(--amber); border-radius:999px; }

@media (max-width:760px){
  .app-shell{ flex-direction:column; }
  .sidebar{ width:100%; height:auto; position:static; flex-direction:row; align-items:center; flex-wrap:wrap; gap:16px; padding:14px 16px; }
  .sidebar .brand{ padding:0; margin-right:auto; }
  .sidebar-nav{ flex-direction:row; flex-wrap:wrap; gap:16px; }
  .sidebar-title,.sidebar-link-top{ padding:0; margin-bottom:4px; }
  .sidebar-title{ cursor:default; }
  .sidebar-title .chev{ display:none; }
  .sidebar-links{ display:flex !important; flex-direction:row; flex-wrap:wrap; gap:8px; padding-bottom:0; }
  .sidebar-section a{ padding:6px 10px; }
  .sidebar-bottom{ margin-top:0; padding-top:0; border-top:0; flex-direction:row; margin-left:auto; }
  .content-area .wrap{ padding-inline:16px; }
  .item-grid{ grid-template-columns:1fr; }
}

/* Global page-transition feedback (see base.html's own script) — a thin
   top bar for any same-origin link click, plus a centered overlay spinner
   for any form submit (covers "İlanı ekle ve yayınla" and every other
   save/submit action panel-wide) — so a page that takes a moment (a
   photo upload, a slower query) doesn't look like nothing happened.
   Skipped automatically for any form whose own handler already called
   preventDefault() (e.g. the Stripe Elements checkout, which manages its
   own in-page status text) — see base.html's listener. */
#page-progress-bar{ position:fixed; top:0; left:0; height:3px; width:0%; background:var(--blue); z-index:9999; opacity:0; transition:width .5s ease, opacity .3s ease; pointer-events:none; }
#page-progress-bar.active{ opacity:1; }
#page-loading-overlay{ position:fixed; inset:0; background:rgba(245,248,251,.72); z-index:9998; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .15s ease; }
#page-loading-overlay.active{ opacity:1; pointer-events:all; }
:root[data-theme="dark"] #page-loading-overlay, :root:not([data-theme="light"]) #page-loading-overlay{ background:rgba(10,21,36,.72); }
.page-spinner{ width:36px; height:36px; border:4px solid var(--line); border-top-color:var(--blue); border-radius:50%; animation:page-spin .7s linear infinite; }
@keyframes page-spin{ to{ transform:rotate(360deg); } }

/* "Vurgula" (highlight) button in the listing Açıklama editor — wraps
   the selection in <mark>, the one extra tag sanitize_rich_text()
   whitelists for this (see app/utils/bbcode.py) beyond b/i/u/lists/
   links/align, so a tenant can call out a line (e.g. "ULAŞIM") in a way
   that actually survives saving and shows the same way on the published
   listing page — not just in this editor's own live contenteditable
   view, which otherwise renders far more than what's ever actually kept.
   The published-site styling for this same <mark> lives in each theme's
   own stylesheet. */
.rich-editor mark{ background:#fde68a; color:#78350f; padding:.05em .2em; border-radius:3px; }