*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#171717;background:#f5f5f5}.header{height:68px;position:fixed;z-index:30;top:0;left:2.5%;right:2.5%;background:#fff;border-radius:0 0 38px 38px;display:flex;align-items:center;padding:0 25px 0 18px;box-shadow:0 5px 25px #0002}.logo-wrap{position:relative;align-self:flex-start;background:#fff;width:190px;height:128px;border-radius:0 0 24px 24px;padding:8px 20px;box-shadow:0 8px 20px #0002}.logo-wrap img{width:100%;height:100%;object-fit:contain}.navbar{margin-left:auto;display:flex;align-items:center;gap:27px;height:100%;font-size:13px;font-weight:700}.navbar>a,.nav-dropdown>button{border:0;background:none;height:100%;display:flex;align-items:center;cursor:pointer;color:#111;text-decoration:none;white-space:nowrap}.navbar>a.active{color:#d20b16;border-bottom:3px solid #e1161c}.nav-dropdown{position:relative;height:100%}.nav-dropdown>button span{margin-left:4px}.dropdown-menu{display:none;position:absolute;top:62px;left:-20px;background:#fff;min-width:210px;padding:12px;border-radius:12px;box-shadow:0 12px 30px #0002}.nav-dropdown:hover .dropdown-menu{display:flex}.dropdown-menu a{padding:9px 12px;font-size:12px;text-decoration:none;color:#222;border-radius:7px}.dropdown-menu a:hover{background:#f8e9ea;color:#c8102e}.dropdown-menu.mega{left:-190px;width:470px;display:none;grid-template-columns:1fr 1fr;gap:20px;padding:20px}.usaha-nav:hover .dropdown-menu.mega{display:grid}.mega div{display:flex;flex-direction:column}.mega strong{font-size:10px;color:#c8102e;letter-spacing:.1em;padding:4px 12px 8px}.member-btn{background:#d20b16!important;color:#fff!important;border-radius:25px;padding:0 20px!important;height:42px!important}.mobile-menu{display:none}
.hero{height:527px;position:relative;overflow:hidden;color:#fff;margin-top:0}.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,#07100b 0%,#1d291d 40%,#9b4a35 100%)}.hero-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,#ffcc8860,transparent 30%),linear-gradient(90deg,#0009,#0002)}.hero-content{position:absolute;z-index:3;left:6%;top:132px}.welcome{font-family:cursive;color:#f5bb39;font-size:25px}.hero h1{font-size:49px;line-height:1.04;margin:7px 0 12px;font-weight:900}.hero h1 span{color:#df151b;text-shadow:1px 1px 0 #fff2}.hero p{font-size:15px;margin:0 0 18px}.quick-stats{display:flex;gap:28px}.quick-stats>div{display:flex;align-items:center;gap:10px}.quick-stats i{background:#d7141a;border-radius:50%;width:39px;height:39px;display:grid;place-items:center;font-style:normal}.quick-stats b{font-size:11px;font-weight:500}.quick-stats strong{font-size:14px}.hero-buttons{display:flex;gap:14px;margin-top:18px}.btn{padding:12px 20px;border-radius:7px;text-decoration:none;font-size:12px;font-weight:800}.btn.red,.small-btn{background:#d30c13;color:#fff}.btn.outline{border:1px solid #fff;color:#fff}.hero-logo{position:absolute;z-index:3;right:12%;top:120px;width:370px;height:320px;display:grid;place-items:center}.hero-logo img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 20px #0008)}.dots{position:absolute;bottom:47px;left:46%;display:flex;gap:22px}.dots b{width:11px;height:11px;border-radius:50%;background:#fff}.dots b:first-child{background:#e01b23}
.statbar{width:78%;margin:-30px auto 0;position:relative;z-index:6;background:#fff;border-radius:13px;box-shadow:0 7px 20px #0002;display:grid;grid-template-columns:repeat(4,1fr);padding:17px}.statbar>div{display:grid;grid-template-columns:52px 1fr;align-items:center;padding:5px 24px;border-right:1px solid #ddd}.statbar>div:last-child{border:0}.statbar i{grid-row:span 2;background:#d41219;color:#fff;width:43px;height:43px;border-radius:50%;display:grid;place-items:center;font-style:normal}.statbar strong{font-size:27px}.statbar span{font-size:12px}.dashboard{width:90%;margin:10px auto 18px;display:grid;grid-template-columns:1.05fr 1.35fr .9fr 1.1fr;gap:15px}.panel{background:#fff;border-radius:10px;padding:15px;box-shadow:0 2px 8px #0001}.panel h2{font-size:15px;margin:0 0 10px}.panel h2 span,.section-title small{color:#d30c13}.about p{font-size:11px;line-height:1.55}.photo-placeholder{height:118px;border-radius:5px;background:linear-gradient(135deg,#d8d8d8,#9b9b9b);display:grid;place-items:center;color:#fff;font-size:18px;font-weight:800;text-shadow:0 2px 5px #000}.small-btn{display:block;text-align:center;border-radius:5px;padding:9px 10px;font-size:10px;font-weight:800;text-decoration:none}.unit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.unit-grid a{min-height:58px;border:1px solid #eee;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-decoration:none;color:#111;font-size:8px;font-weight:700;text-align:center;box-shadow:0 2px 5px #0001}.unit-grid span{font-size:21px}.full{margin-top:10px}.news-item{display:flex;gap:10px;border-bottom:1px solid #eee;padding:7px 0}.news-item>b{width:30px;height:30px;background:#d4141b;color:#fff;border-radius:5px;display:grid;place-items:center;font-size:11px}.news-item p{margin:0;font-size:10px}.news-item small{display:block;color:#777}.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.gallery-grid div{height:70px;background:linear-gradient(135deg,#b7c0a8,#536a43);border-radius:5px;color:#fff;display:grid;place-items:center;font-size:9px;font-weight:700;text-align:center;text-shadow:0 2px 4px #000}.section{padding:70px 7%;background:#fff}.section.light{background:#f7f7f7}.section-title{text-align:center;margin-bottom:28px}.section-title small{font-weight:800;letter-spacing:.15em}.section-title h2{font-size:34px;margin:7px 0}.section-title p{color:#666;font-size:13px}.unit-detail-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.unit-detail-grid div{background:#fff;border:1px solid #e6e6e6;border-radius:12px;padding:20px;min-height:130px;box-shadow:0 5px 16px #0000000d}.unit-detail-grid b{display:block;color:#c8102e;font-size:14px;margin-bottom:9px}.unit-detail-grid span{font-size:11px;color:#666;line-height:1.5}.people{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.people div{background:#fff;padding:20px;border-radius:10px;border:1px solid #e6e6e6}.people small{display:block;color:#c8102e;font-size:9px;text-transform:uppercase;margin-bottom:8px}.people b{font-size:14px}.join{margin:0 7% 25px;background:linear-gradient(100deg,#8c0610,#d10d15);color:#fff;padding:30px 40px;border-radius:15px;display:flex;justify-content:space-between;align-items:center}.join h2{margin:5px 0;font-size:27px}.join p{margin:0;font-size:12px}.btn.white{background:#fff;color:#c8102e}.join small{font-size:9px;letter-spacing:.15em}footer{background:#a8080d;color:#fff;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:25px 7%;font-size:11px}footer b{display:block;font-size:12px;margin-bottom:6px}footer span{opacity:.9;line-height:1.6}.copyright{text-align:center;background:#92070b;color:#fff;padding:10px;font-size:10px}.wa{position:fixed;z-index:40;right:22px;bottom:22px;width:52px;height:52px;border-radius:50%;background:#20c968;color:#fff;display:grid;place-items:center;font-size:28px;text-decoration:none;box-shadow:0 5px 16px #0003}
@media(max-width:1000px){.navbar{gap:13px;font-size:11px}.dashboard{grid-template-columns:1fr 1.3fr}.gallery{display:none}.unit-detail-grid{grid-template-columns:repeat(3,1fr)}.hero-logo{right:5%;width:310px}.hero h1{font-size:42px}}
@media(max-width:760px){.header{left:0;right:0;border-radius:0;height:65px}.logo-wrap{width:125px;height:88px}.mobile-menu{display:block;margin-left:auto;background:#d20b16;color:#fff;border:0;border-radius:8px;padding:9px 12px;font-size:20px}.navbar{display:none;position:absolute;top:65px;left:0;right:0;height:auto;background:#fff;flex-direction:column;align-items:stretch;padding:15px 25px;gap:0}.navbar.open{display:flex}.navbar>a,.nav-dropdown>button{height:44px}.nav-dropdown{height:auto}.dropdown-menu,.dropdown-menu.mega{position:static;width:auto;display:none!important;box-shadow:none;border-radius:0;grid-template-columns:1fr;padding:5px 10px}.nav-dropdown.open .dropdown-menu,.usaha-nav.open .dropdown-menu.mega{display:grid!important}.hero{height:680px}.hero-content{left:6%;right:6%;top:125px}.hero h1{font-size:38px}.hero-logo{opacity:.22;right:0;top:260px;width:320px}.quick-stats{gap:10px;flex-wrap:wrap}.statbar{width:92%;grid-template-columns:1fr 1fr}.statbar>div{padding:9px 12px}.dashboard{grid-template-columns:1fr;width:92%}.gallery{display:block}.unit-grid{grid-template-columns:repeat(5,1fr)}.unit-detail-grid{grid-template-columns:1fr 1fr}.people{grid-template-columns:1fr 1fr}.join{margin:0 4% 20px;display:block;text-align:center}.join .btn{display:inline-block;margin-top:15px}footer{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.unit-grid{grid-template-columns:repeat(2,1fr)}.unit-detail-grid,.people{grid-template-columns:1fr}.hero h1{font-size:34px}.welcome{font-size:20px}.hero p{font-size:12px}.hero-logo{width:280px}.statbar{grid-template-columns:1fr}.statbar>div{border-right:0;border-bottom:1px solid #eee}.dashboard{width:94%}footer{grid-template-columns:1fr}.section-title h2{font-size:28px}}

/* V3.2 enhancements */
.photo-placeholder{background:linear-gradient(135deg,#8d9b83,#344b36);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.photo-placeholder span{font-size:34px}.photo-placeholder b{font-size:15px}.photo-placeholder small{font-size:9px;opacity:.9}.services{background:#f7f7f7;padding-top:55px;padding-bottom:55px}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;max-width:1100px;margin:auto}.service-grid a{background:#fff;border:1px solid #eee;border-radius:13px;padding:20px;text-decoration:none;color:#171717;box-shadow:0 5px 15px #0000000b;transition:.2s;display:grid;grid-template-columns:42px 1fr;align-items:center}.service-grid a:hover{transform:translateY(-3px);box-shadow:0 10px 22px #0002}.service-grid span{grid-row:span 2;font-size:25px}.service-grid b{font-size:13px}.service-grid small{color:#777;font-size:10px}.modal{position:fixed;inset:0;background:#0008;z-index:100;display:none;align-items:center;justify-content:center;padding:20px}.modal.show{display:flex}.modal-card{position:relative;background:#fff;border-radius:18px;padding:28px;max-width:480px;width:100%;box-shadow:0 20px 60px #0005}.modal-card>small{color:#d30c13;font-weight:800;letter-spacing:.15em}.modal-card h2{margin:5px 0 20px}.modal-close{position:absolute;right:15px;top:12px;border:0;background:#f2f2f2;border-radius:50%;width:34px;height:34px;font-size:22px;cursor:pointer}.modal-card label{display:block;font-size:11px;font-weight:700;margin:11px 0}.modal-card input,.modal-card textarea,.modal-card select{display:block;width:100%;margin-top:5px;padding:11px;border:1px solid #ddd;border-radius:7px;font:inherit;font-size:12px}.modal-card .btn{border:0;cursor:pointer;width:100%;margin-top:8px}.to-top{position:fixed;z-index:39;right:22px;bottom:85px;width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:#c8102e;box-shadow:0 4px 15px #0003;font-size:20px;cursor:pointer;display:none}.to-top.show{display:block}.version{opacity:.65;margin-left:8px}.member-btn{cursor:pointer}
@media(max-width:760px){.service-grid{grid-template-columns:1fr 1fr}.modal-card{padding:23px}}
@media(max-width:480px){.service-grid{grid-template-columns:1fr}}

.book-product img{width:100%;max-height:260px;object-fit:contain;border-radius:8px;margin-bottom:12px;background:#f6f6f6}.book-product span strong{color:#333}

.gallery-card{background-size:cover!important;background-position:center!important;padding:8px}.gallery-grid .gallery-card{height:90px}
/* V3.6 - susunan konten beranda */
.home-content{width:90%;margin:28px auto 30px;display:flex;flex-direction:column;gap:24px}.home-content .panel{padding:24px}.home-heading{text-align:center;margin-bottom:20px}.home-heading small,.about-copy>small{color:#c8102e;font-size:10px;font-weight:800;letter-spacing:.14em}.home-heading h2,.about-copy h2{font-size:27px;margin:5px 0}.home-heading h2 span,.about-copy h2 span{color:#d30c13}.home-heading p{margin:0;color:#666;font-size:12px}.featured-news{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;background:#f8f8f8;border-radius:12px;overflow:hidden}.featured-news>img{width:100%;height:330px;object-fit:cover}.featured-news>div{padding:22px 28px 22px 0}.featured-news small,.news-list-wide small{color:#c8102e;font-weight:800;font-size:9px}.featured-news h3{font-size:28px;margin:8px 0 12px}.featured-news p{font-size:13px;line-height:1.7;color:#555}.inline-btn{display:inline-block;margin-top:8px;padding:11px 16px}.news-list-wide{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.news-list-wide>div{display:grid;grid-template-columns:155px 1fr;gap:15px;border:1px solid #eee;border-radius:10px;overflow:hidden}.news-list-wide img{width:155px;height:125px;object-fit:cover}.news-list-wide p{margin:0;padding:14px 14px 10px 0}.news-list-wide strong,.news-list-wide span{display:block}.news-list-wide strong{font-size:14px;margin:6px 0}.news-list-wide span{font-size:10px;line-height:1.5;color:#666}.news-more{max-width:260px;margin:18px auto 0}.home-gallery-grid{grid-template-columns:repeat(4,1fr);gap:12px}.home-gallery-grid .gallery-card{height:190px;font-size:12px;align-items:end;padding:18px}.home-units .unit-grid{grid-template-columns:repeat(5,1fr);gap:12px}.home-units .unit-grid a{min-height:92px;font-size:10px}.home-about{display:grid;grid-template-columns:1.05fr 1fr;gap:30px;align-items:center}.about-photo img{width:100%;height:330px;object-fit:cover;border-radius:10px}.about-copy{padding:10px 25px 10px 0}.about-copy p{font-size:13px;line-height:1.8;color:#555}.hero-bg{background-image:linear-gradient(90deg,rgba(5,20,10,.88),rgba(5,20,10,.45),rgba(120,45,25,.38)),url('progres-gedung-30-juli-2026-2.jfif');background-size:cover;background-position:center}.hero-bg:after{background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 65%)}
@media(max-width:900px){.featured-news,.home-about{grid-template-columns:1fr}.featured-news>div,.about-copy{padding:20px}.news-list-wide{grid-template-columns:1fr}.home-gallery-grid{grid-template-columns:1fr 1fr}.home-units .unit-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.home-content{width:94%}.home-content .panel{padding:14px}.featured-news>img{height:230px}.featured-news h3{font-size:22px}.news-list-wide>div{grid-template-columns:110px 1fr}.news-list-wide img{width:110px;height:120px}.home-gallery-grid{grid-template-columns:1fr}.home-gallery-grid .gallery-card{height:180px}.home-units .unit-grid{grid-template-columns:1fr 1fr}.about-photo img{height:230px}}