/* ============================================
   PriceCraft - Mobile Enhancement CSS
   Green-Black Branded Mobile-First UI/UX
   ============================================ */

/* ========== GLOBAL MOBILE BASE ========== */
@media (max-width: 768px) {
    html {
        scroll-behavior: smooth;
        -webkit-tap-highlight-color: transparent;
    }

    body {
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Safe area insets for notch phones */
    .lp-nav {
        padding-top: env(safe-area-inset-top);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    /* Better scrollbar on mobile */
    ::-webkit-scrollbar {
        width: 4px;
    }
    ::-webkit-scrollbar-thumb {
        background: var(--border-light);
        border-radius: 2px;
    }

    /* Focus states for accessibility */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    [tabindex]:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* Minimum touch target sizes */
    button,
    a,
    .pay-method-item,
    .lp-qna-q,
    .auth-field input,
    .main-inp {
        min-height: 44px;
    }

    /* Prettier selection color */
    ::selection {
        background: rgba(0, 230, 118, 0.25);
        color: var(--fg);
    }

    /* Background atmosphere scaled for mobile */
    .bg-atmo::before {
        width: 350px;
        height: 350px;
    }
    .bg-atmo::after {
        width: 300px;
        height: 300px;
    }

    /* Grid pattern smaller on mobile */
    .grid-pat {
        background-size: 50px 50px;
        opacity: 0.08;
    }
}

/* ========== LANDING PAGE - NAVIGATION ========== */
@media (max-width: 768px) {
    .lp-nav-inner {
        padding: 12px 16px;
    }

    .lp-nav-btn {
        padding: 10px 18px;
        font-size: 0.82rem;
        border-radius: 10px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 230, 118, 0.1);
    }

    .lp-nav-btn:active {
        transform: scale(0.96);
        opacity: 0.9;
    }

    .nav-install-btn {
        padding: 8px 14px;
        font-size: 0.72rem;
        min-height: 40px;
    }
    .nav-install-btn span {
        display: inline;
    }

    .lp-install-btn {
        padding: 8px 14px;
        font-size: 0.78rem;
        min-height: 40px;
    }

    .lp-nav-user-btn {
        padding: 6px 12px 6px 6px;
        min-height: 40px;
    }
}

/* ========== LANDING PAGE - HERO ========== */
@media (max-width: 768px) {
    .lp-hero {
        padding: 36px 16px 20px;
    }

    .lp-hero-badge {
        margin-bottom: 16px;
        padding: 5px 14px;
        font-size: 0.72rem;
        animation: pulse-border 2s ease-in-out infinite;
    }

    @keyframes pulse-border {
        0%, 100% { border-color: var(--border-light); }
        50% { border-color: rgba(0, 230, 118, 0.3); }
    }

    .lp-hero-title {
        font-size: clamp(1.6rem, 6vw, 2.2rem);
        line-height: 1.15;
        margin-bottom: 14px;
        letter-spacing: -0.02em;
    }

    .lp-hero-sub {
        font-size: 0.9rem;
        line-height: 1.65;
        margin-bottom: 24px;
    }

    .lp-hero-btns {
        flex-direction: column;
        gap: 10px;
    }

    .lp-cta-main {
        width: 100%;
        padding: 16px 24px;
        font-size: 0.95rem;
        border-radius: 14px;
        min-height: 52px;
        text-align: center;
        justify-content: center;
    }

    .lp-cta-sec {
        width: 100%;
        padding: 14px 20px;
        font-size: 0.88rem;
        border-radius: 14px;
        min-height: 48px;
        text-align: center;
    }

    /* Hero CTA buttons pressed state */
    .lp-cta-main:active,
    .lp-cta-sec:active {
        transform: scale(0.97);
        opacity: 0.9;
    }

    /* Inline styled "Coba Gratis" buttons */
    .lp-hero [style*="background:linear-gradient(135deg,#10B981"] {
        width: 100%;
        padding: 14px 24px !important;
        font-size: 0.88rem !important;
        border-radius: 12px !important;
        min-height: 48px;
        text-align: center;
    }
}

/* Extra small screens */
@media (max-width: 380px) {
    .lp-hero {
        padding: 28px 14px 16px;
    }
    .lp-hero-title {
        font-size: 1.45rem;
    }
    .lp-hero-sub {
        font-size: 0.84rem;
        margin-bottom: 20px;
    }
}

/* ========== LANDING PAGE - FEATURES GRID ========== */
@media (max-width: 768px) {
    .lp-features {
        padding: 28px 16px 40px;
    }

    .lp-features-inner {
        max-width: 100%;
    }

    .lp-section-title {
        font-size: 1.15rem;
        margin-bottom: 24px;
        line-height: 1.3;
    }

    .lp-features-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .lp-feat-card {
        padding: 18px 14px;
        border-radius: 14px;
        transition: all 0.3s ease;
    }

    .lp-feat-card:active {
        transform: scale(0.98);
        border-color: var(--border-light);
    }

    .lp-feat-ico {
        width: 36px;
        height: 36px;
        margin-bottom: 10px;
        border-radius: 10px;
    }

    .lp-feat-card h3 {
        font-size: 0.85rem;
        margin-bottom: 4px;
    }

    .lp-feat-card p {
        font-size: 0.76rem;
        line-height: 1.55;
    }
}

@media (max-width: 480px) {
    .lp-features-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .lp-feat-card {
        padding: 16px;
        display: flex;
        align-items: flex-start;
        gap: 14px;
    }

    .lp-feat-ico {
        width: 40px;
        height: 40px;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .lp-feat-card > h3,
    .lp-feat-card > p {
        padding-left: 0;
    }
}

/* ========== LANDING PAGE - EDU (Problems & Solutions) ========== */
@media (max-width: 768px) {
    .lp-edu {
        padding: 28px 16px 40px;
    }

    .lp-edu-inner {
        max-width: 100%;
    }

    .lp-edu-intro {
        font-size: 0.82rem;
        margin-bottom: 28px;
        line-height: 1.6;
    }

    .lp-problems-title,
    .lp-solution-title {
        font-size: 0.92rem;
        margin-bottom: 16px;
        gap: 8px;
    }

    .lp-problems-grid,
    .lp-solution-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .lp-problem-card {
        padding: 18px 16px;
        border-radius: 14px;
    }

    .lp-problem-num {
        font-size: 1.6rem;
        top: 10px;
        right: 12px;
    }

    .lp-problem-card h4 {
        font-size: 0.84rem;
        margin-bottom: 6px;
    }

    .lp-problem-card p {
        font-size: 0.78rem;
        line-height: 1.6;
    }

    .lp-sol-card {
        padding: 18px 16px;
        border-radius: 14px;
    }

    .lp-sol-icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        margin-bottom: 10px;
    }

    .lp-sol-card h4 {
        font-size: 0.84rem;
        margin-bottom: 6px;
    }

    .lp-sol-card p {
        font-size: 0.78rem;
        line-height: 1.6;
    }

    .lp-why-cta {
        padding: 20px 0 4px;
    }

    .lp-why-cta p {
        font-size: 0.88rem;
        margin-bottom: 14px;
    }

    .lp-why-cta button[style*="background:linear-gradient"] {
        padding: 14px 24px !important;
        font-size: 0.88rem !important;
        border-radius: 12px !important;
        width: 100%;
    }
}

/* ========== LANDING PAGE - PRICING ========== */
@media (max-width: 768px) {
    .lp-pricing {
        padding: 28px 16px 40px;
    }

    .lp-pricing-inner {
        max-width: 100%;
    }

    .lp-price-card {
        padding: 28px 22px;
        border-radius: 18px;
        box-shadow: 0 12px 40px rgba(0, 230, 118, 0.08);
    }

    .lp-price-badge {
        padding: 4px 12px;
        font-size: 0.66rem;
        margin-bottom: 12px;
    }

    .lp-price-old {
        font-size: 1rem;
    }

    .lp-price-now {
        font-size: 2.2rem;
    }

    .lp-price-sub {
        font-size: 0.82rem;
        margin-bottom: 20px;
    }

    .lp-price-list {
        gap: 8px;
        margin-bottom: 22px;
    }

    .lp-price-list li {
        font-size: 0.82rem;
        padding: 2px 0;
    }

    .lp-price-cta {
        padding: 16px;
        font-size: 0.95rem;
        border-radius: 14px;
        min-height: 52px;
    }

    .lp-price-note {
        font-size: 0.72rem;
    }

    .lp-pricing > .lp-pricing-inner > div[style*="text-align:center"] {
        margin-top: 16px;
    }

    .lp-pricing button[style*="background:linear-gradient(135deg,#10B981"] {
        padding: 14px 24px !important;
        font-size: 0.85rem !important;
        border-radius: 12px !important;
    }
}

@media (max-width: 380px) {
    .lp-price-card {
        padding: 22px 18px;
    }
    .lp-price-now {
        font-size: 1.9rem;
    }
}

/* ========== LANDING PAGE - TESTIMONIALS ========== */
@media (max-width: 768px) {
    .lp-testimonials {
        padding: 28px 16px 40px;
    }

    .lp-testimonials-inner {
        max-width: 100%;
    }

    .lp-testi-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .lp-testi-card {
        padding: 20px;
        border-radius: 14px;
        transition: transform 0.3s ease;
    }

    .lp-testi-card:active {
        transform: scale(0.98);
    }

    .lp-testi-stars {
        font-size: 0.9rem;
        margin-bottom: 10px;
    }

    .lp-testi-card > p {
        font-size: 0.8rem;
        line-height: 1.6;
        margin-bottom: 14px;
    }

    .lp-testi-author {
        gap: 10px;
    }

    .lp-testi-avatar {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        font-size: 0.8rem;
    }

    .lp-testi-name {
        font-size: 0.82rem;
    }

    .lp-testi-role {
        font-size: 0.68rem;
    }
}

/* ========== LANDING PAGE - FAQ ACCORDION ========== */
@media (max-width: 768px) {
    .lp-qna {
        padding: 28px 16px 40px;
    }

    .lp-qna-inner {
        max-width: 100%;
    }

    .lp-qna-list {
        gap: 8px;
    }

    .lp-qna-item {
        border-radius: 12px;
    }

    .lp-qna-q {
        padding: 16px 16px;
        font-size: 0.82rem;
        min-height: 44px;
    }

    .lp-qna-a p {
        padding: 0 16px 16px;
        font-size: 0.78rem;
        line-height: 1.65;
    }

    .lp-qna-arrow {
        width: 16px;
        height: 16px;
    }
}

/* ========== LANDING PAGE - FOOTER ========== */
@media (max-width: 768px) {
    .lp-footer {
        padding: 24px 16px;
    }

    .lp-footer-inner {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .lp-footer-logo {
        justify-content: center;
    }

    .lp-footer-copy {
        font-size: 0.7rem;
    }

    .lp-footer-links {
        justify-content: center;
        gap: 12px;
    }

    .lp-footer-links a {
        font-size: 0.68rem;
        padding: 4px 8px;
    }
}

/* ========== AUTH PAGES (Register & Login) ========== */
@media (max-width: 768px) {
    .auth-page {
        padding: 20px 16px 32px;
    }

    .auth-card {
        border-radius: 18px;
        padding: 28px 20px;
    }

    .auth-logo {
        margin-bottom: 20px;
    }

    .auth-title {
        font-size: 1.15rem;
        margin-bottom: 4px;
    }

    .auth-desc {
        font-size: 0.82rem;
        margin-bottom: 18px;
        line-height: 1.6;
    }

    .auth-err {
        padding: 10px 12px;
        font-size: 0.78rem;
        margin-bottom: 14px;
        border-radius: 10px;
    }

    .auth-field {
        margin-bottom: 14px;
    }

    .auth-field label {
        font-size: 0.72rem;
        margin-bottom: 6px;
        letter-spacing: 0.04em;
    }

    .auth-field input {
        padding: 14px 14px;
        font-size: 0.9rem;
        border-radius: 12px;
        min-height: 48px;
        transition: border-color 0.25s, box-shadow 0.25s;
    }

    .auth-field input:focus {
        box-shadow: 0 0 0 3px var(--accent-dim), 0 0 20px rgba(0, 230, 118, 0.08);
    }

    .auth-submit {
        padding: 16px;
        font-size: 0.95rem;
        border-radius: 14px;
        min-height: 52px;
        margin-top: 6px;
        box-shadow: 0 4px 16px rgba(0, 230, 118, 0.2);
    }

    .auth-submit:active {
        transform: scale(0.97);
    }

    .auth-switch {
        margin-top: 16px;
        font-size: 0.78rem;
    }

    .auth-switch a {
        padding: 4px 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

@media (max-width: 380px) {
    .auth-page {
        padding: 16px 12px 24px;
    }

    .auth-card {
        padding: 24px 16px;
        border-radius: 16px;
    }
}

/* ========== PAYMENT PAGE ========== */
@media (max-width: 768px) {
    .pay-page {
        padding: 24px 16px 40px;
    }

    .pay-card {
        border-radius: 18px;
        padding: 24px 20px;
    }

    .pay-header {
        margin-bottom: 2px;
    }

    .pay-user-info {
        gap: 10px;
    }

    .pay-avatar {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        font-size: 1rem;
    }

    .pay-user-name {
        font-size: 0.88rem;
    }

    .pay-user-email {
        font-size: 0.74rem;
    }

    .pay-divider {
        margin: 16px 0;
    }

    .pay-section-title {
        font-size: 0.76rem;
        margin-bottom: 12px;
    }

    .pay-order {
        gap: 8px;
        margin-bottom: 2px;
    }

    .pay-order-row {
        font-size: 0.82rem;
    }

    .pay-order-product {
        font-size: 0.78rem;
        max-width: 180px;
    }

    .pay-order-total {
        font-size: 0.95rem;
        padding-top: 10px;
    }

    /* Payment methods grid */
    .pay-methods {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 20px;
    }

    .pay-method-item {
        padding: 12px 6px;
        border-radius: 10px;
        min-height: 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        transition: all 0.25s ease;
    }

    .pay-method-item:active {
        transform: scale(0.96);
    }

    .pay-method-item.active {
        box-shadow: 0 0 0 1px var(--accent), 0 4px 16px rgba(0, 230, 118, 0.12);
    }

    .pay-method-logo {
        font-size: 0.66rem;
        margin-bottom: 2px;
    }

    .pay-method-item span:last-child {
        font-size: 0.62rem;
    }

    /* CTA button */
    .pay-cta {
        padding: 16px;
        font-size: 0.95rem;
        border-radius: 14px;
        min-height: 52px;
        box-shadow: 0 4px 16px rgba(0, 230, 118, 0.2);
    }

    .pay-cta:active {
        transform: scale(0.97);
    }

    .pay-demo-btn {
        padding: 14px;
        font-size: 0.8rem;
        border-radius: 14px;
        min-height: 48px;
    }

    /* Success state */
    .pay-success {
        padding: 36px 20px;
    }
}

@media (max-width: 480px) {
    .pay-methods {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .pay-method-item {
        padding: 10px 4px;
        min-height: 52px;
    }

    .pay-method-logo {
        font-size: 0.6rem;
    }

    .pay-method-item span:last-child {
        font-size: 0.58rem;
    }
}

/* ========== DASHBOARD - RESULT GRID ========== */
@media (max-width: 768px) {
    .res-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .res-card {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .res-card:hover {
        transform: none;
        box-shadow: none;
    }

    .rm-label {
        margin-bottom: 12px;
        gap: 8px;
    }

    .rm-ico {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: 0.78rem;
    }

    .rm-name {
        font-size: 0.85rem;
    }

    .rm-tag {
        font-size: 0.66rem;
        padding: 2px 7px;
    }

    .res-price {
        font-size: 1.1rem;
        margin-bottom: 12px;
    }

    .bd-list {
        gap: 5px;
    }

    .bd-item {
        font-size: 0.72rem;
        padding: 5px 8px;
        border-radius: 6px;
    }

    .bd-bar {
        margin-top: 10px;
    }

    .bar-leg {
        font-size: 0.6rem;
        gap: 8px;
        margin-top: 6px;
    }

    .badge-best {
        top: 10px;
        right: 10px;
        font-size: 0.6rem;
        padding: 3px 8px;
    }
}

@media (max-width: 380px) {
    .res-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .res-card {
        padding: 18px 16px;
    }

    .res-price {
        font-size: 1.25rem;
    }
}

/* ========== DASHBOARD - RECOMMENDATION ========== */
@media (max-width: 768px) {
    .reco-card {
        padding: 20px 16px;
        border-radius: 16px;
    }

    .reco-hdr {
        margin-bottom: 16px;
        gap: 10px;
    }

    .reco-ib {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .reco-tt {
        font-size: 0.95rem;
    }

    .reco-body {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .reco-st {
        padding: 14px;
        border-radius: 10px;
    }

    .reco-sl {
        font-size: 0.66rem;
        margin-bottom: 4px;
    }

    .reco-sv {
        font-size: 1.05rem;
    }

    .reco-ss {
        font-size: 0.7rem;
        margin-top: 2px;
    }

    /* Ranking rows */
    .rank-row {
        gap: 8px;
        padding: 7px 0;
    }

    .rank-n {
        width: 20px;
        height: 20px;
        font-size: 0.66rem;
    }

    .rank-nm {
        font-size: 0.76rem;
        min-width: 72px;
    }

    .rank-pr {
        font-size: 0.76rem;
        min-width: 80px;
    }

    .reco-det {
        margin-top: 14px;
        padding: 12px 14px;
        font-size: 0.76rem;
        border-radius: 10px;
    }
}

/* ========== DASHBOARD - CHART ========== */
@media (max-width: 768px) {
    .chart-c {
        padding: 20px 16px;
        border-radius: 16px;
    }

    .bar-chart {
        height: 160px;
        gap: 12px;
        padding-top: 16px;
    }

    .bar-fill {
        max-width: 50px;
    }

    .bar-amt {
        font-size: 0.65rem;
        top: -20px;
    }

    .bar-lbl {
        font-size: 0.68rem;
        margin-top: 8px;
    }
}

@media (max-width: 380px) {
    .chart-c {
        padding: 16px 12px;
    }

    .bar-chart {
        height: 140px;
        gap: 8px;
    }

    .bar-amt {
        font-size: 0.58rem;
    }
}

/* ========== DASHBOARD - HPP CALCULATOR ========== */
@media (max-width: 768px) {
    .hpp-section {
        margin-bottom: 20px;
    }

    .hpp-card {
        padding: 20px 16px;
        border-radius: 16px;
    }

    .hpp-card-hdr {
        gap: 10px;
        margin-bottom: 18px;
    }

    .hpp-card-hdr h2 {
        font-size: 0.95rem;
    }

    .hpp-card-hdr p {
        font-size: 0.76rem;
    }

    .hpp-card-ico {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .hpp-sub-hdr h3 {
        font-size: 0.8rem;
    }

    .hpp-sub {
        margin-bottom: 18px;
    }

    /* Bahan table rows - scrollable on small screens */
    .bahan-hdr-row,
    .bahan-row {
        gap: 4px;
        font-size: 0.78rem;
    }

    .bahan-hdr-row {
        font-size: 0.55rem;
        padding: 0 2px;
        overflow-x: auto;
    }

    .bahan-row {
        grid-template-columns: 1fr 1fr !important;
    }

    .bahan-row .bh-cell-nm {
        grid-column: 1 / -1;
    }

    .kem-row .bh-cell-nm {
        grid-column: 1 / -1;
    }

    .bh-inp {
        padding: 9px 8px;
        font-size: 0.78rem;
        border-radius: 7px;
    }

    .bh-sel {
        padding: 9px 6px;
        font-size: 0.78rem;
        border-radius: 7px;
    }

    .bh-tot {
        padding: 9px 8px;
        font-size: 0.78rem;
    }

    .bh-rm {
        width: 30px;
        height: 30px;
        min-height: 30px;
        font-size: 0.9rem;
        border-radius: 7px;
    }

    /* Input cards */
    .inp-card {
        padding: 20px 16px;
        border-radius: 16px;
    }

    .inp-grp {
        margin-bottom: 18px;
    }

    .inp-lbl {
        font-size: 0.74rem;
        margin-bottom: 8px;
    }

    .main-inp {
        padding: 14px 14px 14px 36px;
        font-size: 1.05rem;
        border-radius: 12px;
        min-height: 48px;
    }

    .main-inp.nopfx {
        padding-left: 14px;
    }

    .inp-pfx {
        left: 14px;
        font-size: 0.9rem;
    }

    /* Hitung button */
    .hitung-btn {
        padding: 16px;
        font-size: 0.95rem;
        border-radius: 14px;
        min-height: 52px;
        margin-top: 18px;
    }

    .hitung-btn:active {
        transform: scale(0.97);
    }
}

/* ========== DASHBOARD - FEE ROWS ========== */
@media (max-width: 640px) {
    .fee-row {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }

    .fee-ico {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }

    .fee-nm {
        font-size: 0.78rem;
        min-width: auto;
        flex-shrink: 1;
    }

    .fee-sl {
        width: 100%;
        order: 10;
        margin-top: 4px;
    }

    .fee-val {
        font-size: 0.82rem;
    }
}

/* ========== DASHBOARD - BEP SECTION ========== */
@media (max-width: 768px) {
    .bep-section {
        margin-top: 24px;
        margin-bottom: 20px;
    }

    /* ROAS tablet */
    .roas-section{margin-top:24px;margin-bottom:20px}
    .roas-card{padding:20px;border-radius:16px}
    .roas-card-hdr{gap:10px;margin-bottom:18px}
    .roas-card-hdr h2{font-size:1rem}
    .roas-card-hdr p{font-size:.78rem}

    .bep-grid {
        gap: 10px;
    }

    .bep-cta {
        padding: 16px;
        font-size: 0.95rem;
        min-height: 52px;
        border-radius: 14px;
    }

    .bep-cta:active {
        transform: scale(0.97);
    }

    .bep-results {
        margin-top: 20px;
        padding-top: 20px;
    }

    .bep-results-inner {
        padding: 16px;
        border-radius: 14px;
    }

    .bep-res-title {
        font-size: 0.9rem;
        margin-bottom: 14px;
    }

    .bep-res-note {
        padding: 12px 14px;
        font-size: 0.76rem;
        border-radius: 10px;
    }
}

@media (max-width: 480px) {
    .bep-price-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .bep-res-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* ROAS mobile */
    .roas-inputs{grid-template-columns:1fr;gap:12px}
    .roas-output-grid{grid-template-columns:1fr;gap:10px}
    .roas-output-val{font-size:1.3rem}
    .roas-results-inner{padding:16px}
    .roas-badge{font-size:.8rem;padding:14px}
}

/* ========== DASHBOARD - SIMULASI PROFIT ========== */
@media (max-width: 768px) {
    .sim-section {
        margin-top: 24px;
        margin-bottom: 20px;
    }

    .sim-results {
        margin-top: 20px;
        padding-top: 20px;
    }

    .sim-results-inner {
        padding: 16px;
        border-radius: 14px;
    }

    .sim-res-title {
        font-size: 0.9rem;
        margin-bottom: 12px;
    }

    .sim-bk-item {
        padding: 8px 10px;
        font-size: 0.76rem;
    }

    .sim-total-bar,
    .sim-profit-bar,
    .sim-margin-bar {
        padding: 12px 14px;
        border-radius: 10px;
    }

    .sim-total-val {
        font-size: 1.05rem;
    }

    .sim-profit-val {
        font-size: 1.1rem;
    }

    .sim-margin-val {
        font-size: 0.92rem;
    }

    .sim-visual-bar {
        margin-top: 12px;
    }

    .sim-bar-legend {
        font-size: 0.6rem;
    }

    .sim-cta {
        padding: 16px;
        font-size: 0.95rem;
        min-height: 52px;
        border-radius: 14px;
    }

    .sim-cta:active {
        transform: scale(0.97);
    }

    /* Info boxes */
    .info-box {
        padding: 10px 12px;
        font-size: 0.74rem;
        border-radius: 8px;
    }
}

/* ========== DASHBOARD - TOP NAV ========== */
@media (max-width: 768px) {
    .top-nav {
        padding: 0;
    }

    /* Formula box */
    .formula-b {
        padding: 16px 18px;
        font-size: 0.82rem;
        border-radius: 12px;
    }

    /* Status card */
    .status-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 16px;
    }

    .status-tt {
        font-size: 1.1rem;
        margin-bottom: 8px;
    }

    .status-desc {
        font-size: 0.8rem;
        max-width: 220px;
    }

    .status-step {
        font-size: 0.72rem;
        padding: 7px 10px;
    }

    .status-step-n {
        width: 20px;
        height: 20px;
        font-size: 0.64rem;
    }

    /* Footer text */
    .ft-t {
        font-size: 0.68rem;
        padding: 28px 16px 20px;
    }
}

/* ========== TOAST NOTIFICATIONS ========== */
@media (max-width: 768px) {
    .toast-c {
        top: auto;
        bottom: 24px;
        right: 12px;
        left: 12px;
        max-width: 100%;
    }

    .toast {
        width: 100%;
        font-size: 0.78rem;
        padding: 12px 14px;
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    }
}

/* ========== TIPS MODAL ========== */
@media (max-width: 768px) {
    .tips-box {
        padding: 24px 20px;
        border-radius: 16px;
        margin: 12px;
        max-height: 80vh;
    }

    .tips-item {
        padding: 12px 14px;
        border-radius: 10px;
        gap: 12px;
    }

    .tips-num {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .tips-content h4 {
        font-size: 0.82rem;
    }

    .tips-content p {
        font-size: 0.74rem;
    }
}

/* ========== TRIAL EXPIRED OVERLAY ========== */
@media (max-width: 768px) {
    #trialExpiredOverlay > div {
        padding: 32px 24px;
        border-radius: 18px;
        margin: 16px;
        max-width: 100%;
    }

    #trialExpiredOverlay > div > div:first-child {
        width: 56px;
        height: 56px;
        margin-bottom: 20px;
    }

    #trialExpiredOverlay > div > div:first-child svg {
        width: 28px;
        height: 28px;
    }

    #trialExpiredOverlay > div h2 {
        font-size: 1.2rem;
    }

    #trialExpiredOverlay > div p {
        font-size: 0.82rem;
    }

    #trialExpiredOverlay button[id="trialUpgradeBtn"] {
        padding: 14px !important;
        font-size: 0.9rem !important;
        border-radius: 12px !important;
    }
}

/* ========== GLASSMORPHISM & PRETTY ENHANCEMENTS ========== */
@media (max-width: 768px) {
    /* Glassmorphism on nav */
    .lp-nav {
        backdrop-filter: blur(16px) saturate(180%);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
    }

    /* Subtle glow effects on cards */
    .lp-feat-card::after,
    .lp-testi-card::after,
    .lp-problem-card::after,
    .lp-sol-card::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
        background: radial-gradient(circle at 50% 0%, rgba(0, 230, 118, 0.04), transparent 60%);
    }

    .lp-feat-card:active::after,
    .lp-testi-card:active::after {
        opacity: 1;
    }

    /* Pricing card glow */
    .lp-price-card {
        box-shadow:
            0 0 0 1px rgba(0, 230, 118, 0.1),
            0 8px 32px rgba(0, 230, 118, 0.06),
            0 0 60px rgba(0, 230, 118, 0.03);
    }

    /* Auth card subtle glass effect */
    .auth-card {
        box-shadow:
            0 0 0 1px rgba(0, 230, 118, 0.06),
            0 8px 32px rgba(0, 0, 0, 0.3);
    }

    /* Pay card subtle glass effect */
    .pay-card {
        box-shadow:
            0 0 0 1px rgba(0, 230, 118, 0.06),
            0 8px 32px rgba(0, 0, 0, 0.3);
    }

    /* Result cards subtle glow on touch */
    .res-card:active {
        transform: scale(0.97);
        transition: transform 0.15s ease;
    }
}

/* ========== LANDSCAPE OPTIMIZATIONS ========== */
@media (max-height: 500px) and (orientation: landscape) {
    .lp-hero {
        padding: 20px 16px 12px;
        min-height: auto;
    }

    .lp-hero-title {
        font-size: 1.4rem;
        margin-bottom: 8px;
    }

    .lp-hero-sub {
        font-size: 0.82rem;
        margin-bottom: 14px;
    }

    .lp-hero-btns {
        flex-direction: row;
        gap: 8px;
    }

    .lp-cta-main,
    .lp-cta-sec {
        width: auto;
        flex: 1;
        padding: 12px 16px;
        font-size: 0.82rem;
    }
}

/* ========== PRETTY ANIMATIONS FOR MOBILE ========== */
@media (max-width: 768px) {
    /* Smooth fade in for sections */
    .lp-hero,
    .lp-features,
    .lp-edu,
    .lp-pricing,
    .lp-testimonials,
    .lp-qna,
    .lp-footer {
        animation: mobileFadeIn 0.5s ease both;
    }

    .lp-features { animation-delay: 0.05s; }
    .lp-edu { animation-delay: 0.1s; }
    .lp-pricing { animation-delay: 0.15s; }
    .lp-testimonials { animation-delay: 0.2s; }
    .lp-qna { animation-delay: 0.25s; }
    .lp-footer { animation-delay: 0.3s; }

    @keyframes mobileFadeIn {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Card press effect */
    .lp-feat-card,
    .lp-testi-card,
    .lp-problem-card,
    .lp-sol-card {
        -webkit-user-select: none;
        user-select: none;
    }

    /* Shimmer effect on pricing card */
    .lp-price-card::after {
        animation: shim 3s ease-in-out infinite;
    }

    /* Better button transitions */
    .lp-cta-main,
    .lp-cta-sec,
    .lp-price-cta,
    .auth-submit,
    .pay-cta,
    .hitung-btn,
    .bep-cta,
    .sim-cta {
        transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    /* Badge pulse animation */
    .badge-best.show {
        animation: badgePulse 2s ease-in-out infinite;
    }

    @keyframes badgePulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.2); }
        50% { box-shadow: 0 0 0 4px rgba(0, 230, 118, 0); }
    }
}

/* ========== PWA STANDALONE MODE ========== */
@media (display-mode: standalone) {
    .lp-nav {
        padding-top: env(safe-area-inset-top);
    }

    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Extra bottom padding for home indicator */
    .lp-footer {
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }

    .pay-page {
        padding-bottom: calc(40px + env(safe-area-inset-bottom));
    }

    .auth-page {
        padding-bottom: calc(32px + env(safe-area-inset-bottom));
    }
}

/* ========== DARK MODE SAFETY (for theme switching) ========== */
[data-theme="light"] .lp-feat-card,
[data-theme="light"] .lp-testi-card,
[data-theme="light"] .lp-problem-card,
[data-theme="light"] .lp-sol-card {
    -webkit-user-select: none;
    user-select: none;
}

/* ========== ACCESSIBILITY: REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
    .lp-feat-card,
    .lp-testi-card,
    .lp-problem-card,
    .lp-sol-card,
    .res-card,
    .lp-price-card,
    .lp-hero-badge {
        animation: none !important;
        transition: none !important;
    }

    .badge-best.show {
        animation: none !important;
    }

    .bg-atmo::before,
    .bg-atmo::after {
        animation: none !important;
    }

    .logo-dot {
        animation: none !important;
        box-shadow: 0 0 12px var(--accent);
    }
}

/* ========== PRINT OPTIMIZATION ========== */
@media print {
    .lp-nav,
    .bg-atmo,
    .grid-pat,
    .toast-c,
    #trialExpiredOverlay {
        display: none !important;
    }

    body {
        background: white;
        color: #1a1a1a;
    }
}

@media (max-width: 768px) {
    .sim-fee-hint {
        font-size: .7rem;
        padding: 6px 8px;
    }
}

/* ========== SIDEBAR MOBILE OVERRIDES ========== */
@media (max-width: 900px) {
    /* Hide sidebar toggle on non-dashboard views */
    #landingView .sidebar-toggle,
    #authView .sidebar-toggle {
        display: none !important;
    }

    /* Ensure sidebar is fully interactive on touch */
    .dash-sidebar {
        -webkit-overflow-scrolling: touch;
        -webkit-tap-highlight-color: transparent;
    }

    .sidebar-link {
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }

    .sidebar-link:active {
        background: rgba(0, 230, 118, 0.08);
    }

    /* Sidebar toggle button better touch target */
    .sidebar-toggle {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ========== 3-TIER PRICING MOBILE ========== */
@media (max-width: 768px) {
    .lp-pricing-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 400px;
        margin: 0 auto;
    }
    .lp-price-card-starter {
        order: -1;
    }
    .lp-price-card-pro {
        transform: none;
    }
    .lp-price-card-pro:hover {
        transform: translateY(-2px);
    }
    .lp-price-card {
        padding: 24px 20px;
    }
    .lp-price-now {
        font-size: 2.2rem;
    }
    .lp-pricing-urgency {
        flex-wrap: wrap;
        font-size: .74rem;
    }
    .pay-plan-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }
    .pay-plan-option {
        padding: 12px 6px;
    }
    .pay-plan-price {
        font-size: .95rem;
    }
}

/* ========== HPP TEMPLATE BAR MOBILE ========== */
@media (max-width: 768px) {
    .hpp-template-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .hpp-template-left {
        min-width: unset;
        font-size: .72rem;
    }
    .hpp-template-right {
        flex-wrap: wrap;
        gap: 6px;
    }
    .hpp-template-select {
        flex: 1 1 100%;
        min-width: unset;
        max-width: unset;
    }
    .hpp-template-btn,
    .hpp-clear-btn {
        flex: 1;
        justify-content: center;
    }
}

/* ===== Dashboard Penjualan Mobile ===== */
@media(max-width:768px){
    .dash-penjualan-card{padding:18px 14px;border-radius:16px}
    .dash-penjualan-hdr{gap:10px;margin-bottom:16px}
    .dash-penjualan-hdr h2{font-size:.95rem}
    .dash-penjualan-hdr p{font-size:.74rem}
    .dp-upload-drop{padding:28px 16px}
    .dp-upload-drop svg{width:32px;height:32px}
    .dp-upload-drop p{font-size:.78rem!important}
    .dp-metrics{grid-template-columns:repeat(2,1fr);gap:8px}
    .dp-metric-card{padding:12px 10px}
    .dp-metric-value{font-size:1rem}
    .dp-metric-label{font-size:.66rem}
    .dp-chart-wrap{padding:14px 12px}
    .dp-chart-canvas-wrap{height:200px;max-height:200px}
    .dp-hpp-match-row{flex-direction:column;align-items:flex-start;gap:6px}
    .dp-hpp-match-prod{min-width:0;overflow:visible;white-space:normal}
    .dp-hpp-match-input{width:100%}
    .dp-product-table-hdr{font-size:.8rem}
    .dp-table{font-size:.72rem}
    .dp-table th,.dp-table td{padding:8px 8px}
    .dp-process-btn{padding:11px 16px;font-size:.8rem}
    .dp-disclaimer{font-size:.68rem;padding:10px 12px}
    .dash-penjualan-section .kw-lock-overlay{border-radius:16px}
    .dash-penjualan-section .kw-lock-icon{width:60px;height:60px}
    .dash-penjualan-section .kw-lock-icon svg{width:32px;height:32px}
    .dash-penjualan-section .kw-lock-content h3{font-size:.95rem}
    .dash-penjualan-section .kw-lock-content p{font-size:.78rem;margin-bottom:16px}
    .dash-penjualan-section .kw-lock-upgrade-btn{padding:11px 20px;font-size:.82rem}
}
@media(max-width:420px){
    .dp-metrics{grid-template-columns:1fr 1fr;gap:6px}
    .dp-metric-value{font-size:.88rem}
    .dp-hpp-match-area{padding:14px 12px}
}