:root{--sun:#FFD54F;--sun-strong:#FFB300;--tosca:#1ABC9C;--tosca-dark:#0E8C79;--ink:#0F172A;--ink-2:#334155;--card:#fff;--shadow:0 10px 30px rgba(15,23,42,.08);--radius:20px;--radius-lg:28px}
*{box-sizing:border-box} html:focus-within{scroll-behavior:smooth}
body{margin:0;font-family:Poppins,Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,#fff 0%, #F7FFFE 100%)}
.container{width:min(1120px,92%);margin-inline:auto} .section{padding:80px 0} .muted{opacity:.7}
.site-header{position:sticky;top:0;background:#fff8;backdrop-filter:blur(10px);box-shadow:var(--shadow);z-index:50}
.nav{display:flex;justify-content:space-between;align-items:center;padding:14px 0}
.nav__toggle{display:none;background:none;border:none;font-size:26px}
.nav__links{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.nav__links a{text-decoration:none;color:var(--ink-2)} .nav__links a.active{color:var(--tosca);font-weight:700}
.brand__sun{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--sun);box-shadow:0 8px 20px rgba(255,179,0,.4);animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.nav__toggle{display:block}.nav__links{position:fixed;inset:60px 16px auto 16px;background:#fff;border-radius:var(--radius);padding:18px;flex-direction:column;gap:10px;box-shadow:var(--shadow);transform:translateY(-16px);opacity:0;pointer-events:none;transition:.3s}.nav__links.open{transform:translateY(0);opacity:1;pointer-events:auto}}
.hero{padding:120px 0 90px;background:radial-gradient(1100px 520px at 100% -10%, rgba(255,213,79,.35), transparent 60%)}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px} @media(max-width:900px){.hero__grid{grid-template-columns:1fr}}
.hero__text h1 span{background:linear-gradient(90deg,var(--tosca),var(--tosca-dark));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__stats{display:flex;gap:18px;margin-top:14px}.stat{background:#fff;border-radius:16px;padding:10px 14px;box-shadow:var(--shadow)}.stat__num{font-size:22px;font-weight:800;display:block}
.btn{display:inline-block;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:700;box-shadow:var(--shadow);transition:.2s transform}.btn:active{transform:scale(.98)}.btn--primary{background:linear-gradient(90deg,var(--sun),var(--sun-strong));color:#2b1700}.btn--ghost{border:2px solid var(--tosca);color:var(--tosca)}
.card{background:#fff;border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow)}
.grid-2{display:grid;gap:32px;grid-template-columns:repeat(2,minmax(0,1fr))} @media(max-width:900px){.grid-2{grid-template-columns:1fr}}
.tabs__nav{display:flex;gap:8px;background:#F0FFFC;padding:8px;border-radius:999px;box-shadow:var(--shadow);width:max-content;margin:10px 0}
.tabs__nav button{border:none;background:transparent;padding:10px 16px;border-radius:999px;font-weight:700;color:var(--tosca-dark);cursor:pointer}
.tabs__nav [aria-selected="true"]{background:linear-gradient(90deg,var(--tosca),var(--tosca-dark));color:#eafff9}
.tabs__pane{display:none;margin-top:20px}.tabs__pane.is-active{display:block}
.leader-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.leader__photo{width:100%;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:#FFF9E8;display:grid;place-items:center}
.leader__photo img{width:100%;height:100%;object-fit:cover}
.mini-leader{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:14px;margin-bottom:14px}
.mini-leader .pic{width:120px;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#F0FFFC;display:grid;place-items:center}
.mini-leader img{width:100%;height:100%;object-fit:cover}
.people-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.person{display:grid;gap:6px;text-align:center}
.person .pic{width:100%;aspect-ratio:1/1;border-radius:12px;background:#F0FFFC;display:grid;place-items:center;overflow:hidden}
.person .pic img{width:100%;height:100%;object-fit:cover}
.staff-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.staff-chip{background:#E9FFFB;border-radius:10px;padding:8px;text-align:center;font-weight:600}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} @media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){.cards{grid-template-columns:1fr}}
.card.proker .badge{display:inline-block;background:#FFF0C2;color:#7a4c00;border-radius:999px;padding:4px 10px;font-size:.8rem;margin-bottom:6px}
#calendar{display:grid;gap:6px}.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-cell{background:#fff;border-radius:10px;padding:10px;min-height:64px;box-shadow:var(--shadow);text-align:right;position:relative}
.cal-cell.muted{opacity:.5}.cal-dot{position:absolute;left:8px;bottom:8px;width:8px;height:8px;border-radius:50%;background:var(--tosca)}
.calendar-events .event{background:#fff;border-left:4px solid var(--sun);padding:10px;border-radius:10px;box-shadow:var(--shadow);margin-bottom:8px}
.countdown{display:flex;gap:12px;margin-top:10px}.countdown div{background:#fff;border-radius:16px;padding:12px 14px;box-shadow:var(--shadow);min-width:70px;text-align:center}.countdown span{font-weight:800;font-size:24px;display:block}
.next-event-title{font-weight:700;margin-top:6px}
.site-footer{margin-top:40px}.back-to-top{position:fixed;right:16px;bottom:16px;border:none;border-radius:999px;padding:10px 12px;font-weight:800;background:var(--tosca);color:#fff;box-shadow:var(--shadow);cursor:pointer}
.hero__visual{position:relative;min-height:420px;display:grid;place-items:center}
.orbits{--size:420px;position:relative;width:var(--size);height:var(--size);margin:0 auto;filter:drop-shadow(0 10px 30px rgba(15,23,42,.12))}
.orbit{position:absolute;inset:0;border:2px dashed rgba(26,188,156,.35);border-radius:50%;animation:orbit-rotate 18s linear infinite}
.orbit--2{inset:20px;border-style:solid;border-color:rgba(26,188,156,.2);animation-duration:24s}
.orbit--3{inset:40px;border-style:dotted;border-color:rgba(26,188,156,.25);animation-duration:32s}
@keyframes orbit-rotate{to{transform:rotate(360deg)}}
.planet--sun{--sun:#FFD54F;--sun-strong:#FFB300;position:absolute;width:120px;height:120px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--sun) 0%,var(--sun-strong) 65%,#E08A00 100%);box-shadow:0 0 40px rgba(255,179,0,.50),0 0 140px rgba(255,179,0,.35);animation:sun-pulse 3.4s ease-in-out infinite}
@keyframes sun-pulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}
.planet--tosca{--r:calc((var(--size) - 80px)/2);position:absolute;left:50%;top:50%;width:22px;height:22px;border-radius:50%;background:#1ABC9C;box-shadow:0 0 14px rgba(26,188,156,.45);transform-origin:-var(--r) 0;animation:planet-spin 12s linear infinite}
@keyframes planet-spin{from{transform:rotate(0deg) translateX(var(--r))}to{transform:rotate(360deg) translateX(var(--r))}}
.planet--tosca::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.55),transparent 45%)}
@media(max-width:720px){.orbits{--size:320px}.planet--sun{width:96px;height:96px}} 
.contact{background:#fff;border-radius:28px;box-shadow:0 20px 60px rgba(15,23,42,.06);padding:22px}
.contact h3{margin-top:0}
.contact label{display:grid;gap:6px;font-weight:600;margin:.6rem 0}

/* === FILOSOFI – TAMBAHAN STYLING === */

/* latar alternatif lembut */
.section--alt{
  background: radial-gradient(1200px 600px at 100% -10%, rgba(255,213,79,.16), transparent 55%),
              radial-gradient(900px 420px at -10% 120%, rgba(26,188,156,.10), transparent 50%);
}

/* accordion */
.accordion details{
  border-radius: 18px;
  background:#fff;
  box-shadow: var(--shadow);
  margin: 10px 0;
  padding: 12px 14px;
  transition: box-shadow .2s ease;
}
.accordion details[open]{ box-shadow: 0 14px 36px rgba(15,23,42,.10); }
.accordion summary{
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary::after{
  content: "▾";
  margin-left: auto;
  transition: transform .25s ease;
  font-weight: 900;
  color: var(--tosca-dark);
}
.accordion details[open] summary::after{ transform: rotate(180deg); }

/* list berikon (emoji) */
.icon-list{
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
  padding-left: 1rem;
}
.icon-list li{ line-height: 1.55; }

/* kartu inline pendek */
.card--inline{
  display: grid;
  gap: 6px;
  align-items: start;
  padding: 14px;
}

/* tag warna tema */
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tag{
  display:inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: var(--shadow);
  font-size: .9rem;
}
.tag--sun{
  background: linear-gradient(90deg, var(--sun), var(--sun-strong));
  color: #2b1700;
}
.tag--tosca{
  background: linear-gradient(90deg, var(--tosca), var(--tosca-dark));
  color: #eafff9;
}

/* gambar logo di kartu */
.card img{
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  background: #F8FBFF;
}
.contact input,.contact textarea{width:100%;border:1.5px solid #e6f3f1;border-radius:12px;padding:10px 12px;font:inherit;outline:none;background:#fbfffe}
.contact input:focus,.contact textarea:focus{border-color:#1ABC9C;box-shadow:0 0 0 3px rgba(26,188,156,.12)}
.contact .btn{margin-top:8px}
details{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:10px 12px;margin:8px 0} details>summary{cursor:pointer;font-weight:700;outline:none} details[open]{background:#fffef6}

/* ===== Logo + Filosofi (dua kolom) ===== */
.logo-philo .lp-row{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap: 26px;
  background:#fff;
  border-radius: var(--radius-lg);
  padding: 22px;
  margin: 18px 0;
  box-shadow: var(--shadow);
}
.logo-philo .lp-img{
  display:grid; place-items:center;
  background:#F8FBFF;
  border-radius: 16px;
  overflow:hidden;
}
.logo-philo .lp-img img{
  width:100%;
  height:auto;
  display:block;
}
.logo-philo .lp-text h3{ margin-top:2px; }
.gap-16{ gap:16px; }

/* mode “dibalik” (logo kanan, teks kiri) – opsional */
.logo-philo .lp-row.reverse{ grid-template-columns: 1fr 420px; }
.logo-philo .lp-row.reverse .lp-img{ order: 2; }
.logo-philo .lp-row.reverse .lp-text{ order: 1; }

/* responsive */
@media (max-width: 980px){
  .logo-philo .lp-row{
    grid-template-columns: 1fr;
    padding:18px;
  }
  .logo-philo .lp-row.reverse{ grid-template-columns: 1fr; }
  .logo-philo .lp-row.reverse .lp-img,
  .logo-philo .lp-row.reverse .lp-text{ order: unset; }
}



/* ===== VISI & MISI (scoped .vm) ===== */
.vm__head{ text-align:center; margin-bottom:24px; }
.vm__head h1{ font-size:clamp(28px,3vw,40px); margin-bottom:6px; }
.vm__tag{ color:#334155; opacity:.9; }

.vm__visiCard{
  position:relative; overflow:hidden;
  border-radius:24px; background:#fff;
  padding:28px 28px 34px; box-shadow:0 14px 36px rgba(15,23,42,.08);
}
.vm__sun{
  position:absolute; inset:-40% auto auto -20%;
  width:520px; height:520px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(255,213,79,.35), transparent 70%);
  filter: blur(8px);
  animation: vmFloat 8s ease-in-out infinite;
}
@keyframes vmFloat{ 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-8px) scale(1.03)} }

.vm__misi{ margin-top:36px; }
.vm__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:980px){ .vm__grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .vm__grid{ grid-template-columns:1fr;} }

.vm__card{
  position:relative; background:#fff; border-radius:20px;
  padding:18px 18px 20px; box-shadow:0 14px 36px rgba(15,23,42,.08);
  transform: translateY(16px) scale(.98); opacity:0;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease, box-shadow .25s ease;
  will-change: transform, opacity;
}
.vm__card.show{ opacity:1; transform: translateY(0) scale(1); }
.vm__card:hover{ box-shadow:0 18px 42px rgba(15,23,42,.12); transform: translateY(-4px) scale(1.01); }

.vm__icon{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  font-size:24px;font-weight:700;
  background:linear-gradient(140deg,var(--tosca,#1ABC9C),var(--sun,#FFD54F));
  color:#0b1d1a; box-shadow:0 8px 20px rgba(26,188,156,.25); margin-bottom:10px;
}
.vm__card h3{ margin:0 0 6px; font-size:1.05rem; }
.vm__card p{ margin:0; color:#334155; }

.vm__pulse{
  position:absolute; right:14px; bottom:12px; width:8px; height:8px; border-radius:50%;
  background:#1ABC9C; box-shadow:0 0 0 0 rgba(26,188,156,.6); animation: vmPulse 2.2s infinite;
}
@keyframes vmPulse{
  0%{box-shadow:0 0 0 0 rgba(26,188,156,.6)}
  70%{box-shadow:0 0 0 12px rgba(26,188,156,0)}
  100%{box-shadow:0 0 0 0 rgba(26,188,156,0)}
}

/* scroll reveal */
.vm [data-reveal]{ opacity:0; transform: translateY(12px); transition:.6s ease; }
.vm [data-reveal].show{ opacity:1; transform:none; }

}

/* ===== ABOUT ===== */
.about .container{position:relative}
.about__wrap{
  display:grid; gap:28px;
  grid-template-columns: 1.25fr .95fr;
}
@media(max-width:980px){ .about__wrap{ grid-template-columns:1fr } }

.about__content h1{ margin:0 0 10px; font-size:clamp(28px,3.2vw,42px) }

.about__card{
  position:relative; overflow:hidden;
  background:#fff; border-radius:24px; padding:22px 22px 26px;
  box-shadow:0 18px 48px rgba(15,23,42,.08);
}
.about__glow{
  position:absolute; inset:-40% auto auto -20%;
  width:560px; height:560px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,213,79,.35), transparent 70%);
  filter:blur(10px); pointer-events:none;
  animation:aboutFloat 8s ease-in-out infinite;
}
@keyframes aboutFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.about__text{
  font-size:1.05rem; line-height:1.8; text-align:justify;
  margin:0; color:#0f172a;
}

.about__accent{
  height:10px; width:160px; border-radius:999px;
  background:linear-gradient(90deg,var(--tosca),var(--sun));
  filter:saturate(1.2) drop-shadow(0 8px 18px rgba(26,188,156,.28));
  margin:16px 0 8px;
}

/* stats */
.about__stats{ display:flex; gap:14px; flex-wrap:wrap; }
.a-stat{
  background:#fff; border-radius:16px; padding:12px 14px;
  min-width:120px; box-shadow:var(--shadow);
  transform:translateY(8px); opacity:0; transition:.5s;
}
.a-stat .a-num{ display:block; font-size:22px; font-weight:800 }
.a-stat .a-label{ color:var(--ink-2) }
.a-stat.show{ transform:none; opacity:1 }

/* visual panel */
.about__visual{ display:grid; gap:16px; align-content:start }
.orb{ --S:340px; position:relative; width:var(--S); height:var(--S); margin:0 auto; filter:drop-shadow(0 12px 40px rgba(15,23,42,.12)); }
@media(max-width:980px){ .orb{ --S:300px } }
.ring{ position:absolute; inset:0; border-radius:50%; border:2px dashed rgba(26,188,156,.35); animation:spin 18s linear infinite }
.ring--2{ inset:18px; border-style:solid; border-color:rgba(26,188,156,.2); animation-duration:24s }
.sun{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:110px; height:110px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--sun), var(--sun-strong) 65%, #E08A00 100%);
  box-shadow:0 0 40px rgba(255,179,0,.5), 0 0 140px rgba(255,179,0,.35);
  animation:aboutPulse 3.4s ease-in-out infinite;
}
@keyframes aboutPulse{ 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.06)} }
.dot{
  --r:calc((var(--S) - 88px)/2);
  position:absolute; left:50%; top:50%; width:20px; height:20px; border-radius:50%;
  background:#1ABC9C; box-shadow:0 0 16px rgba(26,188,156,.45);
  transform-origin:-var(--r) 0; animation:dotSpin 12s linear infinite;
}
@keyframes dotSpin{ from{transform:rotate(0deg) translateX(var(--r))} to{transform:rotate(360deg) translateX(var(--r))} }

.about__badges{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:999px; font-weight:700;
  background:#fff; box-shadow:var(--shadow);
}
.badge span{ font-size:18px; }

.about__quote{
  text-align:center;
  font-weight:700;
}
.about__quote p{
  color:#0F172A; /* ganti warna biru sesuai tema */
  background:linear-gradient(90deg,#0EA5E9,#0284C7);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

/* reveal fallback scope */
.about [data-reveal]{ opacity:0; transform:translateY(12px); transition:.6s ease }
.about [data-reveal].show{ opacity:1; transform:none }

/* Modal Flipbook */
.flip-modal{position:fixed;inset:0;display:none;z-index:1000}
.flip-modal.is-open{display:block}
.flip-modal__backdrop{position:absolute;inset:0;background:rgba(2,6,23,.55);backdrop-filter:blur(3px)}
.flip-modal__dialog{
  position:relative;width:min(1000px,92%);height:min(80vh,800px);
  margin:6vh auto;background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(15,23,42,.35);
  overflow:hidden;display:flex;flex-direction:column
}
.flip-modal__close{
  position:absolute;top:10px;right:10px;border:none;background:#fff;border-radius:8px;
  width:36px;height:36px;font-size:18px;cursor:pointer;box-shadow:0 4px 12px rgba(15,23,42,.15)
}
.flip-modal__body{flex:1}
#flipFrame{width:100%;height:100%;border:0}

/* Grid responsif agar chip tidak kesempitan */
.staff-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:10px;
}

/* Chip nama staf: boleh multi-baris tapi tetap 1 chip */
.staff-chip{
  background:#E9FFFB;
  border-radius:12px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  text-align:center;
  font-weight:600;
  line-height:1.25;
  white-space:normal;        /* biar bisa 2–3 baris */
  word-break:break-word;
  overflow-wrap:anywhere;
}


/* Chip staf: rata tengah, tinggi seragam, teks rapi */
.staff-chip{
  background:#E9FFFB;
  border-radius:12px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  text-align:center;
  font-weight:600;
  line-height:1.25;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* (opsional) rapikan list proker di mobile */
.card .list details{
  border-radius:12px;
  padding:12px 14px;
  box-shadow:var(--shadow);
  background:#fff;
  margin:8px 0;
}
.card .list summary{
  font-weight:700;
  cursor:pointer;
}

/* === PATCH TAMBAHAN: buat chips bisa digeser di HP === */
@media (max-width: 600px){
  .staff-grid{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding-bottom:8px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .staff-chip{
    flex:0 0 auto;
    min-width:max(140px,44%);
    white-space:nowrap;
    scroll-snap-align:start;
  }
}

/* chip tidak pecah ke chip lain */
.staff-chip{
  background:#E9FFFB;
  border-radius:12px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  text-align:center;
  font-weight:600;
  line-height:1.25;
  white-space:normal;        /* boleh multi-baris di dalam chip */
  word-break:break-word;     /* aman untuk nama panjang */
  overflow-wrap:anywhere;
}