/* ============================================================
   KOWEB — Page 5  ("한국어 공부하기" / Belajar bahasa Korea)
   Judul pakai Black Han Sans (Hangul). Tatanan GIF acak + mengambang.
   ============================================================ */

.page-5 {
    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% 60% at 50% 40%, #fdf6ef 0%, #f1eaf4 100%);
}

/* ---------- Hangul berserakan (dekor) ---------- */
.p5-decor {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    font-family: "Black Han Sans", var(--font-display), sans-serif;
}
.hg { position: absolute; line-height: 1; user-select: none; color: rgba(38,24,43,.07); }
.hg-1 { font-size: 150px; top: 15%;  left: 9%;   transform: rotate(-12deg); }
.hg-2 { font-size: 92px;  top: 60%;  left: 19%;  transform: rotate(10deg);  color: rgba(245,51,63,.10); }
.hg-3 { font-size: 180px; top: 11%;  right: 11%; transform: rotate(8deg); }
.hg-4 { font-size: 100px; bottom: 14%; right: 21%; transform: rotate(-9deg); color: rgba(255,160,40,.18); }
.hg-5 { font-size: 68px;  top: 45%;  left: 47%;  transform: rotate(6deg); }
.hg-6 { font-size: 120px; bottom: 8%; left: 6%;   transform: rotate(14deg); }

/* ---------- Judul (tengah atas) ---------- */
.p5-title {
    z-index: 5;
    padding: 0 5vw;
    text-align: center;
    pointer-events: none;
}
.p5-heading {
    margin: 0;
    font-family: "Black Han Sans", var(--font-display), sans-serif;
    font-weight: 400;              /* Black Han Sans memang sudah tebal */
    line-height: 0.98;
    letter-spacing: 0.01em;
}
.p5-line { display: block; font-size: clamp(38px, 7.5vw, 100px); }
.p5-sub {
    display: block;
    margin-top: 0.5em;
    font-family: var(--font-body);
    font-size: clamp(16px, 3vw, 30px);
    font-weight: 700;
    color: var(--ink-soft);
}

/* ---------- GIF acak + mengambang ---------- */
.p5-gif {
    position: absolute;
    z-index: 2;
    max-height: 46vh;
    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);
}
/* Tiga GIF ukuran mirip (beda dikit), tersebar staggered.
   a1 sedikit lebih besar & di tengah-bawah biar tetap jadi fokus. */
.a1 {
    width: clamp(240px, 30vw, 440px);
    max-height: 46vh;
    left: 50%; top: 40vh;
    z-index: 3;
    transform: translateX(-50%) rotate(-3deg);
}
.a2 {
    width: clamp(220px, 27vw, 400px);
    left: 5vw; top: 33vh;
    transform: rotate(11deg);
}
.a3 {
    width: clamp(220px, 27vw, 400px);
    right: 5vw; top: 30vh;
    transform: rotate(-9deg);
}

/* Rotasi (dan translateX hero) ikut di-bake supaya tidak hilang saat mengambang */
@keyframes floatA {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(-3deg); }
    50%      { transform: translateX(-50%) translateY(-16px) rotate(-3deg); }
}
@keyframes floatB {
    0%, 100% { transform: translateY(0) rotate(11deg); }
    50%      { transform: translateY(-13px) rotate(11deg); }
}
@keyframes floatC {
    0%, 100% { transform: translateY(0) rotate(-9deg); }
    50%      { transform: translateY(-18px) rotate(-9deg); }
}

/* ---------- Responsif ---------- */
@media (max-width: 720px) {
    .p5-line { font-size: clamp(34px, 13vw, 76px); }
    .a1 { width: 58vw; max-height: 38vh; top: 42vh; }
    .a2 { width: 44vw; left: 2vw;  top: 30vh; max-height: 30vh; }
    .a3 { width: 44vw; right: 2vw; top: 28vh; max-height: 30vh; }
    .hg-3 { font-size: 120px; }
}

/* ---------- Kurangi gerak ---------- */
@media (prefers-reduced-motion: reduce) {
    .a1, .a2, .a3 { animation: none; }
}