/* PUSAKA Global CSS — Modern, Clean, Accessible */

/* ── Announcement Bar ── */
.announcement-bar{background:#0F172A; color:#D1FAE5; font-size:13px; padding:8px 0; overflow:hidden}
.announcement-bar a{color:#F59E0B; text-decoration:underline; font-weight:600}

/* ── Navbar — modern hijau suede, floating pill, glass ── */
.navbar-pusaka{position:sticky; top:0; z-index:1030; padding:10px 0; transition:padding var(--duration) var(--ease)}
.navbar-pusaka .navbar-shell{background:var(--pusaka-suede); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-pill); padding:8px 14px; box-shadow:0 8px 24px rgba(46,74,53,.25), 0 2px 8px rgba(15,23,42,.08); backdrop-filter:blur(12px); transition:all var(--duration) var(--ease)}
.navbar-pusaka.transparent .navbar-shell{background:rgba(63,93,69,.92); backdrop-filter:blur(12px); box-shadow:0 8px 32px rgba(15,23,42,.18)}
.navbar-pusaka.solid .navbar-shell{background:var(--pusaka-suede); box-shadow:0 12px 36px rgba(46,74,53,.32); border-color:rgba(255,255,255,.14)}
.navbar-pusaka .brand{font-family:var(--font-heading); font-weight:700; color:#fff; display:flex; align-items:center; gap:10px}
.navbar-pusaka .brand small{color:rgba(255,255,255,.7)!important}
.navbar-pusaka .brand-mark{width:40px; height:40px; border-radius:12px; background:var(--pusaka-accent); color:#0F172A; display:grid; place-items:center; font-size:18px; box-shadow:0 4px 12px rgba(245,158,11,.3)}
.navbar-pusaka .nav-link{font-weight:500; color:rgba(255,255,255,.9); padding:9px 14px!important; border-radius:999px; position:relative; transition:all var(--duration) var(--ease)}
.navbar-pusaka .nav-link:hover{color:#fff; background:rgba(255,255,255,.14)}
.navbar-pusaka .nav-link.active{color:#0F172A; background:#fff; font-weight:700; box-shadow:0 2px 8px rgba(15,23,42,.12)}
.navbar-pusaka .nav-link.active::after{display:none}
.navbar-pusaka .nav-link.dropdown-toggle::after{border-top-color:rgba(255,255,255,.7)}
.navbar-pusaka .dropdown-menu{border:0; border-radius:16px; box-shadow:var(--shadow-card); padding:8px; min-width:220px; border:1px solid var(--pusaka-slate-200)}
.navbar-pusaka .dropdown-item{border-radius:10px; padding:10px 12px; font-size:14px}
.navbar-pusaka .dropdown-item:hover{background:var(--pusaka-suede-50); color:var(--pusaka-suede)}
.navbar-pusaka .navbar-toggler{border:0; background:#fff; border-radius:999px; padding:8px 12px; box-shadow:0 2px 8px rgba(15,23,42,.12)}
.navbar-pusaka .navbar-toggler-icon{filter:none}
.btn-cta{background:var(--pusaka-accent); color:#0F172A; font-weight:700; border-radius:var(--radius-pill); padding:10px 20px; border:0; transition:transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease)}
.btn-cta:hover{background:var(--pusaka-accent-600); color:#0F172A; transform:translateY(-1px); box-shadow:0 8px 20px rgba(245,158,11,.35)}
.navbar-pusaka .btn-cta{box-shadow:0 4px 14px rgba(245,158,11,.3)}
.btn-ghost{border:1.5px solid var(--pusaka-slate-200); background:#fff; color:var(--pusaka-dark); border-radius:var(--radius-pill); padding:10px 20px; font-weight:600}
.btn-ghost:hover{border-color:var(--pusaka-suede); color:var(--pusaka-suede)}
.navbar-pusaka .btn-ghost{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:#fff}
.navbar-pusaka .btn-ghost:hover{background:#fff; color:var(--pusaka-suede); border-color:#fff}

/* Mobile offcanvas — suede header */
.offcanvas-pusaka{border-radius:20px 0 0 20px; box-shadow:var(--shadow-hover); border-left:4px solid var(--pusaka-suede)}
.offcanvas-pusaka .offcanvas-header{background:var(--pusaka-suede); color:#fff}
.offcanvas-pusaka .offcanvas-header .btn-close{filter:invert(1)}
.offcanvas-pusaka .nav-link{padding:12px 14px!important; font-size:16px; color:var(--pusaka-slate-700)}
.offcanvas-pusaka .nav-link:hover{background:var(--pusaka-suede-50); color:var(--pusaka-suede)}

/* ── Hero ── */
.hero{position:relative; overflow:hidden; background:linear-gradient(135deg, var(--pusaka-primary) 0%, #0A3D30 100%); color:#fff; isolation:isolate}
.hero::before{content:""; position:absolute; inset:0; background:radial-gradient(800px 400px at 80% 10%, rgba(245,158,11,.18), transparent 60%), radial-gradient(600px 300px at 10% 90%, rgba(16,185,129,.18), transparent 60%); pointer-events:none}
.hero-grid{display:grid; gap:32px; align-items:center}
@media(min-width:992px){ .hero-grid{grid-template-columns:1.1fr .9fr} }
.hero-badge{background:var(--pusaka-accent); color:#0F172A; font-weight:700; border-radius:var(--radius-pill); padding:6px 12px; font-size:12px; display:inline-flex; gap:6px; align-items:center}
.hero-title{font-size:clamp(28px, 4.2vw, 48px); line-height:1.05; margin:16px 0 12px; color:#fff}
.hero-lead{color:#D1FAE5; font-size:clamp(15px, 1.6vw, 18px); max-width:52ch}
.hero-card{background:#fff; border-radius:20px; padding:12px; box-shadow:0 20px 60px rgba(0,0,0,.2); transform:rotate(-.6deg); transition:transform var(--duration) var(--ease)}
.hero-card:hover{transform:rotate(0) translateY(-2px)}
.hero-card .carousel-control-prev, .hero-card .carousel-control-next{width:40px; height:40px; top:50%; bottom:auto; transform:translateY(-50%); border-radius:50%; background:rgba(15,23,42,.45); backdrop-filter:blur(4px); opacity:0; transition:opacity var(--duration) var(--ease)}
.hero-card .carousel-control-prev{left:12px}
.hero-card .carousel-control-next{right:12px}
.hero-card:hover .carousel-control-prev, .hero-card:hover .carousel-control-next{opacity:.9}
.hero-card .carousel-control-prev-icon, .hero-card .carousel-control-next-icon{width:18px; height:18px}
.hero-card .carousel-indicators{margin-bottom:10px}
.hero-card .carousel-indicators [data-bs-target]{width:8px; height:8px; border-radius:50%; background:#fff; opacity:.6}
.hero-card .carousel-indicators .active{opacity:1; background:var(--pusaka-accent)}
.hero-card .carousel-item img{aspect-ratio:860/560; object-fit:cover}
.hero-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px}
.hero-stat{background:rgba(255,255,255,.12); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:12px; text-align:center}
.hero-stat strong{display:block; color:#fff; font-size:20px}

/* ── Section Header ── */
.section{padding:64px 0}
@media(min-width:768px){ .section{padding:96px 0} }
.section-alt{background:#fff}
.section-muted{background:var(--pusaka-primary-50)}
.eyebrow{color:var(--pusaka-accent-600); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:12px}
.section-title{font-size:clamp(24px, 3vw, 36px); margin:8px 0 10px}
.section-desc{color:var(--pusaka-slate-500); max-width:60ch}
.section-divider{width:48px; height:4px; background:var(--pusaka-accent); border-radius:2px; margin:12px 0 0}

/* ── Cards ── */
.card-pusaka{background:#fff; border:1px solid var(--pusaka-slate-200); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); transition:transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease)}
.card-pusaka:hover{transform:translateY(-4px); box-shadow:var(--shadow-hover)}
.card-pusaka .thumb{aspect-ratio:16/9; object-fit:cover; width:100%; transition:transform var(--duration) var(--ease)}
.card-pusaka:hover .thumb{transform:scale(1.03)}
.card-pusaka .card-body{padding:18px}
.badge-soft{background:var(--pusaka-primary-50); color:var(--pusaka-primary); border:1px solid #A7F3D0; border-radius:999px; padding:4px 10px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase}

/* News / Teacher / Gallery / Facility specific */
.news-meta{color:var(--pusaka-slate-500); font-size:12px; display:flex; gap:10px; align-items:center}
.teacher-card{text-align:center; padding:18px}
.teacher-card img{width:96px; height:96px; border-radius:50%; object-fit:cover; border:4px solid var(--pusaka-primary-50)}
.gallery-card{position:relative; overflow:hidden; border-radius:16px}
.gallery-card img{height:200px; width:100%; object-fit:cover; transition:transform var(--duration) var(--ease)}
.gallery-card:hover img{transform:scale(1.06)}
.gallery-card .overlay{position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), transparent 55%); display:flex; align-items:flex-end; padding:14px; color:#fff}

/* Facility alternating */
.facility-row{display:grid; gap:24px; align-items:center}
@media(min-width:992px){ .facility-row{grid-template-columns:1fr 1fr} .facility-row.reverse{grid-template-columns:1fr 1fr} .facility-row.reverse > :first-child{order:2} }

/* Stats */
.stat-card{background:#fff; border-radius:16px; padding:22px; text-align:center; border:1px solid var(--pusaka-slate-200); box-shadow:var(--shadow-sm)}
.stat-card strong{font-size:28px; color:var(--pusaka-primary); display:block}

/* Testimonials */
.quote-card{background:#fff; border-radius:16px; padding:20px; border-left:4px solid var(--pusaka-accent); box-shadow:var(--shadow-card)}

/* FAQ accordion */
.accordion-pusaka .accordion-button{font-weight:600; border-radius:12px!important}
.accordion-pusaka .accordion-button:not(.collapsed){background:var(--pusaka-primary-50); color:var(--pusaka-primary)}
.accordion-pusaka .accordion-item{border:1px solid var(--pusaka-slate-200); border-radius:12px; overflow:hidden; margin-bottom:12px}

/* CTA */
.cta-band{background:var(--pusaka-dark); color:#fff; border-radius:24px; padding:32px; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.08)}
.cta-band::before{content:""; position:absolute; inset:auto -40px -40px auto; width:260px; height:260px; background:radial-gradient(circle at center, rgba(245,158,11,.25), transparent 70%); pointer-events:none}

/* Breadcrumb / Pagination */
.breadcrumb{font-size:13px}
.breadcrumb .active{color:var(--pusaka-slate-500)}
.pagination .page-link{border-radius:999px; margin:0 3px; border-color:var(--pusaka-slate-200); color:var(--pusaka-slate-700); min-width:38px; text-align:center}
.pagination .active .page-link{background:var(--pusaka-primary); border-color:var(--pusaka-primary)}

/* Responsive breakpoints fine-tune */
@media(max-width:360px){ .hero-stat{padding:10px} .hero-title{font-size:26px} }
@media(min-width:390px){ .hero-grid{gap:28px} }
@media(min-width:768px){ .cta-band{padding:40px} }
@media(min-width:1024px){ .section{padding:96px 0} }
@media(min-width:1280px){ .container{max-width:1180px} }
@media(min-width:1440px){ .container{max-width:1260px} .hero-title{font-size:52px} }

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

/* Reveal (light scroll animation) */
.reveal{opacity:0; transform:translateY(8px); transition:opacity 500ms var(--ease), transform 500ms var(--ease)}
.reveal.in{opacity:1; transform:none}

/* ── WhatsApp Floating Button ── */
.wa-float{position:fixed; right:18px; bottom:18px; z-index:1040; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; font-size:30px; text-decoration:none; box-shadow:0 8px 24px rgba(37,211,102,.45), 0 2px 8px rgba(15,23,42,.18); transition:transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease)}
.wa-float:hover{color:#fff; transform:translateY(-3px) scale(1.04); box-shadow:0 12px 32px rgba(37,211,102,.5)}
.wa-float::before{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(37,211,102,.6); animation:wa-ping 2.2s ease-out infinite; pointer-events:none}
@keyframes wa-ping{0%{transform:scale(1); opacity:.8}70%{transform:scale(1.35); opacity:0}100%{opacity:0}}
.wa-float .wa-tip{position:absolute; right:66px; top:50%; transform:translateY(-50%) translateX(6px); background:#0F172A; color:#fff; font-size:12px; font-weight:600; padding:8px 12px; border-radius:10px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity var(--duration) var(--ease), transform var(--duration) var(--ease)}
.wa-float:hover .wa-tip, .wa-float:focus-visible .wa-tip{opacity:1; transform:translateY(-50%) translateX(0)}
@media(max-width:576px){ .wa-float{width:52px; height:52px; font-size:26px; right:14px; bottom:14px} .wa-float .wa-tip{display:none} }
@media(prefers-reduced-motion:reduce){ .wa-float::before{animation:none} }