/* ══════════════════════════════════════════════════════════════════
   Kuyum360 — Mağaza Paneli. Native (Flutter) tasarım dili → web.
   Marka: Beyaz #FFFFFF · Lacivert #0A192F · Altın #C5A02E (milimetrik
   vurgu; etiketler muted). Poppins · tabular rakamlar · mobile-first.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --bg:          #F7F8FA;
  --surface:     #FFFFFF;
  --surface-high:#EEF1F5;
  --shimmer:     #E4E8EE;

  --ink:    #0A192F;   /* marka lacivert / textPrimary */
  --ink-2:  #36465C;   /* textSecondary */
  --ink-dim:#7C889A;   /* textDim */
  --ink-mute:#B2BAC6;

  --accent:    #C5A02E;   /* marka altını — şampanya-bronz, sadece vurgu */
  --accent-bg: rgba(197,160,46,0.12);

  --green:    #047857;  --green-bg: rgba(4,120,87,0.07);
  --red:      #B91C1C;  --red-bg:   rgba(185,28,28,0.07);
  --blue:     #1D4ED8;  --blue-bg:  rgba(29,78,216,0.07);
  --orange:   #B45309;  --orange-bg:rgba(180,83,9,0.07);

  --line:        rgba(10,25,47,0.07);
  --line-md:     rgba(10,25,47,0.12);
  --line-strong: rgba(10,25,47,0.18);

  --r-sm: 10px;
  --r:    12px;
  --r-lg: 16px;
  --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(10,10,11,0.04), 0 10px 24px -14px rgba(10,10,11,0.10);
  --shadow-pop:  0 4px 8px rgba(10,10,11,0.06), 0 24px 48px -18px rgba(10,10,11,0.16);

  --ease: cubic-bezier(0.2,0.7,0.2,1);
  --nav-h: 64px;

  --tnum: "tnum" 1, "lnum" 1;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:none;    /* pull-to-refresh sıçramasını engelle */
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
.hidden { display:none !important; }
.num { font-feature-settings: var(--tnum); font-variant-numeric: tabular-nums lining-nums; }

/* ─── Tipografi ölçeği ─── */
.t-hero   { font-size:34px; font-weight:600; letter-spacing:-1.0px; line-height:1.0; }
.t-xl     { font-size:30px; font-weight:600; letter-spacing:-0.9px; line-height:1.0; }
.t-lg     { font-size:22px; font-weight:600; letter-spacing:-0.5px; line-height:1.05; }
.t-metric { font-size:19px; font-weight:600; letter-spacing:-0.4px; }
.t-title  { font-size:16px; font-weight:500; letter-spacing:-0.2px; }
.t-body   { font-size:13px; font-weight:400; }
.t-cap    { font-size:11.5px; font-weight:400; color:var(--ink-2); line-height:1.35; }
.t-label  { font-size:11px; font-weight:500; letter-spacing:0.4px; color:var(--ink-dim); }
.c-green{color:var(--green)} .c-red{color:var(--red)} .c-accent{color:var(--accent)}
.c-ink2{color:var(--ink-2)} .c-dim{color:var(--ink-dim)}

/* ══════════════ LOGIN ══════════════ */
#loginPage {
  min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:22px;
  background:
    radial-gradient(1000px 520px at 50% -10%, rgba(197,160,46,0.07), transparent 60%),
    #FFFFFF;
}
.login-box {
  width:400px; max-width:100%;
  background:#FFFFFF;
  border:1px solid var(--line-md);
  border-radius:20px; padding:38px 32px;
  box-shadow:var(--shadow-pop);
}
.login-brand { display:flex; align-items:center; margin-bottom:22px; }
.login-box h1 { font-size:21px; font-weight:600; margin-bottom:6px; }
.login-box .sub { color:var(--ink-2); font-size:13.5px; line-height:1.5; margin-bottom:26px; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:12px; color:var(--ink-2); margin-bottom:6px; font-weight:500; }
.form-group input, .form-group select {
  width:100%; padding:13px 14px; font-size:15px; font-family:inherit; /* 15px: iOS zoom yok */
  background:#fff; color:var(--ink);
  border:1px solid var(--line-md); border-radius:var(--r);
  outline:none; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-group input:focus, .form-group select:focus {
  border-color:var(--accent); box-shadow:0 0 0 4px rgba(197,160,46,0.16);
}
.btn {
  width:100%; padding:14px 20px; font-size:15px; font-weight:600;
  color:#FFFFFF;
  background:var(--ink);
  border:1px solid var(--ink); border-radius:var(--r-pill);
  box-shadow:0 10px 28px -14px rgba(10,25,47,0.40);
  transition:transform .15s var(--ease), filter .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.04); }
.btn:active { transform:translateY(0); }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.btn-sm { width:auto; padding:9px 16px; font-size:13px; }
.error-msg {
  background:var(--red-bg); border-left:3px solid var(--red); color:var(--red);
  padding:10px 13px; border-radius:var(--r-sm); font-size:13px; margin-bottom:14px;
}
.login-footer { text-align:center; margin-top:22px; font-size:12px; color:var(--ink-mute); }

/* ══════════════ APP SHELL ══════════════ */
#appPage { min-height:100dvh; display:flex; }

/* Sidebar — sadece masaüstü/tablet (>768) */
.sidebar { display:none; }

/* Ana içerik */
.main { flex:1; min-width:0; display:flex; flex-direction:column; }

/* Üst bar (telefon) */
.topbar {
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:rgba(255,255,255,0.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar .tb-title { font-size:17px; font-weight:600; letter-spacing:-0.3px; }
.topbar .tb-actions { display:flex; align-items:center; gap:6px; }
.icon-btn {
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:none; background:transparent; color:var(--ink-2); border-radius:var(--r-sm);
}
.icon-btn:active { background:var(--surface-high); }
.icon-btn svg { width:20px; height:20px; }

.scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:calc(var(--nav-h) + 12px); }
.page { padding:12px 16px 24px; max-width:760px; margin:0 auto; width:100%; }
.page.hidden { display:none; }

/* Alt tab bar (telefon) */
.tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex; background:var(--surface); border-top:1px solid var(--line);
  overflow-x:auto; scrollbar-width:none;
}
.tabbar::-webkit-scrollbar { display:none; }
.tab {
  flex:0 0 auto; min-width:64px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; border:none; background:transparent; color:var(--ink-dim);
  font-size:10.5px; font-weight:500; user-select:none;
}
.tab svg { width:21px; height:21px; }
.tab.active { color:var(--ink); }
.tab .lbl { letter-spacing:0.1px; }

/* ══════════════ BİLEŞENLER ══════════════ */
.card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-card);
}
.card + .card, .stack > * + * { margin-top:12px; }
.stack-sm > * + * { margin-top:10px; }

/* Hero metrik */
.hero-metric { padding:2px 4px 0; }
.hero-metric .lbl { color:var(--ink-dim); font-size:11px; font-weight:500; letter-spacing:0.4px; text-transform:uppercase; }
.hero-metric .val { margin-top:6px; }
.hero-metric .sub { margin-top:8px; font-size:12.5px; font-weight:500; color:var(--ink-2); }

/* Stat tile ızgarası */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.tile {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-card); padding:13px 14px;
}
.tile .lbl { color:var(--ink-dim); font-size:11px; font-weight:500; letter-spacing:0.4px; text-transform:uppercase; }
.tile .val { margin-top:7px; font-size:16px; font-weight:600; letter-spacing:-0.3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile .sub { margin-top:3px; font-size:11px; color:var(--ink-dim); }

/* Section card (açılır/kapanır) */
.section { background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-card); overflow:hidden; }
.section-head {
  display:flex; align-items:center; gap:11px; padding:15px 16px; cursor:pointer; user-select:none;
}
.section-head .s-ico { flex:none; display:flex; align-items:center; justify-content:center; color:var(--ink-dim); }
.section-head .s-ico svg { width:18px; height:18px; }
.section-head .s-txt { flex:1; min-width:0; }
.section-head .s-title { font-size:13.5px; font-weight:500; }
.section-head .s-sub { font-size:11px; color:var(--ink-dim); margin-top:1px; }
.section-head .s-chev { color:var(--ink-dim); transition:transform .2s var(--ease); }
.section.open .s-chev { transform:rotate(180deg); }
.section-body { display:none; border-top:1px solid var(--line); }
.section.open .section-body { display:block; }

/* Liste satırı */
.row {
  display:flex; align-items:center; gap:10px; padding:13px 16px;
  border-bottom:1px solid var(--line);
}
.row:last-child { border-bottom:none; }
.row .r-main { flex:1; min-width:0; }
.row .r-title { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .r-sub { font-size:11px; color:var(--ink-dim); margin-top:2px; }
.row .r-val { font-size:12.5px; font-weight:600; letter-spacing:-0.2px; white-space:nowrap; }
.row .r-avatar { width:30px; height:30px; flex:none; border-radius:50%; background:var(--surface-high);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--ink-2); }
.row.canceled .r-title { text-decoration:line-through; color:var(--ink-dim); }

/* Dönem chip'leri */
.period-chips { display:flex; gap:6px; padding:2px; background:var(--surface-high);
  border-radius:var(--r-pill); }
.period-chips .pc {
  flex:1; padding:8px 4px; border:none; background:transparent; border-radius:var(--r-pill);
  font-size:12.5px; font-weight:500; color:var(--ink-2); transition:all .18s var(--ease);
}
.period-chips .pc.active { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-card); font-weight:600; }

/* Market ticker */
.ticker { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.ticker::-webkit-scrollbar { display:none; }
.ticker .q { flex:none; padding:9px 13px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow-card); }
.ticker .q .q-name { font-size:10.5px; color:var(--ink-dim); font-weight:500; }
.ticker .q .q-val { font-size:13.5px; font-weight:600; letter-spacing:-0.2px; margin-top:2px; }
.ticker .q .q-chg { font-size:10.5px; font-weight:600; margin-top:1px; }

/* Badge / chip */
.badge { display:inline-block; padding:3px 9px; border-radius:var(--r-pill); font-size:11px; font-weight:600; }
.badge-green{ background:var(--green-bg); color:var(--green); }
.badge-yellow{ background:var(--accent-bg); color:#9a7913; }
.badge-red{ background:var(--red-bg); color:var(--red); }
.badge-gray{ background:var(--surface-high); color:var(--ink-dim); }
.status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; }
.status-dot.online{ background:var(--green); } .status-dot.offline{ background:var(--ink-dim); }

/* Uyarı bandı */
.banner { display:flex; gap:10px; align-items:flex-start; padding:12px 14px;
  background:var(--surface-high); border:1px solid var(--line); border-radius:var(--r); }
.banner svg { width:16px; height:16px; flex:none; color:var(--orange); margin-top:1px; }
.banner .b-txt { font-size:12px; color:var(--ink-2); line-height:1.4; }

/* Empty & skeleton */
.empty { text-align:center; padding:26px 16px; color:var(--ink-dim); }
.empty svg { width:26px; height:26px; opacity:.5; margin-bottom:8px; }
.empty .e-txt { font-size:12.5px; }
.skel { background:var(--shimmer); border-radius:6px; animation:pulse 1.3s var(--ease) infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* Section başlığı (owner sayfa üstü küçük etiket) */
.sec-label { font-size:11px; font-weight:500; letter-spacing:0.4px; color:var(--ink-dim);
  text-transform:uppercase; margin:18px 4px 8px; }

/* Tablo (admin/masaüstü) */
table { width:100%; border-collapse:collapse; }
th { padding:12px 16px; text-align:left; font-size:11px; color:var(--ink-dim);
  text-transform:uppercase; letter-spacing:.08em; background:rgba(10,25,47,0.03); font-weight:600; }
td { padding:13px 16px; border-top:1px solid var(--line); font-size:13px; }
tr:hover td { background:rgba(10,25,47,0.015); }
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
code { font-family:ui-monospace, monospace; font-size:11px; background:var(--accent-bg);
  padding:2px 6px; border-radius:4px; color:#9a7913; }

/* Modal */
.modal-overlay { position:fixed; inset:0; z-index:100; display:flex; align-items:center;
  justify-content:center; padding:18px; background:rgba(10,25,47,0.35); backdrop-filter:blur(6px); }
.modal { width:560px; max-width:100%; max-height:88dvh; overflow-y:auto; padding:28px;
  background:var(--surface); border-radius:18px; box-shadow:var(--shadow-pop); }
.modal h3 { font-size:18px; font-weight:600; margin-bottom:18px; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px;
  padding-top:16px; border-top:1px solid var(--line); }
.btn-outline { padding:10px 18px; background:var(--surface); border:1px solid var(--line-md);
  color:var(--ink); border-radius:var(--r-pill); font-size:13px; font-weight:500; }
.btn-outline:hover { border-color:var(--accent); color:#9a7913; }
.kv-grid { display:grid; grid-template-columns:auto 1fr; gap:9px 18px; font-size:13px; }
.kv-grid .k { color:var(--ink-dim); white-space:nowrap; font-size:12px; }
.kv-grid .v { word-break:break-word; }
.err-box { background:var(--red-bg); border:1px solid var(--line-md); border-radius:var(--r);
  padding:11px 14px; font-size:12px; color:var(--red); font-family:ui-monospace,monospace; word-break:break-all; margin-top:8px; }

/* Toast */
.toast { position:fixed; bottom:calc(var(--nav-h) + 16px); left:50%; transform:translateX(-50%);
  z-index:200; max-width:88%; padding:12px 18px; background:var(--ink); color:#fff;
  border-radius:var(--r-pill); font-size:13px; box-shadow:var(--shadow-pop); }
.toast.error { background:var(--red); }

.spinner { width:22px; height:22px; border:2px solid var(--line-md); border-top-color:var(--accent);
  border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.center-load { display:flex; align-items:center; justify-content:center; padding:40px; }

/* ══════════════ GELİŞMİŞ BİLEŞENLER ══════════════ */
/* Sıralama satırı — orantılı bar arkalı (personel / marka) */
.rank-row { display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line); }
.rank-row:last-child { border-bottom:none; }
.rank-badge { width:26px; height:26px; flex:none; border-radius:8px; background:var(--surface-high);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:var(--ink-2); }
.rank-main { flex:1; min-width:0; }
.rank-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.rank-name { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-sub { font-size:11px; color:var(--ink-dim); margin-top:3px; }
.bar { height:5px; border-radius:99px; background:var(--surface-high); overflow:hidden; margin:6px 0 1px; }
.bar-fill { height:100%; border-radius:99px; background:var(--accent); }

/* Mini günlük grafik — ciro (açık) + kâr (dolu) */
.chart { display:flex; align-items:flex-end; gap:3px; height:120px; }
.chart-col { flex:1; min-width:0; height:100%; display:flex; align-items:flex-end; }
.chart-bar { position:relative; width:100%; height:100%; }
.chart-bar-rev { position:absolute; bottom:0; left:0; right:0; border-radius:3px 3px 0 0; background:var(--accent-bg); }
.chart-bar-profit { position:absolute; bottom:0; left:0; right:0; border-radius:3px 3px 0 0; background:var(--accent); }
.chart-legend { display:flex; gap:16px; margin-top:12px; font-size:11px; color:var(--ink-dim); }
.chart-legend span { display:flex; align-items:center; gap:6px; }
.chart-legend i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.chart-legend .lg-rev { background:var(--accent-bg); }
.chart-legend .lg-prof { background:var(--accent); }

/* Sayfa içi alt sekmeler */
.subtabs { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.subtabs::-webkit-scrollbar { display:none; }
.subtabs .st { flex:none; padding:8px 14px; border:1px solid var(--line); background:var(--surface);
  border-radius:var(--r-pill); font-size:12.5px; font-weight:500; color:var(--ink-2); white-space:nowrap; }
.subtabs .st.active { background:var(--ink); color:#fff; border-color:var(--ink); }

/* Paket kilit rozeti + kilitli nav görünümü */
.nav-lock { margin-left:auto; color:var(--ink-mute); display:inline-flex; }
.nav-item.locked, .tab.locked { opacity:.55; }

/* ══════════════ MASAÜSTÜ / TABLET (>768) ══════════════ */
@media (min-width:769px) {
  .tabbar { display:none; }
  .topbar { display:none; }
  .scroll { padding-bottom:24px; }
  /* Mobil ile aynı his: geniş dashboard yerine dar, ortalanmış app-kolonu */
  .page { padding:24px 28px; max-width:720px; }

  /* Açık sidebar — beyaz yüzey, ince hairline; tüm panel açık renk. */
  .sidebar {
    display:flex; flex-direction:column; width:240px; flex:none;
    background:var(--surface); border-right:1px solid var(--line); padding:20px 0;
    position:sticky; top:0; height:100dvh;
  }
  .sidebar-logo { padding:0 20px 18px; border-bottom:1px solid var(--line); margin-bottom:12px; }
  .sidebar-logo .role { display:block; font-size:11px; color:var(--ink-dim); letter-spacing:.08em;
    text-transform:uppercase; margin-top:6px; font-weight:500; }
  .nav-item { display:flex; align-items:center; gap:11px; padding:11px 20px; font-size:14px;
    color:var(--ink-2); border-left:2px solid transparent; transition:background .15s var(--ease), color .15s var(--ease); }
  .nav-item svg { width:18px; height:18px; }
  .nav-item:hover { background:var(--surface-high); color:var(--ink); }
  .nav-item.active { border-left-color:var(--accent); background:var(--accent-bg); color:var(--ink); font-weight:600; }
  .sidebar-bottom { margin-top:auto; padding:16px 20px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-dim); }
  .sidebar-bottom strong { display:block; color:var(--ink); font-size:13px; font-weight:500; margin-bottom:2px; }
  .logout-btn { margin-top:10px; font-size:12px; color:var(--accent); background:none; border:none; padding:0; }

  /* tile'lar mobildeki gibi 2 kolon kalsın (4'e yayılmasın) */
  .page-title { font-size:22px; font-weight:600; letter-spacing:-0.3px; margin-bottom:4px; }
  .page-desc { font-size:13px; color:var(--ink-dim); margin-bottom:20px; }
}

/* Masaüstünde sayfa başlığı, telefonda gizli (topbar var) */
.page-head { display:none; }
@media (min-width:769px) { .page-head { display:block; } }

/* ── Dalga 2-3: form alanı + rozet + turuncu vurgu ── */
.fld{width:100%;padding:11px 13px;border:1px solid var(--line-md);border-radius:var(--r);
  font-size:14px;background:var(--surface);color:var(--ink);font-family:inherit}
.fld:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.pill{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;
  background:var(--surface-high);color:var(--ink-2);vertical-align:middle}
.pill-green{background:var(--green-bg);color:var(--green)}
.pill-red{background:var(--red-bg);color:var(--red)}
.c-orange{color:var(--orange)}