/* ==========================================================================
   Lapisan tema PT Nusantara Jaya Teknologi
   Ditumpuk di atas Bootstrap 5.3.3. Seluruh warna dan huruf hidup di sini
   sebagai custom property; tidak ada hex yang ditulis di template Blade.
   ========================================================================== */

:root {
    /* Warna ------------------------------------------------------------- */
    --cream-50:  #FBF7F0;
    --cream-100: #F7F1E8;
    --cream-200: #EFE5D6;

    /* navy-300: biru pucat, dipakai hanya pada garis aksen ilustrasi
       dekoratif "Tentang" di beranda (home.blade.php), bukan pada teks
       atau elemen UI. */
    --navy-300: #7FB3E8;
    --navy-500: #16406B;
    --navy-700: #0B2545;
    --navy-900: #081B33;

    /* copper-600 mengisi tombol dan elemen besar.
       copper-700 dipakai untuk TEKS di atas krem: 5,8:1, sedangkan
       copper-600 hanya 4,50:1 yaitu persis di ambang batas WCAG AA.
       copper-400 hanya boleh di atas navy atau sebagai elemen non-teks. */
    --copper-400: #C98A52;
    --copper-600: #A65B2E;
    --copper-700: #8F4C24;

    --ink:       #2A2721;
    --ink-muted: #6B6459;

    /* Bentuk dan bayangan ------------------------------------------------ */
    --shadow-card: 0 12px 28px -6px rgba(11, 37, 69, .28);
    --radius-card: 10px;
    --radius-frame: 20px;
    --radius-chip: 9px;

    /* Huruf -------------------------------------------------------------- */
    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --sans:  'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Tekstur ------------------------------------------------------------
       Padanan tekstur batik pada acuan: petak bergaya papan sirkuit.
       Motifnya sengaja sama dengan kisi simpul di hero-proyek.svg supaya
       latar dan hero berbicara dalam bahasa yang sama.
       Petak 120px dengan opasitas rendah; versi 72px/0,16 terbukti terlalu
       menonjol di belakang teks badan. */
    --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%230B2545' stroke-width='1' opacity='0.07'%3E%3Cpath d='M0 60h30l14-14h32l14 14h30'/%3E%3Cpath d='M60 0v30l14 14v32l-14 14v30'/%3E%3C/g%3E%3Cg fill='%230B2545' opacity='0.09'%3E%3Ccircle cx='30' cy='60' r='2.5'/%3E%3Ccircle cx='90' cy='60' r='2.5'/%3E%3Ccircle cx='60' cy='30' r='2.5'/%3E%3Ccircle cx='60' cy='90' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    --texture-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1' opacity='0.10'%3E%3Cpath d='M0 60h30l14-14h32l14 14h30'/%3E%3Cpath d='M60 0v30l14 14v32l-14 14v30'/%3E%3C/g%3E%3Cg fill='%23FFFFFF' opacity='0.14'%3E%3Ccircle cx='30' cy='60' r='2.5'/%3E%3Ccircle cx='90' cy='60' r='2.5'/%3E%3Ccircle cx='60' cy='30' r='2.5'/%3E%3Ccircle cx='60' cy='90' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Dasar ----------------------------------------------------------------- */

body {
    background-color: var(--cream-100);
    background-image: var(--texture);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 400;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.15;
    color: var(--navy-700);
}

a { color: var(--copper-700); }
a:hover { color: var(--copper-600); }

.nj-lead { font-weight: 300; color: var(--ink-muted); }

/* Latar bagian selang-seling. Menggantikan .bg-light Bootstrap. */
.nj-band {
    background-color: var(--cream-200);
    background-image: var(--texture);
}

/* Hanya sumbu tegak. Kelas ini dipasang bersama .container, jadi memakai
   padding ringkas (mis. `padding: 104px 0`) akan ikut menolkan padding samping
   .container; akibatnya margin negatif .row meluber dan muncul gulir mendatar
   di layar sempit. */
.nj-section { padding-top: 104px; padding-bottom: 104px; }
@media (max-width: 767.98px) {
    .nj-section { padding-top: 64px; padding-bottom: 64px; }
}

/* Bootstrap menghitung padding samping .container dari --bs-gutter-x miliknya
   sendiri (1,5rem), sedangkan kelas g-5 menaikkan nilai itu menjadi 3rem pada
   .row di dalamnya. Selisih 12px membuat margin negatif .row meluber ke kanan
   dan memunculkan gulir mendatar. Di bawah 992px kolom sudah bertumpuk
   sehingga jarak mendatar tidak terpakai; kembalikan ke nilai bawaan. */
@media (max-width: 991.98px) {
    .nj-section > .row { --bs-gutter-x: 1.5rem; }
}

/* Garis dan kicker ------------------------------------------------------ */

.nj-rule {
    display: block;
    width: 40px;
    height: 2px;
    background: var(--copper-600);
    margin-bottom: 18px;
}

.nj-kicker {
    display: block;
    /* Ditetapkan eksplisit: pada <span> ini sudah mewarisi Montserrat dari
       body, tapi pada <h2 class="nj-kicker"> ia mewarisi Fraunces dari
       aturan h1...h6 di atas, sehingga komponen yang sama tampil dengan dua
       huruf berbeda. */
    font-family: var(--sans);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--copper-700);
}

.nj-on-navy .nj-kicker,
.nj-on-navy .nj-rule { color: var(--copper-400); }
.nj-on-navy .nj-rule { background: var(--copper-400); }

/* Ikon aksen. Menggantikan .text-primary Bootstrap pada ikon Bootstrap Icons.
   Memakai copper-600: ikon bukan teks, jadi ambang kontras non-teks 3:1
   terpenuhi dengan lapang, dan warnanya senada dengan tombol. */
.nj-ico { color: var(--copper-600); }
.nj-on-navy .nj-ico { color: var(--copper-400); }

/* Tombol ---------------------------------------------------------------- */

.nj-btn {
    display: inline-block;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 14px 34px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    text-decoration: none;
    /* Perlu ditulis: <a> tidak memusatkan teksnya sendiri seperti <button>,
       sehingga tombol selebar penuh (w-100) akan rata kiri tanpa baris ini. */
    text-align: center;
    transition: background-color .25s, color .25s, border-color .25s;
}

/* Ukuran kecil untuk tautan "kembali" di halaman detail. */
.nj-btn--sm { padding: 9px 22px; font-size: .68rem; }

.nj-btn-copper {
    background: var(--copper-600);
    color: #fff;
    box-shadow: 0 8px 18px -6px rgba(166, 91, 46, .55);
}
.nj-btn-copper:hover,
.nj-btn-copper:focus { background: var(--copper-700); color: #fff; }

.nj-btn-ghost { border-color: rgba(255, 255, 255, .75); color: #fff; }
.nj-btn-ghost:hover,
.nj-btn-ghost:focus { background: #fff; color: var(--navy-700); }

.nj-btn-outline { border-color: var(--copper-600); color: var(--copper-700); }
.nj-btn-outline:hover,
.nj-btn-outline:focus { background: var(--copper-600); color: #fff; }

/* Fokus ----------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nj-btn:focus-visible {
    outline: 2px solid var(--copper-600);
    outline-offset: 2px;
    border-radius: 2px;
}

.nj-on-navy a:focus-visible,
.nj-on-navy button:focus-visible { outline-color: var(--copper-400); }

/* Muncul saat digulir ---------------------------------------------------
   Keadaan awal dipasang oleh brand.js, bukan di sini, supaya isi tetap
   terlihat penuh bila JavaScript gagal dimuat. */

.nj-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s ease-out, transform .5s ease-out;
}
.nj-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .nj-reveal { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Gelombang ------------------------------------------------------------- */

.nj-wave { line-height: 0; }
.nj-wave svg { display: block; width: 100%; height: 105px; }
.nj-wave--flip { transform: scaleY(-1); }

/* Gelombang yang langsung mengikuti blok navy ditarik naik setinggi dirinya
   sendiri. Separuh atas path memang transparan: tanpa tarikan ini separuh itu
   jatuh di atas krem badan halaman, jadi krem menumpuk krem dan lengkungannya
   tidak terlihat sama sekali. Ruang yang hilang dikembalikan sebagai padding
   bawah pada hero yang bersangkutan. */
.nj-hero + .nj-wave,
.carousel + .nj-wave,
.nj-page-hero + .nj-wave {
    position: relative;
    margin-top: -105px;
}

@media (max-width: 767.98px) {
    .nj-wave svg { height: 58px; }

    .nj-hero + .nj-wave,
    .carousel + .nj-wave,
    .nj-page-hero + .nj-wave { margin-top: -58px; }
}

/* Navbar ---------------------------------------------------------------- */

.nj-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--cream-50);
    box-shadow: 0 1px 0 rgba(11, 37, 69, .08);
    transition: box-shadow .25s;
}
.nj-nav.is-scrolled { box-shadow: 0 4px 18px -6px rgba(11, 37, 69, .22); }

.nj-nav__inner {
    display: flex;
    align-items: center;
    gap: 40px;
    min-height: 88px;
}

.nj-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }

/* 56px, bukan 44px, karena logo perusahaan memuat namanya sendiri di bawah
   lambang. Pada 44px baris "INDO SOLUSI" hanya menjadi coreng; 56px adalah
   ukuran terkecil yang masih menyisakan tinggi huruf yang terbaca, dan pada
   layar 2x sumbernya yang 157px masih cukup untuk tetap tajam. */
.nj-mark {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-chip);
    background: linear-gradient(145deg, var(--navy-500), var(--navy-900));
    display: grid;
    place-items: center;
    color: #fff;
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.05rem;
    box-shadow: 0 4px 10px rgba(11, 37, 69, .3);
}
/* Bayangan dan sudut membulat milik `.nj-mark` digambar pada kotak elemen,
   bukan pada piksel gambarnya. Selama logonya berlatar putih itu tidak
   kelihatan; begitu latarnya dibuang, yang tersisa justru bayangan kotak
   membulat mengambang di sekeliling logo -- persis kesan "kotak putih" yang
   ingin dihilangkan. */
.nj-mark--img {
    background: none;
    object-fit: contain;
    box-shadow: none;
    border-radius: 0;
}

/* Nama perusahaan selalu satu baris. Dulu dibatasi `max-width: 15ch` supaya
   nama contoh yang panjang melipat rapi jadi dua baris; sekarang justru
   melipatnya yang tidak diinginkan. Karena lebarnya tidak lagi dibatasi,
   ukuran hurufnya yang mengalah di layar sempit — `clamp()` menahan agar tidak
   pernah lebih kecil dari .74rem maupun lebih besar dari ukuran semula. */
.nj-wordmark {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(.86rem, 4.2vw, 1.3rem);
    line-height: 1.15;
    color: var(--navy-700);
    white-space: nowrap;
}
.nj-wordmark--light { color: #fff; }

.nj-nav__toggle {
    margin-left: auto;
    border: 0;
    background: none;
    color: var(--navy-700);
    font-size: 1.6rem;
    line-height: 1;
    padding: 4px 2px;
}
/* Menu mendatar baru muat mulai 1200px sejak nama perusahaan berdiri satu
   baris; di bawah itu menunya masuk ke panel geser. Lihat catatan di
   `.nj-wordmark`. */
@media (min-width: 1200px) { .nj-nav__toggle { display: none; } }

.nj-nav__body { display: flex; align-items: center; gap: 30px; }

.nj-menu {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0 0 0 auto;
}

.nj-menu__link {
    position: relative;
    display: inline-block;
    padding: 6px 0;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--navy-700);
    text-decoration: none;
}
.nj-menu__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: var(--copper-600);
    transition: width .25s;
}
.nj-menu__link.is-active::after,
.nj-menu__link:hover::after { width: 100%; }

.nj-lang {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding-left: 22px;
    border-left: 1px solid rgba(11, 37, 69, .15);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
}
.nj-lang__link { color: var(--ink-muted); text-decoration: none; }
.nj-lang__link.is-active { color: var(--copper-700); }
.nj-lang__sep { color: rgba(11, 37, 69, .3); }

/* Panel geser di layar kecil dan menengah */
@media (max-width: 1199.98px) {
    /* Tombol hamburger sudah didorong ke kanan oleh `margin-left: auto`, jadi
       `gap: 40px` milik `.nj-nav__inner` tidak menambah apa pun kecuali di
       layar tersempit — di sana ia justru mendorong tombolnya melewati tepi
       dan memunculkan gulir mendatar pada 320px. */
    .nj-nav__inner { gap: 16px; }
    .nj-nav__panel { background: var(--navy-700); color: #fff; }
    /* `.nj-nav__panel` sendiri (0,1,0) kalah dari Bootstrap
       `.offcanvas-xl.offcanvas-end` (0,2,0). Menaikkan ke `.offcanvas-xl.nj-nav__panel`
       (0,2,0) menyamakan bobotnya -- barulah urutan sumber (brand.css dimuat
       setelah Bootstrap) memenangkan width 300px ini. */
    .offcanvas-xl.nj-nav__panel { width: 300px; }
    .nj-nav__panel .offcanvas-header { border-bottom: 1px solid rgba(255, 255, 255, .12); }
    .nj-nav__body { display: block; }
    .nj-menu { display: block; margin: 0; }
    .nj-menu li { margin-bottom: 4px; }
    .nj-menu__link { display: block; padding: 12px 0; color: #fff; font-size: .82rem; }
    .nj-menu__link::after { background: var(--copper-400); }
    .nj-lang {
        margin-top: 24px;
        padding: 20px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }
    .nj-lang__link { color: rgba(255, 255, 255, .7); }
    .nj-lang__link.is-active { color: var(--copper-400); }
    /* Warna default navy pada panel navy membuat "·" tidak terlihat. */
    .nj-lang__sep { color: rgba(255, 255, 255, .3); }
}

/* Footer ---------------------------------------------------------------- */

.nj-footer-wrap { position: relative; background: var(--navy-700); margin-top: 0; }
.nj-footer-wrap .nj-wave { position: relative; z-index: 1; }

.nj-footer {
    position: relative;
    background: var(--navy-700);
    background-image: var(--texture-light);
    color: rgba(255, 255, 255, .7);
    font-weight: 300;
    font-size: .92rem;
    padding: 24px 0 56px;
}

.nj-footer h4 { color: #fff; font-size: 1.05rem; margin-bottom: 20px; }

.nj-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 56px;
}
@media (max-width: 991.98px) {
    .nj-footer__grid { grid-template-columns: 1fr; gap: 40px; }
}

.nj-footer__tagline { margin: 18px 0 22px; max-width: 330px; }

.nj-footer__line { display: flex; gap: 11px; margin-bottom: 11px; align-items: flex-start; }
.nj-footer__line i { color: var(--copper-400); margin-top: 5px; flex: 0 0 auto; }

.nj-footer__links { list-style: none; padding: 0; margin: 0; }
.nj-footer__links li { margin-bottom: 10px; }

.nj-footer a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.nj-footer a:hover { color: var(--copper-400); }

.nj-social { display: flex; gap: 11px; flex-wrap: wrap; }
.nj-social a {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-chip);
    background: rgba(255, 255, 255, .09);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.12rem;
    transition: background-color .22s;
}
.nj-social a:hover { background: var(--copper-600); color: #fff; }

.nj-copyright {
    background: var(--navy-900);
    color: rgba(255, 255, 255, .5);
    font-size: .82rem;
    font-weight: 300;
    text-align: center;
    padding: 20px 0;
}

/* Hero beranda ---------------------------------------------------------- */

.nj-hero {
    position: relative;
    min-height: 640px;
    height: 100vh;
    max-height: 860px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background-color: var(--navy-700);
    background-size: cover;
    background-position: center;
}

/* Menggantikan rgba(0,0,0,.55) yang rata. Kekuatannya menurun ke kanan
   supaya teks rata kiri tetap terbaca sementara sisi kanan slide tetap
   terlihat. Ketiga SVG di resources/brand/sliders/ dikalibrasi terhadap
   nilai-nilai ini — lihat docs/CHECKPOINT.md. Jangan ubah salah satunya
   sendirian. */
.nj-hero__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(8, 27, 51, .90) 0%,
        rgba(8, 27, 51, .55) 52%,
        rgba(8, 27, 51, .20) 100%);
}

.nj-hero__inner {
    position: relative;
    z-index: 2;
    padding-bottom: 170px;
    color: #fff;
}
.nj-hero__inner > * { max-width: 720px; }

.nj-hero__title {
    font-size: clamp(2.5rem, 6vw, 4.4rem);
    color: #fff;
    margin: 14px 0 20px;
}

.nj-hero__sub {
    font-size: 1.06rem;
    font-weight: 300;
    color: rgba(255, 255, 255, .82);
    max-width: 560px;
    margin: 0 0 34px;
}

.nj-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .72);
    font-size: 2.1rem;
    line-height: 1;
    padding: 8px;
}
.nj-hero__arrow:hover { color: #fff; }
.nj-hero__arrow--prev { left: 34px; }
.nj-hero__arrow--next { right: 34px; }

.nj-hero__dots { bottom: 112px; margin: 0; }
/* Selektor dinaikkan spesifisitasnya (0,3,0) agar mengalahkan Bootstrap
   `.carousel-indicators [data-bs-target]` (0,2,0), yang sebelumnya menang atas
   width/height/background-color/opacity/border. */
.nj-hero__dots.carousel-indicators [data-bs-target] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .45);
    border: 0;
    opacity: 1;
    transition: width .25s, background-color .25s;
}
/* .carousel-indicators diikutsertakan juga di sini (bukan cuma ".active")
   supaya spesifisitasnya (0,3,1) tetap mengalahkan aturan dasar di atas
   (0,3,0) -- kalau tidak, lebar dan warna dasarnya menimpa balik state aktif. */
.nj-hero__dots.carousel-indicators button.active {
    width: 26px;
    border-radius: 999px;
    /* background-color, bukan shorthand background: shorthand mereset
       background-clip ke border-box, sehingga tembaga tercat sampai ke area
       border transparan ±10px milik Bootstrap dan tampak sebagai lingkaran
       besar, bukan kapsul. */
    background-color: var(--copper-400);
}

@media (max-width: 767.98px) {
    .nj-hero { min-height: 520px; height: auto; padding-top: 120px; }
    .nj-hero__inner { padding-bottom: 96px; }
    .nj-hero__arrow { display: none; }
    .nj-hero__dots { bottom: 48px; }
    /* Di layar sempit tidak ada ruang untuk gradien mendatar. Ini adalah
       SALINAN KEDUA dari .nj-hero__veil, jadi paling rawan diubah sendirian.
       Terikat pada aturan desktopnya di atas dan pada ketiga SVG di
       resources/brand/sliders/ — lihat catatan kalibrasi di docs/CHECKPOINT.md
       sebelum mengubah salah satunya. */
    .nj-hero__veil {
        background: linear-gradient(180deg,
            rgba(8, 27, 51, .60) 0%,
            rgba(8, 27, 51, .88) 100%);
    }
}

/* Hero pendek ----------------------------------------------------------- */

.nj-page-hero {
    background-color: var(--navy-700);
    background-image: var(--texture-light),
        linear-gradient(135deg, var(--navy-500), var(--navy-900));
    min-height: 240px;
    display: flex;
    align-items: center;
    text-align: center;
    /* 40px ruang bawah + 105px untuk gelombang yang ditarik naik. */
    padding: 56px 0 145px;
}

.nj-page-hero__title {
    color: #fff;
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    margin: 0;
}

.nj-crumbs {
    margin-top: 14px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}
.nj-crumbs a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.nj-crumbs a:hover { color: var(--copper-400); }
.nj-crumbs span { margin: 0 8px; }

@media (max-width: 767.98px) {
    .nj-page-hero { min-height: 170px; padding: 40px 0 86px; }
}

/* Kepala bagian --------------------------------------------------------- */

.nj-head { text-align: center; margin-bottom: 64px; }
.nj-head h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin: 0; }
.nj-head .nj-head__bar {
    display: block;
    width: 64px;
    height: 3px;
    background: var(--copper-600);
    border-radius: 2px;
    margin: 20px auto 0;
}
.nj-head p { max-width: 620px; margin: 18px auto 0; font-weight: 300; color: var(--ink-muted); }

/* Kartu ----------------------------------------------------------------- */

.nj-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
@media (max-width: 991.98px) { .nj-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px)  { .nj-grid-3 { grid-template-columns: 1fr; } }

.nj-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--cream-50);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform .28s, box-shadow .28s;
}
.nj-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px -8px rgba(11, 37, 69, .34);
}

.nj-card__head {
    position: relative;
    height: 120px;
    background-color: var(--navy-700);
    background-image: var(--texture-light),
        linear-gradient(135deg, var(--navy-500), var(--navy-900));
    display: grid;
    place-items: center;
    overflow: hidden;
}
.nj-card__head i { font-size: 2.5rem; color: #fff; }
.nj-card__head--img { height: 190px; }
.nj-card__head--img img { width: 100%; height: 100%; object-fit: cover; }

.nj-pill {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--copper-600);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
}

.nj-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px 26px 30px;
}
.nj-card__body h2,
.nj-card__body h3 { font-size: 1.24rem; margin: 0 0 10px; }
.nj-card__body h2 a,
.nj-card__body h3 a { color: inherit; text-decoration: none; }
.nj-card__body p {
    flex: 1;
    margin: 0 0 18px;
    font-size: .93rem;
    font-weight: 300;
    color: var(--ink-muted);
}

.nj-card__more {
    align-self: flex-start;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--copper-700);
    text-decoration: none;
}
.nj-card__more:hover { color: var(--copper-600); }

/* Kartu berita tidak punya kepala bergradien, sehingga berdampingan dengan
   kartu layanan dan portofolio ia terasa berasal dari sistem yang lain.
   Garis tembaga di tepi atas menjadi penyeimbangnya. */
.nj-card--plain { border-top: 3px solid var(--copper-600); }

.nj-date {
    display: inline-block;
    align-self: flex-start;
    background: var(--copper-600);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 4px;
    margin-bottom: 14px;
}

.nj-center { text-align: center; margin-top: 56px; }

/* Tentang --------------------------------------------------------------- */

.nj-about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}
@media (max-width: 991.98px) { .nj-about { grid-template-columns: 1fr; gap: 44px; } }

.nj-about__frame {
    border-radius: var(--radius-frame);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    aspect-ratio: 4 / 3;
    background: var(--navy-700);
}
.nj-about__frame svg { display: block; width: 100%; height: 100%; }

.nj-about__title { font-size: 2.4rem; margin: 12px 0 18px; }

/* Testimoni ------------------------------------------------------------- */

.nj-quote {
    display: flex;
    flex-direction: column;
    background: var(--cream-50);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 32px 28px;
    margin: 0;
}

.nj-stars { color: var(--copper-600); font-size: .92rem; letter-spacing: .1em; }

.nj-quote blockquote {
    flex: 1;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--navy-700);
    margin: 14px 0 22px;
}

.nj-quote__by { display: flex; align-items: center; gap: 14px; }
.nj-quote__by img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}
.nj-quote__by strong { display: block; font-size: .95rem; color: var(--ink); }
.nj-quote__role { font-size: .84rem; font-weight: 300; color: var(--ink-muted); }

/* Inisial menggantikan pasfoto yang belum diunggah. Dipakai testimoni dan
   kartu tim, isinya dibangkitkan helper initials(). */
.nj-initials {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--navy-500), var(--navy-900));
    display: grid;
    place-items: center;
    color: #fff;
    font-family: var(--serif);
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .02em;
}
.nj-initials--lg { width: 96px; height: 96px; font-size: 1.7rem; }

/* Pita ajakan ----------------------------------------------------------- */

.nj-cta {
    background-color: var(--navy-700);
    background-image: var(--texture-light),
        linear-gradient(135deg, var(--navy-500), var(--navy-900));
    padding: 96px 0;
    text-align: center;
}
.nj-cta h2 { color: #fff; font-size: 2.5rem; margin: 0 0 14px; }
.nj-cta p { color: rgba(255, 255, 255, .78); font-weight: 300; margin: 0 0 32px; }

@media (max-width: 767.98px) { .nj-cta { padding: 64px 0; } }

/* Kisi dua kolom (daftar berita) ----------------------------------------- */

.nj-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
@media (max-width: 767.98px) { .nj-grid-2 { grid-template-columns: 1fr; } }

/* Daftar lowongan --------------------------------------------------------- */

.nj-vacancy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--cream-50);
    border-left: 3px solid var(--copper-600);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 26px 28px;
    margin-bottom: 18px;
    transition: transform .25s;
}
.nj-vacancy:hover { transform: translateX(4px); }
.nj-vacancy h2 { font-size: 1.24rem; margin: 0 0 6px; }
.nj-vacancy h2 a { color: inherit; text-decoration: none; }
.nj-vacancy__meta { margin: 0; font-size: .86rem; font-weight: 300; color: var(--ink-muted); }

/* Isi artikel ----------------------------------------------------------- */

.nj-prose { font-size: 1rem; line-height: 1.85; }
.nj-prose > * + * { margin-top: 1.1em; }
.nj-prose h2 { font-size: 1.7rem; margin-top: 2.2em; }
.nj-prose h3 { font-size: 1.32rem; margin-top: 1.8em; }
.nj-prose p { color: var(--ink); font-weight: 400; }
.nj-prose ul, .nj-prose ol { padding-left: 1.3em; }
.nj-prose li { margin-bottom: .5em; }
.nj-prose img { max-width: 100%; height: auto; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.nj-prose blockquote {
    border-left: 3px solid var(--copper-600);
    padding-left: 20px;
    margin-left: 0;
    font-family: var(--serif);
    font-size: 1.1rem;
    color: var(--navy-700);
}
.nj-prose a { color: var(--copper-700); text-decoration: underline; text-underline-offset: 3px; }

/* Kartu tim ------------------------------------------------------------- */

.nj-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
@media (max-width: 991.98px) { .nj-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .nj-grid-4 { grid-template-columns: 1fr; } }

.nj-person {
    background: var(--cream-50);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 30px 20px 26px;
    text-align: center;
}
.nj-person__photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 4px;
}
.nj-person .nj-initials--lg { margin: 0 auto; }
.nj-person h3 { font-size: 1.05rem; margin: 16px 0 4px; }
.nj-person__role { font-size: .84rem; font-weight: 300; color: var(--ink-muted); margin: 0 0 14px; }
.nj-person__links { display: flex; justify-content: center; gap: 14px; font-size: 1.05rem; }
.nj-person__links a { color: var(--copper-700); }
.nj-person__links a:hover { color: var(--copper-600); }

/* Formulir -------------------------------------------------------------- */

.nj-form { background: var(--cream-50); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 36px 32px; }

.nj-form label {
    display: block;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--navy-700);
    margin-bottom: 7px;
}

.nj-form .form-control,
.nj-form .form-select {
    background: #fff;
    border: 1px solid rgba(11, 37, 69, .16);
    border-radius: 6px;
    padding: 12px 14px;
    font-family: var(--sans);
    font-size: .95rem;
    color: var(--ink);
}
.nj-form .form-control:focus,
.nj-form .form-select:focus {
    border-color: var(--copper-600);
    box-shadow: 0 0 0 3px rgba(166, 91, 46, .16);
}

.nj-form .invalid-feedback,
.nj-form .text-danger { color: #A3231F; font-size: .82rem; }

/* Daftar Bootstrap ------------------------------------------------------- */

/* .list-group bawaan memakai putih untuk butir biasa dan biru #0d6efd untuk
   butir aktif. Daftar ini dipakai sidebar kategori berita, daftar layanan
   lain, rincian portofolio dan lowongan, serta blok kontak. Warnanya disetel
   lewat custom property Bootstrap sendiri supaya template tidak perlu kelas
   tambahan. brand.css hanya dimuat halaman publik dan halaman login, jadi
   panel admin tetap memakai gaya bawaannya. */
.list-group {
    --bs-list-group-color: var(--ink);
    --bs-list-group-bg: var(--cream-50);
    --bs-list-group-border-color: rgba(11, 37, 69, .12);
    --bs-list-group-action-color: var(--ink);
    --bs-list-group-action-hover-color: var(--copper-700);
    --bs-list-group-action-hover-bg: var(--cream-200);
    --bs-list-group-action-active-color: var(--copper-700);
    --bs-list-group-action-active-bg: var(--cream-200);
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: var(--copper-600);
    --bs-list-group-active-border-color: var(--copper-600);
    --bs-list-group-border-radius: var(--radius-card);
}

/* Kotak centang bawaan juga biru; satu-satunya di situs ada di halaman
   login ("Ingat saya"). */
.form-check-input:checked {
    background-color: var(--copper-600);
    border-color: var(--copper-600);
}
.form-check-input:focus {
    border-color: var(--copper-600);
    box-shadow: 0 0 0 3px rgba(166, 91, 46, .16);
}

/* Meta kartu berita ------------------------------------------------------
   Tanggal dan kategori berdampingan. Kategori tidak bisa memakai `pill` di
   kepala kartu, karena kartu berita tanpa gambar tidak punya kepala sama
   sekali — justru kartu itu yang paling butuh penandanya. */

.nj-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.nj-card__meta .nj-date { margin-bottom: 0; }

.nj-chip {
    display: inline-block;
    border: 1px solid var(--copper-600);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--copper-700);
}

/* Galat dan login ------------------------------------------------------- */

.nj-error { text-align: center; }
.nj-error__code {
    font-size: clamp(5rem, 14vw, 9rem);
    font-weight: 700;
    line-height: 1;
    color: var(--copper-600);
    margin: 0 0 8px;
}

.nj-login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 16px;
    background-color: var(--navy-700);
    background-image: var(--texture-light),
        linear-gradient(135deg, var(--navy-500), var(--navy-900));
}
.nj-login .nj-form { width: 100%; max-width: 24rem; }
/* Tautan "kembali ke situs" berdiri di atas navy. Warna tautan bawaan
   copper-700 hanya 2,4:1 terhadap navy-700; copper-400 memberi 5,3:1. */
.nj-login > .container > p a { color: var(--copper-400); }
.nj-login > .container > p a:hover { color: #fff; }
.nj-login__mark { display: flex; justify-content: center; margin-bottom: 20px; }
/* Halaman login punya ruang tegak berlebih, jadi logonya boleh sebesar
   ukuran yang benar-benar nyaman dibaca. */
.nj-login__mark .nj-mark { width: 72px; height: 72px; font-size: 1.2rem; }

/* WhatsApp -------------------------------------------------------------- */

/* Tetap hijau merek WhatsApp; menggantinya justru mengurangi kejelasan. */
.nj-wa {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1050;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.75rem;
    box-shadow: 0 10px 24px -6px rgba(11, 37, 69, .45);
    transition: transform .22s;
}
.nj-wa:hover { color: #fff; transform: scale(1.06); }