/* ==========================================================================
   SMA Theresiana 1 — Custom Theme Design System
   main.css v1.0.0
   ========================================================================== */

/* ==========================================================================
   01. Custom Properties (Design Tokens)
   ========================================================================== */
:root {
	/* Green Palette */
	--th-green-900: #1e2b1a;
	--th-green-800: #2d3a29;
	--th-green-700: #4b6043;
	--th-green-600: #658354;
	--th-green-500: #75975e;
	--th-green-400: #8cad74;
	--th-green-300: #a3c585;
	--th-green-200: #b3cf99;
	--th-green-150: #c7ddb5;
	--th-green-100: #ddead1;
	--th-green-50:  #eef5e6;

	/* Neutrals */
	--th-white:     #ffffff;
	--th-gray-900:  #111827;
	--th-gray-800:  #1f2937;
	--th-gray-700:  #374151;
	--th-gray-600:  #4b5563;
	--th-gray-500:  #6b7280;
	--th-gray-400:  #9ca3af;
	--th-gray-300:  #d1d5db;
	--th-gray-200:  #e5e7eb;
	--th-gray-100:  #f3f4f6;
	--th-gray-50:   #f9fafb;

	/* Typography */
	--th-font-head: 'Raleway', sans-serif;
	--th-font-body: 'Inter', sans-serif;

	/* Shadows */
	--th-shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
	--th-shadow-sm: 0 1px 6px rgba(45,58,41,0.08), 0 2px 4px rgba(0,0,0,0.04);
	--th-shadow-md: 0 4px 16px rgba(45,58,41,0.12), 0 2px 8px rgba(0,0,0,0.06);
	--th-shadow-lg: 0 12px 40px rgba(45,58,41,0.18), 0 4px 16px rgba(0,0,0,0.08);
	--th-shadow-xl: 0 24px 64px rgba(45,58,41,0.22);

	/* Border Radius */
	--th-radius-xs: 4px;
	--th-radius-sm: 8px;
	--th-radius-md: 16px;
	--th-radius-lg: 24px;
	--th-radius-xl: 32px;

	/* Transitions */
	--th-transition:       0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--th-transition-fast:  0.15s cubic-bezier(0.4, 0, 0.2, 1);
	--th-transition-slow:  0.5s cubic-bezier(0.4, 0, 0.2, 1);

	/* Layout */
	--th-container:  1200px;
	--th-header-h:   64px;
}

body.dark-mode {
	/* Inverted Neutrals for Dark Mode - Made more grayish instead of pure black */
	--th-white:     #1e1e1e;
	--th-gray-50:   #242424;
	--th-gray-100:  #2a2a2a;
	--th-gray-200:  #333333;
	--th-gray-300:  #404040;
	--th-gray-400:  #525252;
	--th-gray-500:  #6b7280;
	--th-gray-600:  #9ca3af;
	--th-gray-700:  #d1d5db;
	--th-gray-800:  #e5e7eb;
	--th-gray-900:  #f3f4f6;

	/* Subtle Green background tints for dark mode */
	--th-green-50:  #232e1f;
	--th-green-100: #2d3a29;

	/* Stronger Shadows */
	--th-shadow-sm: 0 1px 6px rgba(0,0,0,0.5);
	--th-shadow-md: 0 4px 16px rgba(0,0,0,0.6);
	--th-shadow-lg: 0 12px 40px rgba(0,0,0,0.8);
}

/* ==========================================================================
   01b. Custom Color Palettes
   ========================================================================== */

/* Color Palette: Teal (Blue-Green) */
body.palette-teal {
	--th-green-900: #154e44;
	--th-green-800: #1e6e60;
	--th-green-700: #289381;
	--th-green-600: #4da494;
	--th-green-500: #72b6a8;
	--th-green-400: #97c8bc;
	--th-green-300: #bcdbd1;
	--th-green-200: #d0e6df;
	--th-green-150: #e1f0eb;
	--th-green-100: #ebf5f2;
	--th-green-50:  #f4fafa;
}
body.palette-teal.dark-mode {
	--th-green-50:  #0d2924;
	--th-green-100: #154e44;
}

/* Color Palette: Emerald (Forest Green) */
body.palette-emerald {
	--th-green-900: #1a4524;
	--th-green-800: #2a6939;
	--th-green-700: #398b4e;
	--th-green-600: #48ac64;
	--th-green-500: #62be7b;
	--th-green-400: #81cf95;
	--th-green-300: #a0e0b0;
	--th-green-200: #c1f0cb;
	--th-green-150: #d1f4d9;
	--th-green-100: #e2f9e7;
	--th-green-50:  #f0fcf3;
}
body.palette-emerald.dark-mode {
	--th-green-50:  #0e2413;
	--th-green-100: #1a4524;
}

/* ==========================================================================
   02. Reset + Base
   ========================================================================== */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	font-size: 16px;
}

body {
	font-family: var(--th-font-body);
	font-size: 15px;
	color: var(--th-gray-800);
	line-height: 1.72;
	background: var(--th-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

img, video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--th-green-700);
	text-decoration: none;
	transition: color var(--th-transition-fast);
}
a:hover { color: var(--th-green-600); }

button { font-family: inherit; cursor: pointer; }

input, textarea, select { font-family: inherit; }

ul, ol { list-style: none; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--th-gray-100); }
::-webkit-scrollbar-thumb { background: var(--th-green-400); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--th-green-600); }

/* Screen Reader */
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	word-wrap: normal;
}
.screen-reader-text:focus {
	width: auto; height: auto;
	clip: auto;
	background: var(--th-green-600);
	color: white;
	padding: 12px 20px;
	top: 8px; left: 8px;
	z-index: 99999;
	border-radius: var(--th-radius-sm);
	font: 700 14px var(--th-font-body);
}

/* ==========================================================================
   03. Typography
   ========================================================================== */
.th-eyebrow {
	display: inline-block;
	font-family: var(--th-font-body);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	color: var(--th-green-600);
}

.th-heading-xl {
	font-family: var(--th-font-head);
	font-size: clamp(36px, 6vw, 72px);
	font-weight: 800;
	line-height: 1.08;
	color: var(--th-gray-900);
	letter-spacing: -0.02em;
}

.th-heading-lg {
	font-family: var(--th-font-head);
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--th-gray-900);
	letter-spacing: -0.015em;
}

.th-heading-md {
	font-family: var(--th-font-head);
	font-size: clamp(20px, 2.5vw, 32px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--th-gray-900);
}

.th-heading-sm {
	font-family: var(--th-font-head);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--th-gray-900);
}

.th-text-lead {
	font-size: 17px;
	color: var(--th-gray-500);
	line-height: 1.8;
}

.th-text-body {
	font-size: 15px;
	color: var(--th-gray-700);
	line-height: 1.75;
}

/* ==========================================================================
   04. Layout
   ========================================================================== */
.th-container {
	max-width: var(--th-container);
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
}

.th-section {
	padding: 100px 0;
}

.th-section--sm { padding: 64px 0; }
.th-section--lg { padding: 130px 0; }

.th-section--alt {
	background: var(--th-green-50);
}

.th-section--dark {
	background: linear-gradient(135deg, var(--th-green-800) 0%, var(--th-green-900) 100%);
	color: var(--th-white);
}

.th-section--green {
	background: linear-gradient(135deg, var(--th-green-700) 0%, var(--th-green-800) 100%);
}

.th-section__header {
	text-align: center;
	margin-bottom: 64px;
}

.th-section__header .th-eyebrow {
	margin-bottom: 14px;
}

.th-section__header .th-heading-lg {
	margin-bottom: 18px;
}

.th-section__header .th-text-lead {
	max-width: 600px;
	margin: 0 auto;
}

.th-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.th-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.th-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* ==========================================================================
   05. Buttons
   ========================================================================== */
.th-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--th-font-body);
	font-size: 14px;
	font-weight: 700;
	padding: 14px 32px;
	border-radius: 100px;
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: all var(--th-transition);
	letter-spacing: 0.3px;
	white-space: nowrap;
	position: relative;
	overflow: hidden;
}

.th-btn--primary {
	background: var(--th-green-600);
	color: var(--th-white);
	border-color: var(--th-green-600);
}
.th-btn--primary:hover {
	background: var(--th-green-700);
	border-color: var(--th-green-700);
	color: var(--th-white);
	transform: translateY(-2px);
	box-shadow: var(--th-shadow-md);
}

.th-btn--outline {
	background: transparent;
	color: var(--th-white);
	border-color: rgba(255,255,255,0.6);
}
.th-btn--outline:hover {
	background: var(--th-white);
	color: var(--th-green-700);
	border-color: var(--th-white);
}

.th-btn--outline-green {
	background: transparent;
	color: var(--th-green-700);
	border-color: var(--th-green-200);
}
.th-btn--outline-green:hover {
	background: var(--th-green-700);
	color: var(--th-white);
	border-color: var(--th-green-700);
	transform: translateY(-2px);
	box-shadow: var(--th-shadow-md);
}

.th-btn--text {
	background: none;
	border-color: transparent;
	color: var(--th-green-600);
	padding: 0;
	gap: 6px;
	font-size: 13px;
}
.th-btn--text:hover { color: var(--th-green-800); gap: 10px; }
.th-btn--text i { transition: transform var(--th-transition-fast); font-size: 11px; }
.th-btn--text:hover i { transform: translateX(3px); }

/* ==========================================================================
   06. Header
   ========================================================================== */
.th-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	min-height: var(--th-header-h);
	padding: 12px 0;
	z-index: 9999;
	background: transparent;
	transition: background var(--th-transition), box-shadow var(--th-transition), padding var(--th-transition);
}

.th-header.scrolled {
	background: rgba(255,255,255,0.97);
	backdrop-filter: blur(12px);
	box-shadow: var(--th-shadow-sm);
	padding: 8px 0;
}
body.dark-mode .th-header.scrolled {
	background: rgba(26, 26, 26, 0.97);
	box-shadow: 0 2px 20px rgba(0,0,0,0.8);
}

.th-nav {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.th-header .th-container {
	max-width: 100%;
	padding: 0 32px;
}

.th-nav__left,
.th-nav__right {
	display: flex;
	align-items: center;
	flex: 1;
	flex-shrink: 0;
	min-width: max-content;
}

.th-nav__left {
	justify-content: flex-start;
	gap: 20px;
}

.th-nav__center {
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
	white-space: nowrap;
}

.th-nav__right {
	justify-content: flex-end;
	gap: 16px;
}

/* Logo */
.th-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	flex-shrink: 0;
}

.th-logo img,
.th-logo .custom-logo {
	max-height: 52px !important;
	width: auto !important;
	height: auto !important;
	filter: none !important;
	-webkit-filter: none !important;
	object-fit: contain !important;
	display: block !important;
	transition: max-height var(--th-transition);
}

.th-header.scrolled .th-logo img,
.th-header.scrolled .th-logo .custom-logo {
	max-height: 42px !important;
}

/* Transparent header: invert logo to white */
.th-logo__text {
	font-family: var(--th-font-head);
	font-size: 18px;
	font-weight: 800;
	color: var(--th-green-600);
	transition: color var(--th-transition);
	line-height: 1.2;
}

.th-header.scrolled .th-logo__text { color: var(--th-green-800); }

/* Desktop Menu */
.th-menu {
	display: flex;
	gap: 2px;
	list-style: none;
	flex: 1;
	justify-content: center;
}

.th-menu__item,
.th-menu .menu-item { position: relative; }

.th-menu__link,
.th-menu li > a {
	display: block;
	padding: 8px 10px;
	font-family: var(--th-font-body);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--th-green-600);
	border-radius: var(--th-radius-sm);
	text-decoration: none;
	transition: all var(--th-transition-fast);
	position: relative;
	white-space: nowrap;
}

.th-header.scrolled .th-menu__link,
.th-header.scrolled .th-menu li > a {
	color: var(--th-gray-700);
}

.th-menu__link:hover,
.th-menu li > a:hover,
.th-menu .current-menu-item > a,
.th-menu .th-menu__link.active {
	background: var(--th-green-50);
	color: var(--th-green-700);
}

.th-header.scrolled .th-menu__link:hover,
.th-header.scrolled .th-menu li > a:hover,
.th-header.scrolled .th-menu .current-menu-item > a {
	background: var(--th-green-50);
	color: var(--th-green-700);
}

/* Dropdown Menus (.sub-menu) */
.th-menu .menu-item-has-children {
	position: relative;
}

.th-menu .menu-item-has-children > a::after {
	content: '\f107'; /* FontAwesome angle-down */
	font-family: 'FontAwesome';
	margin-left: 6px;
	font-weight: normal;
}

.th-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--th-white);
	min-width: 280px;
	list-style: none;
	padding: 10px 0;
	margin: 0;
	border-radius: var(--th-radius-sm);
	box-shadow: var(--th-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all var(--th-transition-fast);
	z-index: 100;
	border: 1px solid var(--th-gray-200);
}

.th-menu .menu-item-has-children:hover > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.th-menu .sub-menu li {
	display: block;
	width: 100%;
}

.th-menu .sub-menu li > a {
	padding: 10px 20px;
	color: var(--th-gray-700);
	border-radius: 0;
	white-space: normal;
	line-height: 1.5;
}

.th-menu .sub-menu li > a:hover {
	background: var(--th-green-50);
	color: var(--th-green-700);
}

/* Mobile Adjustments for Sub-menu */
.th-mobile-menu .sub-menu {
	list-style: none;
	padding-left: 15px;
	margin-top: 5px;
}
.th-mobile-menu .sub-menu li > a {
	font-size: 14px;
	padding: 8px 0;
	color: rgba(255,255,255,0.7);
}
.th-mobile-menu .sub-menu li > a:hover {
	color: var(--th-white);
	background: transparent;
}

/* Header Actions & Search */
.th-header-search {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	padding: 4px 12px;
	transition: background 0.3s ease;
}
.th-header.scrolled .th-header-search {
	background: rgba(0, 0, 0, 0.05);
}
body.dark-mode .th-header-search {
	background: rgba(255, 255, 255, 0.1);
}
.th-header-search__field {
	border: none;
	background: transparent;
	padding: 6px;
	font-size: 14px;
	outline: none;
	width: 120px;
	color: var(--th-green-600);
	transition: width 0.3s ease;
}
.th-header-search__field::placeholder { color: var(--th-green-600); }

.th-header.scrolled .th-header-search__field { color: var(--th-gray-800); }
.th-header.scrolled .th-header-search__field::placeholder { color: var(--th-gray-500); }

body.dark-mode .th-header.scrolled .th-header-search__field { color: var(--th-white); }
body.dark-mode .th-header.scrolled .th-header-search__field::placeholder { color: rgba(255,255,255,0.7); }

.th-header-search__field:focus {
	width: 160px;
}
.th-header-search__submit {
	border: none;
	background: transparent;
	cursor: pointer;
	color: var(--th-green-600);
	padding: 6px;
	transition: color 0.3s ease;
}
.th-header.scrolled .th-header-search__submit { color: var(--th-gray-600); }
body.dark-mode .th-header.scrolled .th-header-search__submit { color: rgba(255,255,255,0.85); }
.th-header-search__submit:hover { color: var(--th-green-400); }

/* ----------------------------------------------------
   Home Page Specific Header Overrides
   (White text when unscrolled on Home Page)
   ---------------------------------------------------- */
.home .th-logo__text { color: var(--th-white); }
.home .th-menu__link, .home .th-menu li > a { color: rgba(255, 255, 255, 0.92); }
.home .th-menu__link:hover, .home .th-menu li > a:hover {
	background: rgba(255, 255, 255, 0.15);
	color: var(--th-white);
}
.home .th-header-search__field { color: var(--th-white); }
.home .th-header-search__field::placeholder { color: rgba(255, 255, 255, 0.7); }
.home .th-header-search__submit { color: var(--th-white); }
.home .th-theme-toggle { color: var(--th-white); background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); }

/* Ensure scrolled header on Home page uses standard dark/green text */
.home .th-header.scrolled .th-logo__text { color: var(--th-green-800); }
.home .th-header.scrolled .th-menu__link, 
.home .th-header.scrolled .th-menu li > a { color: var(--th-gray-700); }
.home .th-header.scrolled .th-header-search__field { color: var(--th-gray-800); }
.home .th-header.scrolled .th-header-search__field::placeholder { color: var(--th-gray-500); }
.home .th-header.scrolled .th-header-search__submit { color: var(--th-gray-600); }
.home .th-header.scrolled .th-theme-toggle { background: rgba(0, 0, 0, 0.05); border-color: transparent; color: var(--th-gray-600); }

/* Theme Toggle & Admin Link */
.th-theme-toggle {
	background: rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 50%;
	width: 38px;
	height: 38px;
	font-size: 16px;
	cursor: pointer;
	color: var(--th-green-600);
	transition: all var(--th-transition-fast);
	display: flex;
	align-items: center;
	justify-content: center;
}
.th-header.scrolled .th-theme-toggle {
	background: rgba(0, 0, 0, 0.05);
	border-color: transparent;
	color: var(--th-gray-600);
}
body.dark-mode .th-header.scrolled .th-theme-toggle {
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.85);
}
.th-theme-toggle:hover {
	color: var(--th-green-500);
	background: rgba(255, 255, 255, 0.2);
}

.th-admin-hidden-link {
	display: inline-block;
	width: 24px;
	height: 24px;
	opacity: 0;
	cursor: default;
}

/* Hamburger */
.th-hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: var(--th-radius-sm);
	padding: 8px;
	transition: all var(--th-transition-fast);
}

.th-header.scrolled .th-hamburger {
	background: var(--th-gray-100);
	border-color: var(--th-gray-200);
}

.th-hamburger__bar {
	display: block;
	height: 2px;
	background: rgba(255,255,255,0.9);
	border-radius: 2px;
	transition: all var(--th-transition);
	transform-origin: center;
}

.th-header.scrolled .th-hamburger__bar { background: var(--th-gray-700); }

.th-hamburger.is-open .th-hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.th-hamburger.is-open .th-hamburger__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.th-hamburger.is-open .th-hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Nav */
.th-mobile-nav {
	position: fixed;
	top: 0; right: 0;
	width: min(360px, 90vw);
	height: 100%;
	background: rgba(45, 58, 41, 0.92); /* Transparansi sedikit */
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-left: 1px solid rgba(255,255,255,0.15); /* Outline popup */
	box-shadow: var(--th-shadow-lg);
	z-index: 10000;
	transform: translateX(100%);
	transition: transform var(--th-transition-slow);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.th-mobile-nav.open { transform: translateX(0); }

.th-mobile-nav__inner { padding: 24px; flex: 1; }

.th-mobile-nav__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}

.th-mobile-nav__header .th-logo img { filter: brightness(0) invert(1); }
.th-mobile-nav__header .th-logo__text { color: var(--th-white); }

.th-mobile-nav__close {
	width: 36px; height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.2);
	color: var(--th-white);
	display: flex; align-items: center; justify-content: center;
	font-size: 16px;
	transition: background var(--th-transition-fast);
}
.th-mobile-nav__close:hover { background: rgba(255,255,255,0.2); }

/* Mobile Search */
.th-mobile-search {
	display: flex;
	margin-bottom: 24px;
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 100px;
	overflow: hidden;
}
.th-mobile-search__field {
	flex: 1;
	background: transparent;
	border: none;
	padding: 12px 16px;
	color: var(--th-white);
	font: 14px var(--th-font-body);
	outline: none;
}
.th-mobile-search__field::placeholder {
	color: rgba(255,255,255,0.5);
}
.th-mobile-search__submit {
	background: transparent;
	border: none;
	padding: 0 16px;
	color: var(--th-white);
}

.th-mobile-menu { list-style: none; }
.th-mobile-menu li {
	border-bottom: 1px solid rgba(255,255,255,0.07);
}
.th-mobile-menu li a {
	display: block;
	padding: 15px 4px;
	font: 600 15px var(--th-font-body);
	color: rgba(255,255,255,0.85);
	text-decoration: none;
	transition: all var(--th-transition-fast);
}
.th-mobile-menu li a:hover { color: var(--th-white); padding-left: 8px; }
.th-mobile-menu .current-menu-item > a { color: var(--th-green-200); }

.th-mobile-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	z-index: 9998;
	opacity: 0;
	visibility: hidden;
	transition: all var(--th-transition);
	backdrop-filter: blur(2px);
}
.th-mobile-overlay.open { opacity: 1; visibility: visible; }

/* ==========================================================================
   07. Hero Section
   ========================================================================== */
.th-hero {
	position: relative;
	min-height: 100vh;
	height: auto;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--th-green-800);
	padding: 140px 0 100px; /* Accounts for header and bottom spacing */
}

.th-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.th-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.2); /* 20% opacity white (80% menghilang) */
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	z-index: 1;
}

.th-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 0 24px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.th-hero__content.th-container {
	margin: 0 auto;
}

.th-hero__text-content {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.th-hero__eyebrow {
	color: var(--th-white);
	background: var(--th-green-600);
	padding: 4px 12px;
	border-radius: 100px;
	margin-bottom: 24px;
	display: inline-block;
}

.th-hero__title {
	font-family: var(--th-font-head);
	font-size: clamp(32px, 6vw, 34px);
	font-weight: 800;
	line-height: 1.07;
	color: var(--th-white);
	text-shadow: 0 2px 10px rgba(0,0,0,0.5);
	letter-spacing: -0.02em;
	margin-bottom: 22px;
	max-width: 800px;
}

.th-hero__subtitle {
	font-size: clamp(15px, 1.8vw, 18px);
	color: rgba(255,255,255,0.9);
	text-shadow: 0 1px 4px rgba(0,0,0,0.6);
	line-height: 1.7;
	max-width: 600px;
}

/* ==========================================================================
   Featured Slider (Vanilla CSS Scroll Snap)
   ========================================================================== */
/* Featured Slider inside Hero */
.th-featured-slider {
	position: relative;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

.th-featured-slider__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none; /* Hide scrollbar Firefox */
	padding-bottom: 10px;
}
.th-featured-slider__track::-webkit-scrollbar {
	display: none; /* Hide scrollbar Chrome/Safari */
}

.th-featured-slider__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.th-fs-card-wrapper {
	display: flex;
	flex-direction: column;
	gap: 15px;
	height: auto;
}

.th-fs-card-image-box {
	background: rgba(255,255,255,0.95);
	border-radius: var(--th-radius-md);
	overflow: hidden;
	box-shadow: var(--th-shadow-lg);
	height: 400px;
}
.th-fs-card-image-box img {
	width: 100%;
	height: 100%;
	/* object-fit: cover; */
}

.th-fs-card-content-box {
	background: rgba(255,255,255,0.95);
	border-radius: var(--th-radius-md);
	box-shadow: var(--th-shadow-lg);
	backdrop-filter: blur(10px);
	padding: 24px;
	text-align: left;
	overflow: visible;
}
body.dark-mode .th-fs-card-content-box {
	background: rgba(30, 30, 30, 0.95);
}
.th-fs-card__meta {
	font-size: 12px;
	color: var(--th-green-600);
	font-weight: 600;
	margin-bottom: 8px;
}
.th-fs-card__title {
	font-size: 18px;
	font-family: var(--th-font-head);
	font-weight: 700;
	color: var(--th-gray-900);
	margin-bottom: 10px;
	line-height: 1.3;
}
.th-fs-card__title a { color: inherit; text-decoration: none; }
.th-fs-card__title a:hover { color: var(--th-green-600); }
.th-fs-card__excerpt {
	font-size: 13px;
	color: var(--th-gray-600);
	margin-bottom: 16px;
	line-height: 1.6;
}

.th-featured-slider__controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
}

.th-fs-arrow {
	position: absolute;
	top: 210px; /* 100px is the middle of the 200px image box */
	transform: translateY(-50%);
	z-index: 999; /* Bumped to prevent being blocked by other layers */
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(255,255,255,0.3);
	color: var(--th-white);
	width: 40px; height: 40px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: all var(--th-transition-fast);
	backdrop-filter: blur(4px);
}
.th-fs-arrow:hover { background: rgba(0, 0, 0, 0.7); }

.th-fs-arrow--prev {
	left: -20px;
}
.th-fs-arrow--next {
	right: -20px;
}

@media (max-width: 640px) {
	.th-fs-arrow--prev { left: 10px; }
	.th-fs-arrow--next { right: 10px; }
}

.th-fs-dots {
	display: flex;
	gap: 8px;
}
.th-fs-dot {
	width: 8px; height: 8px;
	border-radius: 4px;
	background: rgba(255,255,255,0.4);
	cursor: pointer;
	border: none;
	transition: all 0.3s ease;
}
.th-fs-dot.active {
	background: var(--th-white);
	width: 20px;
}

/* Hero Scroll Indicator */
.th-hero__scroll {
	position: absolute;
	bottom: 32px;
	right: 32px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.th-hero__scroll span {
	display: block;
	width: 1.5px;
	height: 48px;
	background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
	animation: th-scroll-pulse 2s ease-in-out infinite;
}

@keyframes th-scroll-pulse {
	0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
	40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
	60%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
	100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.th-hero__scroll span { animation: none; opacity: 0.5; }
}

/* ==========================================================================
   08. About Section
   ========================================================================== */
.th-about {
	background: linear-gradient(160deg, var(--th-white) 55%, var(--th-green-50) 100%);
}

.th-about__inner {
	display: grid;
	grid-template-columns: 55fr 45fr;
	gap: 72px;
	align-items: center;
}

.th-about__content .th-eyebrow { margin-bottom: 18px; }

.th-about__content .th-heading-lg { margin-bottom: 20px; }

.th-about__body {
	color: var(--th-gray-600);
	font-size: 15.5px;
	line-height: 1.8;
	margin-bottom: 32px;
}
.th-about__body p { margin-bottom: 14px; }
.th-about__body p:last-child { margin-bottom: 0; }

.th-about__actions { margin-bottom: 0; }

.th-about__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 48px;
	padding-top: 40px;
	border-top: 1px solid var(--th-green-100);
}

.th-about__stat { text-align: center; }

.th-about__stat-num {
	display: block;
	font-family: var(--th-font-head);
	font-size: 42px;
	font-weight: 800;
	color: var(--th-green-700);
	line-height: 1;
	margin-bottom: 6px;
}

.th-about__stat-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--th-gray-500);
}

/* Image Column */
.th-about__image-col { position: relative; }

.th-about__image {
	width: 100%;
	border-radius: var(--th-radius-xl);
	object-fit: cover;
	aspect-ratio: 4/5;
	box-shadow: var(--th-shadow-xl);
}

.th-about__image-placeholder {
	width: 100%;
	aspect-ratio: 4/5;
	border-radius: var(--th-radius-xl);
	background: linear-gradient(135deg, var(--th-green-100) 0%, var(--th-green-200) 100%);
}

.th-about__image-badge {
	position: absolute;
	bottom: -28px;
	right: -28px;
	background: var(--th-white);
	border-radius: var(--th-radius-md);
	padding: 20px 26px;
	box-shadow: var(--th-shadow-lg);
	text-align: center;
}

/* Visi Misi */
.th-visimisi { padding: 0 0 0; margin-top: 64px; }

.th-visimisi__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.th-visimisi__card {
	background: var(--th-white);
	border-radius: var(--th-radius-md);
	padding: 36px 32px;
	box-shadow: var(--th-shadow-sm);
	border-left: 4px solid var(--th-green-500);
	transition: all var(--th-transition);
}
.th-visimisi__card:hover {
	box-shadow: var(--th-shadow-md);
	transform: translateY(-4px);
	border-left-color: var(--th-green-600);
}

.th-visimisi__icon {
	width: 52px; height: 52px;
	border-radius: 50%;
	background: var(--th-green-50);
	color: var(--th-green-600);
	display: flex; align-items: center; justify-content: center;
	font-size: 22px;
	margin-bottom: 20px;
	transition: all var(--th-transition);
}
.th-visimisi__card:hover .th-visimisi__icon {
	background: var(--th-green-600);
	color: var(--th-white);
}

.th-visimisi__heading {
	font-family: var(--th-font-head);
	font-size: 18px;
	font-weight: 700;
	color: var(--th-gray-900);
	margin-bottom: 12px;
}

.th-visimisi__body {
	font-size: 14px;
	color: var(--th-gray-600);
	line-height: 1.75;
}

/* ==========================================================================
   09. Kurikulum Section
   ========================================================================== */
.th-kurikulum {
	padding: 100px 0;
	background: linear-gradient(135deg, var(--th-green-700) 0%, var(--th-green-800) 100%);
	color: var(--th-white);
	position: relative;
	overflow: hidden;
}

.th-kurikulum::before {
	content: '';
	position: absolute;
	top: -100px; right: -100px;
	width: 400px; height: 400px;
	border-radius: 50%;
	background: rgba(255,255,255,0.03);
	pointer-events: none;
}

.th-kurikulum .th-section__header .th-heading-lg { color: var(--th-white); }
.th-kurikulum .th-section__header .th-eyebrow { color: rgba(255,255,255,0.65); }
.th-kurikulum .th-section__header .th-text-lead { color: rgba(255,255,255,0.72); }

.th-kurikulum__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 28px;
}

.th-kurikulum__card {
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.11);
	border-radius: var(--th-radius-md);
	padding: 40px 32px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: all var(--th-transition);
}
.th-kurikulum__card:hover {
	background: rgba(255,255,255,0.13);
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(0,0,0,0.2);
	border-color: rgba(255,255,255,0.2);
}

.th-kurikulum__card-icon {
	width: 64px; height: 64px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	color: var(--th-white);
	display: flex; align-items: center; justify-content: center;
	font-size: 26px;
	margin-bottom: 24px;
	transition: all var(--th-transition);
}
.th-kurikulum__card:hover .th-kurikulum__card-icon {
	background: var(--th-green-500);
	transform: scale(1.08);
}

.th-kurikulum__card-title {
	font-family: var(--th-font-head);
	font-size: 19px;
	font-weight: 700;
	color: var(--th-white);
	margin-bottom: 14px;
	line-height: 1.3;
}

.th-kurikulum__card-body {
	font-size: 14px;
	color: rgba(255,255,255,0.72);
	line-height: 1.78;
	margin-bottom: 24px;
}

.th-kurikulum__card-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--th-green-200);
	text-decoration: none;
	transition: all var(--th-transition-fast);
}
.th-kurikulum__card-link:hover { color: var(--th-white); gap: 10px; }
.th-kurikulum__card-link i { font-size: 11px; transition: transform var(--th-transition-fast); }
.th-kurikulum__card-link:hover i { transform: translateX(3px); }

/* ==========================================================================
   10. News Section
   ========================================================================== */
.th-news { background: var(--th-white); }

.th-news__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 40px;
	gap: 24px;
}

.th-news__header-text .th-eyebrow { margin-bottom: 10px; }

.th-news__nav {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

.th-news__arrow {
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1.5px solid var(--th-green-200);
	color: var(--th-green-600);
	background: transparent;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px;
	cursor: pointer;
	transition: all var(--th-transition-fast);
}
.th-news__arrow:hover {
	background: var(--th-green-600);
	color: var(--th-white);
	border-color: var(--th-green-600);
}
.th-news__arrow:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.th-news__slider {
	overflow: hidden;
	position: relative;
	margin: 0 -12px;
	padding: 0 12px;
}

.th-news__track {
	display: flex;
	gap: 24px;
	cursor: grab;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
}
.th-news__track::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}
.th-news__track:active { cursor: grabbing; }

.th-news__card {
	flex: 0 0 340px;
	background: var(--th-white);
	border-radius: var(--th-radius-md);
	box-shadow: var(--th-shadow-sm);
	overflow: hidden;
	border: 1px solid var(--th-green-50);
	transition: all var(--th-transition);
	user-select: none;
	scroll-snap-align: start;
}
.th-news__card:hover {
	box-shadow: var(--th-shadow-md);
	transform: translateY(-4px);
}

.th-news__card-thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.th-news__card-thumb img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
	pointer-events: none;
}
.th-news__card:hover .th-news__card-thumb img { transform: scale(1.04); }

.th-news__card-body { padding: 24px; }

.th-news__card-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.th-news__card-cat {
	background: var(--th-green-50);
	color: var(--th-green-700);
	font: 700 11px var(--th-font-body);
	padding: 3px 10px;
	border-radius: 100px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-decoration: none;
	transition: all var(--th-transition-fast);
}
.th-news__card-cat:hover { background: var(--th-green-600); color: var(--th-white); }

.th-news__card-date {
	font-size: 12px;
	color: var(--th-gray-400);
}

.th-news__card-title {
	font-family: var(--th-font-head);
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.38;
	margin-bottom: 10px;
}
.th-news__card-title a {
	color: var(--th-gray-900);
	text-decoration: none;
	transition: color var(--th-transition-fast);
}
.th-news__card-title a:hover { color: var(--th-green-700); }

.th-news__card-excerpt {
	font-size: 13.5px;
	color: var(--th-gray-500);
	line-height: 1.7;
	margin-bottom: 16px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.th-news__cta { margin-top: 48px; text-align: center; }

/* ==========================================================================
   11. Video Section
   ========================================================================== */
.th-video {
	padding: 100px 0;
	background: linear-gradient(135deg, var(--th-green-800) 0%, var(--th-green-900) 100%);
	position: relative;
	overflow: hidden;
}

.th-video::before {
	content: '';
	position: absolute;
	bottom: -80px; left: -80px;
	width: 300px; height: 300px;
	border-radius: 50%;
	background: rgba(255,255,255,0.03);
	pointer-events: none;
}

.th-video .th-section__header .th-heading-lg { color: var(--th-white); }
.th-video .th-section__header .th-eyebrow   { color: rgba(255,255,255,0.65); }

.th-video__embed {
	max-width: 860px;
	margin: 0 auto;
	border-radius: var(--th-radius-lg);
	overflow: hidden;
	box-shadow: 0 32px 80px rgba(0,0,0,0.45);
	border: 1.5px solid rgba(255,255,255,0.08);
}

.th-video__frame iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: none;
}

/* ==========================================================================
   11b. News Archive (Semua Berita)
   ========================================================================== */
.th-archive-year {
	margin-bottom: 24px;
	background: var(--th-white);
	border: 1px solid var(--th-green-100);
	border-radius: var(--th-radius-lg);
	overflow: hidden;
	box-shadow: var(--th-shadow-sm);
}

.th-archive-year__title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 24px;
	cursor: pointer;
	font-family: var(--th-font-head);
	font-size: 22px;
	font-weight: 700;
	color: var(--th-green-800);
	background: var(--th-green-50);
	list-style: none; /* Hide default marker */
	transition: background var(--th-transition-fast);
}
.th-archive-year__title:hover {
	background: var(--th-green-100);
}
.th-archive-year__title::-webkit-details-marker { display: none; }
.th-archive-year[open] .th-archive__icon { transform: rotate(180deg); }

.th-archive__icon {
	transition: transform var(--th-transition-fast);
	font-size: 16px;
	color: var(--th-green-600);
}

.th-archive-year__content {
	padding: 8px 24px 24px;
}

.th-archive-month {
	margin-top: 16px;
	border-bottom: 1px solid var(--th-gray-100);
	padding-bottom: 8px;
}
.th-archive-month:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.th-archive-month__title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	cursor: pointer;
	font-family: var(--th-font-body);
	font-size: 18px;
	font-weight: 600;
	color: var(--th-gray-800);
	list-style: none;
}
.th-archive-month__title:hover {
	color: var(--th-green-600);
}
.th-archive-month__title::-webkit-details-marker { display: none; }
.th-archive-month[open] .th-archive__icon { transform: rotate(180deg); }

.th-archive-month__content {
	padding: 24px 0 16px;
}

.th-archive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px;
}

.th-archive-card {
	flex: none; /* Override th-news__card flex rules */
	width: 100%;
	display: flex;
	flex-direction: column;
}
.th-archive-card .th-news__card-body {
	flex: 1; /* Make cards equal height */
}

/* ==========================================================================
   11c. Comments Form
   ========================================================================== */
.comment-respond {
	margin-top: 48px;
	background: var(--th-white);
	border: 1px solid var(--th-gray-200);
	border-radius: var(--th-radius-lg);
	padding: 40px;
	box-shadow: var(--th-shadow-sm);
}

.comment-reply-title {
	font-family: var(--th-font-head);
	font-size: 24px;
	font-weight: 700;
	color: var(--th-gray-900);
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--th-green-500);
	display: inline-block;
}

.comment-reply-title small a {
	font-size: 14px;
	color: var(--th-gray-500);
	font-weight: normal;
	margin-left: 12px;
}

.comment-notes {
	font-size: 14px;
	color: var(--th-gray-500);
	margin-bottom: 24px;
}

.comment-form p {
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.comment-form-cookies-consent {
	flex-direction: row !important;
	align-items: center;
}

.comment-form-cookies-consent input {
	margin: 0;
	width: auto;
}

.comment-form-cookies-consent label {
	font-weight: 400;
	color: var(--th-gray-600);
	cursor: pointer;
}

.comment-form label {
	font-family: var(--th-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--th-gray-700);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 12px 16px;
	font-family: var(--th-font-body);
	font-size: 15px;
	color: var(--th-gray-800);
	border: 1px solid var(--th-gray-300);
	border-radius: var(--th-radius-md);
	background: var(--th-gray-50);
	transition: all var(--th-transition-fast);
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--th-green-500);
	background: var(--th-white);
	box-shadow: 0 0 0 3px rgba(75, 96, 67, 0.1);
}

.comment-form textarea {
	resize: vertical;
	min-height: 120px;
}

.comment-form .form-submit {
	margin-top: 32px;
	margin-bottom: 0;
}

.comment-form .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	font-family: var(--th-font-head);
	font-size: 15px;
	font-weight: 700;
	color: var(--th-white);
	background: var(--th-green-600);
	border: none;
	border-radius: 50px;
	cursor: pointer;
	transition: all var(--th-transition-fast);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.comment-form .submit:hover {
	background: var(--th-green-700);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(75, 96, 67, 0.3);
}

/* ==========================================================================
   11d. Custom Form (.th-form)
   ========================================================================== */
.th-form-wrapper {
	background: var(--th-white);
	border: 1px solid var(--th-gray-200);
	border-radius: var(--th-radius-lg);
	padding: 40px;
	box-shadow: var(--th-shadow-sm);
}

.th-form__group {
	margin-bottom: 24px;
	display: flex;
	flex-direction: column;
}

.th-form__label {
	font-family: var(--th-font-body);
	font-size: 15px;
	font-weight: 600;
	color: var(--th-gray-800);
	margin-bottom: 8px;
}

.th-form__input,
.th-form__textarea {
	width: 100%;
	padding: 14px 16px;
	font-family: var(--th-font-body);
	font-size: 15px;
	color: var(--th-gray-900);
	border: 1px solid var(--th-gray-300);
	border-radius: var(--th-radius-md);
	background: var(--th-gray-50);
	transition: all var(--th-transition-fast);
}

.th-form__input:focus,
.th-form__textarea:focus {
	outline: none;
	border-color: var(--th-green-500);
	background: var(--th-white);
	box-shadow: 0 0 0 3px rgba(75, 96, 67, 0.1);
}

/* ==========================================================================
   11e. Default Search Form (.search-form)
   ========================================================================== */
.search-form {
	display: flex;
	gap: 12px;
	width: 100%;
	max-width: 600px;
	margin: 24px 0;
}

.search-form label {
	flex: 1;
	margin: 0;
	display: block;
}

.search-field {
	width: 100%;
	padding: 12px 16px;
	font-family: var(--th-font-body);
	font-size: 15px;
	color: var(--th-gray-900);
	border: 1px solid var(--th-gray-300);
	border-radius: var(--th-radius-full);
	background: var(--th-gray-50);
	transition: all var(--th-transition-fast);
}

.search-field:focus {
	outline: none;
	border-color: var(--th-green-500);
	background: var(--th-white);
	box-shadow: 0 0 0 3px rgba(75, 96, 67, 0.1);
}

.search-submit {
	padding: 12px 24px;
	font-family: var(--th-font-head);
	font-size: 14px;
	font-weight: 700;
	color: var(--th-white);
	background: var(--th-green-600);
	border: none;
	border-radius: var(--th-radius-full);
	cursor: pointer;
	transition: all var(--th-transition-fast);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.search-submit:hover {
	background: var(--th-green-700);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(75, 96, 67, 0.3);
}

/* ==========================================================================
   12. Footer
   ========================================================================== */
.th-footer {
	background: linear-gradient(160deg, var(--th-green-800) 0%, var(--th-green-900) 100%);
	color: rgba(255,255,255,0.8);
}

.th-footer__main { padding: 72px 0 48px; }
.th-footer__main .th-container { max-width: fit-content; }

.th-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1.5fr 1.5fr;
	gap: 24px;
}

.th-footer__col {
	background: rgba(75, 96, 67, 0.4); /* #4b6043 with some transparency to blend nicely */
	border-radius: 20px;
	padding: 36px 32px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.15);
	border: 1px solid rgba(255,255,255,0.08);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Col 1 - Brand */
.th-footer__brand-top {
	display: flex;
	gap: 20px;
	align-items: center;
	margin-bottom: 24px;
	width: 100%;
}

.th-footer__logo-card {
	background-color: rgba(241, 241, 241, 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 10px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.th-footer__logo-card--half {
	width: calc(50% - 10px);
}

.th-footer__logo-card--full {
	width: 100%;
}

.th-footer__logo-card--full .th-footer__badge-img {
	max-width: 250px !important;
	margin: 0 auto;
}

.th-footer__logo-card img,
.th-footer__logo-card .custom-logo {
	max-height: none !important;
	max-width: 100% !important;
	height: auto !important;
	width: auto !important;
	display: block !important;
	filter: none !important;
	-webkit-filter: none !important;
}

.th-footer__logo-card--half img,
.th-footer__logo-card--half .custom-logo {
	max-width: 120px !important;
	margin: 0 auto;
}

.th-footer__brand-name {
	font-family: var(--th-font-head);
	font-size: 18px;
	font-weight: 800;
	color: var(--th-white);
	display: block;
	margin-bottom: 8px;
}

.th-footer__tagline {
	font-size: 13px;
	color: rgba(255,255,255,0.55);
	line-height: 1.7;
	margin-bottom: 28px;
}

/* Unika Custom Badges */
.th-footer__custom-badges {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 24px;
}
.th-footer__badge-link {
	display: block;
	transition: transform var(--th-transition-fast), opacity var(--th-transition-fast);
}
.th-footer__badge-link:hover {
	transform: translateY(-2px);
	opacity: 0.9;
}
.th-footer__badge-img {
	max-width: 100%;
	height: auto;
	max-height: 60px;
	display: block;
}

.th-footer__unika-info {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}
.th-footer__unika-info span {
	font-size: 9px;
	color: rgba(255,255,255,0.45);
	text-transform: uppercase;
	letter-spacing: 1.2px;
}
.th-footer__unika-info strong {
	font-size: 16px;
	font-family: var(--th-font-head);
	font-weight: 800;
	color: var(--th-green-200);
}

/* Col 2 - Nav */
.th-footer__col--nav { min-width: 345px; }

.th-footer__heading {
	font: 700 11px var(--th-font-body);
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--th-white);
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255,255,255,0.10);
	display: block;
}

.th-footer__nav-list {
	list-style: none;
	padding: 0; margin: 0;
}
.th-footer__nav-item { margin-bottom: 14px; }
.th-footer__nav-link {
	color: var(--th-white) !important;
	text-decoration: none;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all var(--th-transition-fast);
}

.th-footer__nav-link:hover { color: var(--th-white) !important; padding-left: 4px; }
.th-footer__nav-link:hover i { transform: translateX(3px); }

/* Col 3 - Map + Contact */
.th-footer__map {
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 18px;
	border: 1px solid rgba(255,255,255,0.09);
	line-height: 0;
}
.th-footer__map iframe { display: block; width: 100%; height: 160px; }

.th-footer__contact { list-style: none; }
.th-footer__contact li,
.th-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--th-white) !important;
	font-size: 13px;
	margin-bottom: 10px;
	line-height: 1.55;
}
.th-footer__contact li i,
.th-footer__contact-item i {
	color: var(--th-green-400);
	font-size: 14px;
	margin-top: 2px;
	flex-shrink: 0;
}
.th-footer__contact a,
.th-footer__contact-item a {
	color: var(--th-white) !important;
	text-decoration: none;
	transition: color var(--th-transition-fast);
}
.th-footer__contact a:hover,
.th-footer__contact-item a:hover { color: var(--th-white); opacity: 0.8; }

/* Col 4 - QR */
.th-footer__qr-grid {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.th-footer__qr-row {
	display: flex;
	gap: 14px;
	justify-content: center;
	width: 100%;
}
.th-footer__qr-item--full {
	width: 100%;
}

.th-footer__qr-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	flex: 1;
}
.th-footer__qr-item img {
	width: 65px !important;
	height: auto !important;
}
.th-footer__qr-item--full img {
	width: 120px !important; /* Slightly larger for the top IG one */
}

.th-footer__qr-frame {
	padding: 10px;
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 14px;
	transition: all 0.25s ease;
	line-height: 0;
}
.th-footer__qr-frame:hover {
	background: rgba(255,255,255,0.15);
	border-color: var(--th-green-300);
	transform: scale(1.05);
}
.th-footer__qr-frame img { display: block; border-radius: 8px; }

.th-footer__qr-label {
	font-size: 11.5px;
	color: rgba(255,255,255,0.65);
	text-align: center;
	display: flex;
	align-items: center;
	gap: 5px;
	font-weight: 600;
	line-height: 1.3;
}
.th-footer__qr-label i { color: var(--th-green-300); font-size: 12px; }

/* Footer Bottom */
.th-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.07);
	padding: 20px 0;
}
.th-footer__bottom-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.th-footer__copy {
	font-size: 12px;
	color: rgba(255,255,255,0.40);
}
.th-footer__copy a {
	color: rgba(255,255,255,0.55);
	text-decoration: none;
}
.th-footer__copy a:hover { color: var(--th-white); }

/* ==========================================================================
   13. Inner Page Templates
   ========================================================================== */
.th-main--inner {
	padding-top: calc(var(--th-header-h) + 0px);
	padding-bottom: 80px;
	min-height: 60vh;
}

.th-page-hero {
	background: linear-gradient(135deg, var(--th-green-700) 0%, var(--th-green-800) 100%);
	color: var(--th-white);
	padding: 80px 0 60px;
	margin-bottom: 0;
	padding-top: calc(var(--th-header-h) + 48px);
}

.th-page-hero__title {
	color: var(--th-white);
	margin-bottom: 14px;
}

.th-page-hero__breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: rgba(255,255,255,0.65);
	flex-wrap: wrap;
}
.th-page-hero__breadcrumb a { color: rgba(255,255,255,0.75); text-decoration: none; }
.th-page-hero__breadcrumb a:hover { color: var(--th-white); }
.th-page-hero__breadcrumb i { font-size: 11px; opacity: 0.6; }

.th-page-content { padding-top: 60px; }

.th-page-thumb {
	border-radius: var(--th-radius-lg);
	overflow: hidden;
	margin-bottom: 40px;
}
.th-page-thumb img { width: 100%; object-fit: cover; max-height: 480px; }

.th-page-body {
	font-size: 16px;
	color: var(--th-gray-700);
	line-height: 1.85;
}
.th-page-body h2, .th-page-body h3, .th-page-body h4 {
	font-family: var(--th-font-head);
	font-weight: 700;
	color: var(--th-gray-900);
	margin: 36px 0 14px;
}
.th-page-body h2 { font-size: 28px; }
.th-page-body h3 { font-size: 22px; }
.th-page-body p { margin-bottom: 20px; }
.th-page-body img { border-radius: var(--th-radius-md); margin: 24px 0; }
.th-page-body a { color: var(--th-green-700); }
.th-page-body blockquote {
	border-left: 4px solid var(--th-green-400);
	padding-left: 24px;
	color: var(--th-gray-500);
	font-style: italic;
	margin: 32px 0;
}

/* ==========================================================================
   14. Single Post
   ========================================================================== */
.th-post-hero { max-width: 760px; }

.th-post {
	max-width: 780px;
	margin: 0 auto;
	padding-top: 56px;
}

.th-post__meta {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	font-size: 13px;
	color: rgba(255,255,255,0.65);
	margin-top: 18px;
}
.th-post__meta i { margin-right: 5px; }

.th-post__thumb {
	border-radius: var(--th-radius-lg);
	overflow: hidden;
	margin-bottom: 48px;
}
.th-post__thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }

.th-post__content {
	font-size: 16px;
	color: var(--th-gray-700);
	line-height: 1.85;
}
.th-post__content h2, .th-post__content h3, .th-post__content h4 {
	font-family: var(--th-font-head);
	font-weight: 700;
	color: var(--th-gray-900);
	margin: 40px 0 16px;
}
.th-post__content h2 { font-size: 28px; }
.th-post__content h3 { font-size: 22px; }
.th-post__content p { margin-bottom: 24px; }
.th-post__content img { border-radius: var(--th-radius-md); margin: 24px 0; }
.th-post__content a { color: var(--th-green-700); }
.th-post__content blockquote {
	border-left: 4px solid var(--th-green-400);
	padding-left: 24px;
	color: var(--th-gray-500);
	font-style: italic;
	margin: 32px 0;
}

/* Tags */
.th-post__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.th-post__tag {
	display: inline-block;
	background: var(--th-green-50);
	color: var(--th-green-700);
	font: 700 12px var(--th-font-body);
	padding: 5px 12px;
	border-radius: 100px;
	text-decoration: none;
	border: 1px solid var(--th-green-150);
	transition: all var(--th-transition-fast);
}
.th-post__tag:hover { background: var(--th-green-600); color: var(--th-white); border-color: var(--th-green-600); }

/* Post Navigation */
.th-post__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--th-gray-200);
}
.th-post__nav-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	background: var(--th-gray-50);
	border-radius: var(--th-radius-md);
	text-decoration: none;
	transition: all var(--th-transition);
	border: 1px solid var(--th-gray-200);
}
.th-post__nav-item:hover { background: var(--th-green-50); border-color: var(--th-green-200); }
.th-post__nav-next { text-align: right; }
.th-post__nav-label { font: 700 11px var(--th-font-body); color: var(--th-green-600); text-transform: uppercase; letter-spacing: 1.5px; }
.th-post__nav-title { font: 700 14px var(--th-font-head); color: var(--th-gray-800); line-height: 1.35; }

/* ==========================================================================
   15. Cards + Archive Grid
   ========================================================================== */
.th-posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 32px;
	margin-bottom: 48px;
}

.th-card--post {
	border-radius: var(--th-radius-md);
	background: var(--th-white);
	box-shadow: var(--th-shadow-sm);
	overflow: hidden;
	border: 1px solid var(--th-gray-100);
	transition: all var(--th-transition);
}
.th-card--post:hover {
	box-shadow: var(--th-shadow-md);
	transform: translateY(-4px);
}

.th-card__thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.th-card__thumb img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.th-card__thumb:hover img { transform: scale(1.04); }

.th-card__body { padding: 28px; }
.th-card__meta { font-size: 12px; color: var(--th-gray-400); margin-bottom: 10px; }
.th-card__title {
	font-family: var(--th-font-head);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.38;
	margin-bottom: 12px;
	color: var(--th-gray-900);
}
.th-card__title a { color: inherit; text-decoration: none; }
.th-card__title a:hover { color: var(--th-green-700); }
.th-card__excerpt { font-size: 14px; color: var(--th-gray-500); line-height: 1.7; margin-bottom: 20px; }

/* ==========================================================================
   16. Pagination
   ========================================================================== */
.th-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
	flex-wrap: wrap;
}
.th-pagination .nav-links { display: flex; gap: 8px; }
.th-pagination .page-numbers {
	min-width: 40px; height: 40px;
	border-radius: 50%;
	font: 600 14px var(--th-font-body);
	display: flex; align-items: center; justify-content: center;
	border: 1.5px solid var(--th-green-200);
	color: var(--th-green-700);
	text-decoration: none;
	transition: all var(--th-transition-fast);
	padding: 0 4px;
}
.th-pagination .page-numbers:hover { background: var(--th-green-700); color: var(--th-white); border-color: var(--th-green-700); }
.th-pagination .page-numbers.current { background: var(--th-green-700); color: var(--th-white); border-color: var(--th-green-700); }
.th-pagination .page-numbers.dots { border-color: transparent; color: var(--th-gray-400); }

/* ==========================================================================
   17. 404 + Search
   ========================================================================== */
.th-404 {
	text-align: center;
	padding: 120px 24px;
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.th-404__code {
	font-family: var(--th-font-head);
	font-size: clamp(100px, 22vw, 180px);
	font-weight: 800;
	color: var(--th-green-100);
	line-height: 1;
	margin-bottom: 16px;
	user-select: none;
}

.th-404__title { margin-bottom: 14px; }
.th-404__body { margin-bottom: 40px; }
.th-404__actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

.th-search-form {
	max-width: 520px;
	margin: 0 auto;
	display: flex;
}
.th-search-form input[type="search"],
.th-search-form input[type="text"] {
	flex: 1;
	padding: 14px 20px;
	border: 2px solid var(--th-green-200);
	border-right: none;
	border-radius: 100px 0 0 100px;
	font: 15px var(--th-font-body);
	color: var(--th-gray-800);
	outline: none;
	transition: border-color var(--th-transition-fast);
}
.th-search-form input[type="search"]:focus,
.th-search-form input[type="text"]:focus { border-color: var(--th-green-600); }

.th-search-form button[type="submit"] {
	padding: 14px 28px;
	background: var(--th-green-700);
	color: var(--th-white);
	border: none;
	border-radius: 0 100px 100px 0;
	font: 700 14px var(--th-font-body);
	cursor: pointer;
	transition: background var(--th-transition-fast);
}
.th-search-form button:hover { background: var(--th-green-600); }

.th-search-count {
	font-size: 14px;
	color: var(--th-gray-500);
	margin-bottom: 32px;
}

.th-search-form-wrap { margin-bottom: 40px; }

.th-no-results {
	text-align: center;
	padding: 60px 0;
}

/* ==========================================================================
   18. Scroll Animations (Intersection Observer)
   ========================================================================== */
.th-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.65s ease, transform 0.65s ease;
}
.th-reveal.visible {
	opacity: 1;
	transform: none;
}

.th-reveal--delay-1 { transition-delay: 0.08s; }
.th-reveal--delay-2 { transition-delay: 0.16s; }
.th-reveal--delay-3 { transition-delay: 0.26s; }
.th-reveal--delay-4 { transition-delay: 0.36s; }

.th-reveal--left  { transform: translateX(-26px); }
.th-reveal--right { transform: translateX(26px); }
.th-reveal--left.visible, .th-reveal--right.visible { transform: none; }

.th-reveal--scale { transform: scale(0.94); }
.th-reveal--scale.visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.th-reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   19. Exit Beta Widget
   ========================================================================== */
.exit-beta-widget {
	position: fixed;
	bottom: 24px; right: 24px;
	background: var(--th-green-700);
	color: var(--th-white);
	padding: 10px 20px;
	border-radius: 100px;
	text-decoration: none;
	font: 700 13px var(--th-font-body);
	display: flex; align-items: center; gap: 8px;
	box-shadow: var(--th-shadow-lg);
	z-index: 99999;
	transition: all var(--th-transition);
	border: none;
}
.exit-beta-widget:hover {
	background: var(--th-green-600);
	color: var(--th-white);
	transform: translateY(-2px);
	box-shadow: var(--th-shadow-xl);
}

/* ==========================================================================
   20. Responsive
   ========================================================================== */
@media (max-width: 1200px) {
	.th-container { padding: 0 32px; }
	.th-footer__grid { grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr; gap: 36px; }
}

@media (max-width: 991px) {
	/* Layout */
	.th-grid-2, .th-grid-3, .th-grid-4 { grid-template-columns: 1fr; }
	.th-section { padding: 72px 0; }
	.th-section--lg { padding: 80px 0; }

	/* Header */
	.th-nav {
		display: flex; /* Kembalikan ke flex untuk mobile */
		justify-content: space-between;
	}
	.th-menu { display: none; }
	.th-hamburger { display: flex; }
	.th-nav__actions .th-nav__phone { display: none; }
	
	/* Sembunyikan search di header agar tidak tabrakan dengan Night Mode */
	.th-nav__left .th-header-search { display: none; }

	/* Hero */
	.th-hero__content { bottom: 12%; }

	/* About */
	.th-about__inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.th-about__image-col { order: -1; }
	.th-about__image { aspect-ratio: 16/9; border-radius: var(--th-radius-lg); }
	.th-about__image-badge { display: none; }
	.th-about__stats { grid-template-columns: repeat(3, 1fr); }
	.th-visimisi__cards { grid-template-columns: 1fr; }

	/* Footer */
	.th-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
	.th-footer__col--brand { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; }
	.th-footer__brand-top { justify-content: center; }
	.th-footer__custom-badges { align-items: center; }
	.th-footer__col--nav { grid-column: 1 / 2; }
	.th-footer__col--contact { grid-column: 2 / 3; }
	.th-footer__col--qr { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; }
	.th-footer__qr-grid { display: flex; justify-content: center; gap: 24px; width: 100%; }
	.th-footer__main { padding: 56px 0 40px; }

	/* Post nav */
	.th-post__nav { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
	/* Typography */
	:root { --th-header-h: 72px; }
	.th-section { padding: 60px 0; }
	.th-container { padding: 0 20px; }

	/* Hero */
	.th-hero { 
		height: auto; 
		min-height: 100svh; 
		align-items: flex-start; /* Prevent flex centering from cutting off top */
		padding-top: 15%; /* Jarak persentase dari atas layar */
		padding-bottom: 50px;
	}
	.th-hero__arrow { display: none; }
	.th-hero__scroll { display: none; }
	.th-hero__content { bottom: auto; } /* Hapus bottom offset lama */

	/* News slider card width on mobile */
	.th-news__card { flex: 0 0 85vw; }
	.th-news__header { flex-direction: column; align-items: flex-start; }

	/* About */
	.th-about__stats { grid-template-columns: repeat(3, 1fr); gap: 16px; }
	.th-about__stat-num { font-size: 32px; }

	/* Comments */
	.comment-respond { padding: 24px; }

	/* Footer */
	.th-footer__grid { gap: 24px; }
	.th-footer__unika-row { flex-wrap: wrap; }
	.th-footer__col { padding: 24px 20px; }

	/* Post */
	.th-post { padding-top: 40px; }
}

@media (max-width: 575px) {
	.th-section { padding: 52px 0; }
	.th-hero__actions { flex-direction: column; }
	.th-btn { padding: 12px 24px; font-size: 13px; }
	.th-about__stats { grid-template-columns: 1fr 1fr 1fr; }
	.th-footer__qr-grid { justify-items: center; }
	.th-posts-grid { grid-template-columns: 1fr; }
	.th-404__actions { flex-direction: column; align-items: center; }
	.th-footer__col--nav, .th-footer__col--contact { grid-column: 1 / -1; }
}

/* Typography adjustment for SMA Theresiana 1 Semarang */
.th-hero-eyebrow-large {
	/* Fluid typography: min 32px on small screens, max 72px on large screens */
	font-size: clamp(20px, 6vw, 32px) !important;
	display: block;
	margin-bottom: 20px;
	line-height: 1.1;
}

@media (max-width: 768px) {
	.th-hero__text-content {
		margin-top: 10vh; /* Adjust spacing to push text down on mobile */
	}
}