@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--green:#126b45;--green-dark:#084b32;--green-soft:#e8f5ed;--gold:#f2c45d;--ink:#192c24;--muted:#66766d;--line:#e3eae5;--paper:#fff;--tint:#f5f8f5;--radius:22px;--shadow:0 14px 40px rgba(18,66,43,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;font-family:'DM Sans',Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.site-header{height:78px;padding:0 max(5vw,22px);display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.96);border-bottom:1px solid #edf1ed;position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:11px}.brand-mark{width:44px;height:44px;border-radius:15px;background:var(--green);display:grid;place-items:center;font-size:23px;box-shadow:0 6px 14px #126b4525}.brand b{display:block;font-family:Manrope,sans-serif;font-size:16px;letter-spacing:.2px}.brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:.25px}nav{display:flex;align-items:center;gap:25px;font-size:13px;font-weight:700;color:#46564c}nav a:hover{color:var(--green)}.nav-cta{background:var(--green);color:white!important;padding:12px 16px;border-radius:12px}.menu-toggle{display:none;border:0;background:var(--green-soft);padding:9px 12px;border-radius:10px;font-size:20px}.hero{min-height:510px;padding:70px max(7vw,24px);background:radial-gradient(circle at 84% 45%,#2c855b 0,#176c48 28%,#0d5739 55%,#08462f 100%);color:#fff;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;overflow:hidden;position:relative}.hero:after{content:"";position:absolute;width:450px;height:450px;border:1px solid #ffffff17;border-radius:50%;right:-130px;top:-210px}.hero-content{max-width:620px;position:relative;z-index:2}.eyebrow{display:inline-block;font-size:10px;letter-spacing:2.3px;font-weight:800;color:#d5edda;margin-bottom:14px}.eyebrow.dark{color:var(--green)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Manrope,'DM Sans',sans-serif}h1{font-size:clamp(38px,5.2vw,66px);line-height:1.12;letter-spacing:-2px;margin-bottom:20px}h1 em{color:var(--gold);font-style:normal}.hero-content>p{color:#d9e9df;max-width:520px;font-size:15px;line-height:1.8}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:27px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;border:0;border-radius:12px;padding:13px 18px;font-weight:800;font-size:13px;cursor:pointer;transition:transform .2s,box-shadow .2s}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0002}.btn-light{background:#fff;color:var(--green-dark)}.btn-outline{border:1px solid #ffffff65;color:#fff;background:#ffffff0a}.btn-green{background:var(--green);color:#fff}.hero-note{font-size:11px;color:#d6e7dc;margin-top:27px;display:flex;align-items:center;gap:9px}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px #f2c45d22}.hero-art{height:350px;position:relative;display:grid;place-items:center}.orbit{position:absolute;border:1px solid #ffffff28;border-radius:50%;transform:rotate(-25deg)}.orbit-one{width:330px;height:270px}.orbit-two{width:270px;height:350px;transform:rotate(42deg)}.trophy{width:220px;height:220px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#ffffff25,#ffffff08);border:1px solid #ffffff36;font-size:112px;filter:drop-shadow(0 20px 22px #002b1b66);animation:float 4s ease-in-out infinite}.art-tag{position:absolute;background:#fff;color:var(--green-dark);border-radius:11px;padding:9px 13px;font-size:10px;font-weight:900;letter-spacing:1px;box-shadow:var(--shadow)}.tag-one{top:42px;left:12%}.tag-two{right:0;bottom:55px;background:var(--gold)}.art-star{position:absolute;color:var(--gold);font-size:36px}.star-one{top:38px;right:20%}.star-two{bottom:38px;left:17%;font-size:23px}@keyframes float{50%{transform:translateY(-10px) rotate(2deg)}}.section-wrap{width:min(1120px,90%);margin-inline:auto}.stats{display:grid;grid-template-columns:repeat(4,1fr);background:white;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);margin-top:-28px;position:relative;z-index:3;padding:24px 10px}.stat{text-align:center;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:3px}.stat:last-child{border:0}.stat strong{font-family:Manrope,sans-serif;color:var(--green);font-size:24px}.stat span{font-size:11px;color:var(--muted)}.section{padding:86px 0}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:28px}.section-heading h2,.gallery-inner h2,.cta-section h2{font-size:clamp(25px,3vw,36px);line-height:1.25;letter-spacing:-1px;margin-bottom:0}.section-heading>p{max-width:390px;color:var(--muted);font-size:13px;margin-bottom:2px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-card{border:1px solid var(--line);border-radius:var(--radius);padding:26px;background:white;transition:.2s}.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.feature-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;font-size:23px;margin-bottom:18px}.feature-icon.green{background:#e3f4e9}.feature-icon.gold{background:#fff3d6}.feature-icon.purple{background:#f0e8ff}.feature-card h3{font-size:17px;margin-bottom:8px}.feature-card p{font-size:13px;color:var(--muted);margin-bottom:0}.tint{background:var(--tint)}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.info-card{padding:22px;border:1px solid var(--line);border-radius:18px;background:#fff}.info-date{font-size:10px;color:var(--green);font-weight:800;letter-spacing:.8px}.info-card h3{font-size:16px;margin:10px 0}.info-card p{font-size:12px;color:var(--muted);margin:0}.text-link{font-size:12px;color:var(--green);font-weight:800}.filter-row{display:flex;gap:12px;margin-bottom:22px}.filter-row input,.filter-row select{border:1px solid var(--line);background:white;border-radius:12px;padding:12px 14px;outline:none;color:var(--ink)}.filter-row input{flex:1;min-width:0}.filter-row input:focus,.filter-row select:focus{border-color:var(--green);box-shadow:0 0 0 3px #126b4515}.competition-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.competition-card{border:1px solid var(--line);border-radius:19px;padding:21px;background:#fff;display:flex;flex-direction:column;min-height:225px;transition:.2s}.competition-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.comp-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.comp-icon{height:47px;width:47px;display:grid;place-items:center;background:var(--green-soft);border-radius:14px;font-size:23px}.pill{font-size:10px;font-weight:800;color:var(--green);background:var(--green-soft);padding:5px 9px;border-radius:30px}.competition-card h3{font-size:16px;margin:16px 0 6px}.competition-card p{font-size:12px;color:var(--muted);margin-bottom:14px;flex:1}.comp-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:10px;color:#65766b}.comp-register{display:block;text-align:center;background:#f3f7f3;color:var(--green);font-weight:800;font-size:11px;padding:10px;border-radius:10px;margin-top:16px}.small-note{font-size:11px;color:var(--muted);margin-top:17px}.gallery-section{background:var(--green-dark);color:white;padding:75px 0;overflow:hidden}.gallery-inner{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:50px}.gallery-inner>div:first-child>p{font-size:13px;color:#c7ddce;margin-top:15px;max-width:360px}.gallery-tiles{height:245px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:center}.gallery-tile{height:190px;border-radius:19px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;font-size:48px;box-shadow:inset 0 0 0 1px #ffffff20}.gallery-tile span{font-size:11px;font-weight:800;letter-spacing:.6px}.tile-a{background:linear-gradient(150deg,#2b9462,#176341);transform:translateY(-13px)}.tile-b{background:linear-gradient(150deg,#d2a33f,#9d7220);height:220px}.tile-c{background:linear-gradient(150deg,#4778a0,#294e75);transform:translateY(13px)}.cta-section{padding:42px 0;display:flex;align-items:center;justify-content:space-between;gap:24px}.cta-section h2{font-size:25px}.cta-section p{color:var(--muted);font-size:12px;margin:10px 0 0}.site-footer{background:#f4f7f4;border-top:1px solid var(--line);padding:24px max(5vw,22px);display:flex;justify-content:space-between;align-items:center;gap:18px}.site-footer>p{font-size:10px;color:var(--muted);margin:0;text-align:right}.footer-brand .brand-mark{width:37px;height:37px;font-size:18px}.footer-brand b{font-size:13px}.footer-brand small{font-size:9px}.empty-state{grid-column:1/-1;border:1px dashed #cdd9cf;padding:28px;text-align:center;color:var(--muted);border-radius:15px;font-size:13px}.hidden{display:none!important}
@media(max-width:850px){.site-header{padding-inline:5%;height:70px}.menu-toggle{display:block}nav{display:none;position:absolute;left:0;right:0;top:69px;background:white;padding:16px 5% 22px;box-shadow:0 15px 20px #173e2914;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--line)}nav.open{display:flex}nav a{padding:12px 5px}.nav-cta{text-align:center;margin-top:8px}.hero{grid-template-columns:1fr;padding:58px 7% 25px}.hero-art{height:250px;max-width:440px;width:100%;margin:auto}.trophy{width:170px;height:170px;font-size:84px}.orbit-one{width:270px;height:210px}.orbit-two{width:220px;height:290px}.tag-one{left:7%;top:22px}.tag-two{right:3%;bottom:25px}.stats{width:90%;grid-template-columns:repeat(2,1fr);gap:18px;padding:20px 8px}.stat:nth-child(2){border:0}.stat:nth-child(3),.stat:nth-child(4){padding-top:12px;border-top:1px solid var(--line)}.section{padding:62px 0}.section-heading{align-items:start;flex-direction:column;gap:12px}.feature-grid,.info-grid,.competition-grid{grid-template-columns:repeat(2,1fr)}.gallery-inner{grid-template-columns:1fr;gap:25px}.gallery-tiles{max-width:550px;width:100%;margin:auto}.cta-section{align-items:flex-start;flex-direction:column}.site-footer{align-items:flex-start;flex-direction:column}.site-footer>p{text-align:left}}
@media(max-width:520px){h1{font-size:43px}.hero-content>p{font-size:13px}.hero-art{height:225px}.feature-grid,.info-grid,.competition-grid{grid-template-columns:1fr}.feature-card{padding:22px}.section-heading h2{font-size:28px}.filter-row{flex-direction:column}.filter-row select{width:100%}.gallery-tiles{gap:8px;height:200px}.gallery-tile{height:155px;font-size:38px}.tile-b{height:185px}.gallery-tile span{font-size:9px}.cta-section h2{font-size:24px}.stats{margin-top:-18px}.stat strong{font-size:21px}}

/* ===== Papan Juara ===== */
.juara-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.juara-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 6px 18px rgba(18,66,43,.05)}
.juara-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #eef2ef}
.juara-card-head h3{margin:0;font-size:16px;font-family:Manrope,sans-serif}
.juara-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.juara-item{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:9px 10px;border-radius:11px;background:#f8fbf8;font-size:12px}
.juara-item.juara-1{background:linear-gradient(90deg,#fff6dc,#fffdf5);border:1px solid #f2d98a}
.juara-item.juara-2{background:linear-gradient(90deg,#f3f5f7,#fafbfc);border:1px solid #d9dee3}
.juara-item.juara-3{background:linear-gradient(90deg,#fbeee2,#fdf8f3);border:1px solid #ecd0b2}
.medal-badge{font-size:22px;line-height:1}
.juara-name{font-weight:800;color:#192c24;overflow-wrap:anywhere}
.juara-madrasah{font-size:10px;color:#66766d;font-style:italic;overflow-wrap:anywhere;grid-column:2;margin-top:-4px}
.juara-score{font-family:Manrope,sans-serif;font-weight:800;color:var(--green);font-size:14px}
@media(max-width:520px){.juara-item{grid-template-columns:30px 1fr auto;font-size:11px}.medal-badge{font-size:18px}}