/* ============================================================
   HALAMAN DEPAN (sebelum login)
   Token warna & font diambil dari style.css.
   Semua kelas diawali "bd-" supaya tidak bentrok dengan gaya
   halaman dalam aplikasi.
   ============================================================ */

body.bd-body { background: var(--basalt); }

/* ---------- Hero berlatar foto ---------- */
.bd-hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #0F0E0C;
}
.bd-hero-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% 28%;
}
/* Gelapnya ditahan secukupnya saja: teks tetap terbaca, foto tetap terlihat. */
.bd-hero-tirai {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(103deg, rgba(15,14,12,0.92) 0%, rgba(15,14,12,0.74) 30%, rgba(15,14,12,0.24) 60%, rgba(15,14,12,0) 88%),
        linear-gradient(to bottom, rgba(15,14,12,0.55) 0%, rgba(15,14,12,0) 22%, rgba(15,14,12,0) 62%, rgba(15,14,12,0.88) 100%);
}
.bd-hero > .bd-nav,
.bd-hero > .bd-hero-isi { position: relative; z-index: 2; }

/* ---------- Navigasi ---------- */
.bd-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px;
}
.bd-logo {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0,0,0,0.6);
}
.bd-logo span { color: var(--gold); }

.bd-link-masuk {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 13px;
    color: var(--gold);
    border: 1px solid rgba(200,155,60,0.55);
    border-radius: 999px;
    padding: 8px 18px;
    white-space: nowrap;
    backdrop-filter: blur(3px);
}
.bd-link-masuk:hover { background: var(--gold); color: var(--basalt); text-decoration: none; }

/* ---------- Isi hero ---------- */
.bd-hero-isi {
    flex: 1;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 40px 24px 80px;
}
.bd-hero-teks { max-width: 620px; }
.bd-hero h1 {
    font-family: var(--font-display);
    color: #fff;
    font-weight: 700;
    font-size: clamp(36px, 6.4vw, 66px);
    line-height: 1.03;
    letter-spacing: -0.01em;
    margin: 0 0 22px;
    text-shadow: 0 3px 28px rgba(0,0,0,0.6);
}
.bd-hero h1 em { display: block; font-style: normal; color: var(--gold); }
.bd-hero p {
    color: #E2DCCF;
    font-size: 16.5px;
    line-height: 1.68;
    max-width: 46ch;
    margin: 0 0 32px;
    text-shadow: 0 2px 16px rgba(0,0,0,0.75);
}
.bd-aksi { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.bd-btn {
    display: inline-block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 14px;
    background: var(--gold);
    color: var(--basalt);
    padding: 15px 30px;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.bd-btn:hover { text-decoration: none; }
.bd-catatan { color: #C3BCAB; font-size: 13px; text-shadow: 0 2px 12px rgba(0,0,0,0.8); }

/* ============================================================
   BAGIAN 3D - panel yang punya ketebalan & miring mengikuti kursor
   ============================================================ */
.bd-tiga-d {
    background:
        radial-gradient(1000px 420px at 12% -10%, rgba(200,155,60,0.16), transparent 60%),
        linear-gradient(180deg, #17161300 0%, #131210 22%, #0F0E0C 100%);
    padding: 88px 24px 96px;
}
.bd-tiga-d-dalam { max-width: 1120px; margin: 0 auto; }

.bd-tiga-d h2 {
    font-family: var(--font-display);
    color: #fff;
    font-size: clamp(26px, 3.4vw, 36px);
    line-height: 1.12;
    max-width: 18ch;
    margin: 0 0 14px;
}
.bd-tiga-d h2 em { font-style: normal; color: var(--gold); }
.bd-tiga-d .bd-intro { color: #A9A294; max-width: 56ch; line-height: 1.75; margin: 0 0 46px; }

/* Wadah perspektif: anak-anaknya jadi punya kedalaman sungguhan */
.bd-panel3d-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 26px;
    perspective: 1100px;
}

.bd-panel3d {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(8deg) rotateY(-9deg);
    transition: transform 0.5s cubic-bezier(.22,.8,.3,1);
    will-change: transform;
}
.bd-panel3d:nth-child(even) { transform: rotateX(8deg) rotateY(9deg); }

.bd-panel3d-muka {
    position: relative;
    background: linear-gradient(158deg, #262420 0%, #1A1917 58%, #151412 100%);
    border: 1px solid #38352D;
    border-radius: 16px;
    padding: 26px 22px 28px;
    min-height: 210px;
    /* Ketebalan panel + bayangan jatuh: inilah yang bikin terasa 3D */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.07),
        0 2px 0 #100F0D,
        0 6px 0 #0C0B0A,
        0 10px 0 #090807,
        0 30px 46px rgba(0,0,0,0.6);
    transform: translateZ(0);
}
/* Sisi emas di tepi kiri, memberi kesan panel punya ketebalan */
.bd-panel3d-muka::before {
    content: "";
    position: absolute;
    left: 0; top: 16px; bottom: 16px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--gold), rgba(200,155,60,0.15));
}

.bd-panel3d-angka {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--gold);
    display: block;
    margin-bottom: 16px;
    transform: translateZ(26px);
}
.bd-panel3d h3 {
    font-family: var(--font-display);
    color: #fff;
    font-size: 18px;
    text-transform: none;
    letter-spacing: 0.01em;
    margin: 0 0 10px;
    transform: translateZ(40px);
}
.bd-panel3d p {
    color: #A9A294;
    font-size: 14.5px;
    line-height: 1.65;
    margin: 0;
    transform: translateZ(18px);
}

/* Ikon kubus 3D kecil di pojok tiap panel */
.bd-kubus {
    position: absolute;
    top: 22px; right: 22px;
    width: 26px; height: 26px;
    transform-style: preserve-3d;
    transform: rotateX(-24deg) rotateY(36deg) translateZ(30px);
    opacity: 0.85;
}
.bd-kubus i {
    position: absolute;
    inset: 0;
    display: block;
    border: 1px solid rgba(200,155,60,0.75);
    background: rgba(200,155,60,0.10);
}
.bd-kubus i:nth-child(1) { transform: translateZ(13px); }
.bd-kubus i:nth-child(2) { transform: rotateY(90deg) translateZ(13px); background: rgba(200,155,60,0.20); }
.bd-kubus i:nth-child(3) { transform: rotateX(90deg) translateZ(13px); background: rgba(200,155,60,0.30); }

/* ---------- Footer ---------- */
.bd-kaki {
    background: #0F0E0C;
    color: #8C8677;
    text-align: center;
    padding: 36px 24px 44px;
    font-size: 13px;
    line-height: 1.8;
    border-top: 1px solid #23211C;
}
.bd-kaki a { color: var(--gold); }

/* ---------- Responsif ---------- */
@media (max-width: 860px) {
    .bd-hero { min-height: 84vh; }
    /* Di layar sempit foto dipotong lebih ke arah pemanjat */
    .bd-hero-foto { object-position: 66% 22%; }
    .bd-hero-tirai {
        background: linear-gradient(to bottom,
            rgba(15,14,12,0.62) 0%,
            rgba(15,14,12,0.28) 26%,
            rgba(15,14,12,0.72) 62%,
            rgba(15,14,12,0.94) 100%);
    }
    .bd-hero-isi { align-items: flex-end; padding-bottom: 56px; }
    .bd-tiga-d { padding: 64px 22px 72px; }
    /* Kemiringan dikurangi supaya teks tetap enak dibaca di layar kecil */
    .bd-panel3d, .bd-panel3d:nth-child(even) { transform: rotateX(4deg) rotateY(0deg); }
}
@media (max-width: 420px) {
    .bd-nav { padding: 18px 20px; }
    .bd-logo { font-size: 14px; }
}

/* Hormati pengaturan "kurangi animasi" di perangkat pengguna */
@media (prefers-reduced-motion: reduce) {
    .bd-panel3d, .bd-panel3d:nth-child(even) { transform: none; transition: none; }
    .bd-kubus { display: none; }
}

/* ==================================================================
   TEMA UNGU & KUNING untuk halaman depan
   ================================================================== */
body.bd-body { background: #FFFFFF; }

/* Foto tetap jadi bintangnya, diberi tirai ungu malam yang memudar ke kanan */
.bd-hero { background: var(--p-awal); }
.bd-hero-tirai {
    background:
        linear-gradient(100deg, rgba(var(--pr-925-rgb), 0.95) 0%, rgba(var(--pr-800-rgb), 0.85) 32%, rgba(var(--p-akhir-rgb), 0.35) 62%, rgba(var(--p-akhir-rgb), 0) 88%),
        linear-gradient(to bottom, rgba(var(--pr-925-rgb), 0.45) 0%, rgba(var(--pr-925-rgb), 0) 24%, rgba(var(--pr-925-rgb), 0) 80%, rgba(255, 255, 255, 0.9) 100%);
}
.bd-logo { color: #FFFFFF; text-shadow: none; }
.bd-logo span { color: var(--teks-di-aksen); background: var(--a-tengah); padding: 1px 8px 2px; border-radius: 6px; }
.bd-link-masuk {
    color: #FFFFFF; border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(4px);
}
.bd-link-masuk:hover { background: var(--a-tengah); color: var(--teks-di-aksen); border-color: var(--a-tengah); }

.bd-hero h1 { color: #FFFFFF; text-shadow: 0 3px 24px rgba(var(--pr-950-rgb), 0.55); }
.bd-hero h1 em { color: var(--a-tengah); text-shadow: 0 3px 24px rgba(var(--pr-950-rgb), 0.6); }
.bd-hero p { color: var(--pr-100d); text-shadow: 0 1px 14px rgba(var(--pr-950-rgb), 0.7); font-weight: 400; }
.bd-btn {
    background: linear-gradient(115deg, var(--a-awal), var(--a-akhir)); color: var(--teks-di-aksen);
    box-shadow: 0 10px 28px rgba(var(--a-awal-rgb), 0.45);
}
.bd-btn:hover { background: linear-gradient(115deg, var(--a-tengah), var(--ak-200)); color: var(--teks-di-aksen); }
.bd-catatan { color: var(--pr-150b); text-shadow: 0 1px 10px rgba(var(--pr-950-rgb), 0.7); }

@media (max-width: 860px) {
    .bd-hero-tirai {
        background: linear-gradient(to bottom,
            rgba(var(--pr-925-rgb), 0.70) 0%, rgba(var(--pr-850-rgb), 0.30) 26%,
            rgba(var(--pr-850-rgb), 0.80) 58%, rgba(var(--pr-925-rgb), 0.96) 100%);
    }
}

/* Bagian 3D: latar putih, panel bertepi tebal ungu dengan sentuhan kuning */
.bd-tiga-d { background: #FFFFFF; }
.bd-tiga-d h2 { color: var(--pr-900); }
.bd-tiga-d h2 em { color: var(--pr-600); }
.bd-tiga-d .bd-intro { color: var(--teks-lembut); }

.bd-panel3d-muka {
    background: #FFFFFF;
    border: 1px solid var(--pr-150c);
    box-shadow:
        inset 0 1px 0 #FFFFFF,
        0 2px 0 var(--pr-300b),
        0 5px 0 var(--pr-500),
        0 8px 0 var(--pr-700),
        0 26px 40px rgba(var(--pr-700-rgb), 0.25);
}
.bd-panel3d-muka::before { background: linear-gradient(180deg, var(--a-awal), var(--a-akhir)); width: 4px; }
.bd-panel3d-angka { color: var(--pr-600); }
.bd-panel3d h3 { color: var(--pr-900); }
.bd-panel3d p { color: var(--teks-lembut); }
.bd-kubus i { border-color: rgba(var(--pr-600-rgb), 0.8); background: rgba(var(--a-tengah-rgb), 0.25); }
.bd-kubus i:nth-child(2) { background: rgba(var(--pr-400-rgb), 0.35); }
.bd-kubus i:nth-child(3) { background: rgba(var(--a-awal-rgb), 0.45); }

.bd-kaki {
    background: var(--grad-ungu);
    color: var(--teks-di-primer); border-top: 3px solid var(--a-tengah); font-weight: 500;
}
.bd-kaki a { color: var(--aksen-di-primer); text-decoration: underline; }
.bd-kaki-kontak { display: inline-block; margin: 4px 0; }