@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap');

/* Minimal styling adapted from Agency theme */
html, body { margin: 0; height: 100%; }
body { margin: 0; padding-top: 72px; font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif }

/* Header (Beranda) - fill viewport and center */
.masthead {
	position: relative;
	background: linear-gradient(90deg,#0d6efd88,#6610f388);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.masthead::before{
  content: "";
  position: absolute;
  inset: 0;
	background: rgba(0,0,0,0.5); /* 50% black overlay */
	z-index: 1;
	pointer-events: none; /* allow clicks through overlay (so carousel controls work) */
}
.masthead .container{position:relative; z-index:2}

/* Hero school logo in masthead */
.masthead .school-logo {
	/* place logo in normal document flow so it appears above title/slogan */
	position: relative;
	display: block;
	margin: 0 auto 14px auto;
	width: 120px;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(0,0,0,0.12);
	transition: transform 220ms ease, box-shadow 220ms ease;
	z-index: 4;
}
.masthead .school-logo:hover {
	transform: scale(1.08);
	box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}

.masthead .carousel{ position:absolute; inset:0; z-index:0 }
.masthead .carousel-inner, .masthead .carousel-item{ height:100% }
.masthead .carousel-item img{ width:100%; height:100%; object-fit:cover; object-position: top center }

/* Pull masthead up so banners reach the very top under the fixed navbar */
.masthead {
	margin-top: -72px; /* same as body padding-top */
	padding-top: 72px;
}

/* Ensure navbar sits above the masthead/overlay */
.navbar { z-index: 1050; }

.masthead .carousel-control-prev,
.masthead .carousel-control-next{
	top:50%;
	transform:translateY(-50%);
	z-index:3; /* above overlay and images */
	width:6%;
}
.masthead .carousel-control-prev-icon, .masthead .carousel-control-next-icon{height:48px; width:48px}
h1, .masthead h1 {font-size:3rem; font-family: inherit}
h2, h1, .section-heading { font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif }
h2, .section-heading { font-family: inherit }

/* Beranda title: prefer Google Sans (Product Sans) if available, fallback to Montserrat */
#beranda-title {
  font-family: 'Google Sans', 'Product Sans', 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700; /* bold */
  letter-spacing: 0.2px;
}

/* All main sections fill the viewport height */
section {
	min-height: 100vh;
	padding: 80px 0;
}

.section-heading{margin-bottom:1rem}
.section-heading{margin-bottom:1rem}
.footer{position:relative; padding:2rem 0}

/* Front page school brand */
.school-brand img{border-radius:6px}

/* Navbar school brand styling */
.navbar-brand img{border-radius:6px}
.navbar-brand #nav-school-name{font-weight:600}

/* Responsive rules for navbar school brand */
/* Default: show logo and name */
#nav-school-logo{display:inline-block; max-height:40px}

/* Small screens: hide name, reduce logo size */
@media (max-width: 575.98px) {
	#nav-school-name{display:none}
	#nav-school-logo{max-height:28px}
}

/* Very small: hide logo if necessary */
@media (max-width: 350px) {
	#nav-school-logo{max-height:22px}
}

/* Ensure navbar-brand aligns nicely */
.navbar-brand{display:flex; align-items:center; gap:8px}

/* Highlight active nav link */
	/* adjust masthead pullup to match reduced navbar height */
	.masthead { margin-top: -64px; padding-top: 64px; }
.navbar-nav .nav-link.active {
	font-weight: 700;
	color: #ffffff !important;
	text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Make the top navbar a light grey translucent bar with blur */
.navbar {
	background-color: rgba(128,128,128,0.08); /* light grey, low opacity */
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background-color 220ms ease, box-shadow 220ms ease;
}

/* Slightly stronger on scroll - add class `scrolled` from JS if desired */
.navbar.scrolled {
	background-color: #ffffff; /* solid white on scroll */
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: 0 6px 18px rgba(0,0,0,0.06);
	border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* When navbar is scrolled and background is white, make links dark */
.navbar.scrolled .nav-link,
.navbar.scrolled .navbar-brand #nav-school-name {
	color: #111111 !important;
	text-shadow: none !important;
}
.navbar.scrolled .nav-link:hover,
.navbar.scrolled .nav-link:focus { color: #000 !important; }

/* Toggler on white background: make border/icon dark */
.navbar.scrolled .navbar-toggler { border-color: rgba(0,0,0,0.12); }
.navbar.scrolled .navbar-toggler-icon { filter: none; }

/* Make navbar text white with slight drop shadow so it reads on images */
.navbar .nav-link, .navbar .navbar-brand #nav-school-name {
	color: #ffffff !important;
	text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.navbar .nav-link:hover, .navbar .nav-link:focus { color: #ffffff !important; text-decoration: none; filter: brightness(1.02); }

/* Toggler styling for dark/translucent navbar */
.navbar-toggler { border-color: rgba(255,255,255,0.15); }
.navbar-toggler-icon { filter: invert(1) brightness(2); }

/* Active link is highlighted by color only (no decorative bar) */

/* Berita cards on front page: use same card layout as all-posts and left-align text */
#berita .card { overflow: hidden; }
#berita .card .card-body { display:flex; flex-direction:column; align-items:stretch; text-align:left; }
#berita .card .card-title { text-transform:uppercase; font-weight:700; }
#berita .card .card-text { text-align:justify; text-justify:inter-word; }
#berita .card .text-muted { text-align:left; }

/* All posts page styles */
#allpage-list .row > .col { margin-bottom:1.25rem; }
#berita .row > .col { margin-bottom:1.25rem; }
#allpage-list .card, #berita .card {
	border-radius:12px;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(0,0,0,0.10);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	border: none;
}
#allpage-list .card:hover, #berita .card:hover {
	transform: translateY(-6px) scale(1.02);
	box-shadow: 0 18px 40px rgba(0,0,0,0.16);
}
#allpage-list .allpage-thumb, #berita .allpage-thumb { overflow: hidden; height: 220px; }
#allpage-list .allpage-thumb img, #berita .allpage-thumb img { width:100%; height:100%; object-fit:cover; transition: transform 0.35s ease; display:block; }
#allpage-list .card:hover .allpage-thumb img, #berita .card:hover .allpage-thumb img { transform: scale(1.06); }
#allpage-list .card-body, #berita .card-body { padding: 1rem; }

/* page container subtle rounded background */
.page-section { border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,0.04); padding: 1rem; }

/* Make cards equal-height and keep footer at bottom */
.card.h-100 { display: flex; flex-direction: column; }
.card.h-100 .card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.card.h-100 .card-body .card-text { flex: 1 1 auto; }
.card.h-100 .card-body .card-footer { margin-top: auto; display: flex; justify-content: flex-end; padding-top: 0.75rem; }

/* ensure thumbnail area has fixed height for consistent card size */
.allpage-thumb { height: 220px; display: block; overflow: hidden; }
.allpage-thumb img { width:100%; height:100%; object-fit: cover; display:block; }

/* Responsive adjustments for tablet and mobile */
@media (max-width: 992px) {
	body { padding-top: 64px; }
	.masthead { min-height: 60vh; }
	.masthead h1 { font-size: 2.25rem; }
	section { min-height: auto; padding: 60px 0; }
	.page-section { padding: 0.85rem; }
	.allpage-thumb { height: 180px; }
	.card.h-100 .card-body { padding: 0.9rem; }
}

@media (max-width: 575.98px) {
	body { padding-top: 56px; }
	.masthead { min-height: 50vh; }
	.masthead h1 { font-size: 1.9rem; }
	.section-heading { font-size: 1.25rem; }
	.page-section { padding: 0.6rem; }
	.allpage-thumb { height: 140px; }
	.card.h-100 .card-body { padding: 0.7rem; }
	.card-title { font-size: 1rem; }
	.navbar-brand #nav-school-name { font-size: 0.95rem; }
	/* ensure modal dialogs fit small screens nicely */
	.modal-dialog { max-width: 95%; margin: 1rem auto; }
	/* ensure buttons/taps are comfortably large */
	.btn { padding: 0.45rem 0.7rem; }
	/* adjust masthead pullup to match reduced navbar height */
	.masthead { margin-top: -56px; padding-top: 56px; }
}
@media (max-width: 360px) {
	.allpage-thumb { height: 120px; }
	.masthead h1 { font-size: 1.6rem; }
}

/* Back to home button (placed above main on secondary pages) */
.back-home-container{ display:flex; justify-content:center; padding:12px 0; }
.back-home-btn{
	display:inline-block;
	background: linear-gradient(90deg,#0d6efd,#0069f3);
	color:#fff;
	padding:0.55rem 1.1rem;
	border-radius:12px;
	font-weight:600;
	box-shadow: 0 10px 24px rgba(13,110,253,0.14);
	transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
	text-decoration:none;
	border: none;
}
.back-home-btn:hover, .back-home-btn:focus{
	transform: translateY(-3px) scale(1.03);
	box-shadow: 0 22px 52px rgba(13,110,253,0.18);
	filter: brightness(1.03);
	text-decoration:none;
}
.back-home-btn:active{ transform: translateY(-1px) scale(1.01); }

/* Top block used on secondary pages (all_posts, all_gtk) */
.top-block{
	height:72px;
	background: linear-gradient(90deg,#0d6efd,#6610f3);
	box-shadow: 0 6px 18px rgba(13,110,253,0.12);
}
/* Ensure main content doesn't hide under fixed navbar */

/* Remove separating line from card footers for cleaner look */
.card .card-footer {
	border-top: 0 !important;
	background: transparent !important;
	padding-top: 0.75rem;
}

/* Specific overrides for berita and allpage lists (extra safety) */
#allpage-list .card-footer, #berita .card-footer {
	border-top: 0 !important;
	background: transparent !important;
}

/* GTK grid: 4 columns on large screens, up to 2 rows (up to 8 items) */
.gtk-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}
.gtk-card {
	background: #fff;
	border-radius: 10px;
	padding: 0.5rem;
	box-shadow: 0 6px 16px rgba(0,0,0,0.06);
	display: flex;
	gap: 0.75rem;
	align-items: center;
	transition: transform 220ms ease, box-shadow 220ms ease;
	transform-origin: center center;
	cursor: pointer;
}
.gtk-card:hover {
	transform: translateY(-6px) scale(1.03);
	box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}
.gtk-thumb { width: 72px; height: 72px; overflow: hidden; flex: 0 0 72px; }
.gtk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius:6px; transition: transform 350ms ease; }
.gtk-card:hover .gtk-thumb img { transform: scale(1.06); }

/* GTK detail modal image */
.gtk-detail-img { width: 160px; height: 160px; object-fit: cover; border-radius: 8px; display: block; }
.gtk-body { flex: 1 1 auto; }
.gtk-name { font-weight:700; font-size:0.95rem }
.gtk-jab { font-size:0.85rem }
.gtk-nip { font-size:0.78rem }

@media (max-width: 1200px) {
	.gtk-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
	.gtk-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.gtk-grid { grid-template-columns: repeat(2, 1fr); }
	.gtk-card { padding: 0.5rem; }
}
@media (max-width: 400px) {
	.gtk-grid { grid-template-columns: 1fr; }
}

/* Responsive adjustments for masthead logo: size and spacing */
@media (max-width: 992px) {
	.masthead .school-logo { width: 100px; margin-bottom: 12px; }
}
@media (max-width: 575.98px) {
	.masthead .school-logo { width: 88px; margin-bottom: 10px; }
}

/* Float-up animation for content reveal */
@keyframes floatUp {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.float-onview { opacity: 0; transform: translateY(12px); }
.float-up { animation: floatUp 1400ms cubic-bezier(.2,.9,.2,1) both; }

}

/* Profil Sekolah capsule button in beranda */
.school-profile-btn {
	border-radius: 999px;
	padding: .6rem 1.6rem;
	font-weight: 600;
	letter-spacing: .2px;
	transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease, background-color 180ms ease;
	box-shadow: 0 8px 22px rgba(13,110,253,0.12);
}
.school-profile-btn:hover, .school-profile-btn:focus {
	transform: translateY(-3px) scale(1.03);
	box-shadow: 0 20px 46px rgba(13,110,253,0.18);
	filter: brightness(1.03);
}
.school-profile-btn:active {
	transform: translateY(-1px) scale(1.01);
}

@media (max-width: 575.98px) {
	.school-profile-btn { padding: .5rem 1.2rem; font-size: .95rem; }
}

/* Announcement running text in masthead */
.ann-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;background:linear-gradient(135deg,#ff5f6d,#ffc371);color:#fff}
.ann-icon i{font-size:1.05rem}
.ann-clip{overflow:hidden}
.ann-track{display:inline-block;white-space:nowrap;padding-left:10px;padding-right:calc(30px + 30%);color:#fff}
.masthead .ann-clip .ann-track{background: transparent; padding:8px 14px; border-radius:10px}

/* keyframe for horizontal scroll - extended distance by 30% */
@keyframes scroll-left {
	0% { transform: translateX(130%); }
	100% { transform: translateX(-130%); }
}
.ann-track.scrolling { animation: scroll-left linear infinite; }

@media (max-width: 575.98px) {
	.ann-icon{width:36px;height:36px}
}

/* Container that holds the announcement runner */
.ann-container{
	width:70%; /* shortened ~20% from previous 88% */
	max-width:780px;
	margin:0 auto;
	background: rgba(0,0,0,0.45); /* semi-transparent black */
	padding:6px 10px;
	border-radius:12px;
	display:flex;
	justify-content:center;
	align-items:center;
	box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.ann-clip{overflow:hidden; flex:1}

@media (max-width: 575.98px) {
	.ann-container{ width:95%; padding:6px; }
	.ann-track{ padding-right:calc(24px + 30%); }
}

/* Vanta background for Humas section */
#humas { position: relative; overflow: hidden; }
#humas canvas { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; z-index: 1; }
#humas .container { position: relative; z-index: 2; }

/* Fasilitas cards grid */
.fasilitas-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	align-items: stretch;
}
.fasilitas-card {
	background: #fff;
	border-radius: 14px;
	padding: 0.75rem;
	box-shadow: 0 8px 22px rgba(0,0,0,0.06);
	overflow: hidden;
	transition: transform 280ms cubic-bezier(.2,.9,.2,1), box-shadow 280ms cubic-bezier(.2,.9,.2,1);
	cursor: default;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.fasilitas-card:hover {
	transform: translateY(-6px) scale(1.02);
	box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}
.fasilitas-thumb { width:100%; height:160px; overflow:hidden; border-radius:10px; flex:0 0 160px; }
.fasilitas-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition: transform 300ms cubic-bezier(.2,.9,.2,1); }
.fasilitas-card:hover .fasilitas-thumb img { transform: scale(1.04); }
.fasilitas-body { padding-top:0.6rem; display:flex; flex-direction:column; flex:1 1 auto; }
.fasilitas-title { font-weight:700; margin-bottom:0.35rem; font-size:1.05rem }
.fasilitas-desc { color:#555; font-size:0.95rem; flex:1 1 auto; }

@media (max-width: 992px) { .fasilitas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .fasilitas-grid { grid-template-columns: 1fr; } .fasilitas-thumb { height:140px; } }

/* Humas profile card + social icon styles */
.humas-card { border-radius: 12px; background: #fff; box-shadow: 0 8px 26px rgba(0,0,0,0.06); }
.humas-thumb img { width:96px; height:96px; object-fit:cover; border-radius:8px; display:block; }
.humas-info .humas-name { font-weight:700; font-size:1.05rem }
.humas-info .humas-jab { font-size:0.9rem }
.humas-social { display:flex; align-items:center; gap:0.5rem }
.social-icon { width:56px; height:56px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; color:#444; background:linear-gradient(180deg,#fff,#fafafa); transition: transform 180ms ease, box-shadow 180ms ease, color 180ms ease; text-decoration:none }
.social-icon i { transition: transform 180ms ease }
.social-icon:hover { transform: translateY(-8px) scale(1.12); box-shadow: 0 20px 48px rgba(0,0,0,0.16); color: #111 }
.social-icon.disabled { opacity:0.45; pointer-events:none }

/* layout for two-column Humas row */
.humas-row { display:flex; gap:1rem; align-items:flex-start; justify-content:center; }
.humas-col { flex: 1 1 50%; min-width:240px; }
.humas-profile { }
.humas-contact { }

/* Portrait image inside left card */
.humas-profile .humas-thumb img { width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:8px; }

@media (max-width: 768px) {
	.humas-row { flex-direction: column; align-items: stretch; }
	.humas-contact { order: 2; }
	.social-btn span { display:none; }
}