/* CSS Variables untuk kemudahan kustomisasi */
:root {
    --bg-color: #000000;
    --card-bg: #091F00;
    --text-primary: #EFFFEB;
    --text-secondary: #97FF7A;
    --accent: #4EFF33;
    --hover-bg: #156A17;
    --transition: all 0.2s ease-in-out;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
	.container {
            width: 100%;
            max-width: 480px;
			.container {text-align: center;}
        }
	body {
            background-color: var(--bg-color);
            color: var(--text-primary);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            line-height: 1.5;
            display: flex;
            justify-content: center;
            min-height: 100vh;
            padding: 2rem 1rem;
        }
	header {
            text-align: center;
			margin-bottom: 2.5rem;}
	article {
            text-align: left;
        }
    aside {
            margin-bottom: 2rem;
            background: var(--card-bg);
            padding: 1.5rem;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            text-align: center;
        }
    footer {
            text-align: center;
            margin-top: 2rem;
            margin-bottom: 2rem;
            font-size: 0.95rem;
            color: var(--text-primary);
			max-width: 480px;
			text-decoration: none;
        }
	.box {
            margin-bottom: 2rem;
            background: var(--card-bg);
            padding: 1.5rem;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            text-align: justify;
        }
	.warning {
            margin-bottom: 2rem;
            background: #470000;
            padding: 1.5rem;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            text-align: justify;
        }
	.subtitle { color: var(--text-secondary); font-size: 0.95rem; }
	.menu-bottom {
		margin-top: 2rem;
        margin-bottom: 2rem;}
	.copyright {
		margin-top: 2rem;
        margin-bottom: 2rem;}
	.intro {
            color: var(--text-secondary);
            font-size: 0.95rem;
            margin-bottom: 1.5rem;
        }
     .list {margin-left: 1.25rem; margin-bottom: 1rem;}

/*Font*/	
	h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem;}
    h2 { font-size: 1.25rem; margin-bottom: 0.5rem; margin-top: 0.5rem;}
    h3 { font-size: 1.1rem; margin-bottom: 0.5rem; margin-top: 0.5rem;}
	p { color: var(--text-primary); margin-bottom: 1rem; font-size: 1rem;}
	a { font-weight: 600; color: var(--text-secondary); margin-bottom: 0rem; text-decoration: none;}

/*Image*/
        .profile-img {
            width: 96px;
            height: 96px;
            border-radius: 10%;
            background-color: var(--accent); /* Placeholder jika gambar gagal load */
            margin-bottom: 1rem;
            border: 3px solid var(--accent);
            object-fit: cover;
			text-align: center;
            /* Pencegahan CLS */
            aspect-ratio: 100 / 100;
        }
		.img-container {
            display: flex;
            
            justify-content: center;
            align-items: center;
            width: 100%;
            margin: 20px 0; /* Memberi jarak atas bawah agar tidak menempel teks */
          }
		.images-optimized {
            max-width: 90%;    /* Responsif: tidak akan lebih lebar dari layar HP */
            height: auto;       /* Menjaga rasio agar tidak gepeng */
            display: block;
            border-radius: 10px; /* Opsional: mempercantik tampilan */
            aspect-ratio: 400 / 500; /* Mengunci ruang gambar untuk mencegah CLS */
            background: #f0f0f0;    /* Placeholder warna ringan sebelum gambar muncul */
            object-fit: cover;
          }
/* Breadcrumb Style */
    .breadcrumb {
            display: flex;
            justify-content: center; /* Menyelaraskan konten ke tengah secara horizontal */
            list-style: none;
            font-size: 0.85rem;
            margin-bottom: 2rem;
            padding: 0; /* Memastikan tidak ada padding bawaan ul yang mengganggu */
            color: var(--text-secondary);
        }
        
    .breadcrumb li:not(:last-child)::after {
            content: "/";
            margin: 0 0.5rem;
            opacity: 0.5;
        }
        
    .breadcrumb a {
            color: var(--text-secondary);
            text-decoration: none;
            transition: var(--transition);
        }
        
    .breadcrumb a:hover {
            color: var(--accent);
        }
        
     .active {
            color: var(--text-primary);
            font-weight: 600;
        }
/* Links Section */
        .links-wrapper {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .link-card {
            background-color: #0E3800;
            color: var(--text-primary);
            text-decoration: none;
            padding: 1rem;
            border-radius: 12px;
            font-weight: 600;
            transition: var(--transition);
            border: 1px solid rgba(255, 255, 255, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .link-card:hover {
            background-color: var(--hover-bg);
            transform: translateY(-2px);
            border-color: var(--accent);
        }
		
/* Social Icons */
        .socials {
            margin-top: 2.5rem;
            display: flex;
            justify-content: center;
            gap: 1.5rem;
        }

        .social-icon svg {
            width: 24px;
            height: 24px;
            fill: var(--text-primary);
            transition: var(--transition);
        }

        .social-icon:hover svg {
            fill: var(--accent);
        }
		
        /* Animasi masuk */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .links-wrapper a {
            animation: fadeIn 0.5s ease backwards;
        }
		
        /* Staggered animation */
        .links-wrapper a:nth-child(1) { animation-delay: 0.1s; }
        .links-wrapper a:nth-child(2) { animation-delay: 0.2s; }
        .links-wrapper a:nth-child(3) { animation-delay: 0.3s; }
		
        .animate {
            animation: fadeIn 0.6s ease forwards;
        }
/* Skills Grid */
        .skills {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.75rem;
        }

        .skill-item {
            background: var(--hover-bg);
            padding: 0.5rem 1rem;
            border-radius: 8px;
            font-size: 0.85rem;
            text-align: center;
            color: var(--text-primary);
        }
        /* Accordion Style (Pure CSS) */
        .faq-item {
            margin-bottom: 1rem;
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
            background: var(--card-bg);
        }

/* Checkbox hack untuk interaksi tanpa JS */
        .faq-input { display: none; }

        .faq-label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.2rem 1.5rem;
            cursor: pointer;
            font-weight: 600;
            transition: background 0.2s;
        }

        .faq-label:hover { background: rgba(56, 189, 248, 0.05); }

        .faq-label::after {
            content: '+';
            font-size: 1.5rem;
            color: var(--accent);
            transition: transform 0.3s;
        }

        .faq-content {
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease-in-out;
            padding: 0 1.5rem;
            color: var(--text-primary);
            text-align: justify;
        }

        /* Logic saat checkbox tercentang */
        .faq-input:checked ~ .faq-content {
            max-height: 100%; /* Nilai besar yang aman */
            padding-bottom: 1.5rem;
        }

        .faq-input:checked ~ .faq-label::after {
            transform: rotate(45deg); /* Berubah jadi 'x' */
        }
		
/* Table */
        table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
        th, td { border: 1px solid #ddd; padding: 5px; text-align: justify; }
        th { background-color: white; color: black; }
        tr:nth-child(even) { background-color: none; }    
/* Google Maps Responsif dengan Aspect Ratio */

		.embed-map-fixed { 
			position: relative; 
			width: 250px; 
			height: 300px; 
			background: #f9f9f9; /* Warna latar belakang ringan saat loading */
			display: flex; 
			align-items: center; 
			justify-content: center;
			border: 1px solid #eee;
		 }
		 .embed-map-container { overflow: hidden; width: 250px; height: 300px; }
		 .embed-map-frame { width: 250px !important; height: 300px !important; border: 0; }
		 
		 /* Animasi loading sederhana */
		 .loader {
			border: 8px solid #f3f3f3;
			border-top: 8px solid #3498db;
			border-radius: 50%;
			width: 40px;
			height: 40px;
			animation: spin 2s linear infinite;
		 }
		 @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* Menghilangkan border default iframe */
            border: none;
            /* Memberikan transisi halus saat peta muncul */
            background: #eee;
            border-radius: 10px
          }
/* Accordion Style (Pure CSS) */
        .faq-item {
            margin-bottom: 1rem;
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
            background: var(--card-bg);
        }

/* Checkbox hack untuk interaksi tanpa JS */
        .faq-input { display: none; }

        .faq-label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.2rem 1.5rem;
            cursor: pointer;
            font-weight: 600;
            transition: background 0.2s;
        }

        .faq-label:hover { background: rgba(56, 189, 248, 0.05); }

        .faq-label::after {
            content: '+';
            font-size: 1.5rem;
            color: var(--accent);
            transition: transform 0.3s;
        }

        .faq-content {
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease-in-out;
            padding: 0 1.5rem;
            color: var(--text-primary);
            text-align: justify;
        }

        /* Logic saat checkbox tercentang */
        .faq-input:checked ~ .faq-content {
            max-height: 100%; /* Nilai besar yang aman */
            padding-bottom: 1.5rem;
        }

        .faq-input:checked ~ .faq-label::after {
            transform: rotate(45deg); /* Berubah jadi 'x' */
        }
        /* HowTo Steps Styling */
        main { flex: 1; }
        .steps-list { list-style: none; counter-reset: step-counter; }
        
        .step-item {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1rem;
            display: flex;
            gap: 1rem;
            border: 1px solid var(--border);
            position: relative;
        }

        .step-item::before {
            counter-increment: step-counter;
            content: counter(step-counter);
            background: var(--accent);
            color: #000;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            flex-shrink: 0;
        }
        .step-content p { text-align: justify; }