/* ============================================================
   KOWEB — Page 2  ("Bingung: perusahaan apa itu?")
   Pakai variabel warna & font dari page-1.css (global :root).
   ============================================================ */

.page-2 {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-family: var(--font-body);
    color: var(--ink);
    /* Sengaja agak "berantakan": kertas titik-titik + noda warna */
    background-color: #f7f1e6;
    background-image:
        radial-gradient(circle at 18% 28%, rgba(245,51,63,.06), transparent 42%),
        radial-gradient(circle at 82% 72%, rgba(255,180,60,.08), transparent 44%),
        radial-gradient(rgba(38,24,43,.05) 1.4px, transparent 1.4px);
    background-size: auto, auto, 26px 26px;
}

/* ---------- Tanda tanya berserakan ---------- */
.q-decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.qmark {
    position: absolute;
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1;
    color: rgba(38,24,43,.09);
    user-select: none;
}
.q1 { font-size: 130px; top: 18%;  left: 11%;  transform: rotate(-15deg); }
.q2 { font-size: 82px;  top: 62%;  left: 24%;  transform: rotate(12deg);  color: rgba(245,51,63,.10); }
.q3 { font-size: 170px; top: 11%;  right: 13%; transform: rotate(10deg); }
.q4 { font-size: 92px;  bottom: 15%; right: 21%; transform: rotate(-8deg); color: rgba(255,160,40,.16); }
.q5 { font-size: 66px;  top: 47%;  left: 47%;  transform: rotate(7deg); }
.q6 { font-size: 110px; bottom: 9%; left: 7%;   transform: rotate(14deg); }

/* ---------- Judul (tengah atas) ---------- */
.p2-title {
    position: absolute;
    z-index: 3;
    top: 8vh; left: 0; right: 0;
    padding: 0 5vw;
    text-align: center;
    pointer-events: none;
}
.p2-heading { margin: 0; font-family: var(--font-display); }
.p2-brand {
    display: block;
    font-size: clamp(46px, 9vw, 118px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.88;
    text-transform: uppercase;
}
.p2-sub {
    display: block;
    margin-top: 0.14em;
    font-size: clamp(22px, 4.2vw, 48px);
    font-weight: 700;
    color: var(--ink-soft);
}

/* ---------- Kucing (kartu foto miring, kedip acak) ---------- */
.cat {
    position: absolute;
    z-index: 2;
    display: block;
    background: #fff;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(38,24,43,.06);
    box-shadow: 0 18px 42px rgba(38,24,43,.18);
    opacity: 0;              /* dikendalikan JS: main 2x penuh -> hilang 1 detik -> ulang */
}

/* kiri, agak miring kiri */
.cat-huh {
    width: clamp(180px, 22vw, 300px);
    left: 5vw; top: 34vh;
    transform: rotate(-6deg);
}
/* kanan, miring kanan */
.cat-confused {
    width: clamp(170px, 21vw, 288px);
    right: 5vw; top: 29vh;
    transform: rotate(5deg);
}
/* bawah tengah, miring dikit */
.cat-zoom {
    width: clamp(200px, 27vw, 360px);
    left: 50%; bottom: 5vh;
    transform: translateX(-50%) rotate(-3deg);
}
/* bawah kiri, miring kanan */
.cat-confused2 {
    width: clamp(150px, 18vw, 230px);
    left: 19vw; bottom: 9vh;
    transform: rotate(8deg);
}
/* bawah kanan, miring kiri */
.cat-surprised {
    width: clamp(160px, 19vw, 250px);
    right: 18vw; bottom: 12vh;
    transform: rotate(-9deg);
}

/* ---------- Responsif ---------- */
@media (max-width: 640px) {
    .p2-brand { font-size: clamp(40px, 14vw, 72px); }
    .cat-huh   { width: 40vw; left: 3vw; top: 30vh; }
    .cat-confused { width: 40vw; right: 3vw; top: 27vh; }
    .cat-zoom  { width: 52vw; bottom: 4vh; }
    .cat-confused2 { width: 38vw; left: 4vw; bottom: 22vh; }
    .cat-surprised { width: 40vw; right: 4vw; bottom: 24vh; }
    .q3 { font-size: 110px; }
}

/* ---------- Kurangi gerak: gif tampil terus, tidak hilang-timbul ---------- */
@media (prefers-reduced-motion: reduce) {
    .cat { opacity: 1; }
}