/* Versi 8 September 2025 (rev: submenu spacing & link contrast) */

:root{
  --bg:#0f1220; --card:#171a2b; --muted:#a9b0c7; --text:#e6e9f5;
  --primary:#7c9cfb; --primary-2:#b17cfb;
  --success:#2eae72; --error:#e05959; --warning:#d3a53a;
  --edge-gap:clamp(10px,3vw,24px);
  --link:#ffd34d; /* link kuning kontras */
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,#0b0f1c,#13162b 30%,#0b0f1c);
  color:var(--text);
}

/* Container */
.container{max-width:1100px;margin:0 auto;padding-inline:clamp(16px,2.5vw,28px)}

/* Header */
.site-header{position:sticky;top:0;background:rgba(15,18,32,.7);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06);z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}

/* Brand (logo + teks sebagai link) */
.brand{--logo-size:40px;display:flex;align-items:center;gap:.75rem}
.brand-logo{inline-size:var(--logo-size);block-size:var(--logo-size);object-fit:contain;display:block}
@media (min-width:768px){ .brand{--logo-size:56px} }

/* Hilangkan underline & jaga aksesibilitas */
a.brand,
a.brand:link,
a.brand:visited,
a.brand:hover,
a.brand:active,
a.brand:focus{ text-decoration:none; color:inherit }
a.brand:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; border-radius:10px }

/* Teks brand */
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-title{
  color:var(--primary);
  font-weight:800; letter-spacing:.2px;
  position:relative; display:inline-block;
}
.brand-subtitle{display:block;color:var(--muted);font-size:12px;margin-top:2px}

/* Garis bawah animasi untuk judul brand (warna teks tidak berubah) */
a.brand .brand-title::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  opacity:0; transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease, opacity .25s ease;
}
a.brand:hover .brand-title::after,
a.brand:focus-visible .brand-title::after{ opacity:1; transform:scaleX(1) }

/* Nav */
.nav ul{display:flex;gap:18px;align-items:center;list-style:none;margin:0;padding:0}
.nav a.nav-link{position:relative;text-decoration:none;color:var(--text);padding:6px 8px;border-radius:10px;transition:transform .2s ease, box-shadow .2s ease}
.nav a.nav-link::after{content:"";position:absolute;left:8px;right:8px;bottom:2px;height:2px;background:linear-gradient(90deg,var(--primary),var(--primary-2));opacity:0;transform:scaleX(0);transform-origin:left;transition:transform .25s ease, opacity .25s}
.nav a.nav-link:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(124,156,251,.18)}
.nav a.nav-link:hover::after,
.nav a.nav-link.active::after{opacity:1;transform:scaleX(1)}

.has-sub{position:relative}

/* Dropdown gap agar underline link utama terlihat */
.nav{ --submenu-gap: 12px; } /* sebelumnya 10px */

/* Submenu panel */
.has-sub > .sub{
  position:absolute; display:none;
  top:calc(100% + var(--submenu-gap)); left:0; z-index:1;
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px; box-shadow:0 12px 30px rgba(0,0,0,.35);
  padding:12px 12px; min-width:240px;
  transform:translateY(-4px); opacity:0;
  transition:transform .18s ease, opacity .18s ease;
}
.has-sub:hover > .sub{ display:block; transform:translateY(0); opacity:1 }

/* Jembatan hover: cegah hover putus saat melewati celah */
.has-sub::before{
  content:""; position:absolute; left:0; right:0; top:100%;
  height:var(--submenu-gap);
}

/* Item submenu spacing */
.has-sub > .sub li + li{ margin-top:6px; }
.has-sub > .sub a.nav-link{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  line-height:1.25;
}
.has-sub > .sub a.nav-link::after{ left:12px; right:12px; bottom:6px; }
.has-sub > .sub a.nav-link:hover,
.has-sub > .sub a.nav-link:focus-visible{
  background:rgba(255,255,255,.06);
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.has-sub > .sub a.nav-link.active{
  background:rgba(124,156,251,.12);
}

/* Pastikan underline link tetap di atas dropdown */
.nav a.nav-link{ position:relative; z-index:2 }

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.12);padding:10px 14px;border-radius:12px;text-decoration:none;color:var(--text);cursor:pointer;transition:transform .2s ease, box-shadow .2s ease, background .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(124,156,251,.25)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));border:none;color:#0b0f1c;font-weight:700}
.btn-ghost{background:transparent}
.inline-form{display:inline}

/* User pill */
.userpill{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);padding:6px 10px;border-radius:999px}
.user-avatar{
  width:28px;height:28px;display:grid;place-items:center;border-radius:999px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#0b0f1c;font-weight:800;overflow:hidden
}
.user-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* Burger */
.hamburger{display:none;background:transparent;border:none;cursor:pointer;padding:8px;border-radius:10px}
.hamburger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:transform .2s ease, opacity .2s}

/* Hero */
.hero{padding:28px 0 10px}
.hero-card{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;padding:24px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.hero-content h1{margin:0 0 8px;font-size:clamp(24px,3.8vw,40px);letter-spacing:.2px}
.hero-content p{color:var(--muted);margin:0 0 14px}
.hero-visual{display:grid;place-items:center}
.hero-svg{width:100%;max-width:420px}

/* Hero visual pakai gambar */
.hero-media{
  width:100%;
  max-width:420px;
  aspect-ratio:4 / 3;
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(135deg,#8ec5fc,#e0c3fc);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
}
.hero-media > img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Grid berita */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:26px 0 48px}
@media (max-width:1024px){ .news-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .news-grid{grid-template-columns:1fr} }

/* Card */
.card{overflow:hidden;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:18px 18px 0 0;box-shadow:0 16px 40px rgba(0,0,0,.35);transform-style:preserve-3d;transition:transform .2s, box-shadow .2s}
.card:hover{transform:translateY(-4px) perspective(800px) rotateX(2deg) rotateY(-2deg);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.card-body{padding:14px 16px}
.card-meta{font-size:12px;color:var(--muted);margin-bottom:6px}
.card-title{margin:2px 0 8px}
.card-title a{color:var(--text);text-decoration:none}
.card-text{color:var(--muted)}
.badge-admin{border:1px solid rgba(255,255,255,.18);background:linear-gradient(135deg,#ffcf7c33,#ff7cb733);border-radius:10px}

/* Card media */
.card-media{
  position: relative;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
}
.card-media > img,
.card-media > svg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.card-media > img{ object-fit: cover; object-position: center; }

/* Potong teks .card-text maksimal 10 baris + ellipsis */
.card-text{
  --lines: 10;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines);
  line-clamp: var(--lines);
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Tabel (util tunggal, hindari duplikasi) */
.table{ width:100%; border-collapse:collapse }
.table thead th{ background:rgba(255,255,255,.06) }
.table th, .table td{ padding:10px; border-bottom:1px solid rgba(255,255,255,.06); text-align:left }
.muted { color: var(--muted) }

/* Link kuning global kecuali elemen navigasi/tombol/brand */
a:not(.nav-link):not(.btn):not(.brand){
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
a:visited:not(.nav-link):not(.btn):not(.brand){ color: var(--link); }
a:hover:not(.nav-link):not(.btn):not(.brand){ text-decoration: underline; }

/* Page blocks */
.page h2{margin-top:0}
.page-card{padding:16px 18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:18px;box-shadow:0 16px 40px rgba(0,0,0,.35)}

/* Footer & content */
.site-footer{border-top:1px solid rgba(255,255,255,.06);padding:24px 0;color:var(--muted)}
.content{padding:16px 0 40px}

/* Tilt */
.tilt{will-change:transform;transition:transform .2s ease, box-shadow .2s ease}

/* Toast */
.toast{position:fixed;right:16px;bottom:16px;background:rgba(23,26,43,.98);border:1px solid rgba(255,255,255,.1);border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.5);padding:10px 12px;min-width:260px;z-index:1000}
.toast .toast-body{display:flex;gap:10px;align-items:center}
.toast .toast-title{font-weight:800}
.toast .toast-message{color:var(--text)}
.toast-close{background:transparent;border:none;color:var(--text);font-size:20px;line-height:1;padding:0 4px;margin-left:auto;cursor:pointer}
.toast-success{border-left:6px solid var(--success)}
.toast-error{border-left:6px solid var(--error)}
.toast-warning{border-left:6px solid var(--warning)}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);display:grid;place-items:center;z-index:1000}
.modal-card{width:min(520px,92vw);background:var(--card);border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden}
.modal-header{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.modal-success{background:linear-gradient(135deg,#1b8c5a33,transparent)}
.modal-error{background:linear-gradient(135deg,#ad3c3c33,transparent)}
.modal-warning{background:linear-gradient(135deg,#b9862333,transparent)}
.modal-body{padding:16px}
.modal-footer{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:flex-end}

/* ======= Responsif ======= */
@media (max-width:860px){
  .hero-card{grid-template-columns:1fr}
  .hamburger{display:block}
  .nav{
    position:fixed;
    top:calc(64px + env(safe-area-inset-top));
    left:calc(var(--edge-gap) + env(safe-area-inset-left));
    right:calc(var(--edge-gap) + env(safe-area-inset-right));
    background:rgba(23,26,43,.98);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:14px; display:none; z-index:60;
  }
  .nav.open{display:block}
  .nav ul{flex-direction:column;align-items:stretch}
  .has-sub > .sub{
    position:static; display:block; background:transparent; border:none; box-shadow:none;
    padding:0; margin-left:12px; transform:none; opacity:1;
  }
}

/* Gutter tepi layar & safe-area (hingga layar sedang) */
@media (max-width:1200px){
  body{
    padding:
      calc(env(safe-area-inset-top)    + var(--edge-gap))
      calc(env(safe-area-inset-right)  + var(--edge-gap))
      calc(env(safe-area-inset-bottom) + var(--edge-gap))
      calc(env(safe-area-inset-left)   + var(--edge-gap));
  }
  .site-header,.site-footer,.hero-card,.page-card,.news-grid .card{border-radius:14px}
}

/* ===== Grid util ===== */

/* /jadwal/guru/{kode} – grid hari: 1/2/3 kolom */
.days-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
@media (min-width: 700px){ .days-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .days-grid{ grid-template-columns: repeat(3, 1fr); } }

/* /jadwal/kelas/{slug} – grid hari: 1/2 kolom */
.days-grid-kelas{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
@media (min-width: 1024px){ .days-grid-kelas{ grid-template-columns: repeat(2, 1fr); } }

/* /jadwal/guru – daftar guru 1/2/3 kolom */
.guru-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
@media (min-width: 700px){ .guru-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .guru-grid{ grid-template-columns: repeat(3, 1fr); } }
.guru-grid .page-card{ margin:0; padding:12px 14px; }
.guru-grid .page-card a{ display:block; }

/* /jadwal/kelas – grid & card daftar kelas */
.kelas-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  list-style:none; margin:12px 0 0; padding:0;
}
@media (min-width: 700px){ .kelas-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px){ .kelas-grid{ grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1280px){ .kelas-grid{ grid-template-columns: repeat(4,1fr); } }

.kelas-card{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  color:var(--text) !important;
  text-decoration:none !important;
}
.kelas-card:hover{ transform:translateY(-2px); box-shadow:0 24px 60px rgba(0,0,0,.5); border-color:rgba(255,255,255,.12); }
.kelas-icon{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#0b0f1c; font-weight:800;
}
.kelas-icon i{ font-size:18px; }
.kelas-name{ font-size:1.05rem; font-weight:800; letter-spacing:.2px; }
.kelas-card:hover .kelas-name{ text-decoration:underline; text-underline-offset:3px; }
.kelas-url{ color:var(--muted); font-size:.85rem; }
.kelas-search{
  display:flex; gap:8px; align-items:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px; padding:8px 10px; margin-top:8px;
}
.kelas-search input{ flex:1; background:transparent; border:none; outline:none; color:var(--text); }

/* ===== Wali Kelas: grid 1/2 kolom + spasi nyaman ===== */
.wali-grid{
  display:grid;
  grid-template-columns: 1fr;   /* default: 1 kolom (tablet/HP) */
  gap:16px;                      /* jarak antar kartu (baris 1 & 2 tidak rapat) */
}
@media (min-width:1024px){
  .wali-grid{ grid-template-columns: repeat(2, 1fr); } /* layar lebar: 2 kolom */
}

/* Judul kecil dalam kartu */
.wali-title{
  margin:0 0 8px;
  font-weight:600;
}

/* Daftar lebih rapi dan lega */
.wali-list{
  margin:0;                      /* hilangkan margin default ul */
  padding-left: 1.1rem;          /* jarak bullet ke teks */
  list-style: disc;
}
.wali-list li{
  margin:6px 0;                  /* spasi antar baris */
  line-height:1.4;               /* nafas teks */
}

/* /jadwal – grid kartu menu: 1 kolom (hp), 2 kolom (tablet), 4 kolom (laptop) */
.menu-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  list-style:none;
  margin:12px 0 0;
  padding:0;
}
@media (min-width:700px){ .menu-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){ .menu-grid{ grid-template-columns: repeat(4,1fr); } }

/* Spasi antara judul (page-card) dan blok berikutnya */
.page > .page-card{
  margin-bottom: 16px;           /* default */
}
@media (min-width: 1024px){
  .page > .page-card{ margin-bottom: 20px; }  /* layar lebar */
}

/* (opsional) kalau ingin lebih spesifik hanya utk halaman jadwal */
.page > .page-card + .days-grid-kelas{ margin-top: 0.01px; } /* pastikan collapse margin tidak terjadi */

.judul-murid {
    margin-top: 2em;
}

.daftar-murid {
    padding: 0;
    margin: 0 0 2em 3em;
    list-style-type: numbered;
    column-count: 1;  /* Default 1 kolom untuk layar sempit */
    column-gap: 20px;  /* Jarak antar kolom */
}

/* Untuk layar dengan lebar minimal 600px, ubah ke 2 kolom */
@media (min-width: 600px) {
    .daftar-murid {
        column-count: 2;
        /* column-rule: 1px solid #0000e0;  /* Menambahkan garis vertikal */
    }
}

/* Opsional: Menambahkan margin di antara item daftar */
.daftar-murid li {
    margin-bottom: 10px;
    break-inside: avoid;  /* Mencegah item terpotong antar kolom */
    page-break-inside: avoid;
    padding: 5px 0;
}

/* Badge jumlah di kolom kanan */
.badge-count{
  display:inline-grid; place-items:center;
  min-width:56px; padding:8px 10px;
  border-radius:12px;
  background:rgba(124,156,251,.12);
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none; color:var(--text);
  font-weight:800;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.badge-count:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(124,156,251,.25);
  border-color:rgba(255,255,255,.20);
}