/* ============================================================
   SMKBISA / SMKNUM — Sistem Desain RUANG GURU (Rumah Pendidikan Kemendikdasmen)
   - Palet Warna Resmi Ruang Guru: Biru Royal (#0b57d0 / #1d4ed8), Navy Kemendikdasmen (#1e3a8a), Sky (#0284c7), Emas Tut Wuri (#f59e0b)
   - Permukaan bersih (#f8fafc), kartu putih (#ffffff) dengan border lembut (#e2e8f0) & sudut membulat (16px)
   - Mendukung penuh Widget Aksesibilitas Rumah Pendidikan (Kontras Tinggi, Mode Gelap, Ukuran Teks, Font Ramah Disleksia)
   ============================================================ */
:root {
  --gtk-blue: #0b57d0;
  --gtk-blue-dark: #1e3a8a;
  --gtk-blue-hover: #1d4ed8;
  --gtk-blue-soft: #e8f0fe;
  --gtk-sky: #0284c7;
  --gtk-sky-soft: #e0f2fe;
  --gtk-gold: #f59e0b;
  --gtk-gold-soft: #fef3c7;
  --gtk-bg: #f8fafc;
  --gtk-card: #ffffff;
  --gtk-border: #e2e8f0;
  --gtk-text: #1e293b;
  --gtk-heading: #0f172a;
  --gtk-muted: #64748b;

  /* Pemetaan variabel lama ke tema Ruang Guru */
  --smk-teal: #0b57d0;
  --smk-teal-soft: #e8f0fe;
  --smk-cyan: #0284c7;
  --smk-cyan-soft: #e0f2fe;
  --smk-blue: #1d4ed8;
  --smk-blue-soft: #eff6ff;
  --smk-green: #0b57d0;
  --smk-green-soft: #e8f0fe;
  --smk-bg: #f8fafc;
  --smk-card: #ffffff;
  --smk-border: #e2e8f0;
  --smk-text: #1e293b;
  --smk-heading: #0f172a;
  --smk-muted: #64748b;

  --green: #0b57d0;
  --green2: #e8f0fe;
  --teal: #0b57d0;
  --cyan: #0284c7;
  --navy: #1e3a8a;
  --primary: #0b57d0;
  --primary-dark: #1e3a8a;
  --primary-soft: #e8f0fe;
  --brand-teal: #0b57d0;
  --brand-green: #0b57d0;
  --brand-cyan: #0284c7;
  --brand-blue: #1d4ed8;
}

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 400;
  line-height: 1.58;
  color: var(--gtk-text);
  background-color: var(--gtk-bg) !important;
  background-image: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Widget Aksesibilitas Rumah Pendidikan */
html.gtk-text-lg { font-size: 112.5% !important; }
html.gtk-text-xl { font-size: 125% !important; }
body.gtk-font-dyslexic,
body.gtk-font-dyslexic * {
  font-family: 'Comic Sans MS', 'Trebuchet MS', 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: 0.035em !important;
  word-spacing: 0.08em !important;
  line-height: 1.75 !important;
}
body.gtk-contrast-high {
  filter: contrast(1.28) saturate(1.1);
}
body.gtk-contrast-dark {
  background-color: #0f172a !important;
  color: #f1f5f9 !important;
}
body.gtk-contrast-dark .card,
body.gtk-contrast-dark .soft-card,
body.gtk-contrast-dark .teacher-panel,
body.gtk-contrast-dark .dashboard-summary,
body.gtk-contrast-dark .gtk-card,
body.gtk-contrast-dark .section,
body.gtk-contrast-dark header.unified-teacher-topbar,
body.gtk-contrast-dark aside.unified-teacher-sidebar,
body.gtk-contrast-dark nav.teacher-digital-tabs {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
body.gtk-contrast-dark h1,
body.gtk-contrast-dark h2,
body.gtk-contrast-dark h3,
body.gtk-contrast-dark h4,
body.gtk-contrast-dark b,
body.gtk-contrast-dark strong {
  color: #ffffff !important;
}

/* Matikan elemen dekoratif lama */
.floating-orb,
.aurora::before,
.aurora::after,
.summary-card::before,
.summary-card::after,
.summary-stat::before,
.summary-stat::after,
.quick-card::before,
.nav-link::after {
  display: none !important;
}

/* Tipografi bersih ala Ruang Guru */
.font-black,
.font-extrabold {
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}
.font-bold {
  font-weight: 600 !important;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 600 !important;
  letter-spacing: -0.015em;
}
b, strong {
  font-weight: 600;
}

/* Harmonisasi otomatis kelas warna lama (Teal/Emerald) menjadi Biru Ruang Guru */
header[class*="from-emerald-"],
header[class*="from-teal-"],
header[class*="from-slate-9"],
header[class*="from-sky-8"],
.hero-box,
.hero,
.top {
  background: linear-gradient(135deg, #1e3a8a 0%, #0b57d0 58%, #0284c7 100%) !important;
  color: #ffffff !important;
}

button[class*="bg-teal-"],
button[class*="bg-emerald-"],
button[class*="from-emerald-"],
a[class*="bg-teal-6"],
a[class*="bg-teal-7"],
a[class*="bg-emerald-6"],
a[class*="bg-emerald-7"],
.btn-primary,
.btn.primary {
  background: #0b57d0 !important;
  border-color: #0b57d0 !important;
  color: #ffffff !important;
}
button[class*="bg-teal-"]:hover,
button[class*="bg-emerald-"]:hover,
a[class*="bg-teal-6"]:hover,
a[class*="bg-teal-7"]:hover,
.btn-primary:hover,
.btn.primary:hover {
  background: #1e3a8a !important;
}

/* Kartu & Panel Ruang Guru */
.card,
.soft-card,
.premium-card,
.teacher-panel,
.dashboard-summary,
.quick-tile,
.dashboard-card,
.menu-card,
.gtk-card,
section[class*="rounded-3xl"],
article[class*="rounded-3xl"],
div[class*="rounded-3xl"] {
  border-color: var(--gtk-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
  backdrop-filter: none !important;
}

.soft-card:hover,
.quick-tile:hover,
.dashboard-card:hover,
.menu-card:hover,
.gtk-card:hover {
  border-color: #93c5fd !important;
  box-shadow: 0 10px 24px rgba(11, 87, 208, 0.08) !important;
}

/* Komponen Khas Ruang Guru */
.gtk-hero-banner {
  background: linear-gradient(135deg, #1e3a8a 0%, #0b57d0 55%, #0284c7 100%);
  color: #ffffff;
  border-radius: 20px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(11, 87, 208, 0.16);
}
.gtk-hero-banner::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.gtk-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.gtk-section-header h2 {
  font-size: 1.08rem !important;
  font-weight: 600 !important;
  color: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gtk-section-header p {
  font-size: 0.78rem;
  color: #64748b;
  margin: 3px 0 0;
}
.gtk-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}
.gtk-service-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  text-decoration: none !important;
  color: #1e293b !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}
.gtk-service-card:hover {
  transform: translateY(-2px);
  border-color: #93c5fd;
  box-shadow: 0 10px 24px rgba(11, 87, 208, 0.09);
}
.gtk-icon-box {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
}
.gtk-icon-blue { background: #e8f0fe; color: #0b57d0; }
.gtk-icon-sky { background: #e0f2fe; color: #0284c7; }
.gtk-icon-indigo { background: #eef2ff; color: #4f46e5; }
.gtk-icon-amber { background: #fef3c7; color: #d97706; }
.gtk-icon-emerald { background: #dcfce7; color: #059669; }
.gtk-icon-rose { background: #ffe4e6; color: #e11d48; }
.gtk-icon-purple { background: #f3e8ff; color: #7e22ce; }

.gtk-service-body {
  min-width: 0;
  flex: 1;
}
.gtk-service-body b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
}
.gtk-service-body span {
  display: block;
  font-size: 0.76rem;
  color: #64748b;
  margin-top: 4px;
  line-height: 1.45;
}
.gtk-service-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  background: #e8f0fe;
  color: #0b57d0;
  margin-top: 6px;
}

/* Harmonisasi jadwal mapel */
.mapel-row {
  background: #ffffff !important;
  border-left: 4px solid var(--mapel-accent, #0b57d0) !important;
}
.mapel-row:hover {
  background: #eff6ff !important;
}
.mapel-schedule,
.schedule-highlight {
  background: #f8fafc !important;
  border: 1px solid #dbeafe !important;
  border-left: 4px solid var(--mapel-accent, #0b57d0) !important;
}
.mapel-badge {
  background: var(--mapel-soft, #e8f0fe) !important;
  color: var(--mapel-text, #0b57d0) !important;
  border: 1px solid var(--mapel-border, #bfdbfe) !important;
  font-weight: 500 !important;
}

/* Input & kontrol form */
a, button, input, select, textarea {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}
button:active, a:active { transform: scale(0.99); }
:focus-visible { outline: 3px solid rgba(11, 87, 208, 0.24); outline-offset: 2px; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 42px; }
main { isolation: isolate; }
table { border-collapse: separate; border-spacing: 0; }
thead { position: relative; }
img { max-width: 100%; }

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 640px) {
  body { overscroll-behavior-y: none; }
  main { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .soft-card, .quick-tile, .dashboard-card, .menu-card, .gtk-service-card { border-radius: 1rem !important; }
  button, a { touch-action: manipulation; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}


/* ============================================================
   Mode Ringkas Ruang Guru: Sembunyikan Keterangan Berlebih
   ============================================================ */
.gtk-service-body span,
.gtk-service-badge,
.gtk-section-header p,
.site-section-title p,
.flow-title p,
.site-course-details > p,
.rumah-pillar-card p,
.hero-box p,
.hero p,
.top p,
.section-head p,
.page-bar p,
.auth-showcase-copy p,
.auth-muted,
.login-guide,
.auth-note,
.belajarid-badge,
.pillar-grid,
.structure-guide,
.context-box,
.review-box p,
.help,
.hint {
  display: none !important;
}