/* 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: 400px;
	.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.3s 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; flex-direction: column;  }
		 .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;  }