/* ==========================================================
   Rakfolio — Gaya MONOKROM
   Hitam-putih, bersudut tajam, tipografi besar.

   Ciri khasnya:
   - hanya hitam, putih, dan abu — tanpa warna aksen sama sekali
   - karya TIDAK ditampilkan sebagai kisi, melainkan sebagai daftar
     indeks bernomor satu baris per karya; barisnya berbalik jadi
     hitam saat disentuh
   - semua foto abu-abu, berwarna hanya saat disentuh
   - judul besar huruf kapital, garis 1px sebagai pemisah utama
   ========================================================== */

:root {
    --rf-ink: #0B0B0B;
    --rf-aksen: #0B0B0B;
    --rf-paper: #FFFFFF;
    --rf-line: #0B0B0B;

    --rf-ink-soft: #6E6E6E;
    --rf-surface: #FFFFFF;
    --rf-surface-2: #F1F1F1;
    --rf-aksen-teks: #FFFFFF;
    --rf-aksen-hover: #6E6E6E;

    --rf-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --rf-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --rf-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

    --rf-radius: 0px;
    --rf-sec-y: 88px;
    --rf-gap: 24px;
    --rf-shadow: none;

    --rf-eyebrow-spacing: 0.22em;
    --rf-judul-weight: 800;
    --rf-judul-spacing: -0.025em;
    --rf-judul-transform: uppercase;
}

body { line-height: 1.62; }

h1, h2, h3 { text-transform: uppercase; }

.rf-eyebrow {
    font-family: var(--rf-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--rf-ink);
}

/* Garis 1px hitam sebagai pemisah utama antarbagian. */
.rf-section { border-top: 1px solid var(--rf-line); }
.rf-section--alt { background: var(--rf-surface-2); }
.rf-section__head { max-width: 900px; margin-bottom: 40px; }
.rf-section__judul { font-size: clamp(28px, 4.4vw, 52px); line-height: 0.98; }

.rf-hero { padding-top: clamp(56px, 7vw, 96px); }
.rf-hero__judul {
    font-size: clamp(40px, 8.4vw, 104px);
    line-height: 0.92;
    text-transform: uppercase;
}
.rf-hero__lead { font-size: 17px; max-width: 52ch; }
.rf-hero__gambar { opacity: 0.1; filter: grayscale(1); }
.rf-hero__stats { border-top-color: var(--rf-line); }
.rf-stat__nilai { font-family: var(--rf-display); font-weight: 800; }
.rf-stat__label { font-family: var(--rf-mono); font-size: 11.5px; text-transform: uppercase; }

/* Tombol kotak, isi hitam, berbalik saat disentuh. */
.rf-btn {
    font-family: var(--rf-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-width: 1px;
}
.rf-btn--aksen:hover {
    background: var(--rf-paper);
    color: var(--rf-ink);
    border-color: var(--rf-ink);
    transform: none;
}
.rf-btn--garis { border-color: var(--rf-ink); }
.rf-btn--garis:hover { background: var(--rf-ink); color: var(--rf-paper); }

.rf-header { border-bottom-width: 1px; }
.rf-nav__list a { font-family: var(--rf-mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.rf-nav__list a:hover,
.rf-nav__list .current-menu-item > a { color: var(--rf-ink); border-bottom-color: var(--rf-ink); }

.rf-brand__name { letter-spacing: -0.02em; }
.rf-brand__tag { font-family: var(--rf-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; }

/* ---------- Daftar indeks karya ---------- */

.rf-karya-grid {
    display: block;
    border-top: 1px solid var(--rf-line);
}
.rf-karya {
    display: grid;
    grid-template-columns: 136px 1fr;
    align-items: center;
    gap: 28px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rf-line);
    transition: background 0.2s ease, color 0.2s ease, padding 0.2s ease;
}
/* "Tampilkan lebih besar" tidak berlaku di daftar indeks —
   semua baris sengaja setara. */
.rf-karya.is-lebar { grid-column: auto; }

.rf-karya__media {
    aspect-ratio: 4 / 3;
    width: 136px;
}
.rf-karya__media img { filter: grayscale(1) contrast(1.05); }
.rf-karya:hover .rf-karya__media img { filter: none; transform: none; }

.rf-karya__isi {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding-top: 0;
}
.rf-karya__no {
    display: block;
    font-family: var(--rf-mono);
    font-size: 12px;
    color: var(--rf-ink-soft);
}
.rf-karya__judul {
    font-size: clamp(20px, 2.6vw, 34px);
    line-height: 1.02;
    margin: 0;
}
.rf-karya__layanan { font-size: 13px; margin-top: 4px; }
.rf-karya__meta {
    margin-top: 0;
    font-family: var(--rf-mono);
    font-size: 11.5px;
    text-align: right;
    white-space: nowrap;
}

/* Seluruh baris berbalik jadi hitam saat disentuh. */
.rf-karya:hover {
    background: var(--rf-ink);
    color: var(--rf-paper);
    padding-left: 16px;
    padding-right: 16px;
}
.rf-karya:hover .rf-karya__judul,
.rf-karya:hover .rf-karya__no,
.rf-karya:hover .rf-karya__layanan,
.rf-karya:hover .rf-karya__meta { color: var(--rf-paper); }

.rf-filter__btn {
    font-family: var(--rf-mono);
    font-size: 11.5px;
    text-transform: uppercase;
    border-color: var(--rf-line);
    color: var(--rf-ink);
}

/* ---------- Sisa halaman ---------- */

.rf-artcard__media img,
.rf-tentang__foto img,
.rf-testi__foto img,
.rf-karya-single__sampul img,
.rf-single__cover img {
    filter: grayscale(1);
    transition: filter 0.3s ease;
}
.rf-artcard:hover .rf-artcard__media img,
.rf-karya-single__sampul:hover img,
.rf-single__cover:hover img { filter: none; }

.rf-artcard { border-color: var(--rf-line); }
.rf-artcard:hover { transform: none; box-shadow: none; background: var(--rf-surface-2); }
.rf-artcard__date { font-family: var(--rf-mono); }

.rf-keahlian li { font-family: var(--rf-mono); font-size: 11.5px; text-transform: uppercase; }

.rf-layanan { border-color: var(--rf-line); }
.rf-layanan.is-favorit { border-width: 2px; }
.rf-layanan__harga { font-family: var(--rf-display); font-weight: 800; color: var(--rf-ink); }
.rf-layanan__durasi { font-family: var(--rf-mono); font-size: 11.5px; text-transform: uppercase; }
.rf-layanan__list li::before { background: var(--rf-ink); }
.rf-layanan__tanda { font-family: var(--rf-mono); }

.rf-langkah__item { border-top-color: var(--rf-line); }
.rf-langkah__no { color: var(--rf-ink-soft); }

.rf-testi { border-color: var(--rf-line); }
.rf-testi__isi {
    font-family: var(--rf-body);
    font-size: 17px;
    line-height: 1.55;
}
.rf-testi__nama { text-transform: uppercase; letter-spacing: 0.02em; }

.rf-klien { border-color: var(--rf-line); }
.rf-klien__list li { font-family: var(--rf-mono); font-size: 13px; text-transform: uppercase; opacity: 1; }
.rf-klien__judul { font-family: var(--rf-mono); }

.rf-kontak__detail dt { font-family: var(--rf-mono); }
.rf-kontak__form { border-color: var(--rf-line); }
.rf-field label { font-family: var(--rf-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; }
.rf-field input,
.rf-field select,
.rf-field textarea { border-color: var(--rf-line); }

.rf-cta { background: var(--rf-ink); }
.rf-cta__judul { color: var(--rf-paper); }
.rf-cta .rf-btn--aksen {
    background: var(--rf-paper);
    border-color: var(--rf-paper);
    color: var(--rf-ink);
}
.rf-cta .rf-btn--aksen:hover { background: transparent; color: var(--rf-paper); border-color: var(--rf-paper); }

.rf-footer { border-top-color: var(--rf-line); }
.rf-footer__heading { font-family: var(--rf-mono); }
.rf-sosial a { border-color: var(--rf-line); }
.rf-sosial a:hover { background: var(--rf-ink); color: var(--rf-paper); border-color: var(--rf-ink); }

@media (max-width: 860px) {
    .rf-karya { grid-template-columns: 96px 1fr; gap: 18px; }
    .rf-karya__media { width: 96px; }
    .rf-karya__isi { grid-template-columns: minmax(0, 1fr) auto; gap: 14px; }
    .rf-karya__no { display: none; }
}

@media (max-width: 640px) {
    :root { --rf-sec-y: 56px; }
    .rf-karya__isi { grid-template-columns: minmax(0, 1fr); }
    .rf-karya__meta { text-align: left; margin-top: 6px; }
}