/* ============================================================
   KOWEB — Page 3  ("Pindah kantor kali yak")
   Latar GELAP supaya tulisan putih di gambar tengah kebaca.
   Pakai variabel warna & font dari page-1.css (global :root).
   ============================================================ */

.page-3 {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 7vh;
    font-family: var(--font-body);
    color: #fff3e6;                 /* teks terang di atas latar gelap */
    background:
        radial-gradient(56% 52% at 50% 54%, rgba(255,196,96,.42) 0%, rgba(255,196,96,0) 62%),
        radial-gradient(120% 100% at 50% 124%, rgba(245,51,63,.28), transparent 62%),
        linear-gradient(180deg, #2b1b30 0%, #1c1220 100%);
}

/* ---------- Judul (tengah atas) ---------- */
.p3-title {
    z-index: 5;
    padding: 0 5vw;
    text-align: center;
    pointer-events: none;
}
.p3-heading { margin: 0; font-family: var(--font-display); }
.p3-brand {
    display: block;
    font-size: clamp(46px, 9vw, 116px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.88;
    text-transform: uppercase;
    color: #fff6ea;
}
.p3-sub {
    display: block;
    margin-top: 0.14em;
    font-size: clamp(20px, 3.8vw, 44px);
    font-weight: 700;
    color: rgba(255,240,225,.72);
}

/* ---------- Area tengah ---------- */
.p3-stage {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1vh 4vw 3vh;
}

/* Gambar tengah, paling besar + halo hangat */
.koweb-center {
    max-height: 76vh;
    max-width: 54vw;
    width: auto;
    height: auto;
    z-index: 4;
    filter: drop-shadow(0 0 48px rgba(255,196,96,.32));
}

/* ---------- The Rock: absolute, acak-acakan ---------- */
.rock {
    position: absolute;         /* keluar dari flow, ditaruh bebas */
    z-index: 2;
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(0,0,0,.5);
}
/* kiri: lebih kecil, ke atas, miring kiri */
.rock-left {
    width: clamp(150px, 17vw, 260px);
    left: 5vw;
    top: 23vh;
    transform: rotate(-10deg);
}
/* kanan: lebih besar, ke bawah, miring kanan */
.rock-right {
    width: clamp(230px, 26vw, 420px);
    right: 3vw;
    bottom: 7vh;
    transform: rotate(9deg);
}

/* ---------- Responsif ---------- */
@media (max-width: 720px) {
    .p3-brand { font-size: clamp(38px, 12vw, 72px); }
    .koweb-center { max-height: 56vh; max-width: 74vw; }
    .rock-left  { width: 34vw; left: 2vw; top: 21vh; transform: rotate(-10deg); }
    .rock-right { width: 44vw; right: 2vw; bottom: 4vh; transform: rotate(9deg); }
}