/* public/css/public-home-gallery.css
   Section GALERI homepage: 3 monitor 3D.
   Dipakai oleh resources/views/public/partials/home-gallery.blade.php */

.hmg-sec {
    --hmg-teal: #14b8bd;
    --hmg-teal-dark: #0d9ba0;
    --hmg-teal-deep: #0a7e82;
    --hmg-ink: #12393b;
    --hmg-muted: #5f7e80;

    /* bodi monitor */
    --hmg-bezel: #1b272b;
    --hmg-alu: #dfe7e9;
    --hmg-alu-dark: #c3cfd2;

    /* Lebar monitor tengah ikut tinggi layar -> satu section (judul s/d
       tombol) selalu muat 1 layar. 330px = navbar + judul + tombol + jarak. */
    --hmg-main: clamp(230px, calc((100svh - 330px) * 1.2), 360px);

    padding: 26px 0 30px;
    overflow: hidden;
}

/* ---------- judul ---------- */
.hmg-head { text-align: center; max-width: 560px; margin: 0 auto 10px; }

.hmg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #e3f7f7;
    color: var(--hmg-teal-deep);
    font-size: 12px;
    font-weight: 700;
}

.hmg-head h2 {
    margin: 8px 0 4px;
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 800;
    color: var(--hmg-ink);
    letter-spacing: -.01em;
}

.hmg-head p { margin: 0; color: var(--hmg-muted); font-size: 13.5px; }

.hmg-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

.hmg-tags span {
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid #cfeeee;
    background: #fff;
    color: var(--hmg-teal-deep);
    font-size: 12px;
    font-weight: 600;
}

/* ---------- panggung 3 monitor ---------- */
.hmg-stage {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    perspective: 1300px;
    perspective-origin: 50% 30%;
    padding: 6px 0 18px;
}

.hmg-lap {
    --w: var(--hmg-main);
    position: relative;
    width: var(--w);
    flex-shrink: 0;
    transform-style: preserve-3d;
}

.hmg-lap--main {
    z-index: 2;
}

/* monitor samping: lebih kecil, agak di belakang, ngadep ke tengah */
.hmg-lap--side {
    --w: calc(var(--hmg-main) * .6);
    z-index: 1;
    margin-bottom: 0;
}

.hmg-lap--left {
    margin-right: calc(var(--hmg-main) * -.12);
    transform: rotateY(32deg) translateZ(-60px);
}

.hmg-lap--right {
    margin-left: calc(var(--hmg-main) * -.12);
    transform: rotateY(-32deg) translateZ(-60px);
}

/* layar monitor: bezel tipis, dagu bawah sedikit lebih tebel */
.hmg-lid {
    position: relative;
    aspect-ratio: 16 / 9.6;
    padding: 2.2% 2.2% 4.6%;
    border-radius: 14px;
    background: var(--hmg-bezel);
    box-shadow:
        inset 0 0 0 2px #2c3b40,
        0 22px 36px rgba(10, 60, 64, .18);
}

/* titik logo di dagu monitor */
.hmg-lid::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 1.6%;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: #4b6066;
}

.hmg-screen {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 5px;
    background: #0e1c20;
}

/* penyangga: leher + kaki */
.hmg-stand {
    position: relative;
    height: calc(var(--w) * .2);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hmg-neck {
    width: 15%;
    flex: 1;
    background: var(--hmg-alu);
    clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
    box-shadow: inset 0 6px 0 rgba(0, 0, 0, .08);
}

.hmg-stand-foot {
    width: 46%;
    height: calc(var(--w) * .035);
    border-radius: 50% 50% 10px 10px / 70% 70% 10px 10px;
    background: var(--hmg-alu);
    box-shadow:
        inset 0 -4px 0 var(--hmg-alu-dark),
        0 10px 16px rgba(10, 60, 64, .16);
}

/* bayangan di lantai */
.hmg-lap::after {
    content: '';
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: -8px;
    height: 16px;
    border-radius: 50%;
    background: rgba(10, 60, 64, .16);
    filter: blur(8px);
    z-index: -1;
}

/* ---------- monitor tengah: slide 1 per 1 ---------- */
.hmg-slides {
    display: flex;
    height: 100%;
    transition: transform .8s cubic-bezier(.6, .05, .25, 1);
}

.hmg-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    display: block;
}

.hmg-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hmg-caption {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--hmg-teal-deep);
    font-size: 10.5px;
    font-weight: 700;
    max-width: calc(100% - 80px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hmg-dots {
    position: absolute;
    right: 12px;
    bottom: 14px;
    display: flex;
    gap: 5px;
}

.hmg-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: width .3s ease, background .2s ease;
}

.hmg-dot.is-active { width: 20px; background: #fff; }

/* ---------- monitor samping: deretan foto jalan terus ---------- */
.hmg-strip {
    display: flex;
    gap: 6px;
    height: 100%;
    width: max-content;
    padding: 6px;
    box-sizing: border-box;
    animation: hmgMarquee 34s linear infinite;
}

.hmg-strip--reverse { animation-direction: reverse; }

.hmg-strip img {
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

/* ---------- tombol ---------- */
.hmg-foot { display: flex; justify-content: center; margin-top: 4px; }

.hmg-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--hmg-teal);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease;
}

.hmg-link:hover { background: var(--hmg-teal-dark); color: #fff; }
.hmg-link i { transition: transform .15s ease; }
.hmg-link:hover i { transform: translateX(3px); }

/* ---------- animasi ---------- */
@keyframes hmgMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); } /* isinya 2x, jadi -50% = pas 1 putaran */
}

/* ---------- responsif ---------- */
@media (max-width: 860px) {
    .hmg-sec { --hmg-main: clamp(230px, calc((100svh - 330px) * 1.2), 320px); }
}

/* HP: monitor samping tetap ada tapi kecil & ngintip di belakang */
@media (max-width: 600px) {
    .hmg-sec { padding: 36px 0 44px; }
    .hmg-lap--main { --w: 72vw; }
    .hmg-lap--side { --w: 40vw; }
    .hmg-lap--left  { margin-right: -30vw; }
    .hmg-lap--right { margin-left: -30vw; }
    .hmg-caption { font-size: 10.5px; padding: 4px 9px; left: 8px; bottom: 8px; }
    .hmg-dots { right: 8px; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .hmg-strip { animation: none; }
    .hmg-slides { transition: none; }
}