/* ==========================================================================
   custom.css — override tema Courtney
   Dimuat SETELAH light-mode.css. Jangan pernah mengedit light-mode.css.
   Token mengikuti _reference/template/scss/_variables-light.scss:
     accent #4CAF50 · ink #202124 · garis rgba(32,33,36,.1)
     transisi cepat .2s cubic-bezier(0, 0, 0.3642, 1)
   ========================================================================== */

:root {
    --mil-accent: #4CAF50;
    --mil-ink: #202124;
    --mil-soft: rgba(32, 33, 36, .5);
    --mil-line: rgba(32, 33, 36, .1);
    --mil-fast: .2s cubic-bezier(0, 0, 0.3642, 1);
}

/* --------------------------------------------------------------------------
   Ikon sosial sidebar kiri

   AKAR MASALAH: light-mode.css:846 berbunyi `font-size: 16åpx` — ada karakter
   `å` nyasar, jadi deklarasinya tidak valid dan diabaikan browser. Ukuran ikon
   lalu mewarisi font-size induknya dan terlihat acak. Itu sebabnya pemilik
   menilai ikon sosial tidak menyatu dengan template.

   JANGAN memperbaiki typo itu langsung di light-mode.css — berkas tersebut
   terkunci (aturan kerja no. 6 di docs/PROMPT.md). Blok di bawah menimpanya
   dari sini dengan kotak rounded berukuran seragam.
   -------------------------------------------------------------------------- */
.mil-left-panel .mil-social-icons {
    gap: 10px;
    align-items: center;
}

.mil-left-panel .mil-social-icons li {
    margin-bottom: 0;
    line-height: 0;
}

.mil-left-panel .mil-social-icons li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: solid 1px var(--mil-line);
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
    color: var(--mil-soft);
    background-color: #fff;
    transition: color var(--mil-fast), border-color var(--mil-fast), transform var(--mil-fast);
}

.mil-left-panel .mil-social-icons li a:hover,
.mil-left-panel .mil-social-icons li a:focus-visible {
    color: var(--mil-accent);
    border-color: var(--mil-accent);
    transform: translateY(-2px);
}

/* Viewport pendek: rapatkan supaya tetap muat tanpa memotong ikon. */
@media screen and (max-height: 700px) {
    .mil-left-panel .mil-social-icons {
        gap: 6px;
    }

    .mil-left-panel .mil-social-icons li a {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
}

/* --------------------------------------------------------------------------
   Foto profil bulat di beranda

   light-mode.css:1498 mengunci fotonya ke 120x120 px tanpa object-fit. Foto
   template kebetulan persegi, jadi aman; foto potret ikut ditarik jadi persegi
   dan terlihat gepeng. object-fit menjaga proporsi, dan latar putih mengisi
   ruang kosong di belakang PNG transparan.
   -------------------------------------------------------------------------- */
.mil-oval-frame-2 img {
    object-fit: cover;
    object-position: top center;
    background-color: #fff;
}

/* --------------------------------------------------------------------------
   Logo gambar di navbar

   Kotak logo template berukuran 90x90 px (light-mode.css:689) dan berlatar
   gelap, jadi logo terang tampil paling jelas di sini.
   -------------------------------------------------------------------------- */
.mil-top-panel .mil-logo .mil-logo-img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    transition: transform var(--mil-fast);
}

.mil-top-panel .mil-logo:hover .mil-logo-img {
    transform: scale(1.08);
}

/* --------------------------------------------------------------------------
   Tombol kanan navbar — urutan tetap: [ID ▾] → [CV] → [Email]
   -------------------------------------------------------------------------- */
.mil-top-panel .mil-top-panel-btns {
    /* Ketiga tombol (bahasa, CV, email) berukuran 90px dan menempel tanpa
       celah, seperti kotak logo di sisi kiri. */
    gap: 0;
}

@media screen and (max-width: 1200px) {
    .mil-top-panel .mil-top-panel-btns {
        gap: 14px;
    }
}

/* Dropdown bahasa: kotak 90px menempel di sisi kanan logo, memakai hijau
   aksen seperti tombol CV. Terbuka saat hover atau fokus keyboard, tanpa
   JavaScript sama sekali. */
.mil-top-panel .mil-lang-dropdown {
    position: relative;
}

/* .mil-top-panel memakai justify-content: space-between (light-mode.css:674).
   Dengan pemilih bahasa sebagai anak keempat, pembagian ruangnya jadi timpang
   dan menu terdorong ke kanan. Menu diberi porsi sisa ruang lalu diratakan
   tengah, sehingga tetap di tengah panel berapa pun lebar layarnya. */
@media screen and (min-width: 1200px) {
    .mil-top-panel .mil-navigation {
        flex: 1;
    }

    /* Daftar menu berada di dalam <nav> yang punya flex sendiri, jadi perataan
       tengah harus dipasang di situ, bukan di pembungkusnya. */
    .mil-top-panel .mil-navigation nav {
        justify-content: center;
    }
}

.mil-top-panel .mil-lang-current {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 90px;
    height: 90px;
    padding: 0;
    border: none;
    background-color: var(--mil-accent);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .08em;
    cursor: pointer;
    transition: .4s cubic-bezier(0, 0, 0.3642, 1);
}

.mil-top-panel .mil-lang-current svg {
    width: 16px;
    height: 16px;
    transition: transform var(--mil-fast);
}

.mil-top-panel .mil-lang-dropdown:hover .mil-lang-current {
    filter: brightness(110%);
}

.mil-top-panel .mil-lang-dropdown:hover .mil-lang-current svg,
.mil-top-panel .mil-lang-dropdown:focus-within .mil-lang-current svg {
    transform: rotate(180deg);
}

.mil-top-panel .mil-lang-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    min-width: 200px;
    margin: 0;
    padding: 10px 0;
    list-style: none;
    background-color: #fff;
    box-shadow: 0 10px 30px rgba(32, 33, 36, .12);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity var(--mil-fast), transform var(--mil-fast);
}

.mil-top-panel .mil-lang-dropdown:hover .mil-lang-menu,
.mil-top-panel .mil-lang-dropdown:focus-within .mil-lang-menu {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

.mil-top-panel .mil-lang-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    font-size: 14px;
    color: var(--mil-soft);
    text-decoration: none;
    transition: color var(--mil-fast);
}

.mil-top-panel .mil-lang-menu a span {
    min-width: 22px;
    font-weight: 500;
    color: var(--mil-ink);
}

.mil-top-panel .mil-lang-menu a:hover,
.mil-top-panel .mil-lang-menu a:focus-visible,
.mil-top-panel .mil-lang-menu a.mil-active,
.mil-top-panel .mil-lang-menu a.mil-active span {
    color: var(--mil-accent);
}

/* Di layar sempit menu utama disembunyikan template, sehingga pembagian ruang
   space-between menaruh pemilih bahasa di tengah panel. margin-right: auto
   menahannya tetap di sisi logo, dan bentuknya disamakan dengan tombol CV. */
@media screen and (max-width: 1200px) {
    .mil-top-panel .mil-lang-dropdown {
        margin-right: auto;
        margin-left: 16px;
    }

    .mil-top-panel .mil-lang-current {
        width: auto;
        height: 34px;
        padding: 0 14px;
        border-radius: 999px;
        font-size: 12px;
    }

    .mil-top-panel .mil-lang-menu {
        min-width: 170px;
    }
}

@media screen and (max-width: 480px) {
    .mil-top-panel .mil-lang-dropdown {
        margin-left: 10px;
    }

    .mil-top-panel .mil-lang-current {
        height: 30px;
        padding: 0 11px;
        font-size: 11px;
    }
}

/* Tombol CV: kotak 90px seperti pemilih bahasa dan tombol email, memakai
   hijau aksen template supaya berbeda dari keduanya yang gelap. */
.mil-top-panel .mil-top-panel-btns .mil-cv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    background-color: var(--mil-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .08em;
    text-decoration: none;
    transition: .4s cubic-bezier(0, 0, 0.3642, 1);
}

.mil-top-panel .mil-top-panel-btns .mil-cv-btn:hover,
.mil-top-panel .mil-top-panel-btns .mil-cv-btn:focus-visible {
    color: #fff;
    filter: brightness(110%);
}

/* Di bawah 1200px tombol email milik template berubah jadi ikon polos, jadi
   kotak 90px di sini terlihat janggal. Tombol CV ikut menyusut menjadi pil
   ringkas setinggi ikon di sebelahnya. */
@media screen and (max-width: 1200px) {
    .mil-top-panel .mil-top-panel-btns .mil-cv-btn {
        width: auto;
        height: 34px;
        padding: 0 16px;
        border-radius: 999px;
        font-size: 12px;
    }
}

@media screen and (max-width: 480px) {
    .mil-top-panel .mil-top-panel-btns .mil-cv-btn {
        height: 30px;
        padding: 0 12px;
        font-size: 11px;
    }
}

/* Di bawah 1200px tombol email jadi inline (light-mode.css:782), jadi
   jarak kanannya diambil alih di sini supaya ketiganya tetap sejajar. */
@media screen and (max-width: 1200px) {
    .mil-top-panel .mil-top-panel-btns .mil-contact-btn {
        margin-right: 0;
    }
}

/* 360px: rapatkan supaya ID/EN, CV, email, dan hamburger tetap muat sebaris. */
@media screen and (max-width: 480px) {
    .mil-top-panel .mil-top-panel-btns {
        gap: 8px;
        padding-right: 16px;
    }

}

/* Tombol chat dan tombol dokumen: selalu dua kolom, termasuk di layar kecil.
   Flex-wrap membuat keduanya menumpuk begitu tidak muat, padahal satu baris
   dua kolom lebih rapi dan lebih mudah dijangkau ibu jari. */
.mil-contact-btns,
.mil-doc-btns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.mil-contact-btns .mil-btn,
.mil-doc-btns .mil-btn {
    width: 100%;
    min-width: 0;
}

/* Bila hanya satu tombol yang tampil (misalnya CV belum diunggah), biarkan
   memakai kedua kolom supaya tetap di tengah. */
.mil-contact-btns > *:only-child,
.mil-doc-btns > *:only-child {
    grid-column: 1 / -1;
}

.mil-doc-btns .mil-file-meta {
    text-align: center;
}

@media screen and (max-width: 576px) {
    .mil-contact-btns,
    .mil-doc-btns {
        gap: 10px 12px;
    }

    /* Template mengunci .mil-btn pada satu baris dengan padding 50px, yang
       tidak muat di setengah lebar layar ponsel. */
    .mil-contact-btns .mil-btn,
    .mil-doc-btns .mil-btn {
        height: auto;
        min-height: 60px;
        padding: 12px 10px;
        white-space: normal;
        line-height: 1.35;
    }
}

/* Tombol Telegram memakai biru merek Telegram, membedakannya dari tombol
   WhatsApp yang memakai hijau aksen template. */
.mil-btn.mil-btn-telegram {
    background-color: #229ED9;
}

.mil-btn.mil-btn-telegram:hover,
.mil-btn.mil-btn-telegram:focus-visible {
    background-color: #1b8ec2;
}

/* --------------------------------------------------------------------------
   Formulir kontak — template tidak menyediakan gaya untuk pesan kesalahan.
   -------------------------------------------------------------------------- */
.mil-field-error {
    display: block;
    margin-top: 6px;
    color: #d93025;
    font-size: 13px;
}

input.mil-invalid,
textarea.mil-invalid {
    border-color: #d93025 !important;
}

.mil-form-alert {
    padding: 14px 18px;
    border-radius: 8px;
    border: solid 1px rgba(76, 175, 80, .3);
    background-color: rgba(76, 175, 80, .08);
    color: #2e7d32;
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   Sampul project pada kartu (halaman Semua Project, Beranda, Project serupa)

   Bingkai template berbanding 100:65 dan gambarnya dipasang object-fit: cover
   dengan transform scale(1.05) (light-mode.css:2299). Sampul project berupa
   grafis 16:9 yang memuat teks sampai dekat tepi, jadi kombinasi itu memotong
   judulnya. Bingkai disamakan ke 16:9 dan gambar ditampilkan utuh.

   Carousel "Project Unggulan" tidak ikut diubah: bingkainya setinggi layar dan
   memang dirancang memenuhi ruang.
   -------------------------------------------------------------------------- */
/* Pindaian sertifikat berbanding sekitar 3:2, lebih jangkung dari sampul
   project, jadi bingkainya disesuaikan agar tidak menyisakan ruang kosong. */
.mil-portfolio-item.mil-cert .mil-cover-frame {
    padding-bottom: 67.75%;
}

.mil-portfolio-item a.mil-cover-frame {
    display: block;
}

.mil-portfolio-item:not(.mil-carousel-item) .mil-cover-frame {
    padding-bottom: 56.25%;
    background-color: #fafafa;
}

.mil-portfolio-item:not(.mil-carousel-item) .mil-cover-frame img {
    object-fit: contain;
    transform: scale(1);
}

/* Zoom halus saat disorot, menggantikan efek template yang mengecilkan gambar. */
.mil-portfolio-item:not(.mil-carousel-item):hover .mil-cover-frame img {
    transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   Galeri project: kartu "Lihat semua" dan popup

   Halaman detail hanya menampilkan empat tangkapan layar. Sisanya diwakili
   satu kartu buram yang membuka popup berisi seluruh galeri.
   -------------------------------------------------------------------------- */
/* Tangkapan layar project memakai bingkai seukuran sampul (16:9). Gambar
   boleh terpotong karena versi utuhnya bisa dibuka lewat klik. */
.mil-shot {
    position: relative;
    overflow: hidden;
    padding-bottom: 56.25%;
    background-color: #fafafa;
}

.mil-shot img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.mil-gallery-more {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 56.25%;
    border: none;
    background-color: #fafafa;
    cursor: pointer;
    overflow: hidden;
}

.mil-gallery-more img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: blur(6px);
    transform: scale(1.06);
}

.mil-gallery-more::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(32, 33, 36, .45);
}

.mil-gallery-more span {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .04em;
    text-align: center;
}

.mil-gallery-more:hover::after,
.mil-gallery-more:focus-visible::after {
    background-color: rgba(32, 33, 36, .6);
}

/* Penampil gambar: modal lebar yang isinya bisa digulir. Tangkapan layar
   penuh satu halaman jauh lebih tinggi daripada layar, jadi gambar ditampilkan
   selebar modal lalu digulir, bukan dipaksa muat sampai terpotong. */
.mil-zoom {
    position: fixed;
    inset: 0;
    z-index: 1000;
    overflow-y: auto;
    padding: 40px;
    background-color: rgba(32, 33, 36, .75);
    cursor: zoom-out;
}

.mil-zoom-box {
    position: relative;
    max-width: min(1400px, 94vw);
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 20px 60px rgba(32, 33, 36, .35);
}

.mil-zoom-box img {
    display: block;
    width: 100%;
    height: auto;
}

.mil-zoom-close {
    position: sticky;
    top: 0;
    float: right;
    z-index: 1;
    margin: 10px 10px 0 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background-color: #fff;
    color: var(--mil-ink);
    font-size: 22px;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(32, 33, 36, .25);
    cursor: pointer;
    transition: color var(--mil-fast), transform var(--mil-fast);
}

.mil-zoom-close:hover,
.mil-zoom-close:focus-visible {
    color: var(--mil-accent);
    transform: scale(1.06);
}

@media screen and (max-width: 600px) {
    .mil-zoom {
        padding: 16px;
    }

    .mil-zoom-box {
        max-width: 100%;
    }
}

/* Tautan kredensial pada kartu sertifikat: teks, bukan ikon panah. */
.mil-cert-link {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Gambar yang bisa diperbesar: kursor kaca pembesar, seperti galeri gambar. */
[data-zoom] {
    cursor: zoom-in;
}

/* --------------------------------------------------------------------------
   Isi panjang hasil Markdown (detail project dan artikel blog)

   Template tidak menyiapkan gaya untuk teks panjang: judul menempel ke
   paragraf berikutnya dan daftar berbutir memakai bulatan bawaan browser.
   -------------------------------------------------------------------------- */
.mil-prose > *:first-child {
    margin-top: 0;
}

.mil-prose h2,
.mil-prose h3,
.mil-prose h4 {
    margin: 60px 0 20px;
}

.mil-prose h2 {
    font-size: 30px;
}

.mil-prose h3 {
    font-size: 24px;
}

.mil-prose p {
    margin: 0 0 20px;
}

.mil-prose ul,
.mil-prose ol {
    margin: 0 0 24px;
    padding-left: 0;
    list-style: none;
}

.mil-prose ol {
    counter-reset: mil-prose;
}

.mil-prose li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 28px;
}

.mil-prose ul > li::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--mil-accent);
}

.mil-prose ol > li::before {
    counter-increment: mil-prose;
    content: counter(mil-prose) ".";
    position: absolute;
    left: 0;
    color: var(--mil-accent);
    font-weight: 500;
}

.mil-prose li > ul,
.mil-prose li > ol {
    margin: 12px 0 0;
}

.mil-prose blockquote {
    margin: 0 0 24px;
    padding: 4px 0 4px 24px;
    border-left: solid 2px var(--mil-accent);
    color: var(--mil-soft);
}

.mil-prose a {
    color: var(--mil-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mil-prose code {
    padding: 2px 6px;
    border-radius: 4px;
    background-color: rgba(32, 33, 36, .06);
    font-size: .9em;
}

.mil-prose pre {
    margin: 0 0 24px;
    padding: 18px 20px;
    overflow-x: auto;
    border-radius: 8px;
    background-color: #202124;
    color: #f5f5f5;
}

.mil-prose pre code {
    padding: 0;
    background: none;
    color: inherit;
}

.mil-prose img {
    max-width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    .mil-prose h2,
    .mil-prose h3,
    .mil-prose h4 {
        margin: 40px 0 16px;
    }
}

/* --------------------------------------------------------------------------
   Badge tech stack & meta unduhan
   -------------------------------------------------------------------------- */
.mil-tag {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 4px 12px;
    border: solid 1px var(--mil-line);
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: .02em;
    color: var(--mil-soft);
}

.mil-file-meta {
    margin-top: 6px;
    font-size: 12px;
    color: var(--mil-soft);
}

/* Filter jenis project di /projects/all */
a.mil-tag {
    text-decoration: none;
    transition: color var(--mil-fast), border-color var(--mil-fast);
}

a.mil-tag:hover,
a.mil-tag:focus-visible {
    color: var(--mil-ink);
    border-color: var(--mil-ink);
}

a.mil-tag.mil-tag-active {
    background-color: var(--mil-accent);
    border-color: var(--mil-accent);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Banner beranda tanpa tombol "Gulir ke bawah"

   Template memakai dua tampilan: di layar tinggi, tombol gulir (bingkai oval
   atas) + foto membentuk satu kapsul; di layar pendek (max-height 750px,
   light-mode.css:1403/1472/1493) tombolnya disembunyikan, banner tidak lagi
   setinggi layar, dan foto menjadi bulat. Tombol gulir sudah dibuang atas
   permintaan pemilik, jadi tampilan layar pendek itu dipakai di semua ukuran.
   -------------------------------------------------------------------------- */
.mil-side-banner.mil-side-banner-compact {
    height: auto;
}

.mil-side-banner.mil-side-banner-compact .mil-banner-title {
    padding: 30px 0;
}

.mil-side-banner-compact + #about .mil-oval-frame-2 {
    border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Layar sempit (360px)

   Judul banner memakai huruf besar tanpa pemenggalan; kata panjang seperti
   "Pengembangan" menjorok beberapa piksel keluar layar. Izinkan pemecahan
   kata hanya bila memang tidak muat.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
    .mil-banner-title h1,
    .mil-banner-title .mil-breadcrumbs {
        overflow-wrap: anywhere;
    }
}

/* --------------------------------------------------------------------------
   Aksesibilitas keyboard (PRD 8.4)

   Template hanya memunculkan submenu "Other" saat :hover, jadi pengguna
   keyboard tidak pernah bisa membukanya. :focus-within memberi perilaku yang
   sama begitu fokus masuk ke item itu — di desktop maupun menu mobile.
   -------------------------------------------------------------------------- */
.mil-navigation nav ul li.mil-has-children:focus-within ul {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0) scale(1);
}

@media screen and (max-width: 1200px) {
    .mil-navigation nav ul li.mil-has-children:focus-within ul {
        margin-top: 15px;
        max-height: 350px;
    }
}

/* Cincin fokus yang jelas, hanya untuk navigasi keyboard (bukan klik mouse). */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--mil-accent);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Pagination — template hanya menyediakan state normal & aktif.
   -------------------------------------------------------------------------- */
.mil-pagination .mil-pagination-buttons .mil-pagination-btn.mil-pagination-disabled {
    opacity: .4;
    cursor: default;
}

/* Perjalanan: label periode tetap satu baris.
   .mil-item-head adalah flex, jadi tanpa ini pil tahunnya ikut menyusut
   dan teksnya patah dua baris begitu judul entrinya panjang. */
.mil-timeline ul li .mil-item-head .mil-text-sm {
    flex-shrink: 0;
    white-space: nowrap;
}