/* ============================================
   RESPONSIVE.CSS v23
   + Nav anti-wrap dengan 5 link (Pricing)
   ============================================ */

/* DESKTOP */
@media (min-width: 1025px) {
    .hero-content { max-width: 900px; }
    .hero-title { font-size: clamp(2.75rem, 4.3vw, 4rem); }
    .title-line { white-space: nowrap; }
    .hero-subtitle { max-width: 640px; }
    
    /* v23: rapatkan nav agar 5 link tidak wrap */
    .nav-wrapper { gap: 1.75rem; }
    .nav-links { gap: 2rem; }
}

/* v23: sembunyikan teks logo di desktop sempit */
@media (min-width: 1025px) and (max-width: 1199px) {
    .logo-text { display: none; }
}

/* v23: nav-contact hanya di layar lega */
@media (max-width: 1399px) {
    .nav-contact { display: none; }
}
@media (min-width: 1400px) {
    .nav-contact { display: flex; }
}

/* TABLET */
@media (max-width: 1024px) {
    .container, .nav-container { padding: 0 2rem; }
    
    .hero-section {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
    }
    
    .hero-container { order: 1; max-width: 100%; }
    .hero-content { max-width: 100%; padding: calc(var(--header-h) + 1.5rem) 0 3rem; }
    
    .hero-background {
        position: relative;
        inset: auto;
        order: 2;
        width: 100%;
        aspect-ratio: 5 / 2;
        flex-shrink: 0;
        margin-top: auto;
    }
    
    .hero-bg-blur { display: none; }
    .hero-gradient-left { display: none; }
    
    .hero-bg-img {
        object-fit: contain;
        object-position: center;
        filter: brightness(0.95) contrast(1.05);
    }
    
    .hero-overlay {
        background: linear-gradient(180deg,
            rgba(10, 10, 10, 0.25) 0%,
            transparent 30%,
            transparent 70%,
            rgba(10, 10, 10, 0.35) 100%);
    }
    
    .hero-title { font-size: clamp(2rem, 4vw, 3rem); }
    .title-line { white-space: normal; }
    .hero-subtitle { font-size: 1.1rem; }
    .floating-cards, .hero-deco, .hero-side-text { display: none; }
    
    .about-content { grid-template-columns: 1fr; gap: 3.5rem; }
    .about-image { max-width: 420px; margin: 0 auto; }
    
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .s-card.wide, .s-card:last-child { grid-column: span 2; }
    
    .why-content { grid-template-columns: 1fr; gap: 3rem; }
    .contact-content { grid-template-columns: 1fr; gap: 3rem; }
    .footer-top { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* MOBILE / PORTRAIT PHONE */
@media (max-width: 768px) {
    :root { --header-h: 4.3rem; }
    
    .mobile-toggle { display: flex; }
    
    .mobile-toggle[aria-expanded="true"] .hamburger { background: transparent; }
    .mobile-toggle[aria-expanded="true"] .hamburger::before { top: 0; transform: rotate(45deg); background: var(--primary-color); }
    .mobile-toggle[aria-expanded="true"] .hamburger::after { top: 0; transform: rotate(-45deg); background: var(--primary-color); }
    
    body:has(.nav-menu.active) main {
        filter: brightness(0.4) saturate(0.8);
        pointer-events: none;
        transition: filter 0.4s ease;
    }
    
    .nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: min(72%, 280px);
        height: auto;
        max-height: 100dvh;
        overflow-y: auto;
        transform: translateX(105%);
        transition: transform 0.45s cubic-bezier(0.77, 0, 0.18, 1);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: calc(var(--header-h) + 0.75rem) 1.25rem 1.25rem;
        z-index: 998;
        border-radius: 0 0 0 22px;
        background:
            radial-gradient(120% 40% at 100% 0%, rgba(201, 169, 98, 0.12) 0%, transparent 55%),
            linear-gradient(200deg, #151109 0%, #0a0a0a 50%, #0d0a06 100%);
        border-left: 1px solid rgba(201, 169, 98, 0.4);
        border-bottom: 1px solid rgba(201, 169, 98, 0.4);
        box-shadow: -20px 20px 60px rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }
    .nav-menu.active { transform: translateX(0); }
    
    .nav-menu::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 90px;
        height: 90px;
        background: repeating-linear-gradient(-45deg, rgba(201, 169, 98, 0.25) 0 2px, transparent 2px 8px);
        -webkit-mask-image: linear-gradient(135deg, #000, transparent 75%);
        mask-image: linear-gradient(135deg, #000, transparent 75%);
        border-radius: 0 0 0 22px;
        pointer-events: none;
    }
    
    .nav-menu::after {
        content: '';
        position: absolute;
        left: 0;
        top: 8%;
        bottom: 8%;
        width: 2px;
        background: linear-gradient(180deg, transparent, var(--primary-color) 30%, var(--primary-color) 70%, transparent);
        pointer-events: none;
    }
    
    .nav-links { flex-direction: column; gap: 0; margin: 0; }
    .nav-links li { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
    
    .nav-link {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--text-secondary);
        padding: 0.8rem 0.25rem;
        position: relative;
        opacity: 0;
        transform: translateX(24px);
    }
    
    .nav-link::before {
        content: '';
        width: 6px;
        height: 6px;
        background: var(--gradient-gold);
        border-radius: 1.5px;
        transform: rotate(45deg) scale(0);
        transition: transform 0.3s ease;
        flex-shrink: 0;
    }
    
    .nav-link::after {
        content: '';
        position: absolute;
        inset: 3px 0;
        background: rgba(201, 169, 98, 0.09);
        transform: skewX(-12deg) scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
        z-index: -1;
    }
    
    .nav-link:hover, .nav-link.active { color: var(--primary-light); padding-left: 0.4rem; }
    .nav-link:hover::before, .nav-link.active::before { transform: rotate(45deg) scale(1); }
    .nav-link:hover::after, .nav-link.active::after { transform: skewX(-12deg) scaleX(1); }
    
    .nav-menu.active .nav-link { animation: menuLinkIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
    .nav-links li:nth-child(1) .nav-link { animation-delay: 0.1s; }
    .nav-links li:nth-child(2) .nav-link { animation-delay: 0.16s; }
    .nav-links li:nth-child(3) .nav-link { animation-delay: 0.22s; }
    .nav-links li:nth-child(4) .nav-link { animation-delay: 0.28s; }
    .nav-links li:nth-child(5) .nav-link { animation-delay: 0.34s; }
    
    .menu-footer {
        margin-top: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
        opacity: 0;
        transform: translateY(14px);
    }
    .nav-menu.active .menu-footer { animation: menuFooterIn 0.4s ease 0.32s forwards; }
    
    .menu-wa {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        align-self: flex-start;
        padding: 0.6rem 1.1rem;
        background: var(--gradient-gold);
        color: var(--dark-bg);
        font-weight: 700;
        font-size: 0.85rem;
        transform: skewX(-10deg);
        box-shadow: var(--shadow-gold);
    }
    .menu-wa > * { transform: skewX(10deg); }
    .menu-wa .icon { width: 15px; height: 15px; }
    
    .menu-mail { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); font-size: 0.8rem; }
    .menu-mail .icon { width: 14px; height: 14px; color: var(--primary-color); }
    
    .menu-social { display: flex; gap: 0.6rem; margin-top: 0.15rem; }
    .menu-social a {
        width: 34px;
        height: 34px;
        border: 1px solid var(--border-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-color);
        transition: var(--transition);
    }
    .menu-social .icon { width: 14px; height: 14px; }
    .menu-social a:hover, .menu-social a:active { background: var(--gradient-gold); border-color: transparent; color: var(--dark-bg); }
    
    .nav-container { padding: 0 1.5rem; }
    .header { padding: 0.9rem 0; }
    .header.scrolled { padding: 0.7rem 0; }
    .nav-wrapper { gap: 1rem; }
    .nav-logo { gap: 0.6rem; font-size: 1.15rem; }
    .nav-logo img { width: 40px; height: 40px; }
    .nav-actions { gap: 0.9rem; }
    .language-selector { gap: 0.5rem; }
    .lang-btn { padding: 0.45rem 0.6rem; }
    
    .hero-container { padding: 0 1.5rem; }
    .hero-content { padding: calc(var(--header-h) + 0.875rem) 0 2rem; }
    .hero-badge { margin-bottom: 1rem; }
    .hero-title { font-size: 2rem; margin-bottom: 0.85rem; }
    .hero-subtitle { font-size: 1rem; margin-bottom: 1.5rem; }
    
    .hero-cta { flex-direction: row; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.75rem; }
    .btn { padding: 0.95rem 1.6rem; font-size: 0.95rem; }
    .btn .icon { width: 16px; height: 16px; }
    
    .hero-stats { flex-direction: row; gap: 0.6rem; align-items: stretch; }
    .stat-chip {
        flex: 1;
        width: auto;
        max-width: none;
        padding: 0.7rem 0.5rem;
        text-align: center;
        transform: skewX(-8deg);
    }
    .stat-inner { transform: skewX(8deg); }
    .stat-number { font-size: 1.6rem; }
    .stat-label { font-size: 0.6rem; letter-spacing: 0.06em; }
    
    .hero-wave { height: 40px; }
    
    .tech-marquee {
        transform: rotate(-1deg);
        width: 104%;
        margin-left: -2%;
        margin-top: 0;
        margin-bottom: 0;
    }
    .marquee-item { font-size: 0.8rem; padding-right: 2rem; }
    .marquee-item::after { margin-left: 2rem; }
    
    .about-section { padding-top: 3.5rem; }
    .about-content { gap: 2.5rem; }
    .about-image::before { transform: translate(14px, 14px) skewY(-4deg); }
    .about-image::after { left: -14px; top: -20px; width: 90px; height: 90px; }
    
    .services-grid { grid-template-columns: 1fr; }
    .s-card.wide, .s-card:last-child { grid-column: auto; }
    .s-card { padding: 2rem 1.5rem; }
    
    .testimonial-slide p { font-size: 1.05rem; }
    .testimonial-carousel::before { font-size: 7rem; top: -1rem; }
    
    .cta-box { padding: 2.75rem 1.5rem; }
    .cta-box h3 { font-size: 1.6rem; }
    
    .footer { margin-top: 2rem; }
    
    .back-to-top { transform: none; border-radius: 50%; }
    .back-to-top .icon { transform: none; }
    .back-to-top:hover { transform: translateY(-5px); }
    
    .footer-links { grid-template-columns: 1fr; gap: 2rem; }
    .footer-bottom { flex-direction: column; gap: 1.5rem; text-align: center; }
    
    section { padding: 3rem 0; }
    .container { padding: 0 1.5rem; }
    .section-title { font-size: 2rem; }
    .section-header { margin-bottom: 2.25rem; }
}

/* SMALL MOBILE */
@media (max-width: 480px) {
    :root { --header-h: 4rem; }
    
    .logo-text { display: none; }
    .lang-text { display: none; }
    .lang-btn { padding: 0.4rem 0.5rem; }
    .header { padding: 0.75rem 0; }
    
    .hero-content { padding: calc(var(--header-h) + 0.75rem) 0 1.75rem; }
    .hero-title { font-size: 1.75rem; }
    .hero-badge { font-size: 0.8rem; padding: 0.6rem 1rem; }
    
    .btn { padding: 0.85rem 1.3rem; font-size: 0.9rem; }
    .btn-large { padding: 1.05rem 1.8rem; font-size: 1rem; }
    
    .stat-number { font-size: 1.4rem; }
    .stat-label { font-size: 0.55rem; }
    
    .experience-badge { bottom: -12px; right: -12px; padding: 1.1rem 1.4rem; }
    .experience-badge .years { font-size: 2.25rem; }
    
    .text-block { padding-left: 1.25rem; }
    .section-title { font-size: 1.75rem; }
    
    .why-content::before { left: -20px; bottom: -30px; width: 100px; height: 100px; }
    .services-section::before { width: 220px; height: 220px; }
}

/* LANDSCAPE PHONE */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        min-height: auto;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
    }
    
    .hero-container { order: 1; flex: 1 1 55%; max-width: 55%; }
    .hero-content { padding: calc(var(--header-h) + 0.75rem) 1.5rem 2.5rem 2rem; }
    
    .hero-background {
        order: 2;
        flex: 1 1 45%;
        max-width: 45%;
        position: relative;
        inset: auto;
        aspect-ratio: auto;
        align-self: stretch;
        margin-top: 0;
    }
    
    .hero-bg-img { object-fit: cover; object-position: center; }
    
    .hero-title { font-size: 1.85rem; margin-bottom: 0.75rem; }
    .title-line { white-space: normal; }
    .hero-subtitle { font-size: 0.95rem; margin-bottom: 1.25rem; }
    .hero-badge { margin-bottom: 0.9rem; font-size: 0.8rem; padding: 0.55rem 1rem; }
    .hero-cta { margin-bottom: 0; gap: 0.75rem; }
    .btn { padding: 0.8rem 1.4rem; font-size: 0.9rem; }
    
    .hero-stats { display: none; }
    
    .hero-wave { height: 40px; }
    .hero-deco, .hero-side-text, .floating-cards { display: none; }
    
    section { padding: 2.5rem 0; }
    .section-header { margin-bottom: 1.75rem; }
    .section-title { font-size: 1.75rem; }
    
    .about-section { padding-top: 2.5rem; }
    .about-content { grid-template-columns: 280px 1fr; gap: 2rem; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .s-card.wide, .s-card:last-child { grid-column: span 2; }
}

/* LARGE DESKTOP */
@media (min-width: 1600px) {
    .container, .nav-container, .footer-content { max-width: 1600px; }
    .hero-content { max-width: 900px; }
    .hero-title { font-size: 4rem; }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    .hero-bg-blur, .gradient-orb, .float-card, .marquee-track, .deco-bar, .cta-box::before { animation: none !important; }
    .nav-menu { transition: none; }
    .nav-link, .menu-footer { opacity: 1; transform: none; }
}

/* PRINT */
@media print {
    .animated-bg, .loader-container, .back-to-top, .floating-cards, .hero-wave, .tech-marquee, .carousel-dots, .hero-deco, .hero-side-text, .nav-menu { display: none !important; }
    body { background: white; color: black; }
}