/* ==========================================================================
   Milad ke-72 UMI — app.css
   Brand defaults (confirm with Humas brand guide). System fonts for speed + CSP.
   ========================================================================== */
:root{
  /* Leaf-green ramp sampled from the official UMI flame logo */
  --green-900:#15441C; --green-700:#2E7D32; --green-500:#3FA34D;
  --gold-500:#C9962B;  --gold-300:#E6C95A;
  --ink-900:#14211B;   --ink-600:#46564E;  --line:#E2EAE5;
  --paper-50:#F7FAF8;  --white:#fff;
  --radius:14px; --shadow:0 6px 24px rgba(21,68,28,.12);
  --container:1120px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--ink-900);background:var(--paper-50);
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-700);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;margin:0 0 .5em}
.container{width:min(100% - 2rem,var(--container));margin-inline:auto}
.center{text-align:center}
.lead{font-size:1.125rem;color:var(--ink-600);max-width:60ch}
.note{color:var(--ink-600);font-size:.95rem;margin-top:1.5rem}
.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:1rem;top:.5rem;background:var(--white);padding:.5rem 1rem;border-radius:8px;z-index:100}
:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px}

/* ---- Header / nav ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line);transition:background .25s ease,box-shadow .25s ease,border-color .25s ease}
.site-header::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--green-700),var(--gold-500) 45%,var(--gold-300) 55%,var(--green-700));z-index:1}
.site-header.is-scrolled{background:rgba(255,255,255,.96);box-shadow:0 8px 26px rgba(8,64,42,.12);border-bottom-color:transparent}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:88px}
.brand{display:flex;align-items:center;gap:.7rem}
.brand:hover{text-decoration:none}
.brand-logo{height:74px;width:auto;transform-origin:center;animation:logoSpin 10s linear infinite}
@media(prefers-reduced-motion:reduce){.brand-logo{animation:none}}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text strong{color:var(--green-900);font-size:1.15rem}
.brand-text small{color:var(--gold-500);font-weight:600;letter-spacing:.02em}
.site-nav ul{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.site-nav a{position:relative;display:block;padding:.55rem .9rem;border-radius:10px;color:var(--ink-900);font-weight:600;font-size:.95rem;transition:color .15s ease}
.site-nav a::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:.32rem;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold-300),var(--gold-500));transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
.site-nav a:hover{text-decoration:none;color:var(--green-700)}
.site-nav a:hover::after{transform:scaleX(1)}
.site-nav a[aria-current=page]{color:var(--green-900)}
.site-nav a[aria-current=page]::after{transform:scaleX(1)}
/* CTA item: Ucapan & Doa */
.site-nav a.nav-cta{margin-left:.35rem;color:var(--green-900);background:linear-gradient(135deg,var(--gold-300),var(--gold-500));font-weight:800;padding:.55rem 1.15rem;box-shadow:0 4px 12px rgba(201,150,43,.35);transition:transform .15s ease,filter .15s ease,box-shadow .15s ease}
.site-nav a.nav-cta::after{display:none}
.site-nav a.nav-cta:hover{color:var(--green-900);transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 8px 18px rgba(201,150,43,.45)}
.site-nav a.nav-cta[aria-current=page]{box-shadow:0 0 0 2px var(--green-700),0 4px 12px rgba(201,150,43,.35)}
.nav-toggle-btn{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;border-radius:8px}
.nav-toggle-btn span{width:24px;height:2px;background:var(--green-900);border-radius:2px}
@media(max-width:860px){
  .nav-toggle-btn{display:flex}
  .site-nav{position:absolute;left:0;right:0;top:88px;background:var(--white);border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .25s ease}
  .site-nav{box-shadow:0 12px 28px rgba(8,64,42,.14)}
  .site-nav ul{flex-direction:column;padding:.5rem;gap:.1rem}
  .site-nav a{padding:.75rem .9rem}
  .site-nav a::after{display:none}
  .site-nav a:hover,.site-nav a[aria-current=page]{background:#EAF5EF}
  .site-nav a.nav-cta{margin:.35rem .4rem .15rem;text-align:center}
  .site-nav a.nav-cta:hover{transform:none}
  .nav-toggle:checked ~ .site-nav{max-height:28rem}
}

/* ---- Buttons ---- */
.btn{display:inline-block;padding:.7rem 1.4rem;border-radius:999px;font-weight:600;border:2px solid transparent;cursor:pointer}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--green-700);color:var(--white)}
.btn-primary:hover{background:var(--green-900)}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.7)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

/* ---- Hero (deep green + Islamic pattern + mosque skyline) ---- */
.hero{position:relative;isolation:isolate;color:var(--white);overflow:hidden;
  background:radial-gradient(125% 120% at 80% -10%,var(--green-500),var(--green-900));
  padding:4.5rem 0 8rem}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url('../img/pattern-logo.png') repeat;background-size:132px auto;opacity:.20}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;z-index:-1;
  pointer-events:none;background:url('../img/skyline.svg') no-repeat center bottom;background-size:cover}
.hero-inner{position:relative;z-index:1;text-align:center}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:var(--gold-300);font-weight:700;margin:0 0 .6rem}
.hero h1{font-size:clamp(2.6rem,7vw,4.6rem);margin:0;font-family:Georgia,'Times New Roman',serif;font-weight:700}
.hero .accent,.slide-h1 .accent{
  font-size:1.14em;font-weight:800;line-height:1;
  color:transparent;
  background:linear-gradient(165deg,#F8EBA6 0%,#E6C95A 28%,#CFa233 52%,#C9962B 66%,#9C7320 86%,#EAD27A 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.22)) drop-shadow(0 5px 16px rgba(201,150,43,.45))}
.hero-tema{font-size:clamp(1.1rem,2.6vw,1.5rem);color:var(--gold-300);font-style:italic;margin:.3rem 0 1rem}
.hero-desc{max-width:60ch;margin:0 auto 2rem;color:rgba(255,255,255,.92)}
.hero-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}

/* ---- Countdown ---- */
.countdown{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.cd-unit{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:var(--radius);padding:1rem 1.1rem;min-width:84px}
.cd-num{display:block;font-size:clamp(1.8rem,5vw,2.6rem);font-weight:800;color:var(--white);font-variant-numeric:tabular-nums}
.cd-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-300)}
.cd-done{flex-basis:100%;font-weight:700;color:var(--gold-300)}

/* ---- Sections ---- */
.section{padding:3.5rem 0}

/* ---- Soft UMI character washes (nuansa Milad ke-72, tetap lembut) ---- */
.wash,.section-soft{position:relative;isolation:isolate;overflow:hidden}
.wash::before,.section-soft::before{content:"";position:absolute;inset:0;z-index:-1;background:url('../img/pattern-logo.png') repeat;background-size:150px;opacity:.05;mix-blend-mode:multiply;pointer-events:none}
/* faint celebratory gold halo at the top of a washed section */
.wash::after{content:"";position:absolute;top:-40%;left:50%;width:80%;height:80%;transform:translateX(-50%);z-index:-1;background:radial-gradient(closest-side,rgba(201,150,43,.10),transparent);pointer-events:none}
.wash-mint{background:linear-gradient(180deg,#FBFEFC,#EAF5EF)}
.wash-gold{background:linear-gradient(180deg,#FEFCF4,#F7F0DC)}
.wash-cream{background:linear-gradient(180deg,#FFFDF8,#F4F1E6)}
.section-title{text-align:center;font-size:clamp(1.5rem,3.5vw,2rem);color:var(--green-900);margin-bottom:2rem;font-family:Georgia,'Times New Roman',serif}
.section-title::after{content:"";display:block;width:160px;height:26px;margin:.7rem auto 0;background:url('../img/ornament.svg') no-repeat center;background-size:contain}
.grid{display:grid;gap:1.2rem}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grid-4{grid-template-columns:1fr}}

/* ---- Cards / identitas ---- */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow)}
.identitas-card{position:relative;border-top:3px solid var(--gold-500)}
.identitas-card .card-num{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:linear-gradient(160deg,var(--green-500),var(--green-900));color:#fff;font-weight:800;margin-bottom:.6rem;box-shadow:0 4px 12px rgba(21,68,28,.25)}
.identitas-card h3{color:var(--green-900);font-size:1.05rem}
.identitas-card p{color:var(--ink-600);margin:0;font-size:.95rem}

/* ---- Counters ---- */
.counters{text-align:center}
.counter{padding:1rem}
.counter.card{border-top:3px solid var(--gold-500)}
.counters-lg .counter{padding:1.6rem 1rem}
.counter-num{display:block;font-size:clamp(1.8rem,5vw,2.6rem);font-weight:800;color:var(--green-700);font-variant-numeric:tabular-nums;line-height:1}
.counter-num.counter-text{font-size:clamp(1.1rem,3vw,1.4rem);color:var(--gold-500)}
.counter-sat{display:block;font-size:.8rem;color:var(--ink-600)}
.counter-label{display:block;margin-top:.4rem;font-weight:600;color:var(--ink-900);font-size:.92rem}
.counter-label small{color:var(--ink-600);font-weight:400}

/* ---- Agenda ---- */
.agenda-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.agenda-item{display:flex;gap:1rem;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem}
.agenda-date{flex:0 0 auto;background:var(--green-700);color:var(--white);border-radius:10px;padding:.5rem .7rem;text-align:center;font-weight:700;min-width:74px}
.agenda-full .agenda-date{display:flex;flex-direction:column;line-height:1.1}
.agenda-full .ad-day{font-size:1.5rem}
.agenda-full .ad-mon{font-size:.75rem;font-weight:600}
.agenda-item h3,.agenda-item h2{margin:.1rem 0 .25rem;color:var(--green-900);font-size:1.1rem}
.agenda-meta{color:var(--ink-600);margin:0}

/* ---- Agenda page: timeline ---- */
.agenda-time{list-style:none;margin:1.8rem auto 0;padding:0;max-width:760px;position:relative}
.agenda-ev{position:relative;display:flex;gap:1.2rem;padding-bottom:1.5rem}
.agenda-ev:last-child{padding-bottom:0}
.agenda-ev::before{content:"";position:absolute;left:31px;top:66px;bottom:-4px;width:2px;background:linear-gradient(var(--gold-300),rgba(201,150,43,.22));z-index:0}
.agenda-ev:last-child::before{display:none}
.agenda-ev-date{position:relative;z-index:1;flex:0 0 auto;width:64px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:14px;background:linear-gradient(160deg,var(--green-700),var(--green-900));color:#fff;box-shadow:0 6px 16px rgba(8,64,42,.22);line-height:1.05}
.agenda-ev-date .ev-day{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums}
.agenda-ev-date .ev-mon{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-300)}
.agenda-ev-card{flex:1 1 auto;min-width:0;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:1.15rem 1.3rem 1.25rem;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
.agenda-ev-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(8,64,42,.14)}
.agenda-ev-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.agenda-ev-cat{display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--green-700);background:rgba(20,68,28,.08);border-radius:999px;padding:.28rem .7rem}
.agenda-ev-cat svg{width:14px;height:14px}
.agenda-ev-flag{flex:0 0 auto;font-size:.62rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--green-900);background:linear-gradient(160deg,#F8EBA6,#E6C95A 55%,#C9962B);padding:.24rem .6rem;border-radius:999px}
.agenda-ev-card h2{margin:.65rem 0 .4rem;color:var(--green-900);font-size:1.18rem;line-height:1.3}
.agenda-ev-meta{display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;margin:0;color:var(--ink-600);font-size:.9rem}
.agenda-ev-meta span{display:inline-flex;align-items:center;gap:.4rem}
.agenda-ev-meta svg{width:15px;height:15px;color:var(--gold-500);flex:0 0 auto}
.agenda-ev-desc{margin:.7rem 0 0;color:var(--ink-900);font-size:.92rem;line-height:1.6}
.agenda-ev.is-peak .agenda-ev-date{background:linear-gradient(160deg,#F8EBA6,#E6C95A 55%,#C9962B);color:var(--green-900);box-shadow:0 8px 20px rgba(201,150,43,.42)}
.agenda-ev.is-peak .agenda-ev-date .ev-mon{color:var(--green-900)}
.agenda-ev.is-peak .agenda-ev-card{border-color:var(--gold-500);box-shadow:0 0 0 2px rgba(230,201,90,.45),0 12px 28px rgba(8,64,42,.16)}
@media(max-width:560px){.agenda-ev-date{width:56px;height:56px}.agenda-ev::before{left:27px;top:60px}.agenda-ev-card h2{font-size:1.08rem}}
@media(prefers-reduced-motion:reduce){.agenda-ev-card{transition:none}.agenda-ev-card:hover{transform:none}}

/* ---- Agenda page: program utama ---- */
.program-grid{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
@media(max-width:680px){.program-grid{grid-template-columns:1fr}}
.program-card{display:flex;gap:1.1rem;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-left:4px solid var(--green-700);border-radius:14px;padding:1.3rem 1.4rem;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
.program-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(8,64,42,.14)}
.program-ic{flex:0 0 auto;display:grid;place-items:center;width:50px;height:50px;border-radius:13px;background:linear-gradient(160deg,#F8EBA6,#E6C95A 55%,#C9962B);color:var(--green-900);box-shadow:0 4px 12px rgba(201,150,43,.3)}
.program-ic svg{width:26px;height:26px}
.program-body{min-width:0}
.program-card h3{margin:.15rem 0 .4rem;color:var(--green-900);font-size:1.1rem}
.program-card p{margin:0;color:var(--ink-900);font-size:.92rem;line-height:1.55}

/* ---- Agenda cards (beranda: Rangkaian Acara) ---- */
/* auto-scrolling marquee of event cards (right -> left) */
.agenda-marquee{position:relative;overflow:hidden;padding-top:14px}
.agenda-marquee::before,.agenda-marquee::after{content:"";position:absolute;top:0;bottom:0;width:48px;z-index:2;pointer-events:none}
.agenda-marquee::before{left:0;background:linear-gradient(90deg,#FBF7EC,rgba(251,247,236,0))}
.agenda-marquee::after{right:0;background:linear-gradient(270deg,#FBF7EC,rgba(251,247,236,0))}
.agenda-track{display:flex;gap:1.2rem;list-style:none;margin:0;padding:0;width:max-content;animation:agendaScroll 38s linear infinite}
.agenda-marquee:hover .agenda-track,.agenda-marquee:focus-within .agenda-track{animation-play-state:paused}
@keyframes agendaScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.agenda-card{position:relative;flex:0 0 310px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--gold-500);border-radius:16px;padding:1.4rem 1.3rem 1.3rem;box-shadow:0 4px 14px rgba(8,64,42,.07);transition:transform .15s ease,box-shadow .15s ease}
@media(max-width:560px){.agenda-card{flex-basis:84vw}}
@media(prefers-reduced-motion:reduce){.agenda-track{animation:none}.agenda-marquee{overflow-x:auto}}
.agenda-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(8,64,42,.16)}
.agenda-step{position:absolute;top:-12px;right:16px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(160deg,var(--gold-300),var(--gold-500));color:var(--green-900);font-weight:800;font-size:.9rem;box-shadow:0 4px 10px rgba(201,150,43,.4)}
.agenda-card-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.agenda-card .agenda-date{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--green-700),var(--green-900));color:#fff;border-radius:12px;padding:.5rem .85rem;min-width:66px;line-height:1.05}
.agenda-card .ad-day{font-size:1.8rem;font-weight:800;font-variant-numeric:tabular-nums}
.agenda-card .ad-mon{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-300)}
.agenda-card-ico{flex:0 0 auto;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(160deg,#EAF5EF,#D6EBDF);color:var(--green-700)}
.agenda-card-ico svg{width:25px;height:25px}
.agenda-card h3{color:var(--green-900);font-size:1.08rem;margin:0 0 .8rem;line-height:1.3}
.agenda-card-meta{display:grid;gap:.45rem;margin:0;color:var(--ink-600);font-size:.9rem}
.agenda-card-meta span{display:flex;align-items:center;gap:.5rem}
.agenda-card-meta svg{width:16px;height:16px;color:var(--gold-500);flex:0 0 auto}

/* ---- Timeline ---- */
.timeline{list-style:none;margin:0 auto;padding:0;max-width:760px;position:relative}
.timeline::before{content:"";position:absolute;left:78px;top:0;bottom:0;width:2px;background:var(--line)}
.timeline-item{display:flex;gap:1.2rem;padding:0 0 1.6rem;position:relative}
.timeline-year{flex:0 0 64px;text-align:right;font-weight:800;color:var(--gold-500)}
.timeline-body{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem;flex:1;box-shadow:var(--shadow);position:relative}
.timeline-body::before{content:"";position:absolute;left:-22px;top:18px;width:12px;height:12px;border-radius:50%;background:var(--green-700);border:3px solid var(--white)}
.timeline-body h2,.timeline-body h3{font-size:1.1rem;color:var(--green-900);margin:0 0 .3rem}
.timeline-body p{margin:0;color:var(--ink-600)}
@media(max-width:560px){.timeline::before{left:8px}.timeline-year{flex-basis:auto;text-align:left}.timeline-item{flex-direction:column;gap:.4rem;padding-left:1.4rem}.timeline-body::before{left:-1.4rem}}

/* ---- Tokoh cards (pendiri & raja) ---- */
.tokoh-grid{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:820px){.tokoh-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.tokoh-grid{grid-template-columns:1fr}}
.tokoh-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold-500);border-radius:16px;padding:1.5rem 1.1rem 1.3rem;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
.tokoh-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(8,64,42,.16)}
.tokoh-avatar{width:84px;height:84px;margin-bottom:.5rem}
img.tokoh-avatar{object-fit:cover;object-position:top center;border:3px solid var(--gold-300);box-shadow:0 4px 14px rgba(201,150,43,.3)}
.tokoh-avatar.ph-avatar-text{font-size:2rem}
.tokoh-nama{color:var(--green-900);font-size:1rem;line-height:1.25}
.tokoh-peran{color:var(--gold-500);font-weight:600;font-size:.9rem}
/* raja: crown badge over the avatar */
.tokoh-photo{position:relative;display:inline-grid;margin-bottom:.5rem}
.tokoh-photo .tokoh-avatar{margin-bottom:0}
/* Kartu Raja Sulawesi — sentuhan "kerajaan" elegan tanpa badge mahkota */
.raja-card{background:linear-gradient(180deg,#FFFDF6,#FBF2D8);border:1px solid #EBD9A4;border-top:3px solid var(--gold-500);position:relative;overflow:hidden}
.raja-card::before{content:"";position:absolute;left:0;right:0;top:0;height:78px;background:radial-gradient(120% 80% at 50% -30%,rgba(201,150,43,.22),transparent 70%);pointer-events:none}
.raja-card .tokoh-avatar{position:relative;z-index:1}
.raja-card img.tokoh-avatar{border-color:var(--gold-500)}
.raja-card .tokoh-nama{color:var(--green-900)}
.raja-gelar{margin-top:.15rem;display:inline-flex;align-items:center;gap:.3rem;padding:.32rem .85rem;border-radius:999px;font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--green-900);background:linear-gradient(135deg,#F8EBA6,#E6C95A 55%,#C9962B);box-shadow:0 3px 10px rgba(201,150,43,.35)}
.raja-card:hover{box-shadow:0 14px 30px rgba(201,150,43,.28)}

/* ---- Sejarah: identity card ---- */
.sejarah-identity{position:relative;isolation:isolate;overflow:hidden;max-width:820px;margin:0 auto;text-align:center;color:#fff;padding:2.4rem 1.8rem 2rem;border-radius:18px;border:1px solid rgba(201,150,43,.5);background:radial-gradient(130% 150% at 50% -30%,var(--green-700),var(--green-900));box-shadow:0 16px 40px rgba(8,64,42,.22)}
.sejarah-identity::before{content:"";position:absolute;inset:0;z-index:-1;background:url('../img/pattern-logo.png') repeat;background-size:104px;opacity:.14}
.si-ornament{display:block;font-size:1.6rem;color:var(--gold-300);line-height:1;margin-bottom:.4rem}
.si-eyebrow{margin:0 0 .4rem;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-300)}
.si-name{font-family:Georgia,'Times New Roman',serif;color:#fff;font-size:clamp(1.4rem,3.5vw,2rem);margin:0 0 .3rem}
.si-trans{margin:0 0 1rem;color:rgba(255,255,255,.82);font-size:.95rem}
.si-motto{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:1.2rem;color:var(--gold-300);margin:0 0 1.4rem}
.si-badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.si-badges li{background:rgba(255,255,255,.08);border:1px solid rgba(230,201,90,.4);border-radius:999px;padding:.45rem 1rem;font-size:.85rem;color:rgba(255,255,255,.95)}

/* ---- Sejarah: pimpinan ---- */
.pimpinan-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:820px){.pimpinan-grid{grid-template-columns:1fr}}
.pimpinan-card{display:flex;gap:1rem;align-items:center;background:var(--white);border:1px solid var(--line);border-left:4px solid var(--green-700);border-radius:12px;padding:1.1rem 1.2rem;box-shadow:var(--shadow)}
.pimpinan-avatar{width:62px;height:62px}
img.pimpinan-avatar{object-fit:cover;object-position:top center;border:2px solid var(--gold-300);box-shadow:0 3px 10px rgba(201,150,43,.28)}
.pimpinan-body{display:flex;flex-direction:column;min-width:0}

/* ---- Ketua Yayasan dari masa ke masa ---- */
.ketua-section{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#F5FBF6,#E9F3EB)}
.ketua-section::before{content:"";position:absolute;inset:0;z-index:-1;background:url('../img/pattern-logo.png') repeat;background-size:120px;opacity:.05}
.ketua-grid{list-style:none;margin:1.8rem 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem}
.ketua-card{position:relative;flex:1 1 188px;max-width:216px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold-500);border-radius:16px;padding:1.5rem 1rem 1.2rem;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
.ketua-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(8,64,42,.16)}
.ketua-photo{position:relative;display:inline-grid;margin-bottom:.1rem}
.ketua-avatar{width:96px;height:96px}
img.ketua-avatar{object-fit:cover;object-position:top center;border:3px solid var(--gold-300);box-shadow:0 4px 14px rgba(201,150,43,.3)}
.ketua-avatar.ph-avatar-text{font-size:2.2rem}
.ketua-no{position:absolute;left:-5px;top:-5px;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;font-size:.78rem;font-weight:700;color:#fff;background:var(--green-700);border:2px solid var(--white);box-shadow:0 2px 6px rgba(8,64,42,.3)}
.ketua-period{display:inline-block;padding:.22rem .75rem;border-radius:999px;font-size:.8rem;font-weight:700;color:var(--green-900);background:linear-gradient(160deg,#F8EBA6,#E6C95A 55%,#C9962B)}
.ketua-nama{color:var(--green-900);font-size:.88rem;line-height:1.3}
.ketua-card.is-current{border:1px solid var(--gold-500);border-top-width:3px;box-shadow:0 0 0 2px rgba(230,201,90,.45),0 12px 28px rgba(8,64,42,.16)}
.ketua-card.is-current::after{content:"Kini";position:absolute;top:.7rem;right:.7rem;font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--green-700);padding:.12rem .45rem;border-radius:999px}
@media(max-width:520px){.ketua-card{flex-basis:42%}}
.pimpinan-jabatan{display:block;font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-500);margin-bottom:.3rem}
.pimpinan-nama{color:var(--green-900);font-size:1.02rem;line-height:1.3}

/* ---- Page head / breadcrumb / prose ---- */
.page-head{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#E6F2EB,var(--paper-50));padding:2.5rem 0 1.6rem;border-bottom:3px solid var(--gold-500)}
.page-head::before{content:"";position:absolute;inset:0;z-index:-1;background:url('../img/pattern-logo.png') repeat;background-size:112px;opacity:.11}
.page-head h1{color:var(--green-900);font-size:clamp(1.8rem,4.5vw,2.6rem);font-family:Georgia,'Times New Roman',serif}
.breadcrumb{font-size:.9rem;color:var(--ink-600);margin-bottom:.6rem}
.prose{max-width:70ch;margin:2.5rem auto 0}
.prose h2{color:var(--green-900)}
.link-more{font-weight:600}

/* ---- Charts (Capaian) ---- */
.section-soft{background:linear-gradient(180deg,#fff,#EAF5EF)}
.lead-center{margin:0 auto 2rem;text-align:center}
.charts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
@media(max-width:760px){.charts-grid{grid-template-columns:1fr}}
.chart-card{border-top:3px solid var(--gold-500);transition:transform .15s ease,box-shadow .15s ease}
.chart-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(8,64,42,.12)}
.chart-card h3,.chart-card h4{color:var(--green-900);font-size:1.02rem;margin:0 0 1rem}
.chart{display:grid;gap:.7rem}
.chart-row{display:grid;gap:.25rem}
.chart-row .lab{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;line-height:1.3}
.chart-row .lab b{color:var(--ink-900);font-weight:600}
.chart-row .lab span{color:var(--ink-600);white-space:nowrap}
.chart-note{margin:1rem 0 0;font-size:.82rem;color:var(--ink-600);border-top:1px dashed var(--line);padding-top:.7rem}
meter.bar{display:block;width:100%;height:13px;border:1px solid var(--line);border-radius:7px;background:#EAF5EF;-webkit-appearance:none;-moz-appearance:none;appearance:none}
meter.bar::-webkit-meter-bar{background:#EAF5EF;border:none;border-radius:7px;min-height:13px}
meter.bar::-webkit-meter-optimum-value,
meter.bar::-webkit-meter-suboptimum-value,
meter.bar::-webkit-meter-even-less-good-value{background:linear-gradient(90deg,var(--green-500),var(--green-700));border-radius:7px}
meter.bar::-moz-meter-bar{background:linear-gradient(90deg,var(--green-500),var(--green-700));border-radius:7px}

/* Highlight band (green) */
.capaian-band{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:radial-gradient(120% 150% at 50% -40%,var(--green-700),var(--green-900));border-top:3px solid var(--gold-500);border-bottom:3px solid var(--gold-500)}
.capaian-band::before{content:"";position:absolute;inset:0;z-index:-1;background:url('../img/pattern-logo.png') repeat;background-size:112px;opacity:.18}
.band-counters{max-width:1000px;margin-inline:auto}
.band-counters .counter{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.15rem;padding:1.5rem 1rem 1.3rem;border:1px solid rgba(231,202,92,.28);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.band-counters .counter::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:46px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#C9962B,#F8EBA6,#C9962B)}
.band-counters .counter:hover{transform:translateY(-3px);border-color:rgba(231,202,92,.55);box-shadow:0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.12)}
.band-counters .counter-num{margin-top:.35rem;font-size:clamp(2.2rem,5.4vw,3rem);line-height:1;background:linear-gradient(165deg,#F8EBA6,#E6C95A 35%,#C9962B 72%,#EAD27A);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.band-counters .counter-num.counter-text{margin-top:.55rem;font-size:clamp(1.15rem,3vw,1.5rem);-webkit-text-fill-color:var(--gold-300);color:var(--gold-300)}
.band-counters-num .counter-num.counter-text{margin-top:.35rem;font-size:clamp(2.2rem,5.4vw,3rem);-webkit-text-fill-color:transparent;color:transparent}
.band-counters .counter-sat{margin-top:.1rem;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.band-counters .counter-label{margin-top:.5rem;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.9)}
@media(prefers-reduced-motion:reduce){.band-counters .counter{transition:none}.band-counters .counter:hover{transform:none}}

/* Section / group headings */
.group-head{display:flex;align-items:center;gap:.6rem;color:var(--green-900);font-family:Georgia,'Times New Roman',serif;font-size:1.3rem;margin:2.4rem 0 1.1rem}
.group-head:first-child{margin-top:0}
.group-head::before{content:"";flex:0 0 auto;width:8px;height:26px;border-radius:3px;background:linear-gradient(var(--gold-300),var(--gold-500))}
.group-head-sub{font-size:1.12rem;margin:2.2rem 0 1rem}

/* Stat cards */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1rem}
@media(max-width:820px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.stat-grid{grid-template-columns:1fr}}
.stat-card{display:flex;gap:1rem;align-items:center;background:var(--white);border:1px solid var(--line);border-left:4px solid var(--gold-500);border-radius:14px;padding:1.05rem 1.15rem;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
.stat-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(8,64,42,.16)}
.stat-icon{flex:0 0 auto;width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(160deg,#EAF5EF,#D6EBDF);color:var(--green-700)}
.stat-icon svg{width:24px;height:24px}
.stat-body{display:flex;flex-direction:column;line-height:1.22;min-width:0}
.stat-val{font-size:1.5rem;font-weight:800;color:var(--green-700);font-variant-numeric:tabular-nums}
.stat-lab{font-weight:600;color:var(--ink-900);font-size:.93rem}
.stat-sub{font-size:.78rem;color:var(--ink-600)}
/* Research spotlight callout */
.riset-spotlight{position:relative;isolation:isolate;overflow:hidden;display:flex;gap:1rem;margin-top:2.4rem;padding:1.8rem 1.9rem;color:#fff;border-radius:18px;border:1px solid rgba(201,150,43,.5);background:radial-gradient(130% 160% at 0% 0%,var(--green-700),var(--green-900));box-shadow:0 16px 40px rgba(8,64,42,.22)}
.riset-spotlight::before{content:"";position:absolute;inset:0;z-index:-1;background:url('../img/pattern-logo.png') repeat;background-size:104px;opacity:.15}
.riset-spotlight::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(var(--gold-300),var(--gold-500))}
.rs-quote{flex:0 0 auto;font-family:Georgia,'Times New Roman',serif;font-size:4rem;line-height:.7;color:var(--gold-300);opacity:.85;margin-top:.2rem}
.rs-body{flex:1;min-width:0}
.rs-eyebrow{margin:0 0 1rem;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-300)}
.rs-figures{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin:0 0 1.3rem;padding:0}
@media(max-width:680px){.rs-figures{grid-template-columns:repeat(2,1fr)}}
.rs-figures>div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:.7rem .8rem}
.rs-figures dt{font-family:Georgia,'Times New Roman',serif;font-size:1.55rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;background:linear-gradient(165deg,#F8EBA6,#E6C95A 40%,#C9962B 75%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.rs-figures dd{margin:.35rem 0 0;font-size:.78rem;color:rgba(255,255,255,.82);line-height:1.25}
.rs-lead{margin:0;font-size:1.05rem;line-height:1.6;color:rgba(255,255,255,.95)}
.rs-lead strong{color:#fff}
.rs-lead em{color:var(--gold-300);font-style:normal;font-weight:600}
.rs-links{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.3rem 0 0}
.rs-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .95rem;border-radius:999px;font-size:.88rem;font-weight:600;color:var(--green-900);background:linear-gradient(165deg,#F8EBA6,#E6C95A 55%,#C9962B);text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.rs-chip:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.25)}
@media(max-width:560px){.riset-spotlight{flex-direction:column;gap:.2rem;padding:1.5rem 1.3rem}.rs-quote{font-size:3rem}}

/* Ranked charts (Top 10) */
.chart-ranked{grid-column:1/-1}
.chart-solo{grid-column:1/-1;justify-self:center;width:100%;max-width:760px}
.chart.ranked{counter-reset:rk}
.chart.ranked .chart-row{counter-increment:rk}
.chart.ranked .lab b::before{content:counter(rk) ". ";color:var(--gold-500);font-weight:800}
@media(min-width:761px){.chart.cols2{grid-template-columns:1fr 1fr;column-gap:1.6rem}}

/* ---- Alumni Inspiratif (home) ---- */
.alumni-grid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.alumni-card{flex:1 1 300px;max-width:352px;display:flex;gap:1rem;align-items:center;background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold-500);border-radius:14px;padding:1.1rem 1.2rem;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
.alumni-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(8,64,42,.16)}
.alumni-avatar{flex:0 0 auto;width:60px;height:60px;display:grid;place-items:center;border-radius:50%;font-family:Georgia,'Times New Roman',serif;font-weight:800;font-size:1.6rem;color:var(--green-900);background:linear-gradient(160deg,#F8EBA6,#E6C95A 55%,#C9962B);box-shadow:0 4px 12px rgba(201,150,43,.35)}
/* When a real portrait is dropped in, frame the face and add a gold ring. */
img.alumni-avatar{object-fit:cover;object-position:top center;border:2px solid var(--gold-300)}
.alumni-body{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.alumni-nama{color:var(--green-900);font-size:1.02rem}
.alumni-jabatan{color:var(--green-700);font-weight:600;font-size:.92rem}
.alumni-ket{color:var(--ink-600);font-size:.8rem}

/* ---- Showcase slider (elegant fade) ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.showcase{padding-top:2.5rem}
.slider{position:relative;border-radius:20px}
.slider:focus-visible{outline:3px solid var(--gold-500);outline-offset:4px}
.slider-viewport{position:relative;aspect-ratio:21/9;overflow:hidden;border-radius:20px;border:1px solid rgba(201,150,43,.45);box-shadow:0 18px 44px rgba(8,64,42,.22);background:var(--green-900)}
@media(max-width:760px){.slider-viewport{aspect-ratio:4/3}}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s linear .8s}
.slide.is-active{opacity:1;visibility:visible;z-index:1;transition:opacity .55s ease,visibility 0s}
.slide>.ph-figure{position:absolute;inset:0;margin:0;width:100%;height:100%;border:0;border-radius:0;aspect-ratio:auto}
.slide>.ph-figure>img{width:100%;height:100%;object-fit:cover}
.slide>.ph-figure .ph-fill .ph-ic svg{width:46px;height:46px}
/* Themed banner look while a real slide photo hasn't been dropped in yet. */
.slide>.ph-figure .ph-fill{background:radial-gradient(120% 150% at 72% -25%,var(--green-700),var(--green-900));color:rgba(255,255,255,.55)}
.slide>.ph-figure .ph-fill::before{content:"";position:absolute;inset:0;z-index:-1;background:url('../img/pattern-logo.png') repeat;background-size:120px auto;opacity:.16}
.slide>.ph-figure .ph-fill .ph-label{color:rgba(255,255,255,.6)}
/* Horizontal inset clears the prev/next arrow columns so text sits proportionally
   between the controls; extra bottom space keeps the CTA clear of the dots. */
.slide-caption{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:stretch;color:#fff;padding:1.4rem 0 clamp(2.6rem,4vw,3.2rem);background:linear-gradient(100deg,rgba(6,40,26,.62) 0%,rgba(6,40,26,.26) 42%,rgba(6,40,26,.04) 66%,transparent 84%)}
.slide-eyebrow{margin:0 0 .35rem;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-300)}
.slide-title{margin:0 0 .4rem;max-width:24ch;font-family:Georgia,'Times New Roman',serif;font-size:clamp(1.4rem,3.4vw,2.4rem);line-height:1.15;color:#fff}
.slide-sub{margin:0 0 1.1rem;max-width:52ch;color:rgba(255,255,255,.92)}
.slide-badge{display:inline-block;margin:0 0 .7rem;padding:.34rem .85rem;border-radius:999px;background:rgba(201,150,43,.2);border:1px solid rgba(230,201,90,.6);color:var(--gold-300);font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.slide-actions{display:flex;flex-wrap:wrap;gap:.7rem}
.slide-actions .btn{box-shadow:0 6px 18px rgba(0,0,0,.28)}
.slider-logo{position:absolute;top:7%;right:11vw;z-index:5;height:clamp(96px,11vw,158px);width:auto;cursor:pointer;filter:drop-shadow(0 5px 12px rgba(0,0,0,.55)) drop-shadow(0 0 3px rgba(0,0,0,.5));animation:logoSpin 8s linear infinite;transform-origin:center}
/* Celebration confetti overlay */
.confetti-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}
@media(prefers-reduced-motion:reduce){.confetti-canvas{display:none}}
@keyframes logoSpin{from{transform:perspective(820px) rotateY(0deg)}to{transform:perspective(820px) rotateY(360deg)}}
@media(prefers-reduced-motion:reduce){.slider-logo{animation:none}}
@media(max-width:560px){.slider-logo{height:76px;top:.7rem;right:.8rem}}
.slider-count{position:absolute;right:1.4rem;bottom:4.7rem;z-index:4;margin:0;color:#fff;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.14em;font-size:1.05rem;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.slider-count b{color:var(--gold-300);font-size:1.8rem;font-weight:800}
/* Ken Burns zoom on the active slide's real photo (skips the placeholder). */
@keyframes kenburns{from{transform:scale(1.08)}to{transform:scale(1)}}
.slide.is-active>.ph-figure>img{animation:kenburns 7s ease-out both}
/* cinematic reveal wipe + gold seam */
.slide.is-active>.ph-figure{animation:revealClip 1.05s cubic-bezier(.76,0,.24,1) both}
@keyframes revealClip{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
.slide.is-active>.ph-figure::after{content:"";position:absolute;top:0;bottom:0;width:150px;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(248,235,166,.6),rgba(201,150,43,.25),transparent);animation:seamSweep 1.05s cubic-bezier(.76,0,.24,1) both}
@keyframes seamSweep{0%{left:-170px;opacity:0}14%{opacity:1}100%{left:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){.slide.is-active>.ph-figure>img{animation:none}}

/* ---- Hero slider variant (replaces the static hero) ---- */
.showcase.is-hero{padding:0}
.showcase.is-hero .slider{border-radius:0}
.showcase.is-hero .slider-viewport{aspect-ratio:auto;height:clamp(560px,82vh,820px);border-radius:0;border:0;border-bottom:3px solid var(--gold-500);box-shadow:0 14px 30px rgba(8,64,42,.20)}
@media(max-width:760px){.showcase.is-hero .slider-viewport{height:clamp(600px,94vh,880px)}}
/* Content aligns to the page grid even though the banner is full-bleed;
   the 7rem keeps text clear of the edge arrows on mid-width screens. */
/* panel's left inset mirrors the floating 72's right inset (4vw) for balance */
.slide-inner{width:min(100% - 8vw,var(--container));margin-right:auto;margin-left:max(1.2rem,4vw)}
@media(max-width:760px){.slide-inner{width:min(100% - 2.4rem,var(--container))}}
/* Full-cover, vertically-centred, left-aligned hero caption with side gradient. */
.slide-caption.slide-hero{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:.12rem;padding:1.4rem 0;background:linear-gradient(100deg,rgba(6,40,26,.64) 0%,rgba(6,40,26,.3) 40%,rgba(6,40,26,.06) 66%,transparent 86%)}
.slide-h1{margin:.1rem 0 .12rem;font-family:Georgia,'Times New Roman',serif;font-weight:700;line-height:1.04;color:#fff;font-size:clamp(2.4rem,6vw,4.2rem)}
.slide-tema{margin:0 0 .7rem;color:var(--gold-300);font-style:italic;font-size:clamp(1.05rem,2.5vw,1.45rem)}
.slide-desc{max-width:56ch}
.slide-hero .countdown{justify-content:flex-start;margin:.2rem 0 1.2rem}
.slide-hero .slide-actions{margin-top:.1rem}
@media(max-width:560px){.slide-hero .slide-desc{display:none}.slide-hero .cd-unit{min-width:64px;padding:.7rem .6rem}}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.4);border-radius:50%;cursor:pointer;font-size:1.7rem;line-height:1;color:#fff;background:rgba(255,255,255,.14);backdrop-filter:blur(8px) saturate(140%);-webkit-backdrop-filter:blur(8px) saturate(140%);box-shadow:0 6px 18px rgba(0,0,0,.28);transition:background .18s ease,transform .18s ease,border-color .18s ease}
.slider-arrow:hover{background:rgba(255,255,255,.3);border-color:rgba(230,201,90,.8);transform:translateY(-50%) scale(1.08)}
.slider-prev{left:.8rem}
.slider-next{right:.8rem}
@media(max-width:760px){
  .slide-caption{padding-left:clamp(1.3rem,5vw,2rem);padding-right:clamp(1.3rem,5vw,2rem)}
  .slider-arrow{top:34%}
}
@media(max-width:520px){.slider-arrow{width:38px;height:38px;font-size:1.4rem}}
.slider-dots{position:absolute;left:0;right:0;bottom:.8rem;z-index:3;display:flex;gap:.45rem;justify-content:center}
.slider-dot{width:10px;height:10px;padding:0;border:0;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.55);transition:width .25s ease,background .25s ease}
.slider-dot:hover{background:rgba(255,255,255,.85)}
.slider-dot.is-active{width:28px;border-radius:6px;background:linear-gradient(90deg,var(--gold-300),var(--gold-500))}
@media(prefers-reduced-motion:reduce){.slide{transition:none}}

/* ===== Modern slider: glass panel, staggered reveal, progress, accents ===== */
.slide-panel{position:relative;display:inline-block;max-width:min(100%,600px);padding:clamp(1.2rem,2.4vw,1.7rem) clamp(1.3rem,2.4vw,1.9rem) clamp(1.3rem,2.4vw,1.7rem) clamp(1.6rem,2.6vw,2.1rem);border-radius:20px;background:linear-gradient(150deg,rgba(6,34,22,.24),rgba(6,34,22,.06));backdrop-filter:blur(7px) saturate(118%);-webkit-backdrop-filter:blur(7px) saturate(118%);border:1px solid rgba(230,201,90,.2);box-shadow:0 14px 36px rgba(0,8,4,.22);text-shadow:0 1px 12px rgba(0,8,4,.6)}
.slide-panel::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(var(--gold-300),var(--gold-500))}
.slide-hero .slide-panel{max-width:min(100%,680px)}
/* gold accent line under the headline */
.slide-title::after,.slide-h1::after{content:"";display:block;width:62px;height:3px;margin-top:.55rem;border-radius:3px;background:linear-gradient(90deg,var(--gold-300),var(--gold-500))}

/* staggered entrance — replays whenever a slide becomes active */
@keyframes slideRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.slide-panel>*{opacity:0}
.slide.is-active .slide-panel>*{animation:slideRise .7s cubic-bezier(.2,.7,.2,1) both}
.slide.is-active .slide-panel>*:nth-child(1){animation-delay:.14s}
.slide.is-active .slide-panel>*:nth-child(2){animation-delay:.24s}
.slide.is-active .slide-panel>*:nth-child(3){animation-delay:.34s}
.slide.is-active .slide-panel>*:nth-child(4){animation-delay:.44s}
.slide.is-active .slide-panel>*:nth-child(5){animation-delay:.54s}
.slide.is-active .slide-panel>*:nth-child(6){animation-delay:.64s}

/* autoplay progress bar (matches data-autoplay 6.5s) */
.slide-progress{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:3;background:rgba(255,255,255,.16)}
.slide-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-300),var(--gold-500))}
.slide.is-active .slide-progress i{animation:slideProg 6.5s linear both}
.slider.is-paused .slide.is-active .slide-progress i{animation-play-state:paused}
.slider.is-paused .slide.is-active>.ph-figure>img{animation-play-state:paused}
@keyframes slideProg{from{width:0}to{width:100%}}

/* kinetic headline — clip-wipe reveal (overrides the plain rise) */
.slide.is-active .slide-panel .slide-h1,
.slide.is-active .slide-panel .slide-title{animation:textWipe .9s cubic-bezier(.5,0,.12,1) .26s both}
@keyframes textWipe{0%{opacity:0;clip-path:inset(0 100% 0 0)}40%{opacity:1}100%{opacity:1;clip-path:inset(0 -3% 0 0)}}

/* thumbnail navigation (editorial filmstrip) */
.slider-thumbs{position:absolute;right:1.4rem;bottom:1.1rem;z-index:4;display:flex;gap:.5rem;padding:0;margin:0}
.slider-thumb{width:76px;height:46px;padding:0;border:2px solid rgba(255,255,255,.45);border-radius:11px;overflow:hidden;cursor:pointer;background:none;opacity:.62;transition:opacity .2s ease,border-color .2s ease,transform .2s ease;flex:0 0 auto}
.slider-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.slider-thumb:hover{opacity:1;transform:translateY(-3px)}
.slider-thumb.is-active{opacity:1;border-color:var(--gold-300);box-shadow:0 8px 18px rgba(0,0,0,.4)}
@media(max-width:620px){.slider-thumb{width:52px;height:33px;border-radius:8px}.slider-thumbs{gap:.35rem;right:.8rem;bottom:.8rem}.slider-count{right:.9rem;bottom:3.7rem;font-size:.9rem}.slider-count b{font-size:1.4rem}}

/* giant celebratory "72" signature + sparkles */
.slider-72{position:absolute;right:4vw;top:54%;transform:translateY(-50%);z-index:2;pointer-events:none;font-family:Georgia,'Times New Roman',serif;font-weight:800;line-height:.78;font-size:min(42vh,36vw);letter-spacing:-.05em;color:rgba(248,235,166,.06);-webkit-text-stroke:3px rgba(230,201,90,.72);opacity:.7;filter:drop-shadow(0 8px 26px rgba(0,0,0,.3));animation:seventyFloat 7s ease-in-out infinite}
@keyframes seventyFloat{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 14px))}}
.slider-72-th{position:absolute;right:.04em;bottom:.05em;font-size:.23em;line-height:1;font-weight:700;letter-spacing:.01em;font-style:normal;color:rgba(230,201,90,.92);-webkit-text-stroke:0;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.slider-72 b{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(var(--gold-300),rgba(230,201,90,0) 68%);opacity:0;animation:sparkle 3.2s ease-in-out infinite}
.slider-72 .s1{top:8%;left:-4%;animation-delay:0s}
.slider-72 .s2{bottom:16%;left:10%;animation-delay:1.1s}
.slider-72 .s3{top:34%;right:-3%;animation-delay:2.1s}
@keyframes sparkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.95;transform:scale(1)}}
@media(max-width:760px){.slider-72{font-size:34vh;right:-2vw;opacity:.3}}

@media(prefers-reduced-motion:reduce){
  .slide-panel>*{opacity:1}
  .slide.is-active .slide-panel>*,
  .slide.is-active .slide-panel .slide-h1,
  .slide.is-active .slide-panel .slide-title{animation:none}
  .slide-progress{display:none}
  .slide.is-active>.ph-figure,.slide.is-active>.ph-figure::after{animation:none}
  .slider-72,.slider-72 b,.slider-logo{animation:none}
}

/* ---- Running-text ticker (Ucapan & Doa, under the slider) ---- */
.ticker-band{background:linear-gradient(180deg,#FFFFFF,#FBFDFB);overflow:hidden}
/* option: sticky just under the menu */
.ticker-band.is-top{position:sticky;top:88px;z-index:49;border-top:3px solid var(--gold-500);border-bottom:1px solid var(--line);box-shadow:0 4px 14px rgba(8,64,42,.08)}
/* option: floating bar at the bottom of the screen, always visible */
.ticker-band.is-bottom{position:fixed;left:clamp(8px,2vw,18px);right:clamp(8px,2vw,18px);bottom:clamp(8px,2vw,16px);top:auto;z-index:55;border:1px solid rgba(201,150,43,.55);border-radius:14px;box-shadow:0 16px 36px rgba(8,40,24,.32)}
.has-bottom-ticker{padding-bottom:80px}
@media(max-width:560px){.has-bottom-ticker{padding-bottom:66px}}
.ticker{display:flex;align-items:stretch}
.ticker-tag{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:.45rem;min-width:12rem;background:linear-gradient(135deg,var(--green-700),var(--green-900));color:#fff;font-weight:800;font-size:.92rem;padding:.9rem 1.15rem;white-space:nowrap}
.ticker-tag-ico{color:var(--gold-300)}
.ticker-viewport{position:relative;flex:1 1 auto;min-width:0;overflow:hidden}
.ticker-viewport::before,.ticker-viewport::after{content:"";position:absolute;top:0;bottom:0;width:46px;z-index:2;pointer-events:none}
.ticker-viewport::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.ticker-viewport::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.ticker-track{display:inline-flex;align-items:center;width:max-content;white-space:nowrap;animation:tickerScroll 60s linear infinite;will-change:transform}
.ticker-band:hover .ticker-track,.ticker-band:focus-within .ticker-track{animation-play-state:paused}
.ticker-item{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 0;margin-right:2.6rem;font-size:.95rem;color:#3a4a42}
.ticker-item b{color:var(--green-900);font-weight:700}
.ticker-item b i{color:var(--gold-500);font-style:normal;font-weight:600}
.ticker-star{color:var(--gold-500);font-size:.8rem}
.ticker-cta{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:12rem;background:var(--gold-500);color:var(--green-900);font-weight:800;font-size:.9rem;padding:0 1.15rem;white-space:nowrap}
.ticker-cta:hover{text-decoration:none;background:var(--gold-300)}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:560px){.ticker-tag{font-size:.8rem;padding:.8rem .7rem;min-width:0}.ticker-cta{display:none}.ticker-item{font-size:.9rem;margin-right:2rem}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}.ticker-viewport{overflow-x:auto}}

/* ---- Sorotan & Capaian slideshow (contained mini-slider) ---- */
.cap-show{position:relative;max-width:1000px;margin:0 auto;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid rgba(201,150,43,.45);box-shadow:0 16px 38px rgba(8,64,42,.18);background:var(--green-900)}
@media(max-width:600px){.cap-show{aspect-ratio:4/3}}
.cap-show:focus-visible{outline:3px solid var(--gold-500);outline-offset:3px}
.cap-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease}
.cap-slide.is-active{opacity:1;visibility:visible}
.cap-slide img{width:100%;height:100%;object-fit:cover;display:block}
.cap-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:2.4rem 1.3rem 1.9rem;color:#fff;font-weight:600;font-size:1rem;line-height:1.35;background:linear-gradient(transparent,rgba(6,38,24,.5) 45%,rgba(6,38,24,.9))}
.cap-more{margin-top:1.2rem}

/* ---- Drop-in photos (figure / placeholder / avatar) ---- */
.ph-figure{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--white);position:relative}
.ph-4x3{aspect-ratio:4/3}
.ph-16x9{aspect-ratio:16/9}
.ph-1x1{aspect-ratio:1/1}
.ph-3x4{aspect-ratio:3/4}
.ph-21x9{aspect-ratio:21/9}
.ph-figure>img{width:100%;height:100%;object-fit:cover;display:block}
.ph-figure figcaption{position:absolute;left:0;right:0;bottom:0;padding:.6rem .8rem;font-size:.82rem;color:#fff;background:linear-gradient(transparent,rgba(8,64,42,.82))}
.ph-fill{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;color:var(--green-700);text-align:center;padding:1rem;background:repeating-linear-gradient(135deg,#EAF5EF,#EAF5EF 12px,#F2F8F4 12px,#F2F8F4 24px)}
.ph-fill .ph-ic svg{width:34px;height:34px;opacity:.8}
.ph-fill .ph-label{font-size:.82rem;color:var(--ink-600);max-width:24ch}
.ph-avatar{flex:0 0 auto;width:52px;height:52px;border-radius:50%;object-fit:cover;display:block}
.ph-avatar-text{display:grid;place-items:center;font-family:Georgia,'Times New Roman',serif;font-weight:800;font-size:1.5rem;color:var(--green-900);background:linear-gradient(160deg,#F8EBA6,#E6C95A 55%,#C9962B);box-shadow:0 4px 12px rgba(201,150,43,.35)}

/* Photo strip (reusable 3-up) */
.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem}
@media(max-width:760px){.photo-strip{grid-template-columns:1fr}}

/* ---- Galeri ---- */
.galeri-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:960px){.galeri-grid{grid-template-columns:repeat(2,1fr)}}
.galeri-item{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--white)}
.galeri-item img{aspect-ratio:4/3;object-fit:cover;width:100%}
.galeri-placeholder{aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;background:repeating-linear-gradient(135deg,#EAF5EF,#EAF5EF 12px,#F2F8F4 12px,#F2F8F4 24px);color:var(--green-700)}
.galeri-placeholder .ph-icon{font-weight:800;font-size:1.4rem;letter-spacing:.1em}
.galeri-placeholder figcaption{font-size:.8rem;color:var(--ink-600)}

/* ---- Ucapan ---- */
.ucapan-layout{display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:2rem;align-items:start}
@media(min-width:861px){.ucapan-form-wrap{position:sticky;top:104px}}
@media(max-width:860px){.ucapan-layout{grid-template-columns:1fr}}
.form{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow)}
.field{margin-bottom:1rem;display:flex;flex-direction:column;gap:.35rem}
.field label{font-weight:600;font-size:.95rem}
.field .req{color:#b3261e}
.field input,.field textarea{font:inherit;padding:.7rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--paper-50);width:100%}
.field input:focus,.field textarea:focus{border-color:var(--green-500);background:var(--white)}
.form-note{font-size:.85rem;color:var(--ink-600);margin:.8rem 0 0}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.alert{border-radius:10px;padding:.8rem 1rem;margin-bottom:1rem}
.alert ul{margin:0;padding-left:1.1rem}
.alert-ok{background:#E7F6EE;border:1px solid #BfE6CF;color:#15441C}
.alert-err{background:#FDECEA;border:1px solid #F5C6C0;color:#8a1c12}
/* ---- Dinding Ucapan (masonry wall) ---- */
.ucapan-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:1.1rem}
.ucapan-head .section-title{margin:0}
.ucapan-count{display:inline-flex;align-items:center;gap:.4rem;background:linear-gradient(135deg,var(--green-700),var(--green-500));color:#fff;font-weight:700;font-size:.85rem;padding:.35rem .85rem;border-radius:999px;box-shadow:var(--shadow);white-space:nowrap}
.ucapan-count svg{width:1rem;height:1rem;stroke:#fff}
.ucapan-wall{list-style:none;margin:0;padding:0;columns:248px;column-gap:1rem}
.ucapan-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.15rem 1.2rem 1rem;margin:0 0 1rem;position:relative;overflow:hidden;break-inside:avoid;-webkit-column-break-inside:avoid;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ucapan-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gold-500)}
.ucapan-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.ucapan-quote{position:absolute;top:.15rem;right:.6rem;font-family:Georgia,"Times New Roman",serif;font-size:2.7rem;line-height:1;color:var(--line);pointer-events:none}
.ucapan-pesan{margin:.15rem 0 1rem;font-style:italic;position:relative;z-index:1}
.ucapan-foot{display:flex;align-items:center;gap:.65rem}
.ucapan-ava{flex:0 0 auto;width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.02rem;color:#fff;background:linear-gradient(135deg,var(--green-700),var(--green-500))}
.ucapan-meta{margin:0;color:var(--ink-600);font-size:.88rem;line-height:1.35;min-width:0}
.ucapan-meta strong{display:block;color:var(--green-900);font-size:.97rem;font-style:normal}
.ucapan-card.uc-1::before{background:var(--green-900)}
.ucapan-card.uc-2::before{background:var(--green-700)}
.ucapan-card.uc-3::before{background:var(--green-500)}
.ucapan-card.uc-4::before{background:var(--gold-500)}
.ucapan-card.uc-5::before{background:var(--gold-300)}
@media(prefers-reduced-motion:reduce){.ucapan-card{transition:none}.ucapan-card:hover{transform:none}}
.ucapan-more{text-align:center;margin-top:.5rem}
.btn-soft{background:var(--white);color:var(--green-700);border-color:var(--green-500)}
.btn-soft:hover{background:var(--green-700);color:#fff;border-color:var(--green-700)}
.btn-soft[disabled]{opacity:.6;cursor:progress}
.ucapan-more .note{margin-top:.7rem}

/* ---- CTA band ---- */
.cta-band{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(135deg,#FBF5DF 0%,#F4E8C0 52%,#ECDCA6 100%);color:var(--green-900);border-top:3px solid var(--gold-500);border-bottom:3px solid var(--gold-500)}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;background:url('../img/pattern-logo.png') repeat;background-size:120px;opacity:.2;mix-blend-mode:multiply}
.cta-band h2{color:var(--green-900);font-family:Georgia,'Times New Roman',serif}
.cta-band p{color:rgba(8,64,42,.82);margin-bottom:1.4rem}
.cta-band .btn-primary{background:var(--green-900)}
.cta-band .btn-primary:hover{background:var(--green-700)}

/* ---- Footer ---- */
.site-footer{position:relative;isolation:isolate;overflow:hidden;background:var(--green-900);color:rgba(255,255,255,.82);margin-top:1rem;border-top:3px solid var(--gold-500)}
.site-footer::before{content:"";position:absolute;inset:0;z-index:-1;background:url('../img/pattern-logo.png') repeat;background-size:110px;opacity:.12}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;padding:3rem 0 2rem}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr;gap:1.4rem}}
.footer-brand{display:flex;gap:1rem;align-items:flex-start}
.footer-links h2{font-size:1rem;color:var(--gold-300);margin-bottom:.7rem}
.footer-links ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.footer-links a{color:rgba(255,255,255,.82)}
.footer-links a:hover{color:var(--white)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding:1rem 0;font-size:.88rem}
.footer-bottom p{margin:0}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ==========================================================================
   Admin (moderasi)
   ========================================================================== */
.admin-body{background:#EEF3F0}
.btn-block{display:block;width:100%;text-align:center}
.login-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;gap:1rem}
.login-card{background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:2rem;width:min(100%,400px)}
.login-head{text-align:center;margin-bottom:1.2rem}
.login-head h1{font-size:1.3rem;color:var(--green-900);margin:.6rem 0 .1rem}
.login-head p{color:var(--ink-600);margin:0;font-size:.95rem}
.login-foot a{color:var(--ink-600);font-size:.9rem}
.captcha-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.captcha-row img{border:1px solid var(--line);border-radius:8px;background:#fff}
.btn-refresh{width:40px;height:40px;border:1px solid var(--line);background:var(--paper-50);border-radius:8px;font-size:1.2rem;cursor:pointer;color:var(--green-700)}
.btn-refresh:hover{background:#EAF5EF}

.admin-bar{background:var(--green-900);color:#fff;position:sticky;top:0;z-index:10}
.admin-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:60px;flex-wrap:wrap}
.admin-brand{display:flex;align-items:center;gap:.6rem;color:#fff}
.admin-brand:hover{text-decoration:none;opacity:.92}
.admin-who{opacity:.9}
.admin-user{display:flex;align-items:center;gap:1rem;font-size:.9rem}
.admin-user .link-site{color:var(--gold-300)}
.inline-form{display:inline}
.btn-logout{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);padding:.4rem .9rem;border-radius:8px;cursor:pointer;font:inherit}
.btn-logout:hover{background:rgba(255,255,255,.24)}
.admin-content{padding:1.5rem 1rem 3rem}

/* Search bar */
.admin-search{display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);border-radius:12px;padding:.35rem .45rem .35rem .9rem;margin-bottom:1rem;box-shadow:0 2px 8px rgba(8,64,42,.06)}
.admin-search:focus-within{border-color:var(--green-500);box-shadow:0 0 0 3px rgba(63,163,77,.15)}
.admin-search-ico{font-size:1rem;opacity:.55;flex:0 0 auto}
.admin-search input[type=search]{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:.95rem;background:transparent;color:var(--ink-900);padding:.4rem 0}
.btn-search{flex:0 0 auto;background:var(--green-700);color:#fff;border:0;border-radius:9px;padding:.5rem 1.15rem;font:inherit;font-weight:700;cursor:pointer}
.btn-search:hover{background:var(--green-900)}
.btn-search-clear{flex:0 0 auto;color:var(--ink-600);font-size:.85rem;font-weight:600;padding:.5rem .55rem;border-radius:9px}
.btn-search-clear:hover{text-decoration:none;background:#EAF5EF;color:var(--green-900)}

/* Filter / summary cards (count + filter in one) */
.status-filter{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-bottom:1.3rem}
@media(max-width:560px){.status-filter{grid-template-columns:repeat(2,1fr)}}
.filter-card{display:flex;flex-direction:column;gap:.1rem;padding:.85rem 1rem;border-radius:14px;background:var(--white);border:1px solid var(--line);border-left:4px solid var(--line);box-shadow:0 2px 8px rgba(8,64,42,.06);transition:transform .12s ease,box-shadow .12s ease}
.filter-card:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 8px 20px rgba(8,64,42,.12)}
.filter-count{font-size:1.7rem;font-weight:800;line-height:1;color:var(--green-900);font-variant-numeric:tabular-nums}
.filter-label{font-size:.85rem;font-weight:600;color:var(--ink-600)}
.f-pending{border-left-color:#E0A92B}
.f-approved{border-left-color:var(--green-500)}
.f-rejected{border-left-color:#D0594B}
.f-all{border-left-color:var(--gold-500)}
.filter-card.is-active{background:var(--green-900);border-color:var(--green-900)}
.filter-card.is-active .filter-count{color:#fff}
.filter-card.is-active .filter-label{color:var(--gold-300)}

.admin-meta-line{color:var(--ink-600);font-size:.9rem;margin:.2rem 0 1rem}
.admin-meta-line strong{color:var(--green-900)}
.admin-empty{text-align:center;padding:2.5rem 1rem;background:#fff;border:1px dashed var(--line);border-radius:14px}

/* Moderation cards (responsive — no horizontal scroll) */
.modlist{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.modcard{background:#fff;border:1px solid var(--line);border-left:4px solid var(--line);border-radius:14px;padding:1rem 1.15rem;box-shadow:0 2px 10px rgba(8,64,42,.06)}
.modcard.m-pending{border-left-color:#E0A92B}
.modcard.m-approved{border-left-color:var(--green-500)}
.modcard.m-rejected{border-left-color:#D0594B}
.modcard-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.55rem}
.modcard-meta{color:var(--ink-600);font-size:.82rem;font-variant-numeric:tabular-nums}
.modcard-pesan{margin:0 0 .5rem;color:var(--ink-900);line-height:1.5}
.modcard-from{margin:0 0 .9rem;font-size:.9rem;color:var(--ink-600)}
.modcard-from strong{color:var(--green-900)}
.modcard-actions{display:flex;flex-wrap:wrap;gap:.5rem}

.badge{display:inline-block;padding:.22rem .65rem;border-radius:999px;font-size:.76rem;font-weight:700}
.b-pending{background:#FFF3D6;color:#8a6d1a}
.b-approved{background:#E7F6EE;color:#15441C}
.b-rejected{background:#FDECEA;color:#8a1c12}
.act{border:none;border-radius:9px;padding:.5rem .95rem;font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;transition:filter .12s ease,transform .12s ease}
.act:hover{filter:brightness(1.06);transform:translateY(-1px)}
.act-approve{background:var(--green-700);color:#fff}
.act-reject{background:#F2B705;color:#3a2e00}
.act-delete{background:#FDECEA;color:#8a1c12}

/* Pagination */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;margin:1.6rem 0 .5rem}
.pg-pages{display:flex;gap:.3rem;align-items:center}
.pg{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 .6rem;border-radius:10px;background:#fff;border:1px solid var(--line);color:var(--ink-900);font-weight:600;font-size:.9rem}
.pg:hover{text-decoration:none;background:#EAF5EF;border-color:var(--green-500)}
.pg.is-active{background:var(--green-700);border-color:var(--green-700);color:#fff}
.pg-step{padding:0 .9rem}
.pg.is-disabled{opacity:.45;pointer-events:none}
.pg-gap{padding:0 .2rem;color:var(--ink-600)}

/* ---- Language switcher (header) ---- */
.site-nav{order:1}
.lang-switch{order:2;display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.6)}
.lang-switch a{display:grid;place-items:center;min-width:34px;height:26px;padding:0 .35rem;border-radius:999px;font-size:.78rem;font-weight:800;letter-spacing:.03em;color:var(--ink-600);transition:background .15s ease,color .15s ease}
.lang-switch a:hover{text-decoration:none;color:var(--green-700)}
.lang-switch a.is-active{color:var(--green-900);background:linear-gradient(135deg,var(--gold-300),var(--gold-500));box-shadow:0 2px 6px rgba(201,150,43,.35)}
.nav-toggle-btn{order:3}
@media(max-width:860px){.lang-switch{margin-left:auto}}

/* ---- Visitor counter (footer band) ---- */
.visitor-band{border-top:1px solid rgba(230,201,90,.22);background:rgba(0,0,0,.12)}
.visitor-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem;padding:.95rem 0}
.visitor-stats{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.4rem}
.visitor-title{display:inline-flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-300)}
.visitor-title svg{width:16px;height:16px}
.visitor-stat{display:inline-flex;flex-direction:column;line-height:1.05}
.visitor-stat b{font-size:1.15rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.visitor-stat small{font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.visitor-stat.visitor-total b{color:var(--gold-300)}
.visitor-countries{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.visitor-co-label{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.visitor-countries ul{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.visitor-countries li{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .5rem;border-radius:999px;background:rgba(255,255,255,.08);font-size:.78rem;color:#fff}
.vc-flag{font-size:.95rem;line-height:1}
.vc-cc{font-weight:700;letter-spacing:.02em;color:rgba(255,255,255,.85)}
.vc-n{font-weight:800;color:var(--gold-300);font-variant-numeric:tabular-nums}

/* ---- Visitor analytics (admin) ---- */
.av-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:0 0 1.4rem}
@media(max-width:720px){.av-grid{grid-template-columns:repeat(2,1fr)}}
.av-card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold-500);border-radius:14px;padding:1.1rem 1.2rem}
.av-card b{display:block;font-size:1.9rem;font-weight:800;color:var(--green-900);font-variant-numeric:tabular-nums;line-height:1}
.av-card span{display:block;margin-top:.3rem;font-size:.82rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-600)}
.av-cols{display:grid;grid-template-columns:1.2fr 1fr;gap:1.4rem}
@media(max-width:820px){.av-cols{grid-template-columns:1fr}}
.av-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.3rem;box-shadow:var(--shadow)}
.av-panel h3{margin:.1rem 0 1rem;color:var(--green-900);font-size:1.05rem}
.av-spark{display:flex;align-items:flex-end;gap:3px;height:120px}
.av-spark div{flex:1;min-width:0;background:linear-gradient(180deg,var(--green-500),var(--green-700));border-radius:3px 3px 0 0;position:relative}
.av-spark div span{position:absolute;left:0;right:0;bottom:-18px;text-align:center;font-size:.6rem;color:var(--ink-600)}
.av-co{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.av-co li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem}
.av-co .f{font-size:1.15rem}
.av-co .bar{height:10px;border-radius:999px;background:var(--line);overflow:hidden}
.av-co .bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold-500),var(--gold-300))}
.av-co .nm{font-size:.85rem;color:var(--ink-900)}
.av-co .ct{font-weight:800;color:var(--green-900);font-variant-numeric:tabular-nums}

/* quantized bar sizes (CSP-safe, no inline styles) */
.hbar-0{height:0%} .hbar-5{height:5%} .hbar-10{height:10%} .hbar-15{height:15%} .hbar-20{height:20%} .hbar-25{height:25%} .hbar-30{height:30%} .hbar-35{height:35%} .hbar-40{height:40%} .hbar-45{height:45%} .hbar-50{height:50%} .hbar-55{height:55%} .hbar-60{height:60%} .hbar-65{height:65%} .hbar-70{height:70%} .hbar-75{height:75%} .hbar-80{height:80%} .hbar-85{height:85%} .hbar-90{height:90%} .hbar-95{height:95%} .hbar-100{height:100%} 
.wbar-0{width:0%} .wbar-5{width:5%} .wbar-10{width:10%} .wbar-15{width:15%} .wbar-20{width:20%} .wbar-25{width:25%} .wbar-30{width:30%} .wbar-35{width:35%} .wbar-40{width:40%} .wbar-45{width:45%} .wbar-50{width:50%} .wbar-55{width:55%} .wbar-60{width:60%} .wbar-65{width:65%} .wbar-70{width:70%} .wbar-75{width:75%} .wbar-80{width:80%} .wbar-85{width:85%} .wbar-90{width:90%} .wbar-95{width:95%} .wbar-100{width:100%} 

/* admin stats section */
.admin-stats-sec{margin:0 0 1.8rem}
.admin-h2{margin:0 0 1rem;color:var(--green-900);font-size:1.2rem}
.av-spark div{min-height:2px}

.av-attrib{font-size:.7rem;margin-top:.8rem}

/* ---- Back-to-top button ---- */
.to-top{position:fixed;right:clamp(10px,2vw,20px);bottom:84px;z-index:56;display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.5);border-radius:50%;cursor:pointer;color:#fff;background:linear-gradient(150deg,var(--green-700),var(--green-900));box-shadow:0 8px 22px rgba(8,40,24,.34);opacity:0;transform:translateY(12px) scale(.92);pointer-events:none;transition:opacity .25s ease,transform .25s ease,filter .15s ease}
.to-top::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--gold-300);opacity:.45}
.to-top svg{width:22px;height:22px;position:relative}
.to-top.is-visible{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{filter:brightness(1.08)}
.to-top:focus-visible{outline:3px solid var(--gold-300);outline-offset:2px}
body:not(.has-bottom-ticker) .to-top{bottom:clamp(16px,3vw,28px)}
@media(max-width:560px){.to-top{width:42px;height:42px;bottom:74px}}
@media(prefers-reduced-motion:reduce){.to-top{transition:none}}

/* ---- Share bar (tombol berbagi ke media sosial) ---- */
.share-bar{margin-top:1.1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .8rem}
.share-title{font-size:.92rem;font-weight:700;color:var(--green-900)}
.share-btns{display:flex;flex-wrap:wrap;gap:.5rem}
.share-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .8rem;border-radius:999px;font-size:.85rem;font-weight:600;background:var(--white);color:var(--green-900);border:1px solid var(--line);cursor:pointer;font-family:inherit;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease,border-color .15s ease}
.share-btn svg{width:18px;height:18px;flex:0 0 auto}
.share-btn:hover{text-decoration:none;transform:translateY(-2px);color:#fff;box-shadow:0 6px 14px rgba(0,0,0,.16)}
.share-whatsapp:hover{background:#25D366;border-color:#25D366}
.share-facebook:hover{background:#1877F2;border-color:#1877F2}
.share-x:hover{background:#000;border-color:#000}
.share-telegram:hover{background:#229ED9;border-color:#229ED9}
.share-linkedin:hover{background:#0A66C2;border-color:#0A66C2}
.share-email:hover{background:var(--green-700);border-color:var(--green-700)}
.share-copy:hover,.share-native:hover{background:var(--gold-500);border-color:var(--gold-500);color:var(--green-900)}
.share-copy.is-copied{background:var(--green-700);border-color:var(--green-700);color:#fff}
.share-btn:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px}
@media(max-width:480px){.share-btn-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.share-btn{padding:.55rem}.share-bar{gap:.5rem}}

/* ---- Rundown Milad ---- */
.rundown-facts{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}
.rundown-facts li{display:inline-flex;align-items:center;gap:.45rem;color:var(--green-900);font-weight:600;font-size:.95rem}
.rundown-facts svg{width:18px;height:18px;color:var(--gold-500);flex:0 0 auto}
.rundown-wrap{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--white);border:1px solid var(--line)}
.rundown-table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:680px}
.rundown-table caption{text-align:left}
.rundown-table thead th{background:linear-gradient(160deg,var(--green-700),var(--green-900));color:#fff;text-align:left;font-weight:700;padding:.85rem 1rem;font-size:.85rem;letter-spacing:.02em;white-space:nowrap}
.rundown-table thead .rt-unit{font-weight:500;opacity:.85;font-size:.78rem}
.rundown-table tbody td{padding:.8rem 1rem;border-top:1px solid var(--line);vertical-align:top}
.rundown-table tbody tr:nth-child(even){background:var(--paper-50)}
.rundown-table tbody tr:hover{background:#EAF5EF}
.rt-no{width:42px;color:var(--ink-600);font-variant-numeric:tabular-nums;text-align:center;font-weight:700}
.rt-waktu{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600;color:var(--green-900)}
.rt-keg{min-width:240px;line-height:1.45}
.rt-dur{white-space:nowrap;color:var(--ink-600)}
.rt-link{white-space:nowrap}
.rundown-link{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .8rem;border-radius:999px;font-size:.82rem;font-weight:700;color:#fff;background:var(--green-700);border:1px solid var(--green-700)}
.rundown-link svg{width:15px;height:15px}
.rundown-link:hover{text-decoration:none;background:var(--green-900);border-color:var(--green-900)}
.rundown-soon{display:inline-block;font-size:.8rem;color:var(--ink-600);font-style:italic;opacity:.8}
/* Admin editor */
.admin-tabs{background:var(--white);border-bottom:1px solid var(--line)}
.admin-tabs .container{display:flex;gap:.3rem;flex-wrap:wrap}
.admin-tabs a{padding:.85rem 1.1rem;font-weight:700;font-size:.92rem;color:var(--ink-600);border-bottom:3px solid transparent}
.admin-tabs a:hover{text-decoration:none;color:var(--green-700)}
.admin-tabs a.is-active{color:var(--green-900);border-bottom-color:var(--gold-500)}
.rundown-admin .rt-link{white-space:normal;min-width:240px}
.rundown-admin input[type=url]{width:100%;padding:.5rem .65rem;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:.88rem}
.rundown-admin input[type=url]:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px rgba(63,163,77,.18)}
.rundown-link-test{display:inline-block;margin-top:.3rem;font-size:.85rem;font-weight:700}
.rundown-admin-actions{margin-top:1.2rem;display:flex;justify-content:flex-end}
.rundown-admin-form .rundown-wrap{overflow-x:visible}
@media(max-width:720px){
  .rundown-wrap{overflow-x:visible;border:0;box-shadow:none;background:transparent}
  .rundown-table{min-width:0;font-size:.92rem}
  .rundown-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .rundown-table,.rundown-table tbody,.rundown-table tr,.rundown-table td{display:block;width:100%}
  .rundown-table tr{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold-500);border-radius:12px;box-shadow:var(--shadow);margin-bottom:1rem;padding:.4rem .2rem}
  .rundown-table tbody tr:nth-child(even),.rundown-table tbody tr:hover{background:var(--white)}
  .rundown-table tbody td{border-top:0;padding:.4rem 1rem;display:flex;flex-wrap:wrap;gap:.15rem .8rem;align-items:baseline}
  .rundown-table tbody td::before{content:attr(data-label);font-weight:700;color:var(--green-900);flex:0 0 84px}
  .rundown-table .rt-waktu,.rundown-table .rt-dur,.rundown-table .rt-link{white-space:normal}
  .rundown-table tbody td.rt-no{display:none}
  .rundown-table tbody td.rt-keg{display:block}
  .rundown-table tbody td.rt-keg::before{display:block;margin-bottom:.15rem}
  .rundown-table tbody td.rt-keg{font-weight:600;color:var(--green-900)}
  .rundown-admin input[type=url]{max-width:none;flex:1 1 100%}
  .rundown-table tbody td.rt-mat{display:block}
  .rundown-table tbody td.rt-mat::before{display:block;margin-bottom:.3rem}
}

/* Materi: tombol ganda (file + tautan) */
button.rundown-link{cursor:pointer;font:inherit}
.rt-link .rundown-link{margin:.15rem .35rem .15rem 0}
.rundown-link.is-secondary{background:var(--white);color:var(--green-700)}
.rundown-link.is-secondary:hover{background:var(--green-700);color:#fff;border-color:var(--green-700)}

/* Admin: form materi per baris (link + unggah file) */
.rt-mat{min-width:300px}
.rt-durinline{color:var(--ink-600);font-weight:400}
.materi-form{display:flex;flex-direction:column;gap:.25rem;max-width:440px}
.materi-lbl{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-600);margin-top:.3rem}
.materi-form input[type=url]{width:100%;padding:.5rem .65rem;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:.88rem}
.materi-form input[type=url]:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px rgba(63,163,77,.18)}
.materi-form input[type=file]{font:inherit;font-size:.82rem;max-width:100%}
.materi-current{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;font-size:.84rem;color:var(--ink-600);margin:0;padding:.55rem .75rem;background:var(--paper-50);border:1px solid var(--line);border-radius:9px}
.materi-current a{font-weight:700;color:var(--green-700)}
.materi-file-ico{flex:0 0 auto}
.materi-del{display:inline-flex;align-items:center;gap:.3rem;margin-left:auto;color:#a23b3b;font-weight:600;cursor:pointer}
.materi-save{align-self:flex-start;margin-top:.5rem;padding:.45rem 1.2rem;font-size:.85rem}

/* Modal pratinjau materi */
body.modal-open{overflow:hidden}
.materi-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:clamp(8px,3vw,28px)}
.materi-modal[hidden]{display:none}
.materi-modal-backdrop{position:absolute;inset:0;background:rgba(8,40,24,.62)}
.materi-modal-box{position:relative;z-index:1;background:var(--white);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.45);width:min(960px,calc(100vw - 1.6rem));min-width:0;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;border-top:4px solid var(--gold-500)}
.materi-modal-head{display:flex;align-items:center;gap:1rem;padding:.6rem .6rem .6rem 1.1rem;border-bottom:1px solid var(--line);background:var(--paper-50)}
.materi-modal-title{font-size:1rem;margin:0;color:var(--green-900);font-family:inherit;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.materi-modal-actions{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
.materi-modal-dl{font-size:.85rem;font-weight:700;color:var(--green-700);padding:.4rem .85rem;border:1px solid var(--green-500);border-radius:999px}
.materi-modal-dl:hover{text-decoration:none;background:var(--green-700);color:#fff}
.materi-modal-close{width:38px;height:38px;border:0;background:transparent;font-size:1.7rem;line-height:1;color:var(--ink-600);cursor:pointer;border-radius:8px}
.materi-modal-close:hover{background:#EAF5EF;color:var(--green-900)}
.materi-modal-body{flex:1 1 auto;min-height:0;overflow:auto;background:#525659}
.materi-frame{width:100%;height:78vh;border:0;display:block;background:#fff}
.materi-img{display:block;max-width:100%;margin:0 auto;background:#fff}
.materi-note{padding:1.6rem;color:#fff;text-align:center;margin:0}
.materi-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;padding:2.5rem 1.5rem;min-height:300px;color:#fff}
.materi-fallback svg{width:56px;height:56px;color:var(--gold-300)}
.materi-fb-title{font-weight:700;font-size:1.05rem;margin:.5rem 0 0}
.materi-fb-sub{color:rgba(255,255,255,.78);margin:0;font-size:.9rem}
.materi-fb-open{margin-top:.9rem}
@media(max-width:560px){
  .materi-frame{height:72vh}
  .materi-modal-head{gap:.5rem;padding:.5rem .55rem .5rem .85rem}
  .materi-modal-title{font-size:.9rem}
  .materi-modal-dl{padding:.35rem .65rem;font-size:.78rem}
  .materi-modal-close{width:34px;height:34px;font-size:1.5rem}
}

/* ===== Admin: editor rundown ===== */
.rd-wrap{max-width:880px}
.admin-h2{color:var(--green-900);font-size:1.15rem;margin:1.5rem 0 .8rem}

/* Header */
.rd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:.4rem 0 1.1rem}
.rd-title{margin:0;color:var(--green-900);font-size:1.5rem;font-family:Georgia,'Times New Roman',serif}
.rd-sub{margin:.2rem 0 0;color:var(--ink-600);font-size:.88rem}
.rd-add-toggle{flex:0 0 auto}

/* Shared form bits */
.rd-form{display:flex;flex-direction:column;gap:.7rem}
.rd-grid{display:grid;grid-template-columns:90px 1fr 140px;gap:.6rem}
.rd-f{display:flex;flex-direction:column;gap:.25rem;font-size:.72rem;font-weight:700;color:var(--ink-600);text-transform:uppercase;letter-spacing:.02em}
.rd-f .req{color:#c0392b}
.rd-f input,.rd-f textarea{font:inherit;font-size:.92rem;font-weight:400;text-transform:none;letter-spacing:normal;color:var(--ink-900);padding:.55rem .7rem;border:1px solid var(--line);border-radius:9px;width:100%;background:var(--white)}
.rd-f textarea{resize:vertical;line-height:1.45}
.rd-f input:focus,.rd-f textarea:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px rgba(63,163,77,.18)}
.rd-f input[type=file]{padding:.45rem;font-size:.82rem;background:var(--paper-50)}
.rd-hint{font-size:.8rem;color:var(--ink-600);margin:0}
.rd-f-cap{display:flex;align-items:center;gap:.3rem}
.rd-fhint{font-weight:400;text-transform:none;letter-spacing:normal;font-size:.74rem;color:var(--ink-600)}
.rd-materi{display:flex;flex-direction:column;gap:.7rem;margin-top:.3rem;padding:.95rem 0 0;border-top:1px dashed var(--line)}
.rd-group-label{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--green-700)}
.rd-group-label small{font-weight:600;text-transform:none;letter-spacing:normal;color:var(--ink-600)}
.rd-actions{display:flex;gap:.6rem;align-items:center;margin-top:.4rem;padding-top:.95rem;border-top:1px solid var(--line);flex-wrap:wrap}

/* Tambah sesi (collapsible) */
.rd-add{background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);margin-bottom:1.6rem;overflow:hidden}
.rd-add[open]{border-color:var(--green-500)}
.rd-add-sum{display:flex;align-items:center;gap:.6rem;padding:.95rem 1.1rem;cursor:pointer;font-weight:800;color:var(--green-900);list-style:none;user-select:none}
.rd-add-sum::-webkit-details-marker{display:none}
.rd-add-sum:hover{background:var(--paper-50)}
.rd-add-ico{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(160deg,var(--green-500),var(--green-900));color:#fff;font-weight:800;line-height:1}
.rd-add-sum .rd-caret{margin-left:auto;width:18px;height:18px;color:var(--ink-600);transition:transform .2s ease}
.rd-add[open] .rd-add-sum .rd-caret{transform:rotate(90deg)}
.rd-add-body{padding:0 1.2rem 1.2rem;border-top:1px solid var(--line)}
.rd-add-body .alert{margin-top:1rem}

/* Daftar sesi (collapsible rows) */
.rd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.rd-item{background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 8px rgba(8,64,42,.06);overflow:hidden;transition:box-shadow .15s ease,border-color .15s ease}
.rd-item[open]{border-color:var(--green-500);box-shadow:0 10px 26px rgba(8,64,42,.12)}
.rd-sum{display:flex;align-items:center;gap:.85rem;padding:.7rem .9rem;cursor:pointer;list-style:none;user-select:none}
.rd-sum::-webkit-details-marker{display:none}
.rd-sum:hover{background:var(--paper-50)}
.rd-sum-no{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(160deg,var(--green-700),var(--green-900));color:#fff;font-weight:800;font-size:.85rem;font-variant-numeric:tabular-nums}
.rd-item[open] .rd-sum-no{background:linear-gradient(160deg,#F8EBA6,#E6C95A 55%,#C9962B);color:var(--green-900)}
.rd-sum-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.05rem}
.rd-sum-time{font-size:.76rem;font-weight:700;color:var(--green-700);font-variant-numeric:tabular-nums}
.rd-sum-dur{color:var(--ink-600);font-weight:600}
.rd-sum-keg{font-weight:600;color:var(--green-900);font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-mbadge{flex:0 0 auto;font-size:.72rem;font-weight:700;padding:.25rem .6rem;border-radius:999px;white-space:nowrap}
.rd-mbadge-file{color:#0A66C2;background:rgba(10,102,194,.1)}
.rd-mbadge-link{color:var(--green-700);background:rgba(20,68,28,.09)}
.rd-mbadge-none{color:var(--ink-600);background:var(--paper-50);font-weight:600}
.rd-sum .rd-caret{flex:0 0 auto;width:18px;height:18px;color:var(--ink-600);transition:transform .2s ease}
.rd-item[open] .rd-sum .rd-caret{transform:rotate(90deg)}
.rd-body{padding:.2rem 1.1rem 1.1rem;border-top:1px solid var(--line)}
.rd-body .rd-form{margin-top:1rem}
.rd-empty{margin-top:1rem}

/* Tombol hapus baris */
.btn-del-row{margin-left:auto;background:transparent;border:1px solid #e4b9b9;color:#a23b3b;font:inherit;font-size:.82rem;font-weight:700;padding:.5rem .95rem;border-radius:9px;cursor:pointer}
.btn-del-row:hover{background:#a23b3b;color:#fff;border-color:#a23b3b}

@media(max-width:600px){
  .rd-grid{grid-template-columns:1fr 1fr}
  .rd-grid .rd-f:first-child{grid-column:1/2}
  .rd-sum-keg{white-space:normal}
  .rd-mbadge{display:none}
  .btn-del-row{margin-left:0}
}

/* ===== Rundown: tombol detail + halaman portofolio ===== */
.rundown-link-detail{background:linear-gradient(135deg,#E6C95A,#C9962B);color:var(--green-900);border-color:#C9962B}
.rundown-link-detail:hover{background:linear-gradient(135deg,#C9962B,#a87c1f);border-color:#a87c1f;color:#fff}
.rdd-back{display:inline-block;margin-top:1rem;font-weight:700;color:var(--green-700)}

.rdd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(460px,1fr));gap:1.3rem}
.rdd-card{position:relative;display:flex;min-height:230px;border-radius:18px;overflow:hidden;isolation:isolate;background:linear-gradient(120deg,#8a6c1d 0%,#5a4513 55%,#332608 100%);box-shadow:0 16px 38px rgba(20,12,0,.32)}
.rdd-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80px 80px at 18% 22%,rgba(255,225,150,.28),transparent 70%),radial-gradient(120px 120px at 88% 78%,rgba(255,225,150,.22),transparent 70%),radial-gradient(60px 60px at 70% 18%,rgba(255,235,180,.25),transparent 70%);pointer-events:none}
.rdd-photo{flex:0 0 38%;max-width:230px;background:#6f6f6f;position:relative}
.rdd-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:grayscale(1) contrast(1.03);display:block}
.rdd-photo-ph{position:absolute;inset:0;display:grid;place-items:center;font-family:Georgia,serif;font-weight:800;font-size:3.4rem;color:#fff;background:linear-gradient(160deg,#7a7a7a,#4f4f4f)}
.rdd-body{flex:1 1 auto;min-width:0;padding:1.5rem 1.6rem;color:#fff}
.rdd-logo{position:absolute;top:1.1rem;right:1.2rem;width:48px;height:auto;opacity:.92;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.rdd-field{margin:.12rem 0;font-size:.92rem;color:rgba(255,255,255,.94);padding-right:58px}
.rdd-flabel{color:var(--gold-300);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:.8rem}
.rdd-name{font-family:Georgia,'Times New Roman',serif;font-size:clamp(1.3rem,2.4vw,1.95rem);line-height:1.12;color:#fff;margin:.55rem 0 .35rem;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.rdd-ket{font-style:italic;color:rgba(255,255,255,.82);font-size:.9rem;line-height:1.45;margin:.3rem 0 0}
@media(max-width:600px){
  .rdd-grid{grid-template-columns:1fr}
  .rdd-card{flex-direction:column;min-height:0}
  .rdd-photo{max-width:none;flex-basis:auto;height:300px}
  .rdd-field{padding-right:0}
  .rdd-logo{width:40px}
}

/* Admin: manajer detail rundown */
.rd-grid-detail{grid-template-columns:90px 1fr}
.rd-help{font-size:.84rem;color:var(--ink-600);background:var(--paper-50);border:1px solid var(--line);border-radius:10px;padding:.75rem .95rem;margin:0 0 1.2rem;line-height:1.6}
.rd-help code{background:rgba(20,68,28,.07);padding:.05rem .35rem;border-radius:5px;font-size:.85em}
.rd-sum-thumb{flex:0 0 auto;width:34px;height:34px;border-radius:8px;object-fit:cover;object-position:top center;border:1px solid var(--line)}
.rd-foto-prev{flex:0 0 auto;width:44px;height:44px;border-radius:8px;object-fit:cover;object-position:top center;border:1px solid var(--line)}
.rd-detail-link{font-size:.85rem;padding:.5rem 1rem}
@media(max-width:600px){.rd-grid-detail{grid-template-columns:1fr}}

/* ===== Detail rundown: tombol & Mode Slide ===== */
.rdd-head-actions{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:1rem}
.rdd-slide-btn{display:inline-flex;align-items:center;gap:.5rem}
.rdd-slide-btn svg{width:18px;height:18px}

.slideshow{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:clamp(12px,4vw,40px);background:radial-gradient(120% 100% at 50% 18%,#4a3a10 0%,#241a05 55%,#100b02 100%);outline:none}
.slideshow[hidden]{display:none}
.slideshow::before{content:"";position:absolute;inset:0;background:radial-gradient(90px 90px at 16% 26%,rgba(255,225,150,.18),transparent 70%),radial-gradient(130px 130px at 86% 76%,rgba(255,225,150,.14),transparent 70%),radial-gradient(70px 70px at 72% 16%,rgba(255,235,180,.16),transparent 70%);pointer-events:none}
.ss-topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:1rem;padding:.9rem 1.2rem;color:#fff;z-index:2}
.ss-title{flex:1 1 auto;min-width:0;font-weight:700;font-size:.95rem;color:var(--gold-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-counter{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:700;color:rgba(255,255,255,.85);font-size:.95rem}
.ss-close{flex:0 0 auto;width:42px;height:42px;border:0;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer}
.ss-close:hover{background:rgba(255,255,255,.24)}
.ss-stage{position:relative;z-index:1;width:min(1040px,94vw);display:flex;align-items:center;justify-content:center}
.ss-slide{display:none;width:100%}
.ss-slide.is-active{display:block;animation:ssIn .4s cubic-bezier(.2,.7,.2,1)}
@keyframes ssIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

/* Kartu di mode slide: lebih besar & dramatis */
.slideshow .rdd-card{width:100%;min-height:clamp(320px,52vh,460px);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.slideshow .rdd-photo{flex:0 0 40%;max-width:380px}
.slideshow .rdd-body{padding:clamp(1.4rem,3vw,2.6rem)}
.slideshow .rdd-logo{width:62px;top:1.3rem;right:1.4rem}
.slideshow .rdd-field{font-size:clamp(.95rem,1.5vw,1.18rem);padding-right:70px}
.slideshow .rdd-flabel{font-size:clamp(.82rem,1.3vw,1rem)}
.slideshow .rdd-name{font-size:clamp(1.7rem,4vw,3rem);margin:.7rem 0 .5rem}
.slideshow .rdd-ket{font-size:clamp(.92rem,1.5vw,1.15rem)}

/* Tombol navigasi kiri/kanan */
.ss-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:clamp(46px,6vw,64px);height:clamp(46px,6vw,64px);border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .15s ease,transform .15s ease}
.ss-nav:hover{background:linear-gradient(135deg,#E6C95A,#C9962B);color:var(--green-900)}
.ss-nav svg{width:50%;height:50%}
.ss-prev{left:clamp(8px,2vw,26px)}
.ss-next{right:clamp(8px,2vw,26px)}
.ss-hint{position:absolute;bottom:.9rem;left:0;right:0;z-index:2;text-align:center;color:rgba(255,255,255,.6);font-size:.82rem;margin:0}

@media(max-width:600px){
  .slideshow .rdd-card{flex-direction:column;min-height:0}
  .slideshow .rdd-photo{max-width:none;flex-basis:auto;height:240px}
  .slideshow .rdd-field{padding-right:0}
  .ss-nav{background:rgba(255,255,255,.2)}
}
@media(prefers-reduced-motion:reduce){.ss-slide.is-active{animation:none}}