/*
 * UGS SITE — sumber tunggal gaya bersama website publik.
 * Tahap 1: token warna, font & skala tipografi. Halaman memakai var(--ugs-fs-*) untuk ukuran judul,
 * jadi mengubah ukuran cukup di sini. Komponen bersama (tombol, label, kartu) menyusul bertahap.
 */
:root {
    /*
     * warna aksen (tombol utama, link, highlight judul, ikon). Ganti warna merek cukup di blok ini.
     *   accent       warna utama           accent-deep  versi lebih gelap/teduh (latar badge, CTA lama)
     *   accent-dark  hover tombol          accent-2     ujung gradien
     *   accent-soft  teks aksen di latar gelap        accent-tint  latar aksen sangat muda
     */
    /* palet "Molten" — oranye logam meleleh & percikan las (sebelumnya biru #3a74ff) */
    --ugs-accent: #ff6a13;
    --ugs-accent-rgb: 255, 106, 19;
    --ugs-accent-deep: #ea580c;
    --ugs-accent-deep-rgb: 234, 88, 12;
    --ugs-accent-dark: #e25600;
    --ugs-accent-2: #ffb020;
    --ugs-accent-soft: #ffb58a;
    --ugs-accent-tint: #fff1e6;

    /* warna */
    --ugs-navy: #0b1424;
    --ugs-navy-2: #101d33;
    --ugs-blue: #3a74ff;
    --ugs-blue-dark: #2a5be0;
    --ugs-ink: #0b1828;
    --ugs-muted: #5b6b80;
    --ugs-line: #e3e9f2;
    --ugs-bg: #f2f5fa;

    /* font */
    --ugs-font-display: 'Barlow Condensed', sans-serif;
    --ugs-font-body: 'Inter', sans-serif;
    --ugs-font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

    /*
     * skala tipografi (desktop 1366px → HP 412px); clamp membuat ukuran turun otomatis di layar kecil
     *   h1 halaman   90px → 40px   judul utama setiap halaman
     *   display-sm   64px → 36px   judul ajakan (CTA) di akhir halaman
     *   h2 section   52px → 32px   judul bagian
     *   h3 kartu     28px → 22px   judul kartu / kotak
     */
    --ugs-fs-h1: clamp(2.5rem, 6.6vw, 5.625rem);
    --ugs-fs-display-sm: clamp(2.25rem, 4.7vw, 4rem);
    --ugs-fs-h2: clamp(2rem, 3.8vw, 3.25rem);
    --ugs-fs-h3: clamp(1.375rem, 2.05vw, 1.75rem);
    --ugs-fs-body: 1rem;
    --ugs-fs-small: .875rem;
    --ugs-fs-eyebrow: .72rem;

    /*
     * tema terang/gelap (default terang). Halaman yang sudah mendukung dark mode memakai token di bawah;
     * versi gelapnya ada di blok :root[data-ugs-theme="dark"]. Atribut hanya dipasang layout pada halaman
     * yang memang sudah dikonversi ($themeable), jadi halaman lama tidak ikut berubah.
     *   page / surface   latar halaman & section selang-seling     card / card-2  kartu & isian kartu
     *   text / -2 / -3   teks utama, sekunder, keterangan           border / -strong  garis tipis & garis tombol
     *   studio           latar panggung foto/3D (sama dengan adegan 3D)   photo-tile  kotak foto produk ber-latar putih
     */
    --ugs-page: #fbfbfd;
    --ugs-surface: #f5f5f7;
    --ugs-card: #ffffff;
    --ugs-card-2: #f7f9fd;
    --ugs-fg: #1d1d1f;
    --ugs-fg-2: #6e6e73;
    --ugs-fg-3: #86868b;
    --ugs-hairline: rgba(0, 0, 0, .08);
    --ugs-hairline-strong: rgba(0, 0, 0, .18);
    --ugs-shadow: rgba(30, 35, 45, .08);
    --ugs-studio: #eef0f4;
    --ugs-studio-rgb: 238, 240, 244;
    --ugs-glass: rgba(255, 255, 255, .72);
    --ugs-photo-tile: #ffffff;
    --ugs-logo-filter: grayscale(1);
    --ugs-night: #0d0f14;
    --ugs-accent-text: #ea580c;
}

/* mode gelap: netral hampir hitam (bukan navy), aksen oranye tetap */
:root[data-ugs-theme="dark"] {
    color-scheme: dark;
    --ugs-page: #0b0d12;
    --ugs-surface: #12151b;
    --ugs-card: #181c24;
    --ugs-card-2: #1e232c;
    --ugs-fg: #f5f5f7;
    --ugs-fg-2: #a1a1a6;
    --ugs-fg-3: #8a8a90;
    --ugs-hairline: rgba(255, 255, 255, .09);
    --ugs-hairline-strong: rgba(255, 255, 255, .26);
    --ugs-shadow: rgba(0, 0, 0, .45);
    --ugs-studio: #101319;
    --ugs-studio-rgb: 16, 19, 25;
    --ugs-glass: rgba(24, 28, 36, .72);
    --ugs-photo-tile: #eef1f5;
    --ugs-logo-filter: grayscale(1) invert(1);
    --ugs-night: #05060a;
    --ugs-accent-text: #ff8a3d;
    --ugs-accent-tint: rgba(255, 106, 19, .14);
    /* token lama layout (--text, --muted, ...) ikut gelap di halaman yang sudah themeable */
    --text: #f5f5f7;
    --text-body: #c7c7cc;
    --muted: #a1a1a6;
    --border: rgba(255, 255, 255, .1);
    --surface: #12151b;
    --surface-2: #1e232c;
}
:root[data-ugs-theme="dark"] body { background: var(--ugs-page); color: var(--ugs-fg); }
/* foto produk JPG berlatar putih: pinggirnya dipudarkan supaya menyatu dengan panggung terang maupun gelap */
.ugs-photo-feather {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
    mask-composite: intersect;
}
/* mode gelap: foto tampil sebagai kartu putih bersudut bulat (lebih rapi daripada pinggiran pudar di latar gelap) */
:root[data-ugs-theme="dark"] .ugs-photo-feather {
    -webkit-mask-image: none;
    mask-image: none;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

/*
 * ── KOMPONEN HALAMAN BERSAMA (ugs-pg-*) ──────────────────────────────
 * Dipakai halaman berlatar terang + dark mode (daftar proyek, artikel, FAQ, karier, dll.).
 * Hierarki: H1 display kapital → label mono oranye → judul kartu Inter tebal → isi & tombol huruf biasa.
 */
:where(.ugs-pg, .ugs-pg *) { font-family: var(--ugs-font-body); }
.ugs-pg { background: var(--ugs-page); color: var(--ugs-fg); }
.ugs-pg-wrap { max-width: 1240px; margin: 0 auto; padding: 0 2rem; }
.ugs-pg-label { display: block; font-family: var(--ugs-font-mono); font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--ugs-accent-text); margin-bottom: .75rem; }
.ugs-pg-hero { background: var(--ugs-studio); padding: calc(var(--ugs-nav-h, 52px) + 3.5rem) 0 3rem; }
.ugs-pg-title { font-family: var(--ugs-font-display); font-size: var(--ugs-fs-h1); font-weight: 800; text-transform: uppercase; line-height: .9; color: var(--ugs-fg); margin: 0 0 1.25rem; text-wrap: balance; }
.ugs-pg-h2 { font-family: var(--ugs-font-display); font-size: var(--ugs-fs-h2); font-weight: 800; text-transform: uppercase; line-height: .98; color: var(--ugs-fg); margin: 0 0 1.5rem; text-wrap: balance; }
.ugs-pg-title em, .ugs-pg-h2 em { font-family: inherit; font-style: normal; font-weight: 300; color: var(--ugs-fg-3); }
.ugs-pg-lead { font-size: clamp(.95rem, 1.4vw, 1.05rem); color: var(--ugs-fg-2); line-height: 1.7; max-width: 600px; margin: 0; }
.ugs-pg-section { padding: 3.5rem 0 5rem; }
.ugs-pg-card { background: var(--ugs-card); border: 1px solid var(--ugs-hairline); border-radius: 22px; }
a.ugs-pg-card { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--ugs-fg); transition: transform .3s, box-shadow .3s; }
a.ugs-pg-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px var(--ugs-shadow); color: var(--ugs-fg); }
.ugs-pg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.ugs-pg-card-title { font-size: 1.08rem; font-weight: 600; line-height: 1.35; color: var(--ugs-fg); margin: 0; }
.ugs-pg-card-text { font-size: .9rem; color: var(--ugs-fg-2); line-height: 1.6; margin: 0; }
.ugs-pg-link { font-size: .88rem; font-weight: 500; color: var(--ugs-accent-text); text-decoration: none; }
.ugs-pg-link:hover { color: var(--ugs-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.ugs-pg-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.6rem; border-radius: 999px; border: 1.5px solid var(--ugs-accent); background: var(--ugs-accent); color: #fff; font-size: .95rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s; }
.ugs-pg-btn:hover { background: var(--ugs-accent-dark); border-color: var(--ugs-accent-dark); color: #fff; }
.ugs-pg-btn-ghost { background: transparent; color: var(--ugs-fg); border-color: var(--ugs-hairline-strong); }
.ugs-pg-btn-ghost:hover { background: transparent; color: var(--ugs-fg); border-color: var(--ugs-fg); }
.ugs-pg-pagination { margin-top: 2.5rem; display: flex; justify-content: center; }
.ugs-pg-pagination .pagination { gap: .3rem; margin: 0; }
.ugs-pg-pagination .page-link { border-radius: 999px !important; border: 1px solid var(--ugs-hairline); background: var(--ugs-card); color: var(--ugs-fg-2); }
.ugs-pg-pagination .page-link:hover { color: var(--ugs-accent-text); background: var(--ugs-surface); }
.ugs-pg-pagination .page-item.active .page-link { background: var(--ugs-accent); border-color: var(--ugs-accent); color: #fff; }
.ugs-pg-pagination .page-item.disabled .page-link { background: transparent; color: var(--ugs-fg-3); }
.ugs-pg-pagination p, .ugs-pg-pagination .small { color: var(--ugs-fg-3) !important; }
.ugs-pg-empty { text-align: center; padding: 4rem 1rem; }
.ugs-pg-empty-icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 1.25rem; border-radius: 20px; background: var(--ugs-accent-tint); color: var(--ugs-accent); font-size: 1.7rem; }
.ugs-pg-empty h2 { font-family: var(--ugs-font-body); font-size: 1.25rem; font-weight: 600; text-transform: none; color: var(--ugs-fg); margin: 0 0 .4rem; }
.ugs-pg-empty p { margin: 0; color: var(--ugs-fg-2); }
.ugs-pg-prose { font-size: 1rem; color: var(--ugs-fg-2); line-height: 1.8; }
.ugs-pg-prose p, .ugs-pg-prose li { color: inherit; }
.ugs-pg-prose h2, .ugs-pg-prose h3, .ugs-pg-prose h4 { font-family: var(--ugs-font-body); text-transform: none; font-weight: 600; color: var(--ugs-fg); line-height: 1.3; margin: 2rem 0 .75rem; }
.ugs-pg-prose h2 { font-size: 1.45rem; } .ugs-pg-prose h3 { font-size: 1.2rem; } .ugs-pg-prose h4 { font-size: 1.05rem; }
.ugs-pg-prose strong, .ugs-pg-prose b { color: var(--ugs-fg); }
.ugs-pg-prose a { color: var(--ugs-accent-text); }
.ugs-pg-prose img { max-width: 100%; height: auto; border-radius: 16px; }
.ugs-pg-prose blockquote { margin: 1.5rem 0; padding: .5rem 0 .5rem 1.25rem; border-left: 3px solid var(--ugs-accent); color: var(--ugs-fg); }
.ugs-pg-prose table { width: 100%; border-collapse: collapse; }
.ugs-pg-prose th, .ugs-pg-prose td { padding: .55rem .8rem; border-bottom: 1px solid var(--ugs-hairline); color: inherit; }
@media (max-width: 991px) { .ugs-pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .ugs-pg-wrap { padding: 0 1.25rem; }
    .ugs-pg-hero { padding: calc(var(--ugs-nav-h, 52px) + 2rem) 0 2.25rem; }
    .ugs-pg-grid { grid-template-columns: 1fr; }
}