/* =====================================================
   Surya Inspirasi Schools — Modern Animated Theme
   Brand gradient (orange → magenta) + glassmorphism
   ===================================================== */

:root{
  /* Brand from logo */
  --brand-navy:    #243b64;
  --brand-magenta: #b01e5b;
  --brand-orange:  #f59e0b;

  /* Dark theme (default) */
  --bg-1: #091224;
  --bg-2: #0e1832;
  --card: rgba(17, 26, 46, .72);
  --text: #eaf0fb;
  --muted:#a6b2cc;

  /* Heading color (fix kontras judul) */
  --heading: #f6f9ff;          /* gelap: terang */

  /* Accent */
  --primary:   var(--brand-orange);
  --primary-2: var(--brand-magenta);

  /* FX */
  --shadow: 0 28px 90px rgba(0,0,0,.45);
  --ring:   rgba(176,30,91,.35);
  --radius-xl: 24px;
  --radius-lg: 18px;
}

/* Base */
*,
*::before,
*::after{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  overflow-x: hidden;
}

/* Animated brand glow background */
body::after{
  content:"";
  position: fixed; inset:-45%;
  background:
    conic-gradient(from 0deg,
      rgba(245,158,11,.40),
      rgba(176,30,91,.32),
      rgba(245,158,11,.40));
  filter: blur(90px) saturate(140%);
  opacity:.25;
  animation: spin 40s linear infinite;
  z-index:-1; pointer-events:none;
}

.wrap{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:32px 16px;
}

.card{
  width:min(760px, 92vw);
  background: var(--card);
  border-radius: var(--radius-xl);
  padding:28px 22px 16px;
  box-shadow: var(--shadow);
  position:relative;
  border:1px solid rgba(255,255,255,.06);
}
@supports (backdrop-filter: blur(10px)){
  .card{ backdrop-filter: blur(12px) saturate(140%); }
}

/* Animated gradient border ring */
.card::before{
  content:"";
  position:absolute; inset:-1px; border-radius:inherit;
  padding:1px; background: linear-gradient(135deg, var(--primary), var(--primary-2), var(--primary));
  background-size: 240% 240%;
  animation: gradient-move 8s ease-in-out infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; /* Safari */
  mask-composite: exclude;     /* Others */
}

/* Floating theme toggle (top-right) */
.theme-fab{
  position:absolute; top:14px; right:14px;
  width:46px; height:46px; border-radius:14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.theme-fab:hover{ transform: translateY(-1px) }
.theme-fab:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.24), 0 10px 28px rgba(0,0,0,.28);
}

/* Avatar with animated glow */
.avatar{
  position: relative; z-index:1;
  width:112px;height:112px;border-radius:50%;
  display:block;margin:0 auto 16px auto;
  background:#fff; padding:12px;
  box-shadow: 0 14px 40px var(--ring);
}
.avatar::after{
  content:""; position:absolute; inset:-10px; border-radius:50%;
  background: conic-gradient(from 0deg, var(--primary), var(--primary-2), var(--primary));
  filter: blur(18px); opacity:.45; z-index:-1;
  animation: spin 16s linear infinite;
}

.title{
  font-weight:800;
  text-align:center;
  margin:0 0 6px 0;
  color: var(--heading);        /* pakai variabel agar jelas di light/dark */
  font-size: clamp(24px, 2.6vw + 8px, 34px);
  letter-spacing:.2px;
}
.subtitle{
  text-align:center; margin:0 0 12px 0;
  color:var(--muted); font-size: clamp(14px, .9vw + 10px, 16px);
  line-height:1.5;
}

/* Social icons */
.socials{
  display:flex;align-items:center;justify-content:center;gap:16px;margin:10px 0 14px;
}
.socials a{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  color:var(--text);text-decoration:none;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 6px 22px rgba(0,0,0,.22);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, background-position .3s ease;
  background-size: 200% 200%;
  background-position: 0% 50%;
}
.socials a:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(176,30,91,.33);
  filter: saturate(1.06);
  background-position: 100% 50%;
}

/* Link buttons with moving gradient */
.links{
  display:grid;gap:14px;margin:20px auto 6px auto;width:min(580px, 100%);
}

.link{
  position:relative; width:100%;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  font-size: clamp(15px, .5vw + 13px, 17px);
  font-weight:700; text-decoration:none; color:white;
  padding:16px 18px; border-radius:20px;

  /* animated gradient background */
  background-image: linear-gradient(90deg, var(--primary), var(--primary-2), var(--primary));
  background-size: 220% 100%;
  background-position: 0% 50%;
  animation: gradient-move 10s ease-in-out infinite;

  box-shadow: 0 14px 38px rgba(176,30,91,.30);
  transition: transform .14s ease, filter .2s ease, box-shadow .2s ease, background-position .4s ease;
}
.link:hover{
  transform: translateY(-2px) scale(1.01);
  filter: saturate(1.08);
  box-shadow: 0 22px 44px rgba(176,30,91,.34);
  background-position: 100% 50%;
}
.link:active{ transform: translateY(0) scale(.998) }
.link:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px rgba(245,158,11,.42), 0 14px 38px rgba(176,30,91,.3);
}
.link i{ opacity:.95 }

/* Footer */
.footer{
  margin-top:18px; display:flex; align-items:center; gap:12px; justify-content:center; color:var(--muted)
}
.theme-btn{
  background:transparent; border:1px solid rgba(255,255,255,.14); color:var(--text);
  padding:8px 10px; border-radius:12px; cursor:pointer; display:inline-grid; place-items:center;
}

/* Modal */
.modal{ position:fixed; inset:0; display:none }
.modal.show{ display:block }
.modal-backdrop{ position:absolute; inset:0; background:rgba(4,10,24,.66); backdrop-filter:blur(2px) }
.modal-card{
  position:absolute; inset:0; margin:auto; background:rgba(17, 26, 46, .9);
  width:min(920px, 95vw); height:min(72vh, 660px);
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; overflow:hidden;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.08)
}
.modal h2{ font-size:18px; margin:0 }
.close{ background:transparent; border:none; color:var(--text); font-size:20px; cursor:pointer }
#mapsFrame{ width:100%; height:100%; border:0 }

/* Light theme */
.light{
  --bg-1: #f7f9ff;
  --bg-2: #eef3ff;
  --card: rgba(255,255,255,.88);
  --text: #1f2e4c;
  --muted:#596682;
  --heading: var(--brand-navy); /* terang: pakai navy agar kontras */
  color: var(--text);
}
.light .card{ border-color: rgba(20,34,64,.08); box-shadow: 0 18px 64px rgba(22,34,64,.12) }
.light .theme-fab{ background: rgba(15,23,42,.06); border-color: rgba(15,23,42,.12) }
.light .modal-card{ background: rgba(255,255,255,.97); border-color: rgba(15,23,42,.08) }

/* Keyframes */
@keyframes spin { to{ transform: rotate(360deg) } }
@keyframes gradient-move {
  0%{   background-position: 0% 50% }
  50%{  background-position: 100% 50% }
  100%{ background-position: 0% 50% }
}

/* Accessibility & responsive */
:focus-visible{ outline:none }
@media (max-width: 420px){
  .title{ font-size: clamp(22px, 4.6vw, 26px) }
  .subtitle{ font-size:14px }
  .link{ font-size:15px }
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important }
}