/* VIZZ shared design system — sarı/siyah arı teması */
:root{
  --honey:#FFC400; --honey-deep:#F2A900; --honey-soft:#FFF3D0;
  --ink:#14130F; --ink-2:#1F1D17; --ink-3:#2B2820;
  --paper:#FAF7EF; --card:#FFFFFF; --line:#ECE6D6; --line-2:#E2DBC8;
  --muted:#7A766A; --green:#1FAE5A; --red:#E5484D; --blue:#3B82F6;
  --shadow:0 14px 40px rgba(20,19,15,.13); --shadow-sm:0 4px 14px rgba(20,19,15,.07);
  --radius:18px; --radius-lg:24px;
  --font:'Segoe UI',Roboto,system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' style='font-size:24px'><text y='26'>🐝</text></svg>") 16 16, auto !important;
}
a, button, .card, .item, .open, select, input[type="checkbox"], input[type="radio"], .btn {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' style='font-size:24px'><text y='26'>🍯</text></svg>") 16 16, pointer !important;
}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#d8d2c2;border-radius:8px}

/* brand */
.vz-brand{display:flex;align-items:center;gap:10px}
.vz-brand img{height:38px;width:38px;border-radius:10px;object-fit:cover;background:#000}
.vz-brand b{font-style:italic;font-size:22px;letter-spacing:.5px}
.vz-brand b i{color:var(--honey);font-style:italic}

/* buttons */
.btn{border:none;border-radius:12px;font-weight:700;transition:.16s;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn:active{transform:scale(.97)}
.btn-honey{background:var(--honey);color:var(--ink);padding:11px 20px;box-shadow:0 8px 18px rgba(242,169,0,.35)}
.btn-honey:hover{transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff;padding:11px 18px}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;padding:10px 16px}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-out{background:#fff;border:1.5px solid var(--line-2);color:var(--ink);padding:10px 16px}

/* pills / badges */
.pill{background:var(--honey);color:var(--ink);font-weight:800;font-size:12px;padding:5px 11px;border-radius:20px;display:inline-block}
.tag-on{color:var(--green)}.tag-warn{color:var(--honey-deep)}.tag-bad{color:var(--red)}
.dotpulse{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block;box-shadow:0 0 0 0 rgba(31,174,90,.6);animation:dp 1.4s infinite}
@keyframes dp{70%{box-shadow:0 0 0 7px rgba(31,174,90,0)}100%{box-shadow:0 0 0 0 rgba(31,174,90,0)}}

/* food image tile */
.food{background-size:cover;background-position:center;background-color:var(--honey-soft)}

/* leaflet courier markers */
.vz-courier{font-size:22px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));transition:transform .2s}
/* mahalle etiketi — noktanın üstünde ortalı tooltip (kenar kırpması yok) */
.leaflet-tooltip.vz-zonetip{background:rgba(20,19,15,.72);color:#fff;font-size:9px;font-weight:600;letter-spacing:.2px;
  padding:1.5px 7px;border-radius:20px;white-space:nowrap;border:1px solid rgba(255,196,0,.4);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.leaflet-tooltip.vz-zonetip::before{display:none}
.vz-rest{font-size:20px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.leaflet-container{background:#e9e4d6;font-family:var(--font)}

/* device frames (presentation) */
.frame-phone{width:380px;height:780px;background:#0c0c0c;border-radius:44px;padding:12px;box-shadow:0 30px 70px rgba(0,0,0,.4);position:relative}
.frame-phone .scr{width:100%;height:100%;border-radius:33px;overflow:hidden;background:#fff;position:relative}
.frame-laptop{width:100%;max-width:1100px;background:#0c0c0c;border-radius:18px 18px 0 0;padding:12px 12px 0;box-shadow:var(--shadow)}
.frame-laptop .scr{width:100%;height:640px;border-radius:8px;overflow:hidden;background:#fff}
.frame-laptop .base{height:16px;background:linear-gradient(#222,#111);border-radius:0 0 14px 14px;margin:0 -12px}

/* toast */
.vz-toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 22px;border-radius:30px;font-weight:600;font-size:14px;opacity:0;transition:.3s;z-index:9999;display:flex;gap:8px;align-items:center;box-shadow:var(--shadow)}
.vz-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* modeller.html light theme overrides */
body.light-theme {
  background: radial-gradient(circle at 50% -20%, #eff6ff 0%, #f8fafc 100%) !important;
  color: #334155 !important;
}
body.light-theme .top {
  border-bottom-color: #e2e8f0 !important;
}
body.light-theme .top .vz-brand b {
  color: #0f172a !important;
}
body.light-theme .top .t {
  color: #475569 !important;
}
body.light-theme model-viewer {
  background: radial-gradient(circle at 50% 38%,rgba(37,99,235,.05),transparent 60%),linear-gradient(#f8fafc,#eff6ff) !important;
}
body.light-theme .loader {
  background: #f8fafc !important;
}
body.light-theme .loader .bar {
  background: #e2e8f0 !important;
}
body.light-theme .loader .pct {
  color: #475569 !important;
}
body.light-theme .side {
  background: #ffffff !important;
  border-left-color: #e2e8f0 !important;
}
body.light-theme .glab {
  color: #64748b !important;
}
body.light-theme .gcard {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
body.light-theme .gcard:hover {
  border-color: #cbd5e1 !important;
}
body.light-theme .gcard.active {
  border-color: var(--honey) !important;
  background: #fffbeb !important;
}
body.light-theme .gcard .nm {
  color: #0f172a !important;
}
body.light-theme .gcard .sz {
  color: #64748b !important;
}
body.light-theme .gcard.active .nm {
  color: var(--honey) !important;
}
body.light-theme .info {
  border-top-color: #e2e8f0 !important;
}
body.light-theme .info h2 {
  color: #0f172a !important;
}
body.light-theme .desc {
  color: #475569 !important;
}
body.light-theme .specs {
  border: 1px solid #e2e8f0 !important;
}
body.light-theme .specs .r {
  background: #ffffff !important;
}
body.light-theme .specs .r span {
  color: #64748b !important;
}
body.light-theme .specs .r b {
  color: #0f172a !important;
}
body.light-theme .badge {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.06) !important;
  color: #475569 !important;
}
body.light-theme .hint {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}
body.light-theme .ctl button {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}
body.light-theme .ctl button:hover {
  background: var(--honey) !important;
  color: #ffffff !important;
}