/* ============================================
   LAYOUT/RESPONSIVE_V2.CSS
   Media queries responsive (SMACSS layout)
   AD LASER WON — SMACSS Modular V2
   Generated: 18 Mei 2026
   PATENT RULE Compliance
   ============================================ */

@media (max-width: 600px) {
    :root {
        /* PENGATURAN LOGO AD LASER (HP) */
        --ad-tinggi-hp: 60px;
        --ad-x-hp: 0px;  /* FIX 18 Mei: 0 (no translate) */
        --ad-y-hp: 0px;

        /* PENGATURAN LOGO WON (HP) */
        --won-tinggi-hp: 40px; 
        --won-x-hp: 0px; /* FIX 18 Mei: 0 (no translate) */     
        --won-y-hp: 0px;     
        
        --header-gap-hp: 8px; /* FIX 18 Mei: 2mm → 8px (sesuai request) */ 
        --rt-font-size: 18px; /* Fit HP screen - POLISHED */ 
        --rt-height: 55px;

        /* PANAH ALUR HP (Bawah & Center) */
        --panah-bawah-hp: -35px; 
        --panah-rotasi-hp: 90deg; 
    }
}

@media (min-width: 601px) {
    body {
        zoom: 2;
    }
}

@media (max-width: 600px) {
    .header-logos { gap: var(--header-gap-hp); }
    .ad-box img { 
        height: var(--ad-tinggi-hp); 
        transform: translate(var(--ad-x-hp), var(--ad-y-hp));
    }
    .won-box img { 
        height: var(--won-tinggi-hp); 
        transform: translate(var(--won-x-hp), var(--won-y-hp)); 
    }
}

@media (max-width: 600px) {
    .one-stop-wrap {
        margin: 14px 0 22px 0;
        padding: 10px 0;
    }
    .one-stop-text {
        font-size: 15px;
        letter-spacing: 1.5px;
    }
    .one-stop-wrap::before,
    .one-stop-wrap::after {
        width: 70%;
    }
}

@media (max-width: 600px) {
    .flow-arrow-h {
        right: auto;
        left: 50%;
        top: auto;
        bottom: var(--panah-bawah-hp);
        transform: translateX(-50%) rotate(var(--panah-rotasi-hp));
    }
}

@media (max-width: 767px) {
    .alur-subtitle .alur-step i,
    .alur-subtitle .alur-arrow {
        display: none; /* Sembunyikan ikon & panah di HP, biar text simple */
    }
    .alur-subtitle .alur-step::after {
        content: " → ";
        color: var(--ad-merah-soft);
        font-weight: 700;
        margin: 0 4px;
    }
    .alur-subtitle .alur-step:last-child::after {
        content: ""; /* Step terakhir gak ada panah */
    }
}