/* =========================================================================
   BEL SEKOLAH — Tema "Kaca Kristal Biru"
   Premium Glassmorphism + Soft Neumorphism
   Madrasah Aliyah Bahrul Ulum
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  /* --- Palet warna kristal biru --- */
  --deep-1: #030c1a;
  --deep-2: #071a34;
  --deep-3: #0d2b52;
  --deep-4: #123a68;
  --crystal: #38bdf8;
  --crystal-light: #7dd3fc;
  --crystal-pale: #bfe7ff;
  --ice: #eaf6ff;
  --glow: #60a5fa;

  /* --- Kaca (glass) --- */
  --glass-bg: rgba(255,255,255,0.07);
  --glass-bg-strong: rgba(255,255,255,0.12);
  --glass-border: rgba(210,235,255,0.28);
  --glass-highlight: rgba(255,255,255,0.45);
  --glass-blur: 22px;

  /* --- Bayangan --- */
  --shadow-dark: rgba(1,6,16,0.65);
  --shadow-soft: rgba(1,6,16,0.35);
  --shadow-light: rgba(120,180,255,0.14);

  /* --- Teks --- */
  --text-primary: #eef7ff;
  --text-secondary: #9fc4e8;
  --text-muted: #6c93bd;

  /* --- Radius --- */
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 12px;

  --font-display: 'Poppins', 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Space Grotesk', monospace;
}

*{ box-sizing: border-box; margin:0; padding:0; }

html{ scroll-behavior: smooth; }

body{
  min-height:100vh;
  font-family: var(--font-body);
  color: var(--text-primary);
  background:
    radial-gradient(circle at 12% 8%, rgba(56,189,248,0.20), transparent 42%),
    radial-gradient(circle at 88% 15%, rgba(96,165,250,0.16), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(29,78,216,0.22), transparent 55%),
    linear-gradient(160deg, var(--deep-1) 0%, var(--deep-2) 40%, var(--deep-3) 72%, var(--deep-4) 100%);
  background-attachment: fixed;
  position: relative;
  overflow-x:hidden;
}

/* Partikel kristal mengambang di latar */
body::before{
  content:"";
  position: fixed; inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 15% 22%, rgba(190,230,255,0.55), transparent),
    radial-gradient(2px 2px at 78% 65%, rgba(190,230,255,0.4), transparent),
    radial-gradient(3px 3px at 40% 80%, rgba(190,230,255,0.35), transparent),
    radial-gradient(1.5px 1.5px at 60% 12%, rgba(190,230,255,0.5), transparent),
    radial-gradient(2px 2px at 92% 40%, rgba(190,230,255,0.3), transparent);
  background-repeat: repeat;
  animation: floaty 18s ease-in-out infinite alternate;
  z-index:0;
}
@keyframes floaty{
  0%{ transform: translateY(0px); }
  100%{ transform: translateY(-24px); }
}

a{ color: inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family: inherit; cursor:pointer; }
input, select, textarea{ font-family: inherit; }

/* ===================== LAYOUT WRAPPER ===================== */
.page{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding: 0 28px;
}

/* ===================== GLASS CARD (inti glassmorphism) ===================== */
.glass{
  background: linear-gradient(155deg, var(--glass-bg-strong), var(--glass-bg));
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow:
    0 18px 40px -12px var(--shadow-dark),
    inset 0 1px 0 var(--glass-highlight),
    inset 0 0 40px rgba(120,190,255,0.03);
  position: relative;
}
.glass::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background: linear-gradient(140deg, rgba(255,255,255,0.5), transparent 30%, transparent 70%, rgba(120,190,255,0.25));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

/* ===================== NEUMORPHIC (tombol lembut) ===================== */
.neu-btn{
  background: linear-gradient(145deg, #103055, #0a2748);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  box-shadow:
    6px 6px 14px var(--shadow-dark),
    -6px -6px 14px rgba(90,150,220,0.10);
  color: var(--ice);
  padding: 13px 26px;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing:.2px;
  transition: all .18s ease;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.neu-btn:hover{
  box-shadow:
    8px 8px 18px var(--shadow-dark),
    -8px -8px 18px rgba(90,150,220,0.16);
  transform: translateY(-1px);
  color: var(--crystal-light);
}
.neu-btn:active{
  box-shadow: inset 4px 4px 10px var(--shadow-dark), inset -4px -4px 10px rgba(90,150,220,0.08);
  transform: translateY(0);
}
.neu-btn.primary{
  background: linear-gradient(145deg, #1e63d6, #1550ac);
  box-shadow: 6px 6px 16px rgba(6,20,45,0.55), -4px -4px 12px rgba(110,170,255,0.18);
  color: #fff;
}
.neu-btn.primary:hover{ box-shadow: 8px 8px 20px rgba(6,20,45,0.6), -6px -6px 16px rgba(110,170,255,0.25); }
.neu-btn.danger{ background: linear-gradient(145deg, #b8323f, #8f1f2b); color:#fff; }
.neu-btn.small{ padding: 8px 16px; font-size:13px; border-radius: var(--r-sm); }
.neu-btn.block{ width:100%; }
.neu-btn:disabled{ opacity:.45; cursor:not-allowed; }

/* Ikon-only neumorphic (aksi tabel) */
.neu-icon{
  width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px;
  background: linear-gradient(145deg, #103055, #0a2748);
  box-shadow: 4px 4px 10px var(--shadow-dark), -4px -4px 10px rgba(90,150,220,0.10);
  border:1px solid rgba(255,255,255,0.06);
  color: var(--crystal-light);
  transition: all .15s ease;
}
.neu-icon:hover{ color:#fff; transform: translateY(-1px); }
.neu-icon.danger:hover{ color:#ff9aa5; }

/* ===================== NAVBAR ===================== */
.navbar{
  position: sticky; top:0; z-index:50;
  margin: 18px auto 0;
  max-width: 1240px;
  padding: 14px 26px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:12px; font-family: var(--font-display); }
.brand-badge{
  width:44px; height:44px; border-radius:14px;
  background: radial-gradient(circle at 30% 25%, var(--crystal-light), var(--crystal) 55%, #1550ac 100%);
  box-shadow: 0 6px 18px rgba(56,189,248,0.45), inset 0 2px 4px rgba(255,255,255,0.5);
  display:flex; align-items:center; justify-content:center;
  color:#04213f;
  overflow:hidden;
  flex-shrink:0;
}
.brand-badge img{ width:100%; height:100%; object-fit:contain; padding:4px; }
.brand-name{ font-weight:700; font-size:16px; letter-spacing:.2px; line-height:1.25; }
.brand-sub{ font-size:11px; color:var(--text-secondary); letter-spacing:.4px; text-transform:uppercase; }

.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  padding:10px 16px; border-radius: var(--r-sm);
  font-size:14px; font-weight:500; color: var(--text-secondary);
  transition: all .15s ease;
}
.nav-links a:hover, .nav-links a.active{
  color:#fff;
  background: var(--glass-bg-strong);
  box-shadow: inset 0 0 0 1px var(--glass-border);
}

/* ===================== HERO / JAM KRISTAL (elemen signature) ===================== */
.clock-hero{
  padding: 54px 46px;
  text-align:center;
  overflow:hidden;
  position:relative;
}
.school-tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px; border-radius:20px;
  background: rgba(56,189,248,0.10);
  box-shadow: inset 0 0 0 1px rgba(125,211,252,0.3);
  color: var(--crystal-light);
  font-size:12.5px; font-weight:600; letter-spacing:.3px;
  margin-bottom:28px;
}
.orb-wrap{
  position:relative;
  width:190px; height:190px;
  margin: 0 auto 22px;
  display:flex; align-items:center; justify-content:center;
}
.orb-ring{
  position:absolute; inset:0;
  border-radius:50%;
  border:1.5px solid rgba(125,211,252,0.35);
}
.orb-ring.r2{ inset:14px; border-color: rgba(125,211,252,0.22); }
.orb-ring.pulse{
  animation: ring-pulse 2.6s ease-out infinite;
}
@keyframes ring-pulse{
  0%{ transform:scale(0.86); opacity:.9; }
  100%{ transform:scale(1.35); opacity:0; }
}
.orb-core{
  width:128px; height:128px; border-radius:50%;
  background: radial-gradient(circle at 32% 28%, #bfe7ff, var(--crystal) 45%, #0e4c8a 100%);
  box-shadow:
    0 0 40px rgba(56,189,248,0.55),
    inset 0 4px 10px rgba(255,255,255,0.55),
    inset 0 -10px 22px rgba(4,20,40,0.45);
  display:flex; align-items:center; justify-content:center;
  color:#052540;
}
.orb-core.ringing{ animation: bell-shake .5s ease-in-out infinite; }
@keyframes bell-shake{
  0%,100%{ transform: rotate(0deg); }
  25%{ transform: rotate(-8deg); }
  75%{ transform: rotate(8deg); }
}

.clock-time{
  font-family: var(--font-mono);
  font-size: clamp(46px, 8vw, 78px);
  font-weight:600;
  letter-spacing: 2px;
  color: var(--ice);
  text-shadow: 0 0 30px rgba(56,189,248,0.55), 0 0 4px rgba(255,255,255,0.4);
  line-height:1;
}
.clock-date{
  margin-top:10px;
  color: var(--text-secondary);
  font-size:15px;
  letter-spacing:.4px;
}
.next-bell{
  margin-top: 28px;
  display:inline-flex; align-items:center; gap:14px;
  padding: 14px 26px;
}
.next-bell .label{ font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); }
.next-bell .name{ font-family:var(--font-display); font-weight:600; font-size:16px; color:#fff; }
.next-bell .countdown{ font-family:var(--font-mono); font-size:20px; color:var(--crystal-light); font-weight:600; }

/* ===================== GRID & STAT CARDS ===================== */
.grid{ display:grid; gap:22px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }

.stat-card{
  padding:24px 26px;
  display:flex; flex-direction:column; gap:10px;
}
.stat-card .icon-wrap{
  width:46px; height:46px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(145deg, rgba(56,189,248,0.25), rgba(21,80,172,0.25));
  color: var(--crystal-light);
  box-shadow: inset 0 0 0 1px rgba(125,211,252,0.25);
}
.stat-card .value{ font-family: var(--font-display); font-size:30px; font-weight:700; color:#fff; }
.stat-card .label{ font-size:13px; color: var(--text-secondary); }

/* ===================== SECTION TITLE ===================== */
.section-title{
  display:flex; align-items:center; justify-content:space-between;
  margin: 40px 0 18px;
}
.section-title h2{
  font-family: var(--font-display);
  font-size:21px; font-weight:600; color:#fff;
  display:flex; align-items:center; gap:10px;
}
.section-title .eyebrow{
  font-size:11.5px; letter-spacing:1.6px; text-transform:uppercase;
  color: var(--crystal-light); font-weight:600;
  display:block; margin-bottom:4px;
}

/* ===================== JADWAL CARD LIST (index publik) ===================== */
.jadwal-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(255px,1fr)); gap:18px; }
.jadwal-card{
  padding:20px 22px;
  display:flex; flex-direction:column; gap:10px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.jadwal-card:hover{ transform: translateY(-4px); }
.jadwal-card.active-now{
  border-color: rgba(125,211,252,0.65);
  box-shadow: 0 0 0 1px rgba(125,211,252,0.4), 0 18px 40px -12px var(--shadow-dark), 0 0 30px rgba(56,189,248,0.35);
}
.jadwal-top{ display:flex; align-items:center; justify-content:space-between; }
.jadwal-jam{ font-family: var(--font-mono); font-size:26px; font-weight:600; color: var(--crystal-light); }
.badge{
  font-size:11px; font-weight:600; padding:5px 11px; border-radius:20px;
  letter-spacing:.3px; text-transform:uppercase;
}
.badge.aktif{ background: rgba(56,189,248,0.18); color: var(--crystal-light); box-shadow: inset 0 0 0 1px rgba(56,189,248,0.4); }
.badge.nonaktif{ background: rgba(148,163,184,0.12); color: var(--text-muted); box-shadow: inset 0 0 0 1px rgba(148,163,184,0.25); }
.jadwal-nama{ font-weight:600; font-size:15.5px; color:#fff; }
.jadwal-meta{ font-size:12.5px; color: var(--text-secondary); display:flex; gap:8px; flex-wrap:wrap; }
.chip{ padding:3px 10px; border-radius:20px; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); }

/* ===================== FORM (Glassmorphism input) ===================== */
.form-group{ margin-bottom:20px; }
.form-group label{
  display:block; margin-bottom:8px; font-size:13.5px; font-weight:600;
  color: var(--text-secondary); letter-spacing:.2px;
}
.form-control{
  width:100%;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  background: rgba(6,20,40,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--ice);
  font-size:14.5px;
  box-shadow: inset 3px 3px 8px rgba(0,0,0,0.35), inset -2px -2px 6px rgba(90,150,220,0.05);
  transition: all .15s ease;
}
.form-control:focus{
  outline:none;
  border-color: var(--crystal);
  box-shadow: inset 3px 3px 8px rgba(0,0,0,0.35), 0 0 0 3px rgba(56,189,248,0.22);
}
.form-control::placeholder{ color: var(--text-muted); }
select.form-control{ cursor:pointer; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }

/* ===================== LOGIN ===================== */
.auth-wrap{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding: 40px 20px;
}
.auth-card{
  width:100%; max-width:420px;
  padding: 44px 38px;
  text-align:center;
}
.auth-card .brand-badge{ margin:0 auto 18px; width:72px; height:72px; border-radius:20px; }
.auth-card h1{ font-family:var(--font-display); font-size:21px; font-weight:700; color:#fff; }
.auth-card p.sub{ color: var(--text-secondary); font-size:13.5px; margin-top:6px; margin-bottom:30px; }
.auth-card form{ text-align:left; }

/* ===================== TABLE ===================== */
.table-wrap{ overflow-x:auto; }
table.data-table{ width:100%; border-collapse: collapse; }
.data-table th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.8px;
  color: var(--text-muted); padding: 14px 18px; border-bottom:1px solid rgba(255,255,255,0.1);
}
.data-table td{
  padding: 15px 18px; font-size:14px; color: var(--text-primary);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.data-table tr:last-child td{ border-bottom:none; }
.data-table tr:hover td{ background: rgba(255,255,255,0.03); }
.actions-cell{ display:flex; gap:8px; }

/* ===================== ALERT / FLASH ===================== */
.alert{
  padding:14px 18px; border-radius: var(--r-sm); margin-bottom:20px;
  font-size:14px; display:flex; align-items:center; gap:10px;
  border:1px solid transparent;
}
.alert.success{ background: rgba(34,197,94,0.12); color:#7cf3a8; border-color: rgba(34,197,94,0.3); }
.alert.error{ background: rgba(239,68,68,0.12); color:#ff9aa5; border-color: rgba(239,68,68,0.3); }

/* ===================== FOOTER ===================== */
.site-footer{
  text-align:center; padding:26px; color: var(--text-muted); font-size:12.5px;
  margin-top:auto;
}

/* ===================== TOAST BEL BERBUNYI ===================== */
#bel-toast{
  position:fixed; bottom:28px; right:28px; z-index:200;
  padding:18px 22px; min-width:260px;
  display:flex; align-items:center; gap:14px;
  transform: translateY(140%); opacity:0;
  transition: all .45s cubic-bezier(.2,.9,.25,1.2);
}
#bel-toast.show{ transform: translateY(0); opacity:1; }
#bel-toast .toast-icon{
  width:42px; height:42px; border-radius:50%;
  background: radial-gradient(circle at 30% 25%, var(--crystal-light), var(--crystal) 60%);
  display:flex; align-items:center; justify-content:center; color:#04213f;
  animation: bell-shake .5s ease-in-out infinite;
}
#bel-toast .toast-title{ font-weight:700; font-size:14.5px; color:#fff; }
#bel-toast .toast-sub{ font-size:12.5px; color: var(--text-secondary); }

/* ===================== UTILITIES ===================== */
.flex{ display:flex; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-18{ gap:18px; }
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;}
.mb-16{margin-bottom:16px;} .mb-24{margin-bottom:24px;}
.w-full{ width:100%; }
.text-center{ text-align:center; }
.text-muted{ color: var(--text-muted); }
.text-secondary{ color: var(--text-secondary); }
.font-display{ font-family: var(--font-display); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px){
  .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); }
  .form-row{ grid-template-columns: 1fr; }
  .navbar{ flex-direction:column; gap:14px; padding:18px; }
  .nav-links{ flex-wrap:wrap; justify-content:center; }
}
@media (max-width: 560px){
  .grid-3, .grid-4, .grid-2{ grid-template-columns: 1fr; }
  .clock-hero{ padding:40px 20px; }
  .container{ padding: 0 16px; }
  .jadwal-grid{ grid-template-columns:1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Focus visible aksesibilitas */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline: 2px solid var(--crystal-light);
  outline-offset: 2px;
}