/* --- 1. VARIABLES --- */
			:root {
				--primary: #ff6b35;
				--primary-dark: #d84315;
				--accent: #2e7d32;
				--bg-sky-top: #87ceeb;
				--bg-sky-bot: #e0f7fa;
				--text-main: #1a202c;
				--text-sub: #4a5568;
				--white: #ffffff;
				--modal-bg: #f7fafc;
				--shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.2);
			}

			/* --- 2. GLOBAL RESET --- */
			* {
				box-sizing: border-box;
				-webkit-tap-highlight-color: transparent;
				outline: none;
			}
			body {
				font-family: "Inter", "Segoe UI", sans-serif;
                margin: 0;
                padding: 0;
                height: 100vh;      /* Paksa tinggi tepat 100% viewport */
                width: 100vw;
                overflow: hidden;   /* Hilangkan semua jenis scroll */
                background: linear-gradient(to bottom, var(--bg-sky-top), var(--bg-sky-bot));
                display: flex;
                flex-direction: column;
                justify-content: space-between; /* Sebar Header, Pohon, dan Footer */
                align-items: center;
                padding-top: 10px;
			}

			/* --- 3. HEADER & TREE --- */
			.header-container {
				position: relative;
                z-index: 100;
                text-align: center;
                background: rgba(255, 255, 255, 0.85);
                backdrop-filter: blur(12px);
                padding: 0.8rem 1.5rem; /* Perkecil padding */
                border-radius: 20px 20px 20px 20px; /* Opsional: hanya lengkung bawah */
                width: 90%;
                max-width: 500px;
                margin-top: 0;
			}
			.header-container h1 {
				margin: 0;
				font-size: clamp(1.2rem, 4vw, 1.8rem);
				font-weight: 800;
				color: var(--text-main);
				text-transform: uppercase;
			}
			.header-container h2 {
				margin: 4px 0;
				font-size: clamp(0.8rem, 3vw, 1rem);
				font-weight: 600;
				color: var(--primary);
			}
			.tagline {
				font-size: 0.8rem;
				font-style: italic;
				color: var(--accent);
				margin-top: 5px;
			}

			.tree-wrapper {
				position: relative;
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                /* Batasi agar tidak melebihi layar */
                max-height: calc(100vh - 180px); 
                margin: 10px 0;
			}
			.tree-img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                pointer-events: none; /* Agar tidak mengganggu klik buah */
            }

            .tree-inner {
                position: relative;
                height: 100%;
                aspect-ratio: 1 / 1; /* SESUAIKAN: Jika gambar Anda 4:3, ubah jadi 4/3 */
                display: flex;
                justify-content: center;
                align-items: center;
            }

			/* --- 4. FRUIT ITEM (NEW HOVER ANIMATION) --- */
			.fruit-item {
				position: absolute;
				background: linear-gradient(135deg, var(--primary), #ff8a65);
				color: white;
				padding: 0.6em 1.2em;
				border-radius: 50px;
				font-weight: 700;
				font-size: clamp(11px, 2.5vw, 14px);
				box-shadow: 0 4px 10px rgba(255, 107, 53, 0.3);
				cursor: pointer;
				border: 2px solid rgba(255, 255, 255, 0.8);
				white-space: nowrap;
				transition: 0.2s;

				transform-origin: top center;
				/* Animasi Default: Masuk + Ayunan */
				animation:
					popIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
					swing 3.5s ease-in-out infinite alternate;

				transform: scale(0) translateX(-50%);
                transform: translate(-50%, -50%) scale(1); /* Pastikan titik tengah pas */
                z-index: 20;
			}

			/* HOVER STATE: Pulse & Radar Glow */
			.fruit-item:hover {
				z-index: 50;
				background: var(--primary-dark);
				/* Ganti animasi swing dengan animasi hoverPulse */
				animation: hoverPulse 1.5s infinite;
			}

			/* CLICK STATE: Press Effect */
			.fruit-item:active {
				transform: translate(-50%, -50%) scale(0.95) !important;
				background: #bf360c;
				transition: 0.1s;
			}

			/* --- 5. MODAL --- */
			.modal-backdrop {
				display: none;
				position: fixed;
				inset: 0;
				background-color: rgba(20, 20, 30, 0.85);
				z-index: 2000;
				justify-content: center;
				align-items: center;
				backdrop-filter: blur(8px);
				opacity: 0;
				transition: opacity 0.3s ease;
			}
			.modal-backdrop.active {
				opacity: 1;
			}

			.modal-card {
				background: var(--white);
				width: 90%;
				max-width: 1000px;
				height: 85vh;
				border-radius: 20px;
				overflow: hidden;
				box-shadow: var(--shadow-soft);
				display: grid;
				grid-template-columns: 60% 40%;
				transform: scale(0.96) translateY(20px);
				transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
			}
			.modal-backdrop.active .modal-card {
				transform: scale(1) translateY(0);
			}

			/* Gallery Section */
			.gallery-section {
				background: #000;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				overflow: hidden;
			}
			.gallery-stage {
				flex: 1;
				position: relative;
				width: 100%;
				overflow: hidden;
			}
			.gallery-track {
				display: flex;
				height: 100%;
				transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
			}
			.gallery-slide {
				min-width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.gallery-slide img {
				max-width: 100%;
				max-height: 100%;
				object-fit: contain;
			}

			.slider-btn {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				background: rgba(255, 255, 255, 0.2);
				backdrop-filter: blur(4px);
				color: white;
				border: none;
				width: 44px;
				height: 44px;
				border-radius: 50%;
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20px;
				transition: 0.2s;
				z-index: 10;
			}
			.slider-btn:hover {
				background: rgba(255, 255, 255, 0.9);
				color: black;
			}
			.prev-btn {
				left: 20px;
			}
			.next-btn {
				right: 20px;
			}

			.thumbnail-strip {
				height: 80px;
				background: rgba(20, 20, 20, 0.9);
				display: flex;
				gap: 10px;
				padding: 10px 20px;
				overflow-x: auto;
				align-items: center;
				border-top: 1px solid rgba(255, 255, 255, 0.1);
			}
			.thumb {
				height: 50px;
				width: 80px;
				border-radius: 6px;
				cursor: pointer;
				opacity: 0.5;
				transition: 0.2s;
				border: 2px solid transparent;
				object-fit: cover;
				flex-shrink: 0;
			}
			.thumb:hover {
				opacity: 0.8;
			}
			.thumb.active {
				opacity: 1;
				border-color: var(--primary);
				transform: scale(1.05);
			}

			/* Info Section */
			.info-section {
				padding: 30px;
				display: flex;
				flex-direction: column;
				background: var(--modal-bg);
				overflow-y: auto;
			}
			.info-header {
				margin-bottom: 20px;
				border-bottom: 2px solid #e2e8f0;
				padding-bottom: 15px;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
			}
			.info-title h3 {
				margin: 0;
				font-size: 1.8rem;
				color: var(--text-main);
				line-height: 1.2;
			}
			.info-label {
				display: inline-block;
				background: var(--primary);
				color: white;
				font-size: 0.7rem;
				padding: 4px 8px;
				border-radius: 4px;
				text-transform: uppercase;
				letter-spacing: 1px;
				margin-bottom: 5px;
			}
			.btn-close-modal {
				background: #edf2f7;
				width: 36px;
				height: 36px;
				border-radius: 50%;
				border: none;
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20px;
				color: var(--text-sub);
				transition: 0.2s;
				flex-shrink: 0;
			}
			.btn-close-modal:hover {
				background: #e53e3e;
				color: white;
				transform: rotate(90deg);
			}
			.info-body {
				color: var(--text-sub);
				line-height: 1.7;
				font-size: 1rem;
			}
			.info-body p {
				margin-top: 0;
			}
			.info-body ul {
				padding-left: 20px;
				margin-bottom: 1rem;
			}

			/* --- 6. MOBILE CSS --- */
			@media (max-width: 768px) {
				.modal-backdrop {
					align-items: flex-end;
					padding: 0;
				}
				.modal-card {
					grid-template-columns: 1fr;
					grid-template-rows: auto 1fr;
					width: 100%;
					height: 90vh;
					border-radius: 20px 20px 0 0;
					margin: 0;
					transform: translateY(100%);
				}
				.modal-backdrop.active .modal-card {
					transform: translateY(0);
				}
				.gallery-section {
					height: 35vh;
				}
				.thumbnail-strip {
					display: none;
				}
				.info-section {
					padding: 20px;
				}
				.info-title h3 {
					font-size: 1.4rem;
				}
			}

			/* --- 7. EXTRAS --- */
			.footer-container {
				position: relative; /* Berubah dari absolute */
                bottom: 0;
                padding: 10px 0;
                z-index: 90;
			}
			.copyright-text {
				background: rgba(255, 255, 255, 0.5);
				backdrop-filter: blur(4px);
				padding: 5px 15px;
				border-radius: 20px;
				font-size: 0.75rem;
				color: #555;
			}

			.leaf {
				position: absolute;
				top: -50px;
				pointer-events: none;
				z-index: 5;
				width: 20px;
				height: 20px;
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2366BB6A'%3E%3Cpath d='M17,8C8,10,5.9,16.17,3.82,21.34L5.71,22l1-2.3A4.49,4.49,0,0,0,8,20C19,20,22,3,22,3,21,5,14,5.25,9,6.25S2,11.5,2,13.5a6.22,6.22,0,0,0,1.75,3.75C7,8,17,8,17,8Z'/%3E%3C/svg%3E");
				background-size: contain;
				animation: fall linear forwards;
			}

			/* --- 8. ANIMATIONS KEYFRAMES --- */
			@keyframes breathe {
				from {
					transform: scale(1);
				}
				to {
					transform: scale(1.02);
				}
			}
			@keyframes popIn {
				0% {
					transform: translate(-50%, -50%) scale(0);
					opacity: 0;
				}
				100% {
					transform: translate(-50%, -50%) scale(1);
					opacity: 1;
				}
			}
			@keyframes swing {
				from {
					transform: translate(-50%, -50%) rotate(-5deg);
				}
				to {
					transform: translate(-50%, -50%) rotate(5deg);
				}
			}
			@keyframes fall {
				to {
					transform: translate(var(--endX), 110vh) rotate(360deg);
					opacity: 0;
				}
			}

			/* NEW: Hover Pulse Animation */
			@keyframes hoverPulse {
				0% {
					transform: translate(-50%, -50%) scale(1.15);
					box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.7);
				}
				50% {
					transform: translate(-50%, -50%) scale(1.25);
					box-shadow: 0 0 20px 10px rgba(255, 107, 53, 0);
				}
				100% {
					transform: translate(-50%, -50%) scale(1.15);
					box-shadow: 0 0 0 0 rgba(255, 107, 53, 0);
				}
			}

			/* Guide */
			.guide-overlay {
				position: fixed;
				inset: 0;
				background: rgba(0, 0, 0, 0.85);
				z-index: 3000;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				transition: opacity 0.5s;
			}
			.guide-content {
				text-align: center;
				color: white;
				animation: fadeUp 0.6s ease;
			}
			.guide-btn {
				margin-top: 25px;
				padding: 12px 35px;
				background: var(--primary);
				color: white;
				border: none;
				border-radius: 50px;
				font-weight: bold;
				cursor: pointer;
				box-shadow: 0 5px 15px rgba(255, 107, 53, 0.4);
			}
			@keyframes fadeUp {
				from {
					opacity: 0;
					transform: translateY(20px);
				}
				to {
					opacity: 1;
					transform: translateY(0);
				}
			}