/* public/css/public-home-hero.css
   Tambahan buat banner berita HP + hologram 3D (public-home-holo.css).
   Dimuat SETELAH public-home-holo.css, jadi aturan di sini menimpa yang lama.
   1. Gak pakai kotak: full lebar layar & nempel di bawah navbar
   2. Hologram + HP lebih gede
   3. Gak polos: aksara 新闻 samar di belakang + label kecil melayang */

/* ---------- 1. full lebar, nempel navbar ---------- */
.pub-main:has(> .hm > .hm-hero:first-child) { padding-top: 0 !important; }
.hm-hero { padding-top: 0 !important; margin-top: 0 !important; }
.hm { overflow-x: clip; }

.hm-hero .hmh {
    box-sizing: border-box; /* padding dihitung di dalam 100vw (gak kelebaran) */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border-radius: 0;
    box-shadow: none;
    /* isi tetap sejajar sama section lain (±1180px di tengah) */
    padding: 28px max(24px, calc((100vw - 1180px) / 2)) 20px;
    min-height: clamp(460px, calc(100svh - 72px), 640px);
    grid-template-columns: 1fr 1.1fr;
    background:
        radial-gradient(circle at 75% 45%, rgba(20, 184, 189, .14), transparent 45%),
        linear-gradient(160deg, #ffffff 0%, #f2fbfb 55%, #e3f6f7 100%);
}

/* kolom grid boleh menyusut (biar teks & hologram gak keluar layar) */
.hm-hero .hmh > * { min-width: 0; }
.hmh-stage { overflow: visible; }

/* ---------- 2. hologram lebih gede ---------- */
.hmh-stage { height: 540px; }

.hmh-rig {
    --hmh-scale: 1.22;
    transform-origin: 50% 100%;
}

.hmh-title { font-size: clamp(28px, 3.4vw, 44px); }
.hmh-excerpt { font-size: 15.5px; }

/* ---------- 3. hiasan ---------- */

/* aksara besar samar di belakang hologram */
.hmh-hanzi {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    font-size: clamp(140px, 17vw, 240px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .05em;
    white-space: nowrap;
    color: rgba(20, 184, 189, .08);
    pointer-events: none;
    user-select: none;
}

/* label kecil melayang */
.hmh-tag {
    position: absolute;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(20, 184, 189, .25);
    box-shadow: 0 10px 22px rgba(15, 158, 163, .14);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--tosca-dark, #0f9ea3);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    animation: hmh-tag 6s ease-in-out infinite;
}

.hmh-tag i { font-size: 13px; }

.hmh-tag--a { top: 6%;  left: 2%; }
.hmh-tag--b { top: 30%; right: 3%; animation-delay: -2s; }
.hmh-tag--c { bottom: 22%; left: 6%; animation-delay: -4s; color: #fff; background: var(--tosca, #14b8bd); border-color: transparent; }

@keyframes hmh-tag { 50% { transform: translateY(-8px); } }

/* ---------- ukuran layar ---------- */

/* layar pendek: kecilin sedikit biar tetap 1 layar */
@media (min-width: 901px) and (max-height: 760px) {
    .hmh-stage { height: 470px; }
    .hmh-rig { --hmh-scale: 1.08; }
}

@media (max-width: 900px) {
    .hm-hero .hmh { grid-template-columns: minmax(0, 1fr); padding: 20px 20px 24px; min-height: 0; }
    .hmh-excerpt { max-width: 100%; }
    .hmh-stage { height: 400px; }
    .hmh-rig { --hmh-scale: .88; }
    .hmh-tag { font-size: 11px; padding: 5px 10px; }
    .hmh-tag--b { right: 4%; }
}

@media (max-width: 400px) {
    .hmh-stage { height: 350px; }
    .hmh-rig { --hmh-scale: .76; }
    .hmh-tag--c { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hmh-tag { animation: none; }
}