/* ═══════════════════════════════════════════════════════════════════
   Distrivo Design System — Polaris token'ları (vanilla CSS portu)
   Kaynak: distrivo-project/packages/ui (@distrivo/ui tokens.ts + theme.ts)
   ve Shopify Polaris referansı. TEK TEMA: light (Polaris'te dark yok).

   Kurallar:
   - Sayfalar renk/spacing/radius için SADECE buradaki token'ları kullanır.
   - Primary aksiyon SİYAH (#303030), yeşil/mor değil. Link/focus #005BD3.
   - Topbar koyu (#1A1A1A) — Shopify admin chrome; içindeki butonlar
     yarı saydam beyaz "pill" (.tbtn).
   - Tipografi Inter; gövde 13px; ağırlıklar 450/550/650/700.
   - Logo geometrisi ve orb'lar /assets/distrivo.js içindedir.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Design token'lar ─────────────────────────────────────────── */
:root {
  /* Marka (siyah — Polaris brand) */
  --brand:        #303030;
  --brand-hover:  #1A1A1A;
  --on-brand:     #FFFFFF;
  --inverse:      #1A1A1A;   /* koyu chrome: topbar, toast */

  /* Yüzeyler */
  --bg:               #F1F1F1;
  --surface:          #FFFFFF;
  --surface-hover:    #F7F7F7;
  --surface-active:   #F3F3F3;
  --surface-selected: #F1F1F1;
  --surface-2:        #F7F7F7;
  --nav-bg:           #EBEBEB;
  --input-bg:         #FDFDFD;

  /* Yazı */
  --text:       #303030;
  --text-2:     #616161;
  --text-3:     #B5B5B5;
  --link:       #005BD3;
  --link-hover: #004299;

  /* Border / focus */
  --border:        #E3E3E3;
  --border-2:      #EBEBEB;
  --border-hover:  #CCCCCC;
  --focus:         #005BD3;
  --input-border:        #8A8A8A;
  --input-border-active: #1A1A1A;

  /* İkon */
  --icon:   #4A4A4A;
  --icon-2: #8A8A8A;

  /* Semantik roller: fill (solid) / surface (açık zemin) / text / border / icon */
  --success:         #047B5D;
  --success-surface: #CDFED4;
  --success-text:    #014B40;
  --success-border:  #92FCAC;
  --critical:         #C70A24;
  --critical-surface: #FEE8EB;
  --critical-text:    #8E0B21;
  --critical-border:  #FEC1C7;
  --critical-icon:    #E22C38;
  --warning:         #FFB800;
  --warning-surface: #FFF1E3;
  --warning-text:    #5E4200;
  --warning-border:  #FFC879;
  --caution-surface: #FFF8DB;
  --caution-text:    #4F4700;
  --info:         #91D0FF;
  --info-surface: #EAF4FF;
  --info-text:    #003A5A;
  --info-border:  #A8D8FF;
  --info-icon:    #0094D5;
  --magic:         #8051FF;
  --magic-surface: #F8F7FF;
  --magic-text:    #5700D1;
  --magic-border:  #E4DEFF;

  /* Kanal renkleri (platform logoları — UI teması değil, marka verisi) */
  --ch-wa: #25D366;
  --ch-ig: #E1306C;
  --ch-fb: #0084FF;

  /* Geometri */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* Gölgeler (rgba(26,26,26,X) — Polaris shadow ailesi) */
  --shadow-sm:      0px 1px 0px 0px rgba(26,26,26,.07);
  --shadow-card:    0px 1px 0px 0px rgba(26,26,26,.07), 0px 0px 0px 1px rgba(0,0,0,.04);
  --shadow-raised:  0px 4px 6px -2px rgba(26,26,26,.20);
  --shadow-popover: 0px 8px 16px -4px rgba(26,26,26,.22);
  --shadow-modal:   0px 12px 20px -8px rgba(26,26,26,.24);

  /* Motion */
  --fast: 100ms;
  --base: 200ms;
  --ease: cubic-bezier(.25,.1,.25,1);
  --ease-out: cubic-bezier(.19,.91,.38,1);

  /* Tipografi */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Ölçüler */
  --topbar-h: 56px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 32px;

  color-scheme: light;
}

/* ── 2. Taban ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 450;
  line-height: 1.45;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.25; letter-spacing: -.2px; }
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
p  { margin: 0 0 var(--sp-3); }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

code, pre, .mono { font-family: var(--font-mono); font-size: 12px; }
pre {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--sp-3); overflow-x: auto;
}

hr { border: none; border-top: 1px solid var(--border-2); margin: var(--sp-4) 0; }

::selection { background: var(--info-surface); }

/* İnce scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--border-hover) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

/* Klavye odak halkası (Polaris: 2px #005BD3, 1px offset) */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
:focus:not(:focus-visible) { outline: none; }

/* ── 3. Topbar (koyu chrome — Shopify admin) ─────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  min-height: var(--topbar-h);
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--inverse);
  color: #E3E3E3;
}
.topbar .brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700; letter-spacing: -.2px;
  color: #FFFFFF; white-space: nowrap; text-decoration: none;
}
.topbar .brand:hover { color: #FFFFFF; text-decoration: none; }
.topbar .brand .muted { color: rgba(255,255,255,.55); font-weight: 550; }
.topbar .spacer { flex: 1; }
.topbar .tmeta { color: rgba(255,255,255,.5); font-size: 12px; white-space: nowrap; }

/* Koyu zemin pill butonu (Shopify mobil "Bugün" / "Raporu görüntüle" dili) */
.tbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 5px 12px;
  font: inherit; font-size: 12.5px; font-weight: 550; color: #FFFFFF;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-full);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--fast) var(--ease);
}
.tbtn:hover { background: rgba(255,255,255,.16); color: #FFFFFF; text-decoration: none; }
.tbtn:disabled { opacity: .5; cursor: not-allowed; }
.tbtn.icon { width: 32px; padding: 0; }
.tbtn svg { width: 18px; height: 18px; flex-shrink: 0; }
.tbtn .cnt {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full);
  background: var(--critical-icon); color: #FFFFFF;
  font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
}

/* Topbar durum hapı (webhook sağlığı vb.) */
.tpill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 3px 11px;
  font-size: 11.5px; font-weight: 550; color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.07); border-radius: var(--radius-full);
  cursor: pointer; white-space: nowrap;
}
.tpill.alert { background: rgba(229,57,70,.28); color: #FFC1C7; }

/* ── 4. Butonlar (açık yüzeyler) ─────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 5px 12px;
  font: inherit; font-size: 13px; font-weight: 550;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.btn:hover { background: var(--surface-hover); border-color: var(--border-hover); color: var(--text); text-decoration: none; }
.btn:active { background: var(--surface-active); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn.primary {
  background: var(--brand); border-color: var(--brand); color: var(--on-brand);
}
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); }

.btn.critical { background: var(--critical); border-color: var(--critical); color: #FFFFFF; }
.btn.critical:hover { background: #A80A1F; border-color: #A80A1F; color: #FFFFFF; }

.btn.critical-ghost { color: var(--critical-text); border-color: var(--critical-border); background: var(--surface); }
.btn.critical-ghost:hover { background: var(--critical-surface); }

.btn.success-ghost { color: var(--success-text); border-color: var(--success-border); background: var(--surface); }
.btn.success-ghost:hover { background: var(--success-surface); }

.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--icon); }
.btn.ghost:hover { background: rgba(0,0,0,.05); border-color: transparent; color: var(--text); }

.btn.plain { background: transparent; border-color: transparent; box-shadow: none; color: var(--link); }
.btn.plain:hover { background: transparent; text-decoration: underline; color: var(--link-hover); }

.btn.sm { min-height: 28px; padding: 3px 10px; font-size: 12px; }
.btn.sm svg { width: 16px; height: 16px; }
.btn.icon { width: 32px; padding: 0; }
.btn.sm.icon { width: 28px; }
.btn.full { width: 100%; }
.btn.lg { min-height: 40px; font-size: 14px; }

/* ── 5. Kartlar ──────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.card-h {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-2);
  font-weight: 650; font-size: 13px;
}
.card-b { padding: var(--sp-4); }
@media (min-width: 490px) { .card-b { padding: var(--sp-5); } }

/* ── 6. Rozetler / durum ─────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px;
  font-size: 11.5px; font-weight: 550; line-height: 1;
  border-radius: var(--radius-full);
  background: var(--surface-selected); color: var(--text);
  white-space: nowrap;
}
.badge.success  { background: var(--success-surface);  color: var(--success-text); }
.badge.critical { background: var(--critical-surface); color: var(--critical-text); }
.badge.warning  { background: var(--warning-surface);  color: var(--warning-text); }
.badge.caution  { background: var(--caution-surface);  color: var(--caution-text); }
.badge.info     { background: var(--info-surface);     color: var(--info-text); }
.badge.magic    { background: var(--magic-surface);    color: var(--magic-text); }
.badge.brand    { background: var(--brand);            color: var(--on-brand); }

.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.status-dot.ok   { background: var(--success); }
.status-dot.warn { background: var(--warning); }
.status-dot.err  { background: var(--critical-icon); }
.status-dot.off  { background: var(--border-hover); }

/* ── 7. Form elemanları ──────────────────────────────────────────── */
input, select, textarea {
  font: inherit; font-size: 13px; font-weight: 450;
  color: var(--text);
  background: var(--input-bg);
  border: 0.66px solid var(--input-border);
  border-radius: var(--radius);
  padding: 6px 12px;
  min-height: 32px;
  max-width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--text-2); }
input:focus, select:focus, textarea:focus {
  border-color: var(--input-border-active);
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
input[type="checkbox"], input[type="radio"] {
  min-height: 0; accent-color: var(--brand); width: 16px; height: 16px;
}
textarea { resize: vertical; }
label { font-size: 12px; font-weight: 550; color: var(--text-2); }
.field { display: flex; flex-direction: column; gap: 4px; }
.field .help { font-size: 11.5px; color: var(--text-2); font-weight: 450; }

/* ── 8. Modal (Polaris overlay) ──────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 510;
  background: rgba(0,0,0,.71);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
}
.modal {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  width: 100%; max-width: 620px;
  max-height: 90vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
.modal-h {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-2);
  font-size: 14px; font-weight: 650;
  flex-shrink: 0;
}
.modal-h .grow { flex: 1; }
.modal-b { padding: var(--sp-5); overflow-y: auto; }
.modal-f {
  display: flex; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border-2);
  flex-shrink: 0;
}

/* ── 9. Banner / boş durum / toast ───────────────────────────────── */
.banner {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: var(--radius); padding: 10px 12px;
  font-size: 12.5px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text);
}
.banner svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.banner.info     { background: var(--info-surface);     border-color: var(--info-border);     color: var(--info-text); }
.banner.success  { background: var(--success-surface);  border-color: var(--success-border);  color: var(--success-text); }
.banner.warning  { background: var(--warning-surface);  border-color: var(--warning-border);  color: var(--warning-text); }
.banner.critical { background: var(--critical-surface); border-color: var(--critical-border); color: var(--critical-text); }

.empty {
  padding: 48px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.empty .t { font-size: 14px; font-weight: 650; color: var(--text); }
.empty .d { font-size: 13px; color: var(--text-2); max-width: 420px; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 520;
  background: var(--brand); color: var(--on-brand);
  padding: 10px 16px; border-radius: var(--radius);
  font-size: 13px; font-weight: 550; box-shadow: var(--shadow-popover);
  max-width: min(90vw, 480px);
}

/* Orb yükleme bloğu (OrbLoader karşılığı) */
.orb-loader {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; width: 100%; padding: 28px 0;
  color: var(--text-2); font-size: 13px;
}

/* ── 10. Tablolar / listeler ─────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th {
  text-align: left; padding: 8px 12px;
  font-size: 12px; font-weight: 650; color: var(--text-2);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td { padding: 8px 12px; border-bottom: 1px solid var(--border-2); vertical-align: top; }
tbody tr:hover { background: var(--surface-hover); }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── 11. Yardımcılar ─────────────────────────────────────────────── */
.row  { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.col  { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--text-2); }
.faint { color: var(--icon-2); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.ok-text    { color: var(--success-text); }
.warn-text  { color: var(--warning-text); }
.error-text { color: var(--critical-text); }

.page { padding: var(--sp-5); max-width: 1200px; margin: 0 auto; }
.section-label {
  font-size: 11px; font-weight: 650; letter-spacing: .5px;
  text-transform: uppercase; color: var(--icon-2);
  margin-bottom: var(--sp-2);
}

.kv { display: flex; justify-content: space-between; gap: var(--sp-2);
      font-size: 13px; padding: 5px 0; }
.kv .k { color: var(--text-2); }
.kv .v { color: var(--text); font-weight: 550; text-align: right; word-break: break-word; }

/* ── 12. Auth (giriş/kayıt) kabuğu ───────────────────────────────── */
.auth-shell {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4); background: var(--bg);
}
.auth-card {
  width: 100%; max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 32px 28px;
}
.auth-card .brand-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 24px; text-align: center; }
.auth-card .brand-head h1 { font-size: 18px; letter-spacing: -.3px; }
.auth-card .brand-head .sub { font-size: 12.5px; color: var(--text-2); }
.auth-card .field { margin-bottom: var(--sp-3); }
.auth-card .foot { text-align: center; font-size: 12.5px; color: var(--text-2); margin-top: var(--sp-4); }

/* ── 13. Responsive ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .page { padding: var(--sp-3); }
  .topbar { padding: var(--sp-2) var(--sp-3); }
  .btn { min-height: 40px; }
  .btn.sm { min-height: 34px; }
  .tbtn { min-height: 36px; }
  .tbtn.icon { width: 36px; }
  input, select, textarea { min-height: 40px; font-size: 16px; } /* iOS zoom engeli */
  .modal { max-height: 92dvh; }
  .hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
  .only-mobile { display: none !important; }
}

/* Hareket azaltma — orb'lar kendi durağan karesini çizer (distrivo.js) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}