/* Main layout stylesheet migrated from public/manajemen/css/style.css */
/* This file contains shared layout styles: topbar, navbar, spinner, sections, footer, back-to-top, and component helpers. */

/********** Template CSS **********/
:root {
	/* Brand colors override */
	--bs-primary: #FED000;
	--bs-primary-rgb: 254,208,0;
	--bs-secondary: #8D3A98;
	--bs-secondary-rgb: 141,58,152;
	--bs-tertiary: #797E88;
}

/* Bootstrap utility overrides (template's bootstrap has hard-coded colors) */
.text-primary { color: var(--bs-primary) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.bg-primary { background-color: var(--bs-primary) !important; }
.bg-secondary { background-color: var(--bs-secondary) !important; }

/* Button overrides to match new brand colors */
.btn-primary { color: #000; background-color: var(--bs-primary); border-color: var(--bs-primary); }
.btn-primary:hover { color: #000; background-color: rgb(var(--bs-primary-rgb)); filter: brightness(0.95); border-color: rgb(var(--bs-primary-rgb)); }
.btn-check:focus + .btn-primary, .btn-primary:focus { box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .5); }
.btn-primary:disabled, .btn-primary.disabled { color: #000; background-color: var(--bs-primary); border-color: var(--bs-primary); }

.btn-secondary { color: #fff; background-color: var(--bs-secondary); border-color: var(--bs-secondary); }
.btn-secondary:hover { color: #fff; background-color: #7f3489; border-color: #772f81; }
.btn-check:focus + .btn-secondary, .btn-secondary:focus { box-shadow: 0 0 0 .25rem rgba(var(--bs-secondary-rgb), .5); }
.btn-secondary:disabled, .btn-secondary.disabled { color: #fff; background-color: var(--bs-secondary); border-color: var(--bs-secondary); }

/* Brand logo sizing */
.site-brand .logo-img { max-height:60px; width:auto; display:block; }
@media (max-width: 992px) { .site-brand .logo-img { max-height:50px; } }
@media (max-width: 576px) { 
	.site-brand .logo-img { max-height:44px; }
	/* Increase by ~2px: set to 22px for mobile */
	.site-brand h1 { font-size:22px; }
	/* Stronger selector to override .display-5 from other CSS files */
	.top-bar .site-brand h1.display-5 { font-size: 22px !important; line-height:1 !important; }
}

/* Also apply a stronger override for all handheld/tablet sizes up to 992px so the heading is larger
   (covers most mobile + tablet devices where the user expects a larger brand heading). */
@media (max-width: 991.98px) {
    .top-bar .site-brand h1.display-5 { font-size: 26px !important; line-height:1 !important; }
}

/* Top bar brand text sizing & vertical centering */
.top-bar .site-brand h1 { font-size:2.0rem; line-height:1; font-family:'Open Sans', sans-serif; font-weight:800; }
/* Subtitle styling under brand heading */
.site-brand .brand-text-group { display:flex; flex-direction:column; align-items:flex-start; line-height:1; }
.site-brand .brand-subtitle { font-size:0.65rem; font-weight:600; line-height:1; margin-top:2px; color:#ffffff; white-space:nowrap; }
@media (max-width: 992px) { .site-brand .brand-subtitle { font-size:0.6rem; } }
@media (max-width: 576px) { .site-brand .brand-subtitle { font-size:0.55rem; } }

@media (max-width: 767.98px) {
	.site-brand .brand-subtitle { white-space:normal; }
}

.back-to-top { position: fixed; display: none; right: 30px; bottom: 30px; z-index: 99; }
.fw-bold { font-weight: 700 !important; }
.fw-medium { font-weight: 600 !important; }
.fw-normal { font-weight: 400 !important; }

/* Spinner */
#spinner { opacity: 0; visibility: hidden; transition: opacity .5s ease-out, visibility 0s linear .5s; z-index: 99999; }
#spinner.show { transition: opacity .5s ease-out, visibility 0s linear 0s; visibility: visible; opacity: 1; }

/* Button */
.btn { transition: .5s; }
.btn-square { width: 38px; height: 38px; }
.btn-sm-square { width: 32px; height: 32px; }
.btn-lg-square { width: 48px; height: 48px; }
.btn-square, .btn-sm-square, .btn-lg-square { padding: 0; display: flex; align-items: center; justify-content: center; font-weight: normal; }

/* Top Bar */
.top-bar { height: 90px; padding: 0 90px; }
.top-bar h6 { letter-spacing: 1px; }

/* Reduce desktop top bar side padding */
@media (min-width: 992px){
	.top-bar { padding: 0 40px; }
}

/* Prevent horizontal overflow on handheld widths */
@media (max-width: 991.98px){
	.top-bar { padding: 0 16px; }
}

/* Remove oversized decorative pseudo-elements on small screens to prevent overflow */
@media (max-width: 991.98px) {
	.section-title::before,
	.section-title::after,
	.section-title.text-start::before,
	.section-title.text-start::after,
	.banner .banner-inner::before,
	.banner .banner-inner::after,
	.about-img::before,
	.about-img::after {
		display: none !important;
	}
	html, body { overflow-x: hidden; }
}

/* Keep testimonial yellow shape on mobile but scale/contain it to avoid overflow */
@media (max-width: 991.98px) {
	.testimonial-img{ padding-left:20px !important; overflow:hidden !important; }
	.testimonial-img::before{ width:40% !important; left:0 !important; top:50% !important; transform:translateY(-50%) !important; height:92% !important; }
}
@media (max-width: 767.98px) {
	/* Reduce testimonial image by 30% on phones (becomes 70% width) */
	.testimonial-img img { width: 70% !important; height: auto !important; aspect-ratio: 1/1 !important; display:block; margin-left: 0 !important; }
	/* Slightly reduce left padding so the yellow shape and image align nicely */
	.testimonial-img { padding-left:12px !important; }
}

/* Align testimonial image to the right and scale the yellow shape to match on small screens */
@media (max-width: 767.98px) {
	.testimonial-img { display:flex !important; justify-content:flex-end !important; align-items:center !important; padding-left:12px !important; padding-right:0 !important; }
	.testimonial-img img { width:70% !important; height:auto !important; aspect-ratio:1/1 !important; margin:0 !important; }
	/* Increase the yellow shape width: double previous mobile size (now 70% of container) */
	.testimonial-img::before { width:70% !important; left:0 !important; right:auto !important; top:50% !important; transform:translateY(-50%) !important; height:92% !important; }
}

/* Nav Bar */
.nav-bar { padding: 0 90px; transition: .5s; }
.navbar .navbar-nav .nav-link { margin-right: 30px; padding: 20px 0; color: var(--bs-dark); font-size: 18px; outline: none; }
.navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link.active { color: var(--bs-white); }
.navbar .dropdown-toggle::after { border: none; content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; vertical-align: middle; margin-left: 8px; }
@media (max-width: 991.98px){ .navbar .navbar-nav .nav-link{ margin-right:0; padding:10px 0;} .navbar .navbar-nav{ margin-top:20px; border-top:1px solid var(--bs-white);} }
@media (min-width: 992px){ .navbar .nav-item .dropdown-menu{ display:block; border:none; margin-top:0; top:150%; opacity:0; visibility:hidden; transition:.5s;} .navbar .nav-item:hover .dropdown-menu{ top:100%; visibility:visible; transition:.5s; opacity:1;} }

/* Navbar toggler: remove border/outline and smoothly morph hamburger -> X */
.navbar-dark .navbar-toggler { border: 0; outline: none; box-shadow: none !important; }
.navbar-dark .navbar-toggler:focus, .navbar-dark .navbar-toggler:active { outline: none; box-shadow: none !important; }

/* Build the three bars with the default .navbar-toggler-icon + pseudo elements */
.navbar-dark .navbar-toggler .navbar-toggler-icon {
	width: 24px;
	height: 2px;
	position: relative;
	display: inline-block;
	background-color: rgba(255,255,255,0.9);
	transition: background-color .2s ease, transform .25s ease, opacity .2s ease;
	background-image: none; /* override Bootstrap default */
}
.navbar-dark .navbar-toggler .navbar-toggler-icon::before,
.navbar-dark .navbar-toggler .navbar-toggler-icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: rgba(255,255,255,0.9);
	transition: transform .25s ease, top .25s ease, opacity .2s ease;
}
.navbar-dark .navbar-toggler .navbar-toggler-icon::before { top: -7px; }
.navbar-dark .navbar-toggler .navbar-toggler-icon::after { top: 7px; }

/* Expanded state -> morph to X */
.navbar-dark .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { background-color: transparent; }
.navbar-dark .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
	top: 0;
	transform: rotate(45deg);
}
.navbar-dark .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Mobile navbar should span edge-to-edge while keeping inner padding */
@media (max-width: 991.98px){ .nav-bar{ padding:0; } .navbar{ width:100%; border-radius:0; } }

/* Header Carousel */
.header-carousel{ position:relative; background:url(../manajemen/img/bg.jpg) center center no-repeat; background-size:cover; }
.header-carousel .carousel-img{ position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; }
.header-carousel .carousel-img img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.header-carousel .owl-nav{ position:absolute; top:50%; left:0; transform:translateY(-50%); }
.header-carousel .owl-nav .owl-prev, .header-carousel .owl-nav .owl-next{ width:45px; height:45px; margin:10px 0; display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--bs-dark); background:var(--bs-primary); }

/* Hide carousel prev/next controls on mobile */
@media (max-width: 991.98px) {
	.header-carousel .owl-nav,
	.testimonial-carousel .owl-nav,
	.owl-carousel .owl-nav {
		display: none !important;
	}
}

.page-header{ background:url(../manajemen/img/bg.jpg) center center no-repeat; background-size:cover; }
.page-header .breadcrumb-item+.breadcrumb-item::before{ color:var(--bs-tertiary); }
.page-header .breadcrumb-item, .page-header .breadcrumb-item a{ font-size:18px; color:var(--bs-primary); }
.page-header .breadcrumb-item.active{ color:var(--bs-dark); }

/* Video */
.btn-play{ position:relative; display:block; box-sizing:content-box; width:16px; height:26px; border:none; outline:none !important; padding:18px 20px 20px 28px; background:var(--bs-dark); }
.btn-play:before{ content:""; position:absolute; z-index:0; left:50%; top:50%; transform:translate(-50%,-50%); display:block; width:60px; height:60px; background:var(--bs-dark); animation:pulse-border 1500ms ease-out infinite; }
.btn-play:after{ content:""; position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%); display:block; width:60px; height:60px; background:var(--bs-dark); transition:all 200ms; }
.btn-play span{ display:block; position:relative; z-index:3; width:0; height:0; left:-1px; border-left:16px solid var(--bs-white); border-top:11px solid transparent; border-bottom:11px solid transparent; }
@keyframes pulse-border{ 0%{ transform:translate(-50%,-50%) scale(1); opacity:1;} 100%{ transform:translate(-50%,-50%) scale(2); opacity:0;} }
#videoModal .modal-dialog{ position:relative; max-width:800px; margin:60px auto 0; }
#videoModal .modal-body{ position:relative; padding:0; }
#videoModal .close{ position:absolute; width:30px; height:30px; right:0; top:-30px; z-index:999; font-size:30px; font-weight:normal; color:#fff; background:#000; opacity:1; }

/* Section Title */
.section-title{ position:relative; display:inline-block; text-transform:uppercase; }
.section-title::before{ position:absolute; content:""; width:calc(100% + 80px); height:0; top:5px; left:-40px; border-top:2px solid var(--bs-primary); z-index:-1; }
.section-title::after{ position:absolute; content:""; width:calc(100% + 120px); height:0; bottom:6px; left:-60px; border-bottom:2px solid var(--bs-primary); z-index:-1; }
.section-title.text-start::before{ width:calc(100% + 40px); left:0; }
.section-title.text-start::after{ width:calc(100% + 60px); left:0; }

/* About */
.about-img{ position:relative; }
.about-img::before,.about-img::after{ position:absolute; content:""; width:33%; height:90px; background:#fff; }
.about-img::before{ top:0; left:0; }
.about-img::after{ right:0; bottom:0; }

/* Service */
.service-title{ height:100%; padding:30px; display:flex; flex-direction:column; justify-content:center; background:url(../manajemen/img/bg.jpg) center center no-repeat; background-size:cover; }
.service-item{ overflow:hidden; }
.service-item .btn-square{ width:65px; height:65px; }
.service-item a{ position:relative; padding:0; font-size:14px; line-height:14px; text-transform:uppercase; transition:.5s; }
.service-item a::after{ position:absolute; content:""; width:500%; height:0; left:100%; bottom:3px; margin-left:10px; border-bottom:2px solid var(--bs-primary); }

/* Donation */
.donation-item{ box-shadow:0 0 30px rgba(0,0,0,.05); transition:.5s; }
.donation-item:hover{ box-shadow:0 0 30px rgba(0,0,0,.1); }
.donation-item .donation-progress{ width:80px; }
.donation-item .progress .progress-bar{ height:20px; overflow:visible; transition:3s; }

/* Banner */
.banner .banner-inner{ position:relative; background:url(../manajemen/img/bg.jpg) center center no-repeat; background-size:cover; }
.banner .banner-inner::before, .banner .banner-inner::after{ position:absolute; content:""; width:0; height:0; }
.banner .banner-inner::before{ top:0; left:0; border-top:150px solid var(--bs-primary); border-right:150px solid transparent; }
.banner .banner-inner::after{ right:0; bottom:0; border-bottom:150px solid var(--bs-secondary); border-left:150px solid transparent; }

/* Event */
.event-item{ box-shadow:0 0 30px rgba(0,0,0,.05); transition:.5s; }
.event-item:hover{ box-shadow:0 0 30px rgba(0,0,0,.1); }

/* Donate */
.donate .donate-text{ position:relative; background:url(../manajemen/img/bg.jpg) center center no-repeat; background-size:cover; }
.donate .donate-text::before, .donate .donate-text::after{ position:absolute; content:""; width:0; height:0; }
.donate .donate-text::before{ top:0; left:0; border-top:150px solid var(--bs-primary); border-right:150px solid transparent; }
.donate .donate-text::after{ right:0; bottom:0; border-bottom:150px solid var(--bs-secondary); border-left:150px solid transparent; }
.donate .donate-form .form-control{ border:none; background:rgba(255,255,255,.5); }
.donate .donate-form .btn-group{ display:flex; }
.donate .donate-form .btn-group .btn{ margin:0; padding:0; height:55px; display:flex; align-items:center; justify-content:center; border:none; color:var(--bs-tertiary); background:rgba(255,255,255,.5); }
.donate .donate-form .btn-group .btn-check:checked + .btn{ border:none; background:#fff; }

/* Team */
.team-item{ box-shadow:0 0 30px rgba(0,0,0,.05); transition:.5s; }
.team-item:hover{ box-shadow:0 0 30px rgba(0,0,0,.1); }
.team-item .team-detail span{ letter-spacing:2px; }

/* Testimonial */
.testimonial-title{ height:100%; padding:30px; display:flex; flex-direction:column; justify-content:center; background:url(../manajemen/img/bg.jpg) center center no-repeat; background-size:cover; }
.testimonial-img{ position:relative; padding:45px 0 45px 90px; }
.testimonial-img::before{ position:absolute; content:""; top:0; left:0; width:calc(50% + 45px); height:100%; background:var(--bs-primary); z-index:-1; }
.testimonial-carousel .owl-nav{ position:absolute; top:50%; left:1.5rem; transform:translateY(-50%); display:flex; flex-direction:column; }
.testimonial-carousel .owl-prev, .testimonial-carousel .owl-next{ width:45px; height:45px; margin:10px 0; display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff; background:var(--bs-secondary); transition:.5s; }
.testimonial-carousel .owl-prev:hover, .testimonial-carousel .owl-next:hover{ color:var(--bs-secondary); background:#fff; }
@media (max-width: 768px){ .testimonial-carousel .owl-nav{ top:6.3rem; } }

/* Footer */
.footer{ color:var(--bs-tertiary); background:linear-gradient(rgba(5,19,17,.95), rgba(5,19,17,.95)), url(../manajemen/img/bg-footer.jpg) center center no-repeat; background-size:cover; }
.footer .btn.btn-link{ display:block; margin-bottom:5px; padding:0; text-align:left; color:var(--bs-tertiary); font-weight:normal; text-transform:capitalize; transition:.3s; }
.footer .btn.btn-link::before{ position:relative; content:"\f105"; font-family:"Font Awesome 5 Free"; font-weight:900; margin-right:10px; }
.footer .btn.btn-link:hover{ color:var(--bs-light); letter-spacing:1px; box-shadow:none; }
.footer .copyright{ border-top:1px solid rgba(255,255,255,.1); }

/* Footer: small institute text (tight and smaller) */
.footer .footer-institute { 
	font-size: 11px; 
	line-height: 1; 
	display: block; 
	margin-top: 2px; 
	opacity: 0.95; 
}

/* Ensure footer logo sizing is consistent */
.footer .footer-logo { max-height:40px; width:auto; display:block; }

/* Footer contact alignment: icons align to top of multi-line text */
.footer .footer-contact { align-items: flex-start; }
.footer .footer-contact .me-3 { min-width: 28px; display: flex; align-items: flex-start; }
.footer .footer-contact i { font-size: 18px; color: rgba(255,255,255,0.9); }
.footer .footer-contact-text { color: inherit; }
.footer .footer-contact-text a { color: inherit; text-decoration: underline; }

/* About section: ensure check icons align with multi-line text */
.about-list .about-item { align-items: flex-start; }
.about-list .about-item .me-2 { min-width: 28px; display:flex; align-items:flex-start; }
.about-list .about-item i { color: var(--bs-primary); font-size: 18px; }
.about-list .about-item-text { color: #222; }