:root {
  --bs-primary:#168247;
  --bs-primary-rgb:22,130,71;
  --green-950:#063c27;
  --green-900:#075133;
  --green-800:#0b6840;
  --green-700:#168247;
  --green-500:#53a83f;
  --green-100:#e8f5ea;
  --green-50:#f4faf4;
  --gold:#d7ad55;
  --gold-soft:#f4e6bd;
  --ink:#173129;
  --muted:#65766f;
  --surface:#ffffff;
  --logo-url:url('https://alazhar-syifabudisby.sch.id/wp-content/uploads/2023/08/azhar.png');
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  min-height:100vh;
  position:relative;
  isolation:isolate;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 0%,rgba(83,168,63,.13),transparent 24rem),
    radial-gradient(circle at 92% 78%,rgba(22,130,71,.09),transparent 28rem),
    linear-gradient(180deg,#fbfdf9 0%,#edf7ef 100%);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
}
body::before {
  content:'';
  position:fixed;
  z-index:0;
  inset:104px 0 0;
  pointer-events:none;
  background:var(--logo-url) center 45%/min(52vw,540px) auto no-repeat;
  opacity:.045;
  filter:grayscale(1) sepia(.18) saturate(.8);
}
body > * { position:relative; z-index:1; }
.app-header {
  border-bottom:1px solid rgba(7,81,51,.12);
  background:rgba(255,255,255,.94);
  box-shadow:0 .35rem 1.5rem rgba(6,60,39,.06);
  backdrop-filter:blur(14px);
}
.header-inner { min-height:104px; padding-top:1rem; padding-bottom:1rem; }
.school-brand { min-width:0; }
.school-logo-wrap {
  width:78px; height:78px; flex:0 0 auto; display:grid; place-items:center;
  overflow:hidden; border:1px solid rgba(7,81,51,.12); border-radius:20px;
  background:#fff; box-shadow:0 .55rem 1.4rem rgba(7,81,51,.14);
}
.school-logo { width:100%; height:100%; object-fit:contain; }
.brand-copy { min-width:0; }
.brand-title { color:var(--green-900); font-size:clamp(1.35rem,2.2vw,2rem); font-weight:800; letter-spacing:.025em; line-height:1.1; }
.brand-subtitle { margin-top:.38rem; color:#415f53; font-size:clamp(1.35rem,2.2vw,2rem); font-weight:800; letter-spacing:.025em; line-height:1.15; }
.teacher-picker {
  padding:.55rem .65rem .55rem .9rem; border:1px solid rgba(7,81,51,.13);
  border-radius:16px; background:var(--green-50); box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
.teacher-picker-label { color:var(--green-900); font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.teacher-picker .form-select { min-width:150px; border:0; border-radius:11px; color:var(--green-950); background-color:#fff; font-size:.9rem; font-weight:700; box-shadow:0 .2rem .7rem rgba(6,60,39,.06); }
.teacher-picker .form-select:focus { border-color:transparent; box-shadow:0 0 0 .2rem rgba(22,130,71,.16); }
.btn { border-radius:12px; font-weight:700; letter-spacing:.025em; }
.btn-primary { --bs-btn-bg:var(--green-700); --bs-btn-border-color:var(--green-700); --bs-btn-hover-bg:var(--green-900); --bs-btn-hover-border-color:var(--green-900); }
.btn-outline-primary { --bs-btn-color:var(--green-800); --bs-btn-border-color:rgba(11,104,64,.42); --bs-btn-hover-bg:var(--green-800); --bs-btn-hover-border-color:var(--green-800); }
.welcome-panel {
  position:relative; isolation:isolate; min-height:280px; display:flex; align-items:center; overflow:hidden;
  color:#fff; border:1px solid rgba(255,255,255,.13); border-radius:30px;
  background:linear-gradient(125deg,var(--green-950) 0%,var(--green-800) 62%,#318b45 100%);
  box-shadow:0 1.35rem 3.5rem rgba(6,60,39,.2);
}
.welcome-panel::before {
  content:''; position:absolute; z-index:-1; inset:0; opacity:.17;
  background-image:
    linear-gradient(30deg,rgba(255,255,255,.28) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.28) 87.5%),
    linear-gradient(150deg,rgba(255,255,255,.28) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.28) 87.5%);
  background-size:56px 98px;
}
.hero-pattern { position:absolute; z-index:-1; inset:auto -70px -110px auto; width:320px; height:320px; border:1px solid rgba(244,230,189,.26); border-radius:50%; box-shadow:0 0 0 30px rgba(244,230,189,.06),0 0 0 62px rgba(244,230,189,.04); }
.hero-watermark { position:absolute; z-index:-1; right:5%; top:50%; width:min(30vw,250px); aspect-ratio:1; translate:0 -50%; background:var(--logo-url) center/contain no-repeat; opacity:.12; filter:grayscale(1) brightness(3.5); }
.hero-content { position:relative; z-index:1; width:100%; max-width:none; text-align:center; }
.arabic-greeting { color:var(--gold-soft); font-family:'Amiri',serif; font-size:clamp(1.8rem,3.5vw,2.5rem); line-height:1.35; margin-bottom:1rem!important; }
.hero-eyebrow { color:var(--gold-soft); font-size:.72rem; letter-spacing:.17em; }
.hero-title {
  max-width:820px;
  margin-inline:auto;
  font-family:'Montserrat','Plus Jakarta Sans',system-ui,sans-serif;
  font-size:clamp(1.65rem,3.4vw,2.75rem);
  line-height:1.3;
  letter-spacing:.025em;
  text-wrap:balance;
}
.hero-title span { display:block; }
.hero-title span + span { margin-top:.16em; }
.hero-title { margin-bottom:.2rem!important; }
.hero-description { max-width:580px; margin-inline:auto; color:rgba(255,255,255,.86); font-size:clamp(1.25rem,2.6vw,1.65rem); font-weight:700; }
#photoTitle,#videoTitle { color:var(--green-950); letter-spacing:-.02em; }
.text-secondary { color:var(--muted)!important; }
.site-footer { padding:2rem 1rem 2.5rem; color:var(--muted); text-align:center; font-size:.82rem; letter-spacing:.035em; }
.site-footer span { color:var(--green-800); font-weight:800; letter-spacing:.09em; }
.placeholder-panel { border:1px dashed rgba(11,104,64,.3); border-radius:18px; background:rgba(255,255,255,.78); }
.photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; }
.video-grid { display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:1rem; }
.video-grid-widget { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; }
.media-card {
  position:relative; min-width:0; padding:0; overflow:hidden; border:1px solid rgba(7,81,51,.08); border-radius:20px;
  background:var(--surface); box-shadow:0 .55rem 1.5rem rgba(6,60,39,.08); text-align:left;
  content-visibility:auto; contain-intrinsic-size:260px; contain:layout paint style;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.media-open { display:block; width:100%; padding:0; border:0; color:inherit; background:transparent; text-align:left; }
.media-download { position:absolute; z-index:3; right:.65rem; top:.65rem; padding:.38rem .65rem; border:0; border-radius:.55rem; color:#fff; background:rgba(7,81,51,.9); font-size:.68rem; font-weight:800; letter-spacing:.05em; box-shadow:0 .2rem .65rem rgba(0,0,0,.2); }
.media-download:hover { background:var(--green-700); }
.media-download:disabled { opacity:.72; }
.media-card:hover { transform:translateY(-4px); border-color:rgba(22,130,71,.28); box-shadow:0 1rem 2.2rem rgba(6,60,39,.14); }
.media-visual { position:relative; display:block; width:100%; aspect-ratio:1/1; overflow:hidden; background:linear-gradient(110deg,#e7efe8 8%,#f8fbf7 18%,#e7efe8 33%); background-size:200% 100%; animation:shimmer 1.4s linear infinite; }
.video-card .media-visual { aspect-ratio:16/9; }
.video-grid-widget .video-card .media-visual { aspect-ratio:1/1; }
.media-visual::after { content:'BUNDA SEHATI'; position:absolute; inset:0; display:grid; place-items:center; color:#789186; font-size:.68rem; font-weight:800; letter-spacing:.1em; }
.media-visual.loaded { animation:none; background:#e9efea; }
.media-visual img { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; transition:scale .35s ease; }
.media-card:hover .media-visual img { scale:1.025; }
.media-caption { display:block; padding:.9rem 1rem 1rem; }
.media-caption strong,.media-caption small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-caption strong { color:var(--ink); font-size:.88rem; }
.media-caption small { margin-top:.32rem; color:var(--muted); font-size:.72rem; }
.gallery-empty { grid-column:1/-1; }
.video-play { position:absolute; z-index:2; top:50%; left:50%; translate:-50% -50%; width:3.2rem; height:3.2rem; display:grid; place-items:center; border:1px solid rgba(255,255,255,.5); border-radius:50%; color:#fff; background:rgba(6,60,39,.78); box-shadow:0 .4rem 1.3rem rgba(0,0,0,.22); }
.video-duration { position:absolute; z-index:2; right:.65rem; bottom:.65rem; padding:.25rem .5rem; border-radius:.45rem; color:#fff; background:rgba(6,40,28,.82); font-size:.72rem; }
.media-preview,.video-player-modal { position:fixed; z-index:1080; inset:0; background:rgba(3,27,18,.96); }
.media-preview { display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto 1fr auto; align-items:center; }
.preview-toolbar { grid-column:1/-1; display:flex; justify-content:flex-end; gap:.5rem; padding:1rem; }
.preview-toolbar button,.preview-nav { border:1px solid rgba(255,255,255,.15); border-radius:50%; color:#fff; background:rgba(255,255,255,.12); }
.preview-toolbar button { width:2.75rem; height:2.75rem; font-size:1.4rem; }
.preview-nav { width:3rem; height:3rem; margin:.5rem; font-size:2rem; }
.preview-stage { position:relative; height:100%; min-height:0; display:grid; place-items:center; overflow:auto; }
.preview-stage img { max-width:100%; max-height:100%; object-fit:contain; opacity:0; transition:opacity .2s ease,transform .2s ease; transform-origin:center; }
.preview-stage img.loaded { opacity:1; }
.preview-loader,.video-loader { position:absolute; z-index:2; }
.preview-caption { grid-column:1/-1; padding:1rem; color:#fff; text-align:center; }
.video-player-modal { display:grid; place-items:center; padding:1rem; }
.video-player-shell { width:min(100%,1100px); color:#fff; }
.video-stage { position:relative; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:20px; background:#000; aspect-ratio:16/9; }
.video-stage iframe { width:100%; height:100%; border:0; }
.preview-open { overflow:hidden; }
.notification-area { position:fixed; z-index:1100; top:1rem; right:1rem; width:min(calc(100% - 2rem),420px); }
@keyframes shimmer { to { background-position-x:-200%; } }
@media (min-width:768px) {
  .photo-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
  .video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .video-grid-widget { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (min-width:1200px) {
  .photo-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .video-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .video-grid-widget { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
@media (max-width:767.98px) {
  .header-inner { min-height:auto; }
  .school-logo-wrap { width:62px; height:62px; border-radius:16px; }
  .brand-subtitle { max-width:245px; }
  .teacher-picker { width:100%; justify-content:space-between; }
  .teacher-picker .form-select { flex:1; min-width:0; }
  .welcome-panel { min-height:245px; border-radius:24px; }
  .hero-watermark { right:-2%; width:180px; opacity:.09; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}