/* ===== Termin Online — Premium DARK theme (mobile-first, professional) ===== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');

:root{
  --bg:#0a0e17;
  --bg-2:#0d121e;
  --card:#141a28;
  --card-2:#1b2233;
  --card-3:#232c40;
  --text:#f1f5f9;
  --muted:#9aa6be;
  --muted-2:#6b7894;
  --border:rgba(255,255,255,.07);
  --border-2:rgba(255,255,255,.12);
  --primary:#6366f1;
  --primary-2:#818cf8;
  --primary-d:#4f46e5;
  --radius:18px;
  --radius-sm:13px;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -24px rgba(0,0,0,.8);
  --glow:0 16px 50px -20px rgba(99,102,241,.55);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif !important;
  color:var(--text) !important;
  background:
    radial-gradient(900px 460px at 88% -10%, rgba(99,102,241,.14), transparent 60%),
    var(--bg) !important;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.011em;
}
h1,h2,h3,.font-black,.font-bold{font-family:'Sora',sans-serif;letter-spacing:-.02em;color:var(--text)}
h1{color:#fff !important}
::selection{background:var(--primary);color:#fff}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#262f44;border-radius:99px;border:2px solid var(--bg)}

/* ---------- Text colors ---------- */
.text-white{color:var(--text) !important}
.text-gray-300{color:#cbd5e7 !important}
.text-gray-400{color:var(--muted) !important}
.text-gray-500{color:var(--muted-2) !important}
.text-gray-600{color:#566179 !important}
.text-gray-700{color:#475066 !important}

/* ---------- Surfaces ---------- */
.bg-gray-950{background:transparent !important}
main .bg-gray-900, footer.bg-gray-900{
  background:linear-gradient(180deg,var(--card),#11161f) !important;
  border-color:var(--border) !important;
  box-shadow:var(--shadow);
}
main .bg-gray-800{background:var(--card-2) !important}
main .bg-gray-700{background:var(--card-3) !important}
main .border-gray-800{border-color:var(--border) !important}
main .border-gray-700{border-color:var(--border-2) !important}
main .divide-gray-800 > * + *{border-color:var(--border) !important}

/* Uniform, calmer card geometry */
main .rounded-3xl{border-radius:var(--radius) !important}
main .rounded-2xl{border-radius:var(--radius) !important}
main .rounded-xl{border-radius:var(--radius-sm) !important}
main a.bg-gray-900{transition:transform .16s ease, box-shadow .25s ease, border-color .2s ease}
main a.bg-gray-900:hover{transform:translateY(-2px);border-color:rgba(99,102,241,.5) !important;box-shadow:var(--glow)}

/* ---------- Top navigation ---------- */
nav.sticky{
  background:rgba(10,14,23,.72) !important;
  backdrop-filter:saturate(150%) blur(14px);
  border-color:var(--border) !important;
}
nav.sticky a.text-xl{color:#fff !important}
nav.sticky .bg-gray-800{background:#1a2233 !important;color:var(--muted) !important}
nav.sticky .bg-blue-600{background:linear-gradient(135deg,var(--primary-2),var(--primary)) !important;color:#fff !important}

/* ---------- Hero ---------- */
main .bg-gradient-to-b.to-gray-950{
  background:
    radial-gradient(600px 300px at 50% -40%, rgba(99,102,241,.28), transparent 70%),
    linear-gradient(180deg,#0c111c,#0a0e17) !important;
  background-color:#0c111c !important;
  border-bottom:1px solid var(--border);
}
main .bg-gradient-to-b.to-gray-950 h1{color:#fff !important}
main .bg-gradient-to-b.to-gray-950 p{color:#aeb8ce !important}

/* ---------- Inputs ---------- */
main input, main select, main textarea{
  background:#0f1521 !important;
  border:1px solid var(--border-2) !important;
  border-radius:13px !important;
  color:var(--text) !important;
  transition:border-color .15s, box-shadow .15s;
}
main input::placeholder, main textarea::placeholder{color:color:#5b6680 !important}
main input:focus, main select:focus, main textarea:focus{
  outline:none !important;border-color:var(--primary) !important;
  box-shadow:0 0 0 4px rgba(99,102,241,.18) !important;
}

/* ---------- Buttons ---------- */
[class*="bg-blue-"],[class*="bg-indigo-"],[class*="bg-green-"],[class*="bg-emerald-"],
[class*="bg-red-"],[class*="bg-pink-"],[class*="bg-orange-"],[class*="bg-amber-"]{color:#fff}
button, a[class*="bg-"]{transition:transform .12s ease, filter .15s ease, box-shadow .2s ease}
button:active{transform:translateY(1px)}
main .bg-blue-600, main .bg-blue-500{
  background:linear-gradient(135deg,var(--primary-2),var(--primary-d)) !important;
  box-shadow:0 12px 26px -12px rgba(99,102,241,.7) !important;
}
main .bg-blue-600:hover, main .bg-blue-500:hover{filter:brightness(1.08)}
main .bg-green-600, main .bg-green-500{background:linear-gradient(135deg,#10b981,#059669) !important}
main .bg-pink-600{background:linear-gradient(135deg,#ec4899,#db2777) !important}

/* ---------- Booking slots (premium, readable on dark) ---------- */
main [class*="bg-green-700"]{background:linear-gradient(135deg,#10b981,#0d9488) !important;border-color:#10b981 !important;color:#fff !important}
main button.bg-blue-600[data-time], main [class*="bg-blue-600"][data-status]{background:linear-gradient(135deg,var(--primary-2),var(--primary-d)) !important;border-color:var(--primary) !important}
main [class*="bg-red-800"]{background:rgba(239,68,68,.16) !important;border-color:rgba(239,68,68,.4) !important;color:#fca5a5 !important}
main [class*="bg-orange-600"]{background:rgba(245,158,11,.16) !important;border-color:rgba(245,158,11,.4) !important;color:#fcd34d !important}
main button[data-status='past']{background:#0f1521 !important;color:#4a5571 !important;border-color:var(--border) !important}

/* legend swatches */
main .bg-green-600{background:#10b981 !important}
main .bg-orange-500{background:#f59e0b !important}
main .bg-red-700{background:#ef4444 !important}

/* tables */
main thead tr{background:var(--card-2) !important}
main table{color:var(--text)}

/* footer */
footer.bg-gray-900{background:var(--bg-2) !important;border-color:var(--border) !important;box-shadow:none;border-top:1px solid var(--border)}
footer .text-gray-500{color:var(--muted-2) !important}

/* ---------- Uniform category tiles ---------- */
main a[href^="/kategoria/"]{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:138px;gap:.35rem;
  background:linear-gradient(180deg,var(--card),#11161f) !important;
}
main a[href^="/kategoria/"] .text-4xl{
  width:58px;height:58px;display:flex;align-items:center;justify-content:center;
  margin:0 auto;border-radius:16px;font-size:29px;
  background:rgba(99,102,241,.14);border:1px solid rgba(99,102,241,.22);
}
main a[href^="/kategoria/"] img{border-radius:14px}

main .hover\:border-blue-500:hover{border-color:var(--primary) !important;box-shadow:var(--glow)}
main .hover\:border-pink-500:hover{border-color:#ec4899 !important}

/* company card cover fallback */
main .h-32.bg-gray-800{background:linear-gradient(135deg,#161d2c,#0c111c) !important;background-color:#161d2c !important}

/* ===== Mobile bottom navigation (dark glass) ===== */
.mnav{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:rgba(13,18,30,.9);
  backdrop-filter:saturate(160%) blur(16px);
  border-top:1px solid var(--border);
  box-shadow:0 -10px 28px -18px rgba(0,0,0,.8);
  padding:7px 12px calc(7px + env(safe-area-inset-bottom));
}
.mnav-grid{max-width:480px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mnav a{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 4px;border-radius:13px;color:var(--muted-2);
  font-size:11px;font-weight:700;text-decoration:none;transition:color .15s, background .15s;
}
.mnav a svg{width:22px;height:22px;stroke-width:2;fill:none;stroke:currentColor}
.mnav a.active{color:#fff;background:rgba(99,102,241,.18)}
.mnav a.active svg{stroke:var(--primary-2)}

@media (max-width:767px){
  .mnav{display:block}
  body{padding-bottom:76px}
  main .p-6{padding:1.1rem !important}
  main .max-w-6xl, main .max-w-3xl{padding-left:1rem !important;padding-right:1rem !important}
  h1{font-size:1.6rem !important;line-height:1.18}
  main .py-16{padding-top:2.6rem !important;padding-bottom:2.6rem !important}
  main .text-4xl.md\:text-5xl{font-size:1.7rem !important}
}

/* page reveal */
main > *{animation:fadeup .45s ease both}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}