/*
 * Rasa Aplikasi — rasa-aplikasi.css (27 Sep 2026)
 *
 * Lapisan TERAKHIR (dimuat sesudah neomorphism-theme.css). Tujuannya satu: di HP
 * dan TABLET layar sentuh, Archi terasa seperti aplikasi Android, bukan halaman web.
 * mobile-app.css sudah memoles HP posisi tegak; tablet (lebar > 768 px) selama ini
 * diperlakukan seperti komputer — tanpa efek tekan, dengan efek "hover" mouse yang
 * nyangkut sesudah disentuh. Berkas ini menyasar PERANGKAT SENTUH, berapa pun lebarnya.
 *
 * Aturan main berkas ini:
 *   - Animasi hanya memakai opacity dan properti `scale`/`translate` mandiri, TIDAK
 *     `transform`: banyak elemen sudah memakai transform untuk posisi (modal di tengah
 *     layar, tombol melayang). `scale`/`translate` bertumpuk di atasnya tanpa lompatan.
 *   - Layar (.view-content) hanya dipudarkan: transform pada induk akan membuat anak
 *     ber-`position: fixed` (tombol keranjang melayang) ikut bergeser selama animasi.
 */

/* ── 1. Gerak: pindah layar & munculnya jendela ─────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .view-content.active-view {
        animation: ra-pudar-masuk 180ms ease-out;
    }

    #modal-overlay,
    .wallet-modal-overlay {
        animation: ra-pudar-masuk 180ms ease-out;
    }

    /* Jendela di tengah layar (tablet/komputer) */
    #modal-container,
    .wallet-modal-overlay .wallet-modal {
        animation: ra-jendela-masuk 200ms cubic-bezier(0.2, 0, 0, 1);
    }
}

/* HP tegak: jendela berbentuk lembar dari bawah (mobile-app.css) → naik dari bawah */
@media (prefers-reduced-motion: no-preference) and (max-width: 768px) and (orientation: portrait) {
    #modal-container {
        animation: ra-lembar-naik 240ms cubic-bezier(0.2, 0, 0, 1);
    }
}

@keyframes ra-pudar-masuk {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ra-jendela-masuk {
    from { opacity: 0; scale: 0.96; }
    to { opacity: 1; scale: 1; }
}

@keyframes ra-lembar-naik {
    from { opacity: 0.4; translate: 0 48px; }
    to { opacity: 1; translate: 0 0; }
}

/* ── 2. Perangkat sentuh (HP & tablet, semua ukuran) ─────────────────────── */
@media (hover: none) and (pointer: coarse) {
    html,
    body {
        -webkit-tap-highlight-color: transparent;
        /* Tarik-ke-bawah tidak lagi memuat ulang aplikasi (HP tegak sudah begini
           sejak lama; kini tablet juga). Muat ulang manual: "Perbarui Aplikasi". */
        overscroll-behavior-y: none;
    }

    /* Tekan-lama pada tombol/kartu tidak memblok teks & tidak memunculkan menu
       "Unduh gambar" — dua tanda paling jelas bahwa ini halaman web. */
    button,
    .nav-item,
    .mobile-nav-item,
    .menu-card,
    .category-item,
    .type-btn,
    .pay-btn,
    .cart-item,
    .mobile-top-header,
    .mobile-bottom-nav,
    .sidebar-nav {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    img {
        -webkit-touch-callout: none;
        -webkit-user-drag: none;
    }

    /* Kolom isian tetap bisa diketik & diblok (Safari iOS: kolom di dalam induk
       ber-user-select:none bisa tidak menerima ketikan). */
    input,
    textarea,
    select,
    [contenteditable="true"] {
        -webkit-user-select: text;
        user-select: text;
    }

    /* Efek tekan (kelas is-pressing dipasang app.js) — dulu HANYA di HP tegak.
       `scale` mandiri: tidak mengganggu transform posisi yang sudah ada. */
    .menu-card.is-pressing,
    .category-item.is-pressing,
    .type-btn.is-pressing,
    .pay-btn.is-pressing,
    .cart-item.is-pressing,
    .nav-item.is-pressing,
    .mobile-nav-item.is-pressing,
    button.is-pressing {
        scale: 0.97;
    }

    /* Efek "hover" mouse nyangkut sesudah kartu menu disentuh (kartu terangkat
       & bersinar sampai layar disentuh di tempat lain) → matikan di layar sentuh. */
    .menu-card:hover,
    body.light-mode .menu-card:hover {
        transform: none;
        box-shadow: var(--neo-raised) !important;
    }

    /* Tombol "+" di kartu menu: dulu baru muncul saat mouse diarahkan, jadi di
       tablet hanya muncul sesudah kartu disentuh. Tampilkan selalu, seperti di HP. */
    .menu-add-btn,
    .menu-card:hover .menu-add-btn {
        opacity: 1;
        transform: none;
    }

    /* Efek kaca buram yang tersisa (tema neomorfisme sudah mematikan sisanya).
       Header & menu bawah menempel di atas konten yang digulir: kaca buram di sana
       dihitung ulang setiap bingkai guliran — mahal di tablet kelas menengah.
       Latarnya sudah (hampir) pekat, jadi tampilannya tidak berubah. */
    .mobile-top-header,
    .mobile-bottom-nav,
    .sidebar-overlay {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* #modal-overlay memasang blur lewat atribut style → wajib !important. */
    #modal-overlay {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* ── 2b. Menu samping diperkecil/diperbesar di tablet sentuh ────────────────
   style.css menganimasikan LEBAR .sidebar (0,3 dtk). Tiap bingkai animasi memaksa
   seluruh layar di sebelahnya — 57 kartu menu berbayangan neomorfisme + keranjang —
   dihitung ulang tata letaknya → patah-patah di tablet (keluhan owner 27 Sep; diukur
   CPU 4x: 3–4 bingkai > 33 ms, terlama rata 116–155 ms). Langsung berubah = satu kali
   hitung. Hanya ≥ 1025 px (satu-satunya tempat fitur perkecil ada): laci menu HP
   tegak memakai `transition: left` di mobile-app.css dan TIDAK boleh ikut mati. */
@media (hover: none) and (pointer: coarse) and (min-width: 1025px) {
    .sidebar {
        transition: none !important;
    }
}

/* ── 3. Keranjang: judul "Pembayaran" menimpa baris Total ────────────────────
   style.css (tablet, min-width 769 & max-height 1250) memadatkan keranjang dengan
   margin-top -6px !important → judul "Pembayaran" naik 2 px ke atas baris Total.
   Selektor ini lebih spesifik sehingga menang; daftar item hanya berkurang ±10 px. */
.cart-summary + .payment-method-selector {
    margin-top: 4px !important;
}