/* #region: Token Tema */
:root {
    --colorheading: #16161d;
    --colormuted: color-mix(in srgb, var(--colortext) 72%, transparent);
    --colorcard: color-mix(in srgb, var(--color1) 5%, var(--colorlight));   /* latar kartu: versi muda color1 (solid, tidak menumpuk) */
    --color1text: var(--color1);   /* color1 untuk teks, ikon & garis di atas latar; dark.css mencerahkannya */
    --fontheading: Arial, sans-serif;   /* ditimpa dari Theme Options (parts.php) */
    --fontbody: Arial, sans-serif;
    --headerh: 80px;
    --shadow: 0 24px 60px -28px color-mix(in srgb, var(--colorheading) 45%, transparent);
    --ease: cubic-bezier(.2, .8, .2, 1);
    --overlay: rgb(0 0 0 / .7);   /* latar gelap semua popup & backdrop menu HP (sama di mode terang/gelap) */
    /* Teks di atas latar color1/color2 (cadangan sebelum opsi disimpan; parts.php menghitungnya dari warna opsi) */
    --color1on: #ffffff;
    --color2on: #ffffff;
}
/* #endregion */

/* #region: Umum */
body {
    font-family: var(--fontbody);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
._logo .logo-text b {
    font-family: var(--fontheading);
    color: var(--colorheading);
    letter-spacing: -.01em;
}

/* Rata tengah lewat padding --autopad (bukan margin auto, agar aman di dalam .flexcon.nm) */
.container {
    width: 100%;
    padding-left: var(--autopad);
    padding-right: var(--autopad);
}
#home-content > section {
    padding-top: 55px;
    padding-bottom: 55px;
    scroll-margin-top: var(--headerh);
    overflow-x: clip;   /* dekorasi (mis. cincin berputar) tidak boleh membuat halaman melebar di HP */
}
#home-content > section:last-child {
    padding-bottom: 110px;
}
#single-content {
    padding: 50px 0 80px;
}

/* Tombol */
.bttn {
    font-weight: 600;
}
.bttn._big {
    padding: 15px 28px;
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--x10bradius);
}
.bttn i {
    transition: transform .3s var(--ease);
}
.bttn:hover .fa-arrow-right {
    transform: translateX(4px);
}
.bttn._outline {
    background: transparent;
    color: var(--colorheading);
    box-shadow: inset 0 0 0 1px var(--colorborder);
    border-radius: var(--x10bradius);
}
.bttn._outline:hover {
    background: var(--color1);
    color: var(--colorwhite);
    box-shadow: none;
}

/* Judul section */
.container ._title {
    max-width: 720px;
}
.container ._title._center {
    align-self: center;
    align-items: center;
    text-align: center;
}
.container ._title h2 {
    margin: 0;
    font-size: clamp(2em, 3.2vw, 2.8em);
    line-height: 1.2;
}
.container ._title ._desc {
    margin: 0;
    color: var(--colormuted);
}
._eyebrow {
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color1text);
}
._empty {
    padding: 40px;
    border: 1px dashed var(--colorborder);
    border-radius: var(--x2bradius);
    color: var(--colormuted);
}
/* Kotak dengan efek hover seragam (Sorotan, Cara Kerja, ...): border 2px color1 solid + "paku" color2.
   Border asli 2px sejak awal (hanya warnanya yang berubah): isi tidak bergeser & lengkungan sudut tetap solid.
   Latar & padding diatur tiap komponen. */
.card-hover {
    position: relative;
    isolation: isolate;   /* paku :before di belakang isi, tetap di atas latar kotak */
    overflow: hidden;
    border: 2px solid var(--colorborder);
    /* Gradasi permanen, ujung atas transparan: saat diam tampak solid (sama dengan latar),
       saat hover latar dasar jadi terang sehingga gradasi --hoverfade "muncul" halus.
       Aktifkan per komponen dengan --hoverfade (mis. kotak berlatar --colorcard). */
    background-image: linear-gradient(to bottom, transparent, var(--hoverfade, transparent));
    transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
/* Hover: border color1 di atas latar terang */
.card-hover:hover {
    border-color: var(--color1text);
    background-color: var(--colorlight);
}
.card-hover:before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 14px;
    right: 14px;
    width: 12px;
    height: 12px;
    border-radius: var(--x10bradius);   /* bulat di round, kotak di flat */
    background: var(--color2);
    transform: scale(0);
    transition: transform .4s var(--ease);
}
.card-hover:hover:before {
    transform: scale(1);
}
/* Tanpa paku (mis. kartu yang pojok kanan atasnya tertutup gambar) */
.card-hover._nopin:before {
    content: none;
}
/* Latar color1 untuk wadah gambar kartu & gambar unggulan: mengisi lubang placeholder.svg,
   dan tampil selama gambar dimuat */
.loop ._pigura,
._featured ._pigura {
    background: var(--color1);
}
/* Gambar di wadah ._pigura: block, bukan inline. Gambar inline menyisakan ruang di bawahnya (untuk kaki huruf),
   terlihat sebagai celah kosong saat tinggi wadah mengikuti gambar (mis. halaman lampiran) */
._pigura img {
    display: block;
}
/* Latar gradasi lembut untuk gambar section (foto PNG transparan) */
#proses ._photo,
#resume ._exp ._photo {
    background: linear-gradient(160deg, color-mix(in srgb, var(--color1) 18%, var(--colorlight)), color-mix(in srgb, var(--color2) 25%, var(--colorlight)));
}
/* Judul blok di dalam ._content (Keahlian, Resume, ...) */
._blocktitle {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 1.8em;
}
/* Aksen strip dua warna (color1 + color2): judul blok & label pengalaman di Tentang */
._blocktitle:after,
.experience h2:after {
    content: '';
    flex-shrink: 0;
    width: 80px;
    height: 4px;
    border-radius: var(--x10bradius);
    background: linear-gradient(90deg, var(--color1text) 70%, transparent 70% calc(70% + 10px), var(--color2) calc(70% + 10px));
}
/* #endregion */

/* #region: Header */
#header {
    background: color-mix(in srgb, var(--colorlight) 90%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--colorborder);
    z-index: 99;
    transition: box-shadow .3s var(--ease);
}
#header._sticky {
    position: sticky;
    top: 0;
}
#header._sticky._scrolled {
    box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--colorheading) 35%, transparent);
}
.admin-bar #header._sticky {
    top: 32px;
}
#header ._content {
    min-height: var(--headerh);
}
._logo img {
    max-height: 34px;   /* logo default 247×48 → ±175px lebar */
    width: auto;
    display: block;
}
._logo .logo-text b {
    font-size: 1.6em;
    font-weight: 700;
}
._logo .logo-text i {
    font-style: normal;
    color: var(--color1text);
}
/* Tombol ikon header: satu gaya untuk pencarian, PWA, dark mode, burger, tutup menu (pil di round, kotak di flat) */
.icon-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95em;
    color: var(--colorheading);
    background: var(--colorcard);
    border: 0;
    border-radius: var(--x10bradius);
    box-shadow: none;
    transition: .3s var(--ease);
}
.icon-btn:hover,
.icon-btn:focus-visible {
    color: var(--colorwhite);
    background: var(--color1);
}
/* Social media header: satu latar bersama; hover = seluruh pil color1, ikon yang dihover opacity .8 */
#header .socmed._header {
    height: 42px;
    gap: 0;
    flex-wrap: nowrap;
    flex-shrink: 0;
    background: var(--colorcard);
    border-radius: var(--x10bradius);
    transition: background .3s var(--ease);
}
#header .socmed._header a {
    width: 42px;
    height: 42px;
    font-size: .95em;
    color: var(--colorheading);
    background: transparent;
    border: 0;
    border-radius: var(--x10bradius);
    transition: color .3s var(--ease), opacity .2s;
}
#header .socmed._header a:hover {
    color: var(--colorwhite);
    background: var(--color1);
}
#header .menu-toggle,
#header .search-toggle._mobile {
    display: none;
}

/* Tombol CTA WhatsApp (paling kanan header) */
.wa-cta {
    height: 42px;
    padding: 0 20px 0 16px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .9em;
    font-weight: 600;
    white-space: nowrap;
    color: var(--colorwhite);
    background: var(--color1);
    border-radius: var(--x10bradius);
    transition: .3s var(--ease);
}
.wa-cta:hover {
    color: var(--colorwhite);
    background: var(--color2);
}
.wa-cta .oke-icon {
    width: 1.3em;
    height: 1.3em;
}
/* Teks tombol dikosongkan: ikon saja */
.wa-cta._icon {
    width: 42px;
    padding: 0;
    justify-content: center;
}

/* Kolom pencarian di header */
.header-search {
    position: relative;
    display: flex;
    align-items: center;
}
.header-search input[type="search"] {
    width: 200px;
    height: 42px;
    padding: 0 44px 0 18px!important;
    font-size: .9em;
    background: var(--colorcard)!important;
    border: 1px solid transparent!important;
    border-radius: var(--x10bradius)!important;
    transition: width .3s var(--ease), border-color .3s;
}
.header-search input[type="search"]:focus {
    width: 240px;
    border-color: var(--color1text)!important;
}
.header-search button {
    position: absolute;
    right: 4px;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--colorheading);
    background: transparent;
    border-radius: var(--x10bradius);
}
.header-search button:hover {
    color: var(--colorwhite);
    background: var(--color1);
}

/* Menu Utama */
.main-menu {
    flex: 1;
    min-width: 0;   /* boleh menyusut, lebar isi diukur di header.php untuk mode _mobile */
    display: flex;
    justify-content: center;
}
.main-menu .socmed._menu,
.main-menu ._head,
.menu-backdrop {
    display: none;
}
.main-menu ul {
    display: flex;
    gap: 6px 24px;
    list-style: none;
}
.main-menu li {
    position: relative;
}
.main-menu a {
    display: block;
    padding: 6px 0;
    font-size: .95em;
    font-weight: 600;
    white-space: nowrap;
    color: var(--colorheading);
}
.main-menu a:hover,
.main-menu li._active > a,
.main-menu li.current-menu-item > a,
.main-menu li.current-menu-ancestor > a {
    color: var(--color1text);
}
/* Ikon dari fitur Icon Menu (Codestar) di depan teks item menu */
.main-menu ._inner a > i {
    margin-right: 6px;
}
.main-menu .sub-toggle {
    display: none;
}

/* Submenu (desktop): dropdown saat hover / fokus keyboard */
.main-menu .menu-item-has-children > a:after {
    content: '\f107';
    margin-left: 6px;
    font-family: 'Font Awesome 5 Free';
    font-size: .75em;
    font-weight: 900;
}
.main-menu ul ul {
    position: absolute;
    top: 100%;
    left: -18px;
    z-index: 10;
    min-width: 230px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--colorlight);
    border: 1px solid var(--colorborder);
    border-radius: var(--x2bradius);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: .25s var(--ease);
}
.main-menu ul ul ul {
    top: -11px;
    left: 100%;
}
.main-menu li:hover > ul,
.main-menu li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.main-menu ul ul a {
    padding: 9px 14px;
    font-size: .9em;
    font-weight: 500;
    white-space: normal;
    border-radius: var(--bradius);
}
.main-menu ul ul a:hover {
    background: var(--colorcard);
}
.main-menu ul ul .menu-item-has-children > a:after {
    content: '\f105';
    float: right;
}
/* #endregion */

/* #region: Header Mode HP (#header._mobile) */
/* Class _mobile dipasang skrip di header.php: saat item menu tidak muat atau layar ≤1024px */

/* backdrop-filter membuat header jadi containing block untuk .main-menu (fixed), jadi dimatikan */
#header._mobile {
    background: var(--colorlight);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
#header._mobile .menu-toggle {
    display: inline-flex;
}
#header._mobile ._logo {
    margin-right: auto;
}
#header._mobile ._tools .socmed._header {
    display: none;
}

/* Off-canvas dari kiri (sisi tombol burger), disembunyikan dengan transform + visibility */
#header._mobile .main-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 290px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh;   /* tinggi layar yang terlihat (bar alamat HP tidak menutupi item terakhir); 100vh = cadangan */
    padding: 20px 26px 30px;
    display: block;
    background: var(--colorlight);
    box-shadow: var(--shadow);
    overflow-y: auto;                 /* menu panjang bisa di-scroll di dalam panel */
    overscroll-behavior: contain;     /* scroll di ujung panel tidak menggulir halaman di belakangnya */
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .3s var(--ease), visibility .3s;
    z-index: 100;
}
#header._switching .main-menu {
    transition: none!important;
}
#header._mobile .main-menu._active {
    transform: none;
    visibility: visible;
}

/* Kepala panel: logo + tombol tutup */
#header._mobile .main-menu ._head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--colorborder);
}
#header._mobile .main-menu ._head ._logo .logo-text b {
    font-size: 1.4em;
}
/* Backdrop di dalam header (stacking context yang sama), menutup logo & tombol header */
#header._mobile .menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: block;
    background: var(--overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s;
}
#header._mobile .menu-backdrop._active {
    opacity: 1;
    visibility: visible;
}
#header._mobile .main-menu ul {
    flex-direction: column;
    gap: 0;   /* jarak antar item hanya dari padding link, agar seluruhnya jadi area sentuh */
}
#header._mobile .main-menu a {
    padding: 7px 0;
    font-size: 1.05em;
    white-space: normal;
}

/* Submenu: akordion lewat tombol .sub-toggle (theme.js) */
#header._mobile .main-menu .menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
#header._mobile .main-menu .menu-item-has-children > a {
    flex: 1;
}
#header._mobile .main-menu .menu-item-has-children > a:after {
    display: none;
}
#header._mobile .main-menu .sub-toggle {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    color: var(--colorheading);
    background: var(--colorcard);
    border-radius: var(--x10bradius);   /* bulat di round, kotak di flat */
    transition: transform .3s var(--ease);
}
#header._mobile .main-menu li._open > .sub-toggle {
    transform: rotate(180deg);
}
#header._mobile .main-menu ul ul,
#header._mobile .main-menu ul ul ul {
    position: static;
    flex-basis: 100%;
    min-width: 0;
    padding: 0 0 0 14px;
    display: none;
    background: none;
    border: 0;
    border-left: 2px solid var(--colorborder);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
}
#header._mobile .main-menu li._open > ul {
    display: flex;
}
#header._mobile .main-menu ul ul a {
    padding: 6px 0;   /* submenu sedikit lebih rapat dari menu utama */
    font-size: .95em;
}
#header._mobile .main-menu ul ul a:hover {
    background: none;
}
#header._mobile .main-menu .socmed._menu {
    display: flex;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid var(--colorborder);
    gap: 10px;
}
/* #endregion */

/* #region: Hero */
#hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-top: 0!important;
    padding-bottom: 0!important;
    background: linear-gradient(100deg, var(--colorlight) 42%, color-mix(in srgb, var(--color1) 10%, var(--colorlight)));
}
/* Pola grid garis halus di sisi kiri, memudar melingkar (CSS murni, warna dari --color1) */
#hero:before {
    content: '';
    position: absolute;
    opacity: .7;
    inset: 0;
    z-index: -1;
    --gridline: color-mix(in srgb, var(--color1) 14%, transparent);
    background-image:
        linear-gradient(var(--gridline) 1px, transparent 1px),
        linear-gradient(90deg, var(--gridline) 1px, transparent 1px);
    background-size: 44px 44px;
    background-position: -1px -1px;
    -webkit-mask-image: radial-gradient(ellipse 55% 65% at 22% 45%, #000 15%, transparent 72%);
    mask-image: radial-gradient(ellipse 55% 65% at 22% 45%, #000 15%, transparent 72%);
}
#hero ._inner {
    min-height: clamp(560px, calc(100vh - var(--headerh)), 780px);
}
#hero ._content {
    flex: 1 1 54%;
    align-self: center;
    padding: 70px 0;
    position: relative;
    z-index: 4;
}
#hero ._badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: .85em;
    font-weight: 600;
    background: var(--colorlight);
    border: 1px solid var(--colorborder);
    border-radius: var(--x10bradius);
}
/* Titik badge: color2 berdenyut, sama dengan badge Kontak (.contact-badge ._dot) */
#hero ._dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: var(--x10bradius);
    background: var(--color2);
    animation: vortovoPulseAccent 2s infinite;
}
#hero ._greeting {
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--colorheading);
}
#hero h1 {
    margin: 0;
    font-size: clamp(2.6em, 4.6vw, 4.3em);
    line-height: 1.25;
    letter-spacing: -.04em;
}
#hero ._roles {
    display: block;
    min-height: 1.12em;
    color: var(--color1text);
}
#hero ._caret {
    display: inline-block;
    width: 4px;
    height: .85em;
    margin-left: 6px;
    vertical-align: -.05em;
    background: var(--color1text);
    animation: blinker 1s steps(1) infinite;
}
#hero ._desc {
    max-width: 520px;
    margin: 0;
    font-size: 1.05em;
    color: var(--colormuted);
}

/* Visual: foto (PNG transparan) + dekorasi latar animasi */
#hero ._visual {
    flex: 0 0 44%;
    align-self: stretch;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
#hero ._deco {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
#hero ._deco > * {
    position: absolute;
    display: block;
}
/* Blob gradasi yang berubah bentuk */
#hero ._blob {
    left: 50%;
    bottom: 14%;
    width: 90%;
    aspect-ratio: 1;
    translate: -50% 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color1) 26%, transparent), color-mix(in srgb, var(--color2) 22%, transparent));
    border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%;
    animation: vortovoMorph 14s ease-in-out infinite alternate;
}
/* Cincin putus-putus berputar pelan */
#hero ._ring {
    right: -10%;
    bottom: 7%;
    width: 14%;
    aspect-ratio: 1;
    border: 2px dashed color-mix(in srgb, var(--color1) 35%, transparent);
    border-radius: var(--x10bradius);
    animation: vortovoSpin 30s linear infinite;
}
/* Grid titik */
#hero ._dots {
    top: 12%;
    right: 0;
    width: 132px;
    height: 132px;
    opacity: .45;
    background: radial-gradient(var(--color1) 2px, transparent 2.5px) 0 0 / 16px 16px;
    animation: vortovoFloat 7s ease-in-out infinite;
}
#hero ._dots._alt {
    top: auto;
    right: auto;
    bottom: 15%;
    left: -20%;
    width: 96px;
    height: 96px;
    background-image: radial-gradient(var(--color2) 2px, transparent 2.5px);
    animation-delay: -3.5s;
}
/* Bentuk kecil melayang */
#hero ._shape {
    animation: vortovoFloat 6s ease-in-out infinite;
}
#hero ._shape._circle {
    top: 24%;
    left: 10%;
    width: 20px;
    height: 20px;
    border-radius: var(--x10bradius);
    background: var(--color2);
}
@keyframes vortovoMorph {
    0%   { border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%; rotate: 0deg; }
    50%  { border-radius: 60% 40% 38% 62% / 55% 62% 38% 45%; }
    100% { border-radius: 38% 62% 55% 45% / 62% 45% 55% 38%; rotate: 25deg; }
}
@keyframes vortovoSpin {
    to { rotate: 360deg; }
}
@keyframes vortovoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
    #hero ._deco > * {
        animation: none;
    }
}
#hero ._photo {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: 520px;
    max-height: calc(100% - 40px);
    object-fit: contain;
    object-position: bottom center;
}
/* #endregion */

/* #region: Social Media */
/* Jarak antar ikon (header memakai pil bersama tanpa jarak, lihat #header .socmed._header) */
.socmed {
    gap: 10px;
}
.socmed a {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--x10bradius);   /* bulat di round, kotak di flat */
    background: var(--colorlight);
    border: 1px solid var(--colorborder);
    color: var(--colorheading);
}
.socmed a:hover {
    background: var(--color1);
    border-color: var(--color1);
    color: var(--colorwhite);
}
/* Ukuran ikon OkeIcon (CSS dasar dicetak modul inc/okeicon) */
.socmed .oke-icon,
.shareit .oke-icon,
.contact-info .oke-icon {
    width: 1.1em;
    height: 1.1em;
}
/* #endregion */

/* #region: Sorotan Layanan */
/* Flex: kartu kurang dari 4 tetap mengisi satu baris penuh */
#sorotan .feature {
    flex: 1 1 210px;
    min-width: 0;
}
.feature {
    padding: 44px 24px 38px;
    background-color: var(--colorlight);   /* bukan shorthand: jangan timpa gradasi .card-hover */
    border-radius: var(--x2bradius);
}
.feature ._icon {
    font-size: 2.2em;
    color: var(--color1text);
    margin-bottom: 14px;
    transition: transform .4s var(--ease);
}
/* Ikon sedikit naik & membesar saat kartu disorot */
.feature:hover ._icon {
    transform: translateY(-3px) scale(1.2);
}
.feature h3 {
    margin: 0;
    font-size: 1.2em;
}
.feature span {
    font-size: .9em;
    color: var(--colormuted);
}
/* #endregion */

/* #region: Tentang (Pengalaman & Angka) */
#tentang ._content {
    grid-template-columns: 1fr 1fr;
}
#tentang ._content._single {
    grid-template-columns: 1fr;
}
.experience {
    padding: 50px;
    background: var(--colorcard);
    border-radius: var(--x2bradius);
}
.experience ._number {
    font-family: var(--fontheading);
    font-size: clamp(5em, 9vw, 8em);
    font-weight: 700;
    line-height: .9;
    color: var(--color1text);
    margin-bottom: -.1em;   /* ruang kosong di bawah angka, agar dasarnya segaris dengan strip aksen */
}
.experience h2 {
    max-width: 7em;
    margin: 0;
    font-size: clamp(1.6em, 2.4vw, 2.2em);
    line-height: 1.2;
}
/* Strip aksen di bawah label (aturan dasar di region Umum) */
.experience h2:after {
    display: block;
    margin-top: 16px;
}
.experience p {
    margin: 0;
    color: var(--colormuted);
}
.stats li {
    padding: 36px 20px;
    background-color: var(--colorcard);
    --hoverfade: var(--colorcard);   /* hover (.card-hover): gradasi terang (atas) ke --colorcard (bawah) */
    border-color: transparent;       /* border hanya muncul saat hover */
    border-radius: var(--x2bradius);
}
.stats ._number {
    font-family: var(--fontheading);
    font-size: clamp(2.2em, 3.2vw, 2.8em);
    font-weight: 700;
    line-height: 1.1;
    color: var(--colorheading);
}
.stats span {
    font-size: .9em;
    color: var(--colormuted);
}
/* #endregion */

/* #region: Keahlian */
.skill span {
    font-weight: 600;
    color: var(--colorheading);
}
.skill b {
    font-size: .9em;
    font-weight: 600;
    color: var(--colormuted);
}
.skill ._bar {
    height: 14px;
    background: var(--colorborder);
    border-radius: var(--x10bradius);
    overflow: hidden;
}
.skill ._bar span {
    display: block;
    width: var(--w);
    height: 100%;
    background: var(--color1text);
    border-radius: var(--x10bradius);
}
/* Bar diisi saat section terlihat (class dari theme.js).
   Transisi hanya saat mengisi, agar pengosongan awal (_anim) langsung ke 0 tanpa animasi menyusut */
#keahlian._anim .skill ._bar span {
    width: 0;
}
#keahlian._anim._in .skill ._bar span {
    width: var(--w);
    transition: width 1.4s var(--ease);
}
/* #endregion */

/* #region: Cara Kerja */
#proses ._content {
    grid-template-columns: 7fr 5fr;
}
#proses ._content._no-photo {
    grid-template-columns: 1fr;
}
.steps {
    margin: 0;
    padding: 0;
}
.steps li {
    padding: 30px 34px;
    background-color: var(--colorcard);
    --hoverfade: var(--colorcard);   /* hover: gradasi terang (atas) ke --colorcard (bawah) */
    border-color: transparent;   /* latar --colorcard sudah cukup, border hanya muncul saat hover (.card-hover) */
    border-radius: var(--x2bradius);
}
.steps h3 {
    margin: 0;
    display: flex;
    gap: 10px;   /* jarak nomor & judul; judul panjang tetap rata dengan teks baris pertama */
    font-size: 1.25em;
}
.steps h3 span {
    color: var(--color1text);
}
.steps p {
    margin: 0;
    color: var(--colormuted);
}
#proses ._visual,
#resume ._exp ._visual {
    position: relative;
    width: 100%;
    max-width: 440px;
    justify-self: center;
}
/* Bingkai gambar Cara Kerja & Pengalaman: lingkaran di round, kotak di flat (--bradius: 0 → radius 0) */
#proses ._photo,
#resume ._exp ._photo {
    position: relative;
    z-index: 1;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: min(50%, calc(var(--bradius) * 1000));
    /* Cincin di luar gambar: garis 2px --colorborder dengan jeda 10px (outline mengikuti lengkungan sudut) */
    outline: 2px solid var(--colorborder);
    outline-offset: 10px;
}
#proses ._photo img,
#resume ._exp ._photo img {
    object-position: center top;
}
/* Dekorasi: bulat di mode round, kotak di mode flat */
#proses ._shape,
#resume ._exp ._shape {
    position: absolute;
    z-index: 2;
    border-radius: var(--x10bradius);
    transform: translate(-50%, -50%);   /* left/top = titik pusat */
}
/* Titik pusat dekorasi di garis tengah cincin: jari-jari (50%) + jeda 10px + setengah garis 1px = 50% + 11px.
   Posisi = 50% ± (50% + 11px) × cos/sin sudut. Mode flat (cincin kotak): titik ke sudut cincin lewat max()/min()
   dengan --bradius (0px → tepi; --bradius wajib bersatuan, lihat parts.php).
   Ukuran sengaja kontras agar tidak ada titik yang tepinya pas bersinggungan dengan gambar:
   besar (color1, 40px) menjorok ±9px ke atas gambar (kesan berlapis), kecil (color2, 16px) murni di cincin. */
#resume ._exp ._shape._big,
#proses ._shape._big {
    width: 40px;
    height: 40px;
    background: var(--color1);
}
#resume ._exp ._shape._small,
#proses ._shape._small {
    width: 16px;
    height: 16px;
    background: var(--color2);
}
#proses ._s1 {   /* round: sudut 184° (kiri); flat: sudut kiri atas */
    left: calc(50% - (50% + 11px) * .9976);
    top: min(calc(50% + (50% + 11px) * .0698), calc(var(--bradius) * 1000 - 11px));
}
#proses ._s2 {   /* round: sudut -38° (kanan bawah); flat: sudut kanan bawah */
    left: max(calc(50% + (50% + 11px) * .788), calc(100% + 11px - var(--bradius) * 1000));
    top: max(calc(50% + (50% + 11px) * .6157), calc(100% + 11px - var(--bradius) * 1000));
}
/* #endregion */

/* #region: Resume */
.edu {
    padding: 30px;
    background-color: var(--colorcard);
    --hoverfade: var(--colorcard);   /* hover (.card-hover): gradasi terang (atas) ke --colorcard (bawah) */
    border-color: transparent;       /* border hanya muncul saat hover */
    border-radius: var(--x2bradius);
}
.edu h4 {
    margin: 0;
    font-size: 1.15em;
}
/* Institusi · periode dalam satu baris (periode turun ke bawah jika tidak muat) */
.edu ._meta {
    column-gap: 8px;
    font-size: .9em;
}
.edu ._place {
    color: var(--colormuted);
}
.edu ._period {
    font-weight: 700;
    white-space: nowrap;
    color: var(--color1text);
}
/* Pemisah titik bulat (bukan karakter ·: ukurannya bergantung font dan terlalu kecil) */
.edu ._place + ._period:before,
.komentar ._date:before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 8px 2px 0;
    vertical-align: middle;
    background: var(--colormuted);
    border-radius: 50%;
}
.edu p {
    margin: 0;
    color: var(--colormuted);
}
/* Gambar di kolom pertama (kiri), kebalikan Cara Kerja yang gambarnya di kanan */
#resume ._exp {
    grid-template-columns: 5fr 7fr;
}
#resume ._exp ._visual {
    order: -1;
    align-self: center;
}
#resume ._exp._no-photo {
    grid-template-columns: 1fr;
}
.exp-list li {
    padding: 24px 0;
    border-bottom: 1px dashed var(--colorborder);
}
.exp-list li:first-child {
    padding-top: 0;
}
.exp-list li:last-child {
    border-bottom: 0;
}
.exp-list ._place {
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color1text);
}
.exp-list h4 {
    margin: 0;
    font-size: 1.25em;
}
.exp-list small {
    font-family: var(--fontbody);
    font-size: .7em;
    font-weight: 500;
    color: var(--colormuted);
}
.exp-list p {
    margin: 0;
    color: var(--colormuted);
}
/* Gambar pengalaman: bingkai & dekorasi sama dengan Cara Kerja (aturan bersama di region Cara Kerja),
   posisi dekorasi dibalik: _s1 color2 kanan atas (sudut 40°), _s2 color1 kiri bawah (sudut 220°) */
#resume ._exp ._s1 {   /* titik kecil color2 — round: sudut 40° (kanan atas); flat: sudut kanan atas */
    left: max(calc(50% + (50% + 11px) * .766), calc(100% + 11px - var(--bradius) * 1000));
    top: min(calc(50% - (50% + 11px) * .6428), calc(var(--bradius) * 1000 - 11px));
}
#resume ._exp ._s2 {   /* titik besar color1 — round: sudut 220° (kiri bawah); flat: sudut kiri bawah */
    left: min(calc(50% - (50% + 11px) * .766), calc(var(--bradius) * 1000 - 11px));
    top: max(calc(50% + (50% + 11px) * .6428), calc(100% + 11px - var(--bradius) * 1000));
}
/* #endregion */

/* #region: Logo Klien */
/* Label ringkas: "● Dipercaya oleh ..." diapit garis memudar */
.clients-label {
    margin: 0;
    font-size: .85em;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--colorheading);
}
/* Garis tipis --colorborder di kiri & kanan label, memudar ke arah luar */
.clients-label:before,
.clients-label:after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--colorborder));
}
.clients-label:after {
    background: linear-gradient(90deg, var(--colorborder), transparent);
}
.clients-label span {
    text-align: center;
}
/* Logo berjalan, tepi kiri & kanan memudar, berhenti saat disorot */
.clients {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.clients ._track {
    width: max-content;
    animation: vortovoMarquee var(--dur, 24s) linear infinite;
}
.clients:hover ._track {
    animation-play-state: paused;
}
/* Jarak antar logo lewat padding (bukan gap) agar -50% tepat satu set */
.clients li {
    height: 70px;
    padding: 0 36px;
}
.clients img {
    max-width: 170px;
    max-height: 60px;
    width: auto;
    opacity: .6;
    filter: grayscale(1);
    transition: .3s;
}
.clients li:hover img {
    opacity: 1;
    filter: none;
}
.clients b {
    font-family: var(--fontheading);
    font-size: 1.3em;
    white-space: nowrap;
    color: var(--colormuted);
}
@keyframes vortovoMarquee {
    to { transform: translateX(-50%); }
}
/* Tanpa animasi: logo diam, salinan disembunyikan, baris boleh membungkus */
@media (prefers-reduced-motion: reduce) {
    .clients {
        -webkit-mask-image: none;
        mask-image: none;
    }
    .clients ._track {
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
        animation: none;
    }
    .clients li[aria-hidden] {
        display: none;
    }
}
/* #endregion */

/* #region: Portofolio */
.portfolio-filter button {
    padding: 9px 20px;
    font-size: .9em;
    color: var(--colorheading);
    background: var(--colorcard);
    border-radius: var(--x10bradius);
}
.portfolio-filter button._active,
.portfolio-filter button:hover {
    background: var(--color1);
    color: var(--colorwhite);
}
#portofolio .loop._hide {
    display: none;
}
/* #endregion */

/* #region: Layanan */
/* Kiri: judul + tombol (menempel saat di-scroll), kanan: grid kartu layanan */
#layanan ._content {
    grid-template-columns: 4fr 7fr;
    align-items: start;
}
#layanan ._intro {
    position: sticky;
    top: calc(var(--headerh) + 30px);
}
.services {
    grid-template-columns: repeat(2, 1fr);
}
/* Jumlah kartu ganjil: kartu terakhir selebar 2 kolom agar tidak ada ruang kosong */
.services > .service:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}
.service {
    padding: 30px;
    background-color: var(--colorlight);
    border-radius: var(--x2bradius);
}
/* Ikon dalam kotak lembut color1, terisi penuh saat kartu disorot */
.service ._icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    color: var(--color1text);
    background: color-mix(in srgb, var(--color1) 10%, transparent);
    border-radius: var(--x2bradius);
    transition: .4s var(--ease);
}
.service:hover ._icon {
    color: var(--colorwhite);
    background: var(--color1);
}
/* Nomor besar bergaris 1px di pojok, saat disorot terisi --colorborder (lembut, tidak bersaing dengan aksen) */
.service ._num {
    font-family: var(--fontheading);
    font-size: 2.6em;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--colorborder);
    transition: .4s var(--ease);
}
.service:hover ._num {
    color: var(--colorborder);
}
.service h3 {
    margin: 0;
    font-size: 1.3em;
}
.service p {
    margin: 0;
    color: var(--colormuted);
}
.service ._foot {
    margin-top: auto;   /* bagian bawah kartu selalu sejajar walau deskripsi beda panjang */
    padding-top: 18px;
    border-top: 1px dashed var(--colorborder);
}
/* Data dari CPT Layanan: gambar unggulan di kotak ikon, badge, dan harga */
.service ._icon._thumb {
    overflow: hidden;
    background: var(--colorcard);
}
.service ._icon._thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.service ._badge {
    padding: 4px 12px;
    font-size: .75em;
    font-weight: 700;
    color: var(--color2on);   /* teks otomatis putih/gelap sesuai color2 */
    background: var(--color2);
    border-radius: var(--x10bradius);
}
.service ._price {
    color: var(--colormuted);
    font-size: .85em;
}
.service ._price b {
    font-family: var(--fontheading);
    font-size: 1.35em;
    font-weight: 700;
    color: var(--colorheading);
}
/* Tombol panah lebih kecil; :after melebar menutupi kartu sehingga seluruh kartu bisa diklik */
.service ._arrow {
    --arrow: 44px;
    margin-left: auto;   /* tetap di kanan walau kartu tanpa harga */
}
.service ._arrow:after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Tampilan Daftar Harga: kolom paket selebar penuh, jumlah kolom mengikuti jumlah paket */
.plans {
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
}
.plans._cols1 {
    max-width: 420px;
    grid-template-columns: 1fr;
}
.plans._cols2 {
    max-width: 820px;
    grid-template-columns: repeat(2, 1fr);
}
.plans._cols4 {
    grid-template-columns: repeat(4, 1fr);
}
/* Subgrid: 4 baris tiap kolom (kepala, harga, fitur, tombol) berbagi tinggi baris dengan kolom lain,
   jadi harga & fitur tetap sejajar walau ada badge, judul 2 baris, atau deskripsi lebih panjang */
.plan {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 20px;
    padding: 32px 28px;
    background-color: var(--colorlight);
    border-radius: var(--x2bradius);
}
/* Paket ber-badge: border color1 sejak awal + tombol terisi (paket lain tombol outline) */
.plan._featured {
    border-color: var(--color1text);
    --hoverfade: var(--colorcard);
}
.plan ._badge {
    padding: 4px 12px;
    font-size: .75em;
    font-weight: 700;
    color: var(--color2on);   /* teks otomatis putih/gelap sesuai color2 */
    background: var(--color2);
    border-radius: var(--x10bradius);
}
.plan h3 {
    margin: 0;
    font-size: 1.3em;
}
.plan ._head p {
    margin: 0;
    font-size: .92em;
    color: var(--colormuted);
}
/* Harga rata kiri (sejajar judul & fitur): "Mulai" + nominal + "/ bulan" satu baris, turun baris hanya jika kolom sempit */
.plan ._price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    padding: 18px 0;
    font-size: .85em;
    color: var(--colormuted);
    border-top: 1px dashed var(--colorborder);
    border-bottom: 1px dashed var(--colorborder);
}
.plan ._price b {
    font-family: var(--fontheading);
    font-size: 1.9em;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--colorheading);
}
/* Paket tanpa harga: baris tetap ada (subgrid), tanpa garis */
.plan ._price._none {
    padding: 0;
    border: 0;
}
.plan ._specs {
    margin: 0;
}
.plan ._specs li {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: .95em;
}
.plan ._specs i {
    flex-shrink: 0;
    font-size: .8em;
    color: var(--color1text);
}
.plan ._action {
    align-self: end;   /* tombol di dasar kolom */
}
.plan .bttn {
    width: 100%;
}
/* #endregion */

/* #region: Testimoni */
#testimoni .splide__list {
    align-items: stretch;
}
#testimoni .splide__slide {
    height: auto;
}
/* Kartu ulasan: bintang + ikon kutip, teks ulasan, penulis (foto + nama) di bawah */
.testimonial {
    height: 100%;
    padding: 32px;
    background-color: var(--colorcard);
    --hoverfade: var(--colorcard);   /* hover (.card-hover): gradasi terang (atas) ke --colorcard (bawah) */
    border-color: transparent;       /* border hanya muncul saat hover */
    border-radius: var(--x3bradius);
}
.testimonial ._stars {
    display: inline-flex;
    gap: 4px;
    font-size: .95em;
    color: var(--color2);
}
.testimonial ._stars ._off {
    color: var(--colorborder);
}
.testimonial ._mark {
    font-size: 2.2em;
    line-height: 1;
    color: var(--colorborder);
    transition: color .4s var(--ease);
}
.testimonial:hover ._mark {
    color: var(--color1text);
}
.testimonial ._quote {
    margin: 0;
    font-size: 1.05em;
    line-height: 1.75;
    color: var(--colorheading);
}
.testimonial ._author {
    margin-top: auto;   /* penulis selalu sejajar di bawah walau panjang ulasan beda */
    padding-top: 20px;
    border-top: 1px dashed var(--colorborder);
}
.testimonial b {
    font-family: var(--fontheading);
    font-size: 1.05em;
    color: var(--colorheading);
}
.testimonial ._author span {
    font-size: .85em;
    color: var(--colormuted);
}
/* Foto & avatar inisial: 72×72, sudut mengikuti gaya sudut */
.testimonial ._photo {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--x10bradius);
}
.testimonial ._photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.testimonial ._photo._initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, var(--color1), var(--color2));
}
.testimonial ._initials span {
    font-family: var(--fontheading);
    font-size: 1.5em;
    font-weight: 700;
    color: var(--colorwhite);
}
#testimoni .splide__pagination {
    bottom: -45px;
}
#testimoni .splide__pagination__page.is-active {
    background: var(--color1);
    transform: none;
}
/* #endregion */

/* #region: Kontak */
.contact-box {
    grid-template-columns: 5fr 7fr;
    align-items: start;
    padding: 60px;
    background: var(--colorcard);
    border-radius: var(--x3bradius);
}
.contact-box._no-form {
    grid-template-columns: 1fr;
}
/* Badge di atas judul (titik color2 berdenyut) */
.contact-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: .85em;
    font-weight: 600;
    color: var(--colorheading);
    background: var(--colorlight);
    border: 1px solid var(--colorborder);
    border-radius: var(--x10bradius);
}
.contact-badge ._dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    background: var(--color2);
    border-radius: var(--x10bradius);
    animation: vortovoPulseAccent 2s infinite;
}
@keyframes vortovoPulseAccent {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color2) 55%, transparent); }
    70% { box-shadow: 0 0 0 10px transparent; }
}
/* Ikon kontak: sudut mengikuti gaya sudut, terisi color1 saat item yang bisa diklik disorot */
.contact-info i {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color1text);
    background: var(--colorlight);
    border: 1px solid var(--colorborder);   /* sama dengan ikon social media */
    border-radius: var(--x10bradius);
    transition: .4s var(--ease);
}
.contact-info li:has(a):hover i {
    color: var(--colorwhite);
    background: var(--color1);
    border-color: var(--color1);
}
.contact-info a,
.contact-info span {
    font-weight: 600;
    color: var(--colorheading);
}
.contact-info a:hover {
    color: var(--color1text);
}
/* Kartu form: border 2px, tanpa bayangan (konsisten dengan kartu lain) */
.contact-form,
.contact-box ._form {
    padding: 36px;
    background: var(--colorlight);
    border: 2px solid var(--colorborder);
    border-radius: var(--x2bradius);
}
/* Kolom form: border 2px, fokus berganti color1 (tebal tetap, isi tidak bergeser).
   Pakai #kontak: aturan input di style.css berderet :not() sehingga bobotnya tinggi */
#kontak .contact-form input:not([type='hidden']),
#kontak .contact-form textarea {
    border-width: 2px;
    transition: border-color .3s var(--ease);
}
#kontak .contact-form input:focus,
#kontak .contact-form textarea:focus {
    border-color: var(--color1text);
}
.contact-form p {
    margin: 0;
}
.contact-form label {
    font-size: .85em;
    font-weight: 600;
    color: var(--colorheading);
}
/* Captcha matematika: soal + kolom jawaban pendek dalam satu baris */
.contact-form ._captcha label {
    font-size: .95em;
}
.contact-form ._captcha ._q {
    color: var(--color1text);
    white-space: nowrap;
}
.contact-form ._captcha input {
    width: 90px;
    text-align: center;
}
.contact-form input,
.contact-form textarea,
.contact-box ._form input:not([type='submit']):not([type='checkbox']):not([type='radio']),
.contact-box ._form textarea {
    width: 100%;
}
.contact-form ._full {
    grid-column: 1 / -1;
}
.contact-form button {
    width: 100%;
}
.contact-form button._loading {
    opacity: .6;
    cursor: wait;
}
.contact-form ._hp {
    position: absolute;
    left: -9999px;
}
.contact-form ._result {
    font-size: .9em;
}
/* Selama kosong, batalkan gap 10px dari wadah. Tidak memakai display:none agar live region
   (aria-live) tetap terbaca screen reader saat pesan muncul */
.contact-form ._result:empty {
    margin-top: -10px;
}
.contact-form ._result._success {
    color: #16a34a;
}
.contact-form ._result._error {
    color: #dc2626;
}
/* #endregion */

/* #region: Loop (kartu post & portofolio) */
.loop {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.loop ._pigura {
    position: relative;
    overflow: hidden;
    border-radius: var(--x2bradius);
    aspect-ratio: 16 / 11;
}
.loop ._pigura img {
    transition: transform .7s var(--ease);
}
.loop:hover ._pigura img {
    transform: scale(1.05);
}
.loop h3 {
    margin: 0;
    font-size: 1.2em;
    line-height: 1.35;
}
.loop h3 a {
    color: var(--colorheading);
}
.loop h3 a:hover {
    color: var(--color1text);
}

/* Post: kartu berlatar --colorcard, kategori di atas gambar, tanggal + tombol panah di bawah */
.loop._post {
    padding: 18px;
    background-color: var(--colorcard);
    --hoverfade: var(--colorcard);   /* hover (.card-hover): gradasi terang (atas) ke --colorcard (bawah) */
    border-color: transparent;       /* border hanya muncul saat hover */
    border-radius: var(--x3bradius);
}
.loop._post ._content {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.loop._post ._content > div {
    flex: 1;
}
.loop._post ._foot {
    margin-top: auto;   /* baris bawah sejajar antar kartu walau judul 1 atau 2 baris */
}
.loop._post ._date {
    font-size: .85em;
    color: var(--colormuted);
}
.loop._post ._arrow {
    --arrow: 44px;
}
/* Seluruh kartu bisa diklik lewat tombol panah */
.loop._post ._arrow:after {
    content: '';
    position: absolute;
    inset: 0;
}
.loop ._tag {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 14px;
    font-size: .75em;
    font-weight: 700;
    color: var(--colorheading);
    background: var(--colorlight);
    border-radius: var(--x10bradius);
}

/* Portofolio: kartu berlatar --colorcard + tombol panah */
.loop._portfolio {
    padding: 18px;
    background-color: var(--colorcard);
    --hoverfade: var(--colorcard);   /* hover (.card-hover): gradasi terang (atas) ke --colorcard (bawah) */
    border-color: transparent;       /* border hanya muncul saat hover */
    border-radius: var(--x3bradius);
}
.loop._portfolio ._pigura {
    aspect-ratio: 4 / 3;
}
.loop._portfolio h3 {
    font-size: 1.3em;
}
.loop._portfolio ._category {
    font-size: .88em;
    color: var(--colormuted);
}
/* Tombol aksi kartu (portofolio, layanan): panah serong, hover kartu → latar color2 seperti .bttn */
._arrow {
    width: var(--arrow, 52px);
    height: var(--arrow, 52px);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--colorheading);
    background: var(--colorlight);
    border: 2px solid var(--colorborder);
    border-radius: var(--x10bradius);   /* bulat di round, kotak di flat */
    transition: .4s var(--ease);
}
/* Yang diputar ikonnya saja, agar tombol tetap tegak (kotak di mode flat, bukan belah ketupat) */
._arrow i {
    transform: rotate(-45deg);
}
.loop:hover ._arrow,
.service:hover ._arrow {
    color: var(--colorwhite);
    background: var(--color2);
    border-color: var(--color2);
}
.loop._portfolio ._arrow {
    align-self: end;
}
/* #endregion */

/* #region: Single & Arsip */
._featured ._pigura {
    max-height: 560px;
    overflow: hidden;
    border-radius: var(--x3bradius);
}
._featured-caption {
    font-size: .85em;
    text-align: center;
}

/* Single artikel: progress baca di tepi atas layar (lebar diatur theme.js lewat scaleX) */
.read-progress {
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0px);
    left: 0;
    right: 0;
    z-index: 101;
    height: 3px;
    pointer-events: none;
}
.read-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--color1), var(--color2));
    transform: scaleX(0);
    transform-origin: left;
}
/* Kepala artikel: pita berlatar --colorcard + pola grid (seperti Hero), isi rata kiri */
/* --overlap: seberapa jauh gambar unggulan menumpang ke pita. Selector diawali #single-content agar
   mengalahkan .flexcon.nm > * { margin: 0 } dari wadahnya */
#single-content {
    --overlap: 120px;
}
#single-content > .article-head {
    position: relative;
    isolation: isolate;
    margin-top: -50px;   /* menempel ke header: batalkan padding atas #single-content */
    padding: 50px 0 calc(var(--overlap) + 40px);   /* 40px jarak meta ke tepi atas gambar */
    background: var(--colorcard);
}
#single-content > .article-head._nofeatured {
    padding-bottom: 50px;
}
.article-head:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .7;
    --gridline: color-mix(in srgb, var(--color1) 14%, transparent);
    background-image:
        linear-gradient(var(--gridline) 1px, transparent 1px),
        linear-gradient(90deg, var(--gridline) 1px, transparent 1px);
    background-size: 44px 44px;
    background-position: -1px -1px;
    -webkit-mask-image: radial-gradient(ellipse 60% 90% at 85% 20%, #000 10%, transparent 70%);
    mask-image: radial-gradient(ellipse 60% 90% at 85% 20%, #000 10%, transparent 70%);
}
.article-head ._inner {
    max-width: 860px;
}
.article-head .crumbs {
    text-align: left;
    color: var(--colormuted);
}
/* Pil kategori: kategori di kepala artikel & filter kategori halaman daftar (.pill) */
.article-head ._cats a,
.pill {
    padding: 5px 14px;
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color1text);
    background: var(--colorlight);
    border: 1px solid color-mix(in srgb, var(--color1) 25%, transparent);
    border-radius: var(--x10bradius);
    transition: .3s var(--ease);
}
.article-head ._cats a:hover,
.pill:hover,
.pill._active {
    color: var(--colorwhite);
    background: var(--color1);
    border-color: var(--color1);
}
/* Kepala halaman daftar (vortovo_page_head): jumlah konten, foto penulis, form pencarian */
.article-head ._count {
    font-size: .85em;
    font-weight: 600;
    color: var(--colormuted);
}
.article-head ._avatar {
    border: 3px solid var(--colorlight);
    border-radius: var(--x10bradius);
}
/* Filter kategori: satu baris, digeser jika melebihi lebar (scroll/seret, theme.js) */
.term-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 6px;   /* ruang cincin fokus keyboard (tidak terpotong overflow) */
    margin: -6px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    cursor: grab;
}
.term-filter::-webkit-scrollbar {
    display: none;
}
.term-filter._dragging {
    cursor: grabbing;
    user-select: none;
}
.term-filter .pill {
    flex-shrink: 0;
    white-space: nowrap;
}
/* Form pencarian halaman daftar (header konten pencarian & isi 404) */
.head-search {
    width: 100%;
    max-width: 520px;
}
.head-search input {
    flex: 1;
    min-width: 0;
}
.article-head .head-search input {
    background: var(--colorlight);
}
.head-search .bttn {
    padding: 0 20px;
    border-radius: var(--x10bradius);
}
/* Isi 404: pesan, pencarian, tombol kembali (di bawah header konten) */
.error-404 {
    padding-top: 10px;
}
.error-404 p {
    max-width: 620px;
    font-size: 1.1em;
    color: var(--colormuted);
}
.article-head h1 {
    font-size: clamp(2em, 4.2vw, 3.1em);
    line-height: 1.15;
}
.article-head ._subtitle {
    font-size: 1.15em;
    color: var(--colormuted);
}
.article-head ._meta {
    font-size: .9em;
    color: var(--colormuted);
}
.article-head ._author {
    color: var(--colorheading);
}
.article-head ._author img {
    border: 2px solid var(--colorlight);
    border-radius: var(--x10bradius);
}
/* Detail dipisah titik kecil color2 */
.article-head ._detail li + li:before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 10px 2px;
    vertical-align: middle;
    background: var(--color2);
    border-radius: 50%;
}
.article-head ._detail a:hover {
    color: var(--color1text);
}
#single-content > .article-image {
    position: relative;
    margin-top: calc(-1 * var(--overlap) - 30px);   /* menumpang ke pita; 30px = gap-30 #single-content */
}
.article-image ._pigura {
    aspect-ratio: 16 / 9;
    max-height: 600px;
    box-shadow: var(--shadow);
}
.article-image ._pigura img {
    width: 100%;
    height: 100%;
}
/* Halaman lampiran: gambar utuh apa adanya (bukan bingkai 16:9), maksimal setinggi layar */
.article-image._attach ._pigura {
    width: fit-content;
    max-width: 100%;
    aspect-ratio: auto;
    max-height: none;
    background: var(--colorlight);
}
.article-image._attach ._pigura img {
    width: auto;
    height: auto;
    max-height: 80vh;
}
/* Isi artikel: tipografi baca yang lega */
/* Dua kolom: isi artikel mulai di garis kiri yang sama dengan kepala, sidebar menempel di kanan */
.article-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 70px;
    align-items: start;
    padding-top: 20px;
}
.article-layout._noside {
    grid-template-columns: minmax(0, 760px);
}
.article-body {
    min-width: 0;
}
.article-body .wrap-post {
    font-size: 1.06em;
    line-height: 1.8;
}
/* Blockquote & kode (gaya dasar di style.css): garis & ikon color1 memakai --color1text agar terbaca di dark mode */
blockquote,
pre {
    border-left-color: var(--color1text);
}
blockquote::before {
    color: var(--color1text);
}
/* Cincin fokus keyboard (style.css) memakai --color1text agar terlihat di dark mode */
a:focus-visible,
button:focus-visible,
.bttn:focus-visible,
input[type='submit']:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
body .splide .splide__arrow:focus-visible,
body .splide.is-focus-in .splide__arrow:focus {
    outline-color: var(--color1text);
}
.article-side {
    height: 100%;   /* sticky butuh induk setinggi kolom artikel */
}
.article-side ._sticky {
    position: sticky;
    top: calc(var(--headerh) + 30px);
    /* Daftar Isi panjang: sidebar bisa di-scroll sendiri, tidak terpotong di bawah layar */
    max-height: calc(100vh - var(--headerh) - 60px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
/* Bagikan: sidebar di desktop, baris tags di layar kecil (atau jika tanpa sidebar) */
.article-layout:not(._noside) .article-foot .shareit,
.article-layout:not(._noside) .article-foot._shareonly {
    display: none;
}
/* Daftar Isi */
.toc ol {
    margin: 12px 0 0;
    padding-left: 14px;
    border-left: 2px solid var(--colorborder);
}
.toc li {
    margin: 0;
}
.toc li._h3 {
    padding-left: 14px;
}
.toc a {
    display: block;
    position: relative;
    padding: 4px 0;
    font-size: .9em;
    line-height: 1.45;
    color: var(--colormuted);
    transition: color .3s var(--ease);
}
.toc a:hover,
.toc a._active {
    color: var(--color1text);
}
/* Penanda bagian aktif: menimpa garis kiri daftar */
.toc a._active:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -16px;
    width: 2px;
    background: var(--color1text);
}
.toc li._h3 a._active:before {
    left: -30px;
}
.toc._mobile {
    display: none;
    padding: 16px 20px;
    background: var(--colorcard);
    border-radius: var(--x2bradius);
}
.toc._mobile summary {
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: var(--colorheading);
}
.toc._mobile summary::-webkit-details-marker {
    display: none;
}
.toc._mobile[open] summary i {
    transform: rotate(180deg);
}
/* Bagikan di sidebar: label "Bagikan Artikel" menggantikan ikon panah */
.article-side .shareit i.fa-share {
    display: none;
}
/* Kotak penulis: di sidebar (desktop) versi tegak; di artikel hanya saat sidebar tersembunyi */
.article-layout:not(._noside) .article-body .author-box {
    display: none;
}
.article-side .author-box {
    padding: 24px;
}
.article-side .author-box p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;   /* bio panjang dipotong agar sidebar tetap muat di layar */
    line-clamp: 4;
    overflow: hidden;
    font-size: .9em;
}
.article-body .wrap-post h2,
.article-body .wrap-post h3 {
    margin: 1.6em 0 .6em;
    line-height: 1.3;
    scroll-margin-top: calc(var(--headerh) + 20px);
}
/* Tags + bagikan: satu baris di antara dua garis putus-putus */
.article-foot {
    padding: 20px 0;
    border-top: 1px dashed var(--colorborder);
    border-bottom: 1px dashed var(--colorborder);
}
.article-foot .tags a:before {
    content: '#';
    color: var(--color1text);
}
/* Kotak penulis */
.author-box {
    padding: 28px;
    background-color: var(--colorcard);
    --hoverfade: var(--colorcard);
    border-color: transparent;
    border-radius: var(--x2bradius);
}
.author-box img {
    flex-shrink: 0;
    border-radius: var(--x10bradius);
}
.author-box h4 {
    font-size: 1.25em;
}
.author-box p {
    color: var(--colormuted);
}
/* Tombol panah seperti kartu Layanan: :after melebar menutupi kartu, hover kartu → latar color2 */
.author-box ._arrow {
    --arrow: 44px;
}
.author-box ._arrow:after {
    content: '';
    position: absolute;
    inset: 0;
}
.author-box:hover ._arrow {
    color: var(--colorwhite);
    background: var(--color2);
    border-color: var(--color2);
}
/* Navigasi artikel sebelumnya / berikutnya */
.post-nav {
    grid-template-columns: repeat(2, 1fr);
}
.post-nav a {
    padding: 20px 24px;
    background-color: var(--colorlight);
    border-radius: var(--x2bradius);
}
.post-nav ._next {
    text-align: right;
    align-items: flex-end;
}
.post-nav ._label {
    font-size: .8em;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--colormuted);
}
.post-nav a:hover ._label {
    color: var(--color1text);
}
.post-nav b {
    font-family: var(--fontheading);
    color: var(--colorheading);
}
/* Artikel terkait: selebar container (lebih lebar dari isi artikel) */
#single-content > .article-related {
    margin-top: 30px;
}
/* Single portofolio: kartu Detail Proyek di sidebar (layar kecil: di atas deskripsi) */
.project-info {
    padding: 26px;
    background: var(--colorcard);
    border-radius: var(--x2bradius);
}
.project-info dl > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--colorborder);
}
.project-info dl > div:first-child {
    padding-top: 0;
}
.project-info dt {
    flex-shrink: 0;
    font-size: .85em;
    color: var(--colormuted);
}
.project-info dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
    color: var(--colorheading);
}
/* Single layanan: badge di kepala (pil color2 seperti badge kartu paket) */
.article-head ._badge {
    padding: 4px 12px;
    font-size: .75em;
    font-weight: 700;
    color: var(--color2on);   /* teks otomatis putih/gelap sesuai color2 */
    background: var(--color2);
    border-radius: var(--x10bradius);
}
/* Kartu harga di sidebar: harga besar, fitur bercentang, tombol Pesan Sekarang */
.price-box {
    padding: 28px 26px;
    background: var(--colorlight);
    border: 2px solid var(--colorborder);
    border-radius: var(--x2bradius);
}
.price-box._featured {
    border-color: var(--color1text);   /* layanan ber-badge: sama seperti paket unggulan */
}
.price-box ._amount {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    color: var(--colormuted);
}
.price-box ._amount b {
    font-family: var(--fontheading);
    font-size: 1.7em;
    font-weight: 700;
    line-height: 1.2;
    color: var(--colorheading);
}
.price-box ._specs {
    margin: 0;
    padding-top: 20px;
    border-top: 1px dashed var(--colorborder);
}
.price-box ._specs li {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin: 0;
    font-size: .95em;
}
.price-box ._specs i {
    flex-shrink: 0;
    font-size: .8em;
    color: var(--color1text);
}
.price-box .bttn {
    width: 100%;
}
.price-box .oke-icon {
    width: 1.2em;
    height: 1.2em;
}
.price-box ._sku {
    font-size: .82em;
    text-align: center;
    color: var(--colormuted);
}
/* Data belum diisi ("-" / Tanpa kategori) */
.project-info dd._none {
    font-weight: 400;
    color: var(--colormuted);
}
.project-info .bttn {
    width: 100%;
}
/* Galeri single: gambar besar mengisi bingkai 16:10 (cover) + thumbnail Splide; klik = Fancybox (gambar utuh) */
.project-gallery ._view {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--colorcard);
    border-radius: var(--x2bradius);
}
.project-gallery ._view img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* selalu mengisi bingkai (tepi bisa terpotong); versi utuh lewat lightbox */
}
.project-gallery ._zoom {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--colorheading);
    background: var(--colorlight);
    border-radius: var(--x10bradius);
    opacity: 0;
    transform: scale(.8);
    transition: .4s var(--ease);
}
.project-gallery ._view:hover ._zoom {
    opacity: 1;
    transform: scale(1);
}
/* Panah slider: tombol bulat seperti ._arrow */
.project-gallery .splide__arrow {
    width: 44px;
    height: 44px;
    opacity: 1;
    background: var(--colorlight);
    border: 2px solid var(--colorborder);
    border-radius: var(--x10bradius);
    transition: .3s var(--ease);
}
.project-gallery .splide__arrow svg {
    width: 14px;
    height: 14px;
    fill: var(--colorheading);
}
.project-gallery .splide__arrow:hover:not(:disabled) {
    background: var(--color2);
    border-color: var(--color2);
}
.project-gallery .splide__arrow:hover:not(:disabled) svg {
    fill: var(--colorwhite);
}
/* Thumbnail: tombol biasa, mulai dari kiri & turun baris jika banyak; aktif = border color1 */
.project-gallery ._thumbs button {
    width: 104px;
    height: 72px;
    padding: 0;
    overflow: hidden;
    opacity: .55;
    background: var(--colorcard);
    border: 2px solid transparent;
    border-radius: var(--bradius);
    transition: opacity .3s var(--ease), border-color .3s var(--ease);
}
.project-gallery ._thumbs img {
    width: 100%;
    height: 100%;
}
.project-gallery ._thumbs button:hover,
.project-gallery ._thumbs button._active {
    opacity: 1;
    background: var(--colorcard);   /* batalkan hover color2 dari gaya dasar button */
}
.project-gallery ._thumbs button._active {
    border-color: var(--color1text);
}
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tags a {
    padding: 3px 12px;
    font-size: .85em;
    background: var(--colorbg);
    border-radius: var(--x10bradius);
}
.shareit i.fa-share {
    color: var(--color1text);
}
.shareit .bttn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--x10bradius);   /* bulat di round, kotak di flat */
    box-shadow: none;
}
.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
}
/* Kotak nomor: pagination arsip/komentar & halaman artikel (<!--nextpage-->) */
.pagination .page-numbers,
.page-links .post-page-numbers {
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-weight: 600;
    background: var(--colorbg);
    border-radius: var(--x10bradius);
    transition: .3s var(--ease);
}
.pagination .current,
.pagination a:hover,
.page-links .current,
.page-links a:hover {
    background: var(--color1);
    color: var(--colorwhite);
}
.page-links ._label {
    margin-right: 8px;
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--colormuted);
}

/* Komentar: tiap utas dipisah garis putus-putus, balasan menjorok dengan garis utas di kiri */
.comment-list li {
    margin: 0;
}
.comment-list > li {
    padding: 24px 0;
    border-bottom: 1px dashed var(--colorborder);
}
.comment-list > li:first-child {
    padding-top: 0;
}
.comment-list .children {
    margin: 20px 0 0 23px;   /* garis utas sejajar tengah foto 48px */
    padding: 0 0 0 30px;
    list-style: none;
    border-left: 2px solid var(--colorborder);
}
.comment-list .children li + li {
    margin-top: 20px;
}
.komentar img {
    flex-shrink: 0;
    border-radius: var(--x10bradius);
}
.komentar ._body {
    flex: 1;
    min-width: 0;
}
.komentar ._name {
    font-family: var(--fontheading);
    color: var(--colorheading);
}
/* Badge penulis artikel: pil color1 lembut */
.komentar ._badge {
    padding: 2px 10px;
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--color1text);
    background: color-mix(in srgb, var(--color1) 12%, transparent);
    border-radius: var(--x10bradius);
}
.komentar ._date {
    font-size: .82em;
    color: var(--colormuted);
}
.komentar ._text p {
    margin: 0 0 .6em;
}
.komentar ._text p:last-child {
    margin-bottom: 0;
}
.komentar ._moderation {
    padding: 8px 14px;
    font-size: .85em;
    background: color-mix(in srgb, var(--color2) 15%, transparent);
    border-radius: var(--bradius);
}
.komentar ._actions a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82em;
    font-weight: 600;
    color: var(--colormuted);
    transition: color .3s var(--ease);
}
.komentar ._actions a:hover {
    color: var(--color1text);
}
.komentar ._actions i {
    font-size: .9em;
}
.comments ._none {
    margin: 0;
    color: var(--colormuted);
}
/* Form komentar: kartu seperti form Kontak, Nama & Email berdampingan */
.comment-respond {
    padding: 32px;
    background: var(--colorlight);
    border: 2px solid var(--colorborder);
    border-radius: var(--x2bradius);
}
.comment-list .comment-respond {
    margin-top: 20px;   /* form balasan (dipindah comment-reply.js ke bawah komentar) */
}
.comment-reply-title {
    margin: 0 0 6px;
    font-size: 1.25em;
}
.comment-reply-title small a {
    font-family: var(--fontbody);
    font-size: .7em;
    font-weight: 600;
    color: var(--colormuted);
}
.comment-reply-title small a:hover {
    color: var(--color2);
}
.comment-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.comment-form > * {
    grid-column: 1 / -1;
    margin: 0;
}
.comment-form .comment-notes {
    order: 0;
    font-size: .85em;
    color: var(--colormuted);
}
.comment-form .comment-form-author {
    order: 1;
    grid-column: auto;
}
.comment-form .comment-form-email {
    order: 2;
    grid-column: auto;
}
.comment-form .comment-form-comment {
    order: 3;
}
.comment-form .comment-form-cookies-consent {
    order: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85em;
}
.comment-form .form-submit {
    order: 5;
}
.comment-form label {
    display: block;
    margin-bottom: 6px;
    font-size: .85em;
    font-weight: 600;
    color: var(--colorheading);
}
.comment-form .comment-form-cookies-consent label {
    margin: 0;
    font-weight: 400;
    color: var(--colormuted);
}
/* Kolom: border 2px, fokus berganti color1 (seperti form Kontak). Pakai #komentar: aturan input
   di style.css berderet :not() sehingga bobotnya tinggi */
#komentar .comment-form input:not([type='submit']):not([type='checkbox']):not([type='hidden']),
#komentar .comment-form textarea {
    width: 100%;
    border-width: 2px;
    transition: border-color .3s var(--ease);
}
#komentar .comment-form input:focus,
#komentar .comment-form textarea:focus {
    border-color: var(--color1text);
}
/* #endregion */

/* #region: Footer */
#footer {
    padding-top: 80px;
    padding-bottom: 50px;
    background: var(--colorcard);
}
/* Kolom berbobot 5:3:4; kolom yang dinonaktifkan tidak meninggalkan ruang kosong */
#footer ._brand {
    flex: 5 1 300px;
}
#footer ._links {
    flex: 3 1 180px;
}
#footer ._contact {
    flex: 4 1 240px;
}
#footer h3 {
    max-width: 13em;
    margin: 0;
    font-size: clamp(1.6em, 2.6vw, 2.2em);
    line-height: 1.2;
}
#footer h4 {
    margin: 0;
    font-size: 1.15em;
}
#footer p {
    margin: 0;
    color: var(--colormuted);
}
/* Elemen widget yang di style.css berlatar --colorbg: pakai latar terang agar tidak menumpuk
   dengan latar #footer (--colorcard). #footer = bobot ID, mengalahkan deretan :not() */
#footer input:not([type='radio']):not([type='checkbox']):not([type='submit']):not([type='image']):not([type='range']):not([type='file']),
#footer select,
#footer textarea,
#footer blockquote,
#footer pre,
#footer code {
    background: var(--colorlight);
}
/* Gambar CTA (logo / gambar lain): tinggi dibatasi agar proporsional */
#footer ._brand ._img img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 80px;
}
#footer ._brand .bttn {
    align-self: flex-start;
}
#footer ._links ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
}
#footer ._links a {
    color: var(--colormuted);
}
#footer ._links a:hover {
    color: var(--color1text);
}
#footer .contact-info i {
    width: 40px;
    height: 40px;
    font-size: .9em;
}
#footer ._widgets {
    padding-top: 40px;
    border-top: 1px solid var(--colorborder);
    color: var(--colormuted);
}
#footer ._widgets > div {
    flex: 1;
}
/* Jarak judul & isi widget, sama dengan kolom widget bawaan tema (gap-20) */
#footer .widgets {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#copyright {
    padding-top: 22px;
    padding-bottom: 22px;
    font-size: .9em;
    color: var(--colormuted);
    background: var(--colorcard);
    border-top: 1px solid var(--colorborder);
}
#copyright b {
    color: var(--colorheading);
}
/* #endregion */

/* #region: Popup, Scroll Up & Label Maintenance */
/* Popup (.modal): pencarian & kontak memakai komponen yang sama.
   Latar --overlay (sama dengan backdrop menu HP), kotak terang di tengah, tutup: ×, klik luar, Esc (theme.js) */
.modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    padding: 20px;
    background: var(--overlay);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}
.modal._active {
    opacity: 1;
    visibility: visible;
}
.modal ._box {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 36px;
    background: var(--colorlight);
    border-radius: var(--x2bradius);
    transform: translateY(16px);
    transition: transform .3s var(--ease);
}
.modal._active ._box {
    transform: none;
}
.modal ._close {
    position: absolute;
    top: 16px;
    right: 16px;
}
.modal ._blocktitle {
    padding-right: 50px;   /* ruang tombol tutup */
    font-size: 1.5em;
}
.modal p {
    color: var(--colormuted);
}
/* Popup Pencarian */
.search-container form {
    display: flex;
    width: 100%;
    gap: 10px;
}
.search-container input[type="search"] {
    flex: 1;
    min-width: 0;
}
/* Popup Kontak: kotak ikon --colorcard agar terlihat di atas kotak terang */
.contact-popup .contact-info i {
    background: var(--colorcard);
}
.contact-popup ._socmed {
    padding-top: 20px;
    border-top: 1px dashed var(--colorborder);
}
.scrollup {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--x10bradius);   /* bulat di round, kotak di flat */
    background: var(--color1);
    color: var(--colorwhite)!important;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    z-index: 90;
    transition: opacity .3s, visibility .3s, background .3s var(--ease);
}
.scrollup._show {
    opacity: 1;
    visibility: visible;
}
/* Hover: color2 seperti tombol .bttn */
.scrollup:hover {
    background: var(--color2);
}
.maintenis {
    position: fixed;
    left: 20px;
    bottom: 20px;
    padding: 5px 12px;
    background: #FF8000;
    color: #fff;
    font-size: .8em;
    border-radius: var(--bradius);
    z-index: 999;
}

/* #endregion */

/* #region: Kurangi Animasi */
/* Kurangi animasi jika pengguna memintanya */
@media (prefers-reduced-motion: reduce) {
    #hero ._caret,
    #hero ._dot,
    .contact-badge ._dot {
        animation: none;
    }
    .skill ._bar span,
    .loop ._pigura img {
        transition: none;
    }
}
/* #endregion */