/* ============================================================
   KOWEB — Page 4  ("Kerja di mana aja")
   Kolase GIF acak. Pakai variabel warna & font dari page-1.css.
   ============================================================ */

.page-4 {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 7vh;
    font-family: var(--font-body);
    color: var(--ink);
    background:
        radial-gradient(62% 58% at 50% 42%, #fff8ee 0%, #fbe9d4 100%);
}

/* ---------- Doodle "banyak tempat" ---------- */
.p4-decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ring { position: absolute; border-radius: 50%; border: 2px dashed rgba(38,24,43,.10); }
.ring-1 { width: 220px; height: 220px; top: 16%;  left: 10%; }
.ring-2 { width: 150px; height: 150px; bottom: 15%; right: 15%; border-color: rgba(245,51,63,.16); }
.ring-3 { width: 300px; height: 300px; top: 42%;  right: 5%;  border-color: rgba(255,160,40,.16); }

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

/* ---------- Kolase GIF (absolute, acak) ---------- */
.p4-gif {
    position: absolute;
    z-index: 2;
    max-height: 44vh;           /* jaga gif potret biar nggak kepanjangan & nutupin */
    background: #fff;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(38,24,43,.06);
    box-shadow: 0 18px 40px rgba(38,24,43,.20);
}
/* 4 sudut + 1 tengah, masing-masing punya ruang sendiri */
.g-wfh    { width: clamp(180px, 22vw, 300px); left: 5vw;  top: 26vh;    transform: rotate(-8deg); }   /* kiri atas */
.g-people { width: clamp(190px, 22vw, 320px); right: 6vw; top: 24vh;    transform: rotate(6deg); }    /* kanan atas */
.g-kicau  { width: clamp(150px, 18vw, 240px); left: 7vw;  bottom: 8vh;  transform: rotate(8deg); }    /* kiri bawah */
.g-coding { width: clamp(190px, 22vw, 320px); right: 6vw; bottom: 8vh;  transform: rotate(-6deg); }   /* kanan bawah */
.g-bug    { width: clamp(190px, 22vw, 320px); left: 50%;  top: 40vh;    transform: translateX(-50%) rotate(-3deg); } /* tengah */

/* ---------- Responsif ---------- */
@media (max-width: 720px) {
    .p4-brand { font-size: clamp(38px, 12vw, 72px); }
    .p4-gif   { max-height: 30vh; }
    .g-wfh    { width: 40vw; left: 2vw;  top: 22vh; }
    .g-people { width: 40vw; right: 2vw; top: 21vh; }
    .g-kicau  { width: 34vw; left: 3vw;  bottom: 4vh; }
    .g-coding { width: 40vw; right: 2vw; bottom: 4vh; }
    .g-bug    { width: 38vw; top: 44vh; }
    .ring-3 { display: none; }
}