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

/* ========================================================
   SISTEM VARIABEL WARNA (TEMA GELAP & TERANG)
=========================================================== */
/* ========================================================
   SISTEM VARIABEL WARNA (TEMA GELAP & TERANG)
=========================================================== */
:root {
    --accent: #b74b4b;
    
    /* 🌙 Tema Gelap: Warna transparan (0.4) agar tembus pandang */
    --bg: #000000;
    --text-color: #ffffff;
    --header-bg: rgba(0, 0, 0, 0.4); 
    --muted: #bdbdbd;
    --border-color: #272727;
    
    /* Tambahan untuk Elemen Card / Kotak */
    --card-bg: #111111;
    --hover-bg: #1a1a1a;
    --bar-bg: #292929;
}

body.light-theme {
    /* ☀️ Tema Terang: Warna transparan (0.5) agar tembus pandang */
    --bg: #ffffff;
    --text-color: #000000; 
    --header-bg: rgba(255, 255, 255, 0.5); 
    --muted: #222222; 
    --border-color: #cccccc;
    
    /* Elemen Card / Kotak */
    --card-bg: #f4f4f4; 
    --hover-bg: #e8e8e8;
    --bar-bg: #d1d1d1;
}

/* ========================================================
   RESET & DASAR
=========================================================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    text-decoration:none;
    border:none;
    outline:none;
    font-family:'Poppins',sans-serif;
    scroll-behavior:smooth
}

html{
    font-size:62.5%;
    scroll-padding-top:90px
}

body{
    width:100%;
    min-height:100vh;
    overflow-x:hidden;
    background: var(--bg);
    color: var(--text-color);
    transition: background 0.3s ease, color 0.3s ease; 
}

/* ========================================================
   HEADER & NAVIGASI (FULL, BLUR KACA, & TEMBUS PANDANG)
=========================================================== */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;              /* Membentang penuh selebar layar */
    margin-top: 0;            /* Menempel sempurna di ujung paling atas */
    padding: 1.5rem 5%;       
    background: var(--header-bg); /* Mengambil warna dinamis dari variabel tema */
    
    /* Efek Blur Kaca yang Diperkuat */
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px); /* Support untuk browser Safari/HP */
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.3s ease, border-color 0.3s ease;
}
/* =====================================================
   PENGATURAN HEADER & TAMPILAN KHUSUS HP (MAX-WIDTH 995px)
====================================================== */
@media (max-width: 995px) {
    header {
        padding: 1.2rem 7%; /* Menyesuaikan padding agar pas di layar kecil */
    }

    /* Menu dropdown saat diklik garis tiga */
    nav {
        position: absolute;
        display: none;
        top: 100%;
        right: 5%;
        width: 260px;
        border-left: 3px solid var(--accent);
        border-bottom: 3px solid var(--accent);
        border-bottom-left-radius: 2rem;
        border-top-left-radius: 2rem;
        padding: 1.5rem 2rem;
        background: var(--card-bg); /* Mengikuti tema gelap/terang */
        backdrop-filter: blur(15px); /* Ikut diberi efek blur */
        -webkit-backdrop-filter: blur(15px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }

    nav.active {
        display: block;
    }

    nav a {
        display: block;
        font-size: 1.8rem;
        margin: 1.5rem 0;
        width: fit-content;
    }

    /* Memunculkan tombol menu garis tiga di HP */
    .menu-btn {
        display: block;
        background: transparent;
        color: var(--accent);
        font-size: 2.8rem;
        cursor: pointer;
    }

    /* Posisi tombol tema di HP (berdampingan di sebelah kiri tombol garis tiga) */
    header .theme-toggle {
        position: absolute;
        right: 70px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 2rem;
        cursor: pointer;
        z-index: 102;
        margin-left: 0;
    }

    /* Posisi tombol garis tiga di pojok kanan atas HP */
    header .menu-btn {
        position: absolute;
        right: 7%;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* =====================================================
   PERBAIKAN KELAS LOGO HEADER
====================================================== */
.logo {
    font-size: 3rem;
    color: var(--accent);
    font-weight: 800;
    cursor: pointer;
    transition: .5s ease;
}

.logo:hover {
    transform: scale(1.05);
}

nav a{
    font-size:1.8rem;
    color: var(--text-color);
    margin-left:3.5rem;
    font-weight:500;
    transition:.3s ease;
    border-bottom:3px solid transparent
}

nav a:hover,nav a.active{
    color:var(--accent);
    border-bottom:3px solid var(--accent)
}

/* =====================================================
   PENGATURAN JARAK TOMBOL GANTI TEMA
====================================================== */
.theme-toggle {
    font-size: 1.8rem;
    color: var(--accent);
    cursor: pointer;
    margin-left: 4rem; /* Sesuaikan angka ini: tambah besar (misal 5rem) jika ingin lebih jauh, kecilkan jika ingin lebih dekat */
    transition: transform 0.3s ease;
    display: inline-flex;
    align-items: center;
    z-index: 101;
}

/* =====================================================
   PENGATURAN POSISI TOMBOL TEMA (DI LUAR MENU HP)
====================================================== */

/* Tampilan Laptop/Desktop: Mengikuti alur navigasi */
nav .theme-toggle {
    display: inline-flex;
}

/* Tampilan HP (Layar di bawah 995px) */
@media (max-width: 995px) {
    /* Keluarkan tombol tema dari nav dan letakkan berdampingan dengan tombol garis tiga */
    header .theme-toggle {
        position: absolute;
        right: 75px; /* Mengatur jarak dari tombol garis tiga di sebelah kanan */
        top: 50%;
        transform: translateY(-50%);
        font-size: 2rem;
        cursor: pointer;
        z-index: 102;
    }

    /* Pastikan tombol garis tiga ada di paling kanan */
    header .menu-btn {
        position: absolute;
        right: 7%;
        top: 50%;
        transform: translateY(-50%);
    }
}

.menu-btn{
    display:none;
    background:transparent;
    color:var(--accent);
    font-size:2.8rem;
    cursor:pointer
}

section{
    min-height:100vh;
    padding:10rem 9% 7rem;
    background: var(--bg);
    transition: background 0.3s ease;
}

/* HOME========================================================================================= */
.home {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8rem;
    background: var(--bg);
    transition: background 0.3s ease;
}

.home .home-content {
    max-width: 720px;
}

.home .home-content h1 {
    font-size: 6rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-color);
}

span {
    color: var(--accent);
}

.home-content h3 {
    font-size: 4rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: var(--text-color);
}

.home-content p {
    font-size: 1.6rem;
    line-height: 1.8;
    color: var(--muted);
}

.home-img {
    border-radius: 50%;
    flex-shrink: 0;
}

.home-img img {
    width: 32vw;
    max-width: 470px;
    min-width: 280px;
    border-radius: 50%;
    box-shadow: 0 0 35px rgba(183, 75, 75, .45);
    cursor: pointer;
    transition: .3s ease;
}

.home-img img:hover {
    transform: scale(1.02);
    box-shadow: 0 0 50px rgba(183, 75, 75, .65);
}

.social-icons a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    background: transparent;
    border: .2rem solid var(--accent);
    font-size: 2rem;
    border-radius: 50%;
    margin: 3rem 1.5rem 3rem 0;
    transition: .3s ease;
    color: var(--accent);
}

.social-icons a:hover {
    color: var(--bg);
    transform: scale(1.15) translateY(-5px);
    background: var(--accent);
    box-shadow: 0 0 25px var(--accent);
}

.btn {
    display: inline-block;
    padding: 1rem 2.8rem;
    background: var(--bg);
    border-radius: 4rem;
    font-size: 1.6rem;
    color: var(--accent);
    letter-spacing: .2rem;
    font-weight: 600;
    border: 2px solid var(--accent);
    transition: .3s ease;
    cursor: pointer;
}

.btn:hover {
    transform: scale(1.03);
    background: var(--accent);
    color: var(--bg);
    box-shadow: 0 0 25px var(--accent);
}

.home-buttons {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1rem;
}

.cv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
}

.cv-btn i {
    font-size: 1.5rem;
}

/* TYPING===========================================================================================*/
.typing-text {
    font-size: 34px; 
    font-weight: 600; 
    color: var(--text-color);
}

.typing-text span {
    position: relative;
    color: var(--accent); /* Warna teks yang sedang diketik */
}

/* Mengatur kata apa saja yang muncul */
.typing-text span::before {
    content: "Junior Geophysicist";
    animation: words 20s infinite;
}

/* Ini adalah kotak background & kursor yang menutupi teks (Efek Ketik) */
.typing-text span::after {
    content: "";
    position: absolute;
    height: 100%;
    background-color: var(--bg); /* Menyesuaikan dengan tema gelap/terang */
    right: -8px;
    border-left: 3px solid var(--accent); /* Warna kursor berkedip */
    /* Menggabungkan animasi kursor berkedip & animasi ngetik */
    animation: cursor 0.8s infinite, typing 4s steps(14) infinite;
}

/* Animasi Kursor Berkedip */
@keyframes cursor {
    0% { border-left-color: var(--accent); }
    50% { border-left-color: transparent; }
    100% { border-left-color: var(--accent); }
}

/* Animasi Pergantian Kata (Total 20 detik untuk 5 kata) */
@keyframes words {
    0%, 20% { content: "Junior Geophysicist"; }
    21%, 40% { content: "Land Surveyor"; }
    41%, 60% { content: "Geospatial Analyst"; }
    61%, 80% { content: "Topographic Mapper"; }
    81%, 100% { content: "Geophysicist"; }
}

/* Animasi Mengetik (Buka-Tutup Teks) */
@keyframes typing {
    0%, 10%, 100% { width: calc(100% + 8px); } /* Teks tertutup semua (dihapus) */
    40%, 60% { width: 0; } /* Teks terbuka semua (selesai diketik) */
}

/* =====================================================
   MEMBUAT TOMBOL HOME KE TENGAH KHUSUS DI HP
====================================================== */
@media (max-width: 995px) {
    .home-buttons {
        justify-content: center; /* Mengatur tombol agar posisinya di tengah secara horizontal */
        width: 100%;
        margin-bottom: 2rem;
    }
}


/* GENERAL=========================================================================================== */
.section{display:flex;flex-direction:column;align-items:center}
.section-title{text-align:center;max-width:800px;margin-bottom:5rem}
.section-title h2{font-size:5rem;margin-bottom:1rem}
.section-title p{font-size:1.6rem;color:var(--muted);line-height:1.7}

/* SERVICES================================================================================================ */
.cards{width:100%;max-width:1200px;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.card{
    background: var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:2rem;
    padding:3rem 2.2rem;
    text-align:center;
    min-height:310px;
    transition: all 0.3s ease;
}
.card:hover{
    transform:translateY(-10px);
    border-color:var(--accent);
    box-shadow:0 0 25px rgba(183,75,75,.2)
}
.card i{color:var(--accent);font-size:4rem;margin-bottom:2rem}
.card h3{font-size:2.2rem;margin-bottom:1.3rem; color: var(--text-color);}
.card p{color:var(--muted);font-size:1.45rem;line-height:1.8}

/* SKILLS========================================================================================= */
.skills-wrapper {
    width: 100%;
    max-width: 1000px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem; 
}

.skill-group {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1.6rem;
    padding: 1.6rem; 
    transition: background 0.3s ease, border-color 0.3s ease;
}

.skill-group h3 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

.skill-group h3 i {
    color: var(--accent);
    margin-right: .8rem;
}

.skill-item {
    margin-bottom: .8rem;
    padding: .8rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 1rem;
    transition: all .4s ease;
}

.skill-item:hover {
    background: var(--hover-bg);
    border-color: var(--accent);
    transform: translateY(-2px);
}

.skill-item:hover > div:first-child span {
    color: var(--text-color) !important;
    transition: color .3s ease;
}

.skill-item > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.4rem;
    margin-bottom: .4rem;
    color: var(--text-color);
}

.skill-item > div:first-child span:last-child {
    color: var(--accent);
}

.skill-bar {
    width: 100%;
    height: 7px;
    background: var(--bar-bg);
    border-radius: 20px;
    overflow: hidden;
    transition: background 0.3s ease;
}

.skill-bar span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 20px;
    width: 0%;
    transition: width 0.3s linear;
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.skill-tags span {
    display: inline-flex !important;
    align-items: center;
    color: var(--text-color);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: .75rem 1.2rem;
    border-radius: 3rem;
    font-size: 1.2rem;
    transition: .3s ease;
}

.skill-tags span:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

.skill-tags span i {
    font-size: 2rem;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: .6rem;
}

.app-icon {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    margin-right: .6rem;
    vertical-align: middle;
    transition: filter .3s ease;
}

/* TIMELINE */
.timeline{
    width:100%;
    max-width:850px;
    position:relative;
    margin:0 auto;
}

.timeline::before{
    display:none;
}

.timeline-item{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2.5rem;
    margin-bottom:3rem;
}

.timeline-icon{
    width:100px;
    height:100px;
    min-width:100px;
    border-radius:50%;
    background: #ffffff; /* Biarkan putih agar logo kampus/sekolah tetap terlihat jelas */
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border:1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.timeline-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:8px;
    display:block;
    margin:0 auto;
}

.timeline-content{
    flex:0 1 700px;
    background: var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:1.5rem;
    padding:2.5rem;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.timeline-content:hover{
    border-color:var(--accent);
}

.timeline-date{
    display:inline-block;
    color:var(--accent);
    font-size:1.3rem;
    font-weight:600;
    margin-bottom:.8rem;
}

.timeline-content h3{
    font-size:2.2rem;
    margin-bottom:.5rem;
    color: var(--text-color);
}

.timeline-content h4{
    font-size:1.5rem;
    font-weight:500;
    color:var(--muted);
    margin-bottom:1.5rem;
}

.timeline-content p,
.timeline-content li{
    color:var(--muted);
    font-size:1.45rem;
    line-height:1.8;
}

.timeline-content ul{
    padding-left:2rem;
}

/* Container Utama Language */
.language-section {
    width: 100%;
    max-width: 850px;
    margin: 0 auto 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
}

.language-icon {
    width: 100px;
    height: 100px;
    min-width: 100px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 3.5rem;
    transition: border-color 0.3s ease;
}

.language-box {
    flex: 0 1 700px;
    width: 100%;
    padding: 2.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1.5rem;
    transition: .3s ease;
}

.language-box:hover {
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(183,75,75,.2);
    transform: translateY(-3px);
}

.language-content strong {
    color: var(--accent);
    font-size: 1.6rem;
    display: inline-block;
    margin-bottom: 0.8rem;
}

.language-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.language-content li {
    color: var(--muted);
    font-size: 1.45rem;
    line-height: 1.8;
    position: relative;
    padding-left: 1.5rem;
}

.language-content li::before {
    content: "•";
    color: var(--accent);
    position: absolute;
    left: 0;
}

/* =====================================================
   EXPERIENCE SECTION (KARTU LEBIH TINGGI & RATA KE BAWAH)
====================================================== */
.experience-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 15px;
    box-sizing: border-box; 
}

.exp-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1.5rem;
    overflow: hidden;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 560px; /* KUNCI: Menentukan tinggi minimal kartu agar memanjang ke bawah secara rapi dan lega */
}

.exp-card:hover {
    border-color: var(--accent);
    transform: translateY(-5px);
}

.exp-content {
    padding: 1.8rem; /* Memperbesar ruang di dalam kartu agar teks tidak terlalu mepet ke bawah */
    display: flex;
    flex-direction: column;
    flex-grow: 1;    /* Membuat area teks mengisi sisa ruang bawah secara proporsional */
}
/* =====================================================
   MEMPERBESAR KOTAK KARTU (EXP-CARD) AGAR LEBIH LEGA KE BAWAH
====================================================== */
.exp-card {
    background-color: var(--card-bg); /* Warna latar belakang kartu */
    border-radius: 12px;             /* Membuat sudut kartu melengkung rapi */
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    margin-bottom: 25px;
    /* TAMBAHKAN INI JIKA INGIN KARTUNYA LEBIH TINGGI / LEGA KE BAWAH: */
    min-height: 580px;               /* Mengatur tinggi minimal kartu, bisa dinaikkan jadi 600px atau 620px */
}


/* =====================================================
   PENYESUAIAN FINAL BINGKAI FOTO EXPERIENCE (PAS & RAPI)
====================================================== */
.exp-img {
    width: 100%;
    height: 200px;          /* Tinggi bingkai disesuaikan agar pas dengan lebar card */
    overflow: hidden;
    display: block;
    background-color: var(--bg);
}

.exp-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;      
    object-position: center; /* KUNCI: Menggeser posisi foto ke bawah (angka 70% bisa dinaikkan jadi 80% jika ingin lebih turun lagi) */
    display: block;
    transition: transform 0.4s ease;
}

.exp-card:hover .exp-img img {
    transform: scale(1.03);
}

.exp-content {
    padding: 1.2rem; 
    display: flex;
    flex-direction: column;
}

.exp-date, .exp-location {
    display: block;
    font-size: 1.2rem;
    color: var(--accent); 
    font-weight: 600;
}

.exp-date {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
}

.exp-location {
    margin-bottom: 8px !important;
    font-weight: 500;
}

.exp-content h3 {
    font-size: 1.6rem; 
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 5px !important;
    line-height: 1.2;
    color: var(--text-color);
}

.exp-content h4 {
    font-size: 1.4rem; 
    font-weight: 500;
    color: var(--muted);
    margin-top: 0;
    margin-bottom: 12px !important;
}

.exp-list {
    margin: 0;
    padding-left: 20px;
    box-sizing: border-box;
}

.exp-list li {
    font-size: 1.3rem; 
    color: var(--muted); /* Menggunakan warna mutted agar konsisten dan tegas di mode terang */
    line-height: 1.4;
    margin-bottom: 8px; 
    word-break: break-word; 
}

.exp-list li:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
  .experience-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px; 
    padding: 0; 
  }
  .exp-img {
    height: 250px; 
  }
  .exp-content {
    padding: 1.5rem; 
  }
  .exp-content h3 {
    font-size: 2rem; 
  }
  .exp-content h4 {
    font-size: 1.6rem;
  }
}

/* =========================FAQ Q&A SECTION============================================= */

.faq-wrapper {
    width: 100%;
    max-width: 900px;
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    overflow: hidden;
    transition: 0.3s ease;
}

.faq-item:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.faq-question {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-color);
    padding: 22px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    cursor: pointer;
}

.faq-question i {
    color: var(--accent);
    font-size: 1.4rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 25px;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
}

.faq-answer p {
    margin: 0;
    color: var(--muted);
    font-size: 1.4rem;
    line-height: 1.8;
}

.faq-answer a {
    color: var(--accent);
    text-decoration: none;
}

.faq-answer a:hover {
    text-decoration: underline;
}

.faq-item.active .faq-answer {
    max-height: 300px;
    opacity: 1;
    padding: 0 25px 22px;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

@media (max-width: 768px) {
    .faq-wrapper {
        margin-top: 30px;
        gap: 12px;
    }
    .faq-question {
        padding: 18px 18px;
        font-size: 1.4rem;
    }
    .faq-question i {
        font-size: 1.2rem;
    }
    .faq-answer {
        padding-left: 18px;
        padding-right: 18px;
    }
    .faq-answer p {
        font-size: 1.25rem;
        line-height: 1.7;
    }
    .faq-item.active .faq-answer {
        padding: 0 18px 18px;
    }
    .skills-wrapper {
        display: flex;
        flex-direction: column;
        gap: 2rem; 
        width: 100%;
    }
    .skill-group {
        width: 100%;
    }
    .skill-item {
        margin-bottom: 1.5rem; 
    }
    .skill-tags {
        display: flex;
        flex-wrap: wrap; 
        gap: 0.8rem;
        justify-content: flex-start;
    }
}

/* RESPONSIVE LAINNYA */
@media(max-width:1100px){
    .cards{grid-template-columns:repeat(2,1fr)}
    nav a{margin-left:2rem}
    .home{gap:4rem}
}

@media(max-width:995px){
    header{
        margin-top:0;
        padding:1.5rem 7%;
    }
    .menu-btn{
        display:block;
    }
    nav{
        position:absolute;
        display:none;
        top:100%;
        right:5%;
        width:260px;
        border-left:3px solid var(--accent);
        border-bottom:3px solid var(--accent);
        border-bottom-left-radius:2rem;
        padding:1rem 2rem;
        background: var(--card-bg); /* Mengikuti tema mode yang aktif */
    }
    nav.active{
        display:block;
    }
    nav a{
        display:block;
        font-size:1.8rem;
        margin:2rem 0;
        width:fit-content;
    }
    .home{
        flex-direction:column;
        text-align:center;
        padding-top:12rem;
        gap:4rem;
    }
    .home-img img{
        width:55vw;
        min-width:260px;
    }
    .home-content h1{
        font-size:5rem;
    }
    .home-content h3{
        font-size:2.8rem;
    }
    .home-content p{
        font-size:1.45rem;
    }
    .social-icons{
        display:flex;
        justify-content:center;
    }
}

@media(max-width:650px){
    html{font-size:55%}
    section{padding:9rem 7% 6rem}
    .section-title h2{font-size:4rem}
    .cards{grid-template-columns:1fr}
    .home-img img{width:70vw}
    .timeline-item{gap:1.5rem}
    .timeline::before{left:20px}
    .timeline-icon{width:42px;height:42px;min-width:42px;font-size:1.5rem}
    .timeline-content{padding:2rem}
}