/* ============================================================
   Omari — gaya tambahan (tanpa build). Warna dominan tosca #00ACAE.
   File ini dimuat langsung oleh layout, tidak perlu `npm run build`.
   Palet: tosca #00ACAE · oranye #F16136 · krem #FEF0E1 · putih #FFFFFF
   ============================================================ */

:root {
    --o-teal: #00acae;
    --o-teal-600: #008f91;
    --o-teal-700: #007173;
    --o-teal-50: #e8f8f8;
    --o-orange: #f16136;
    --o-cream: #fef0e1;
    --o-shadow: 0 10px 30px -12px rgb(0 80 82 / .25);
}

html { -webkit-text-size-adjust: 100%; }
img, video, svg { max-width: 100%; }
body { overflow-x: hidden; }

/* ---------- Header & menu ---------- */
.site-header { background: var(--o-teal); color: #fff; border-bottom: 1px solid var(--o-teal-600); transition: box-shadow .25s ease; }
.site-header.is-scrolled { box-shadow: 0 8px 24px -12px rgb(0 60 62 / .45); }

.nav-link {
    display: block; white-space: nowrap; border-radius: 9999px;
    padding: .5rem .8rem; font-size: .875rem; line-height: 1.25rem; font-weight: 700;
    color: rgb(255 255 255 / .95); transition: background-color .2s, color .2s;
}
.nav-link:hover { background: rgb(255 255 255 / .18); color: #fff; }
.nav-link-active, .nav-link-active:hover { background: #fff; color: var(--o-teal-700); }
@media (min-width: 1536px) { .nav-link { padding: .5rem 1rem; } }

/* Tombol di header */
.btn-light { background: #fff; color: var(--o-teal-700); box-shadow: var(--o-shadow); }
.btn-light:hover { background: var(--o-cream); }
.btn-ghost-light { border: 2px solid rgb(255 255 255 / .75); color: #fff; background: transparent; }
.btn-ghost-light:hover { background: rgb(255 255 255 / .16); }

/* ---------- Banner Home ---------- */
.hero-bg { background: linear-gradient(135deg, #00acae 0%, #008f91 100%); color: #fff; }
.hero-h { height: 36rem; min-height: 26rem; }
@media (min-width: 768px) { .hero-h { height: 28rem; } }
@media (min-width: 1024px) { .hero-h { height: 32rem; } }
.hero-slide { transition: opacity .7s ease, transform .7s ease; }
.hero-bg h1, .hero-bg h2 { color: #fff; }
.hero-bg .hero-sub { color: #e8f8f8; }

/* ---------- Header halaman dalam ---------- */
.page-hero {
    position: relative; overflow: hidden; padding: 3rem 0; color: #fff;
    background: linear-gradient(135deg, #00acae 0%, #008f91 100%);
}
.page-hero::after {
    content: ""; position: absolute; right: -5rem; top: -6rem; width: 20rem; height: 20rem;
    border-radius: 9999px; background: rgb(255 255 255 / .1); pointer-events: none;
}
.page-hero h1, .page-hero h2 { color: #fff; }
.page-hero p { color: #e8f8f8; }
.page-hero .eyebrow { color: #fbe2c8; }

/* ---------- Footer ---------- */
.site-footer { background: var(--o-teal-700); color: #e8f8f8; }
.site-footer h2 { color: #fff; }
.site-footer p, .site-footer li, .site-footer span { color: #e8f8f8; }
.site-footer .foot-title { color: #fff; font-weight: 800; }
.site-footer a { color: #e8f8f8; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .foot-bottom { border-top: 1px solid rgb(255 255 255 / .15); color: #c8eeef; }

/* ---------- Deretan kartu (1–2 kartu tetap rapi di tengah) ---------- */
.card-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.card-row > * { flex: 0 0 calc(50% - .5rem); min-width: 0; }
@media (min-width: 1024px) { .card-row { gap: 1.5rem; } .card-row > * { flex-basis: calc(25% - 1.125rem); } }
.card-row-3 > * { flex-basis: 100%; }
@media (min-width: 768px) { .card-row { gap: 1.5rem; } .card-row-3 > * { flex-basis: calc(50% - .75rem); } }
@media (min-width: 1024px) { .card-row-3 > * { flex-basis: calc(33.333% - 1rem); } }

/* ---------- Hotline WA ---------- */
.hotline-ring { position: absolute; inset: 0; z-index: -1; border-radius: 9999px; background: rgb(37 211 102 / .5); animation: ping 2.4s cubic-bezier(0, 0, .2, 1) infinite; }

/* ---------- Motion ---------- */
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes blob { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(14px, 18px) scale(1.06); } }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ping { 75%, 100% { transform: scale(1.7); opacity: 0; } }

main { animation: page-in .2s ease both; }
.page-hero > * { animation: fade-up .45s cubic-bezier(.2, .7, .2, 1) both; }
.mascot-float { animation: floaty 4.5s ease-in-out infinite; }
.blob { animation: blob 12s ease-in-out infinite; }
.kb { animation: kb 9s ease-out both; }

.btn { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn svg { transition: transform .2s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn.is-loading { opacity: .8; pointer-events: none; }
.btn.is-loading::after {
    content: ""; width: 1rem; height: 1rem; border-radius: 9999px;
    border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite;
}

a.card, .card-row > .card { transition: transform .25s ease, box-shadow .25s ease; }
a.card:hover, .card-row > .card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -14px rgb(0 80 82 / .35); }
.card img { transition: transform .5s ease; }
.card:hover img { transform: scale(1.04); }

.motion .reveal {
    opacity: 0; transform: translateY(14px);
    transition: opacity .45s ease var(--d, 0ms), transform .45s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms);
}
.motion .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Mode HP: semua teks & blok rata tengah ---------- */
@media (max-width: 767px) {
    main, footer { text-align: center; }
    main [class*="max-w-"], footer [class*="max-w-"] { margin-left: auto; margin-right: auto; }
    main .flex:not(.flex-col), footer .flex:not(.flex-col) { justify-content: center; }
    main .flex.flex-col, footer .flex.flex-col { align-items: center; }
    main .flex-wrap, main .inline-flex { justify-content: center; }
    footer img, main .card > img { margin-left: auto; margin-right: auto; }
    footer ul { display: flex; flex-direction: column; align-items: center; }
    footer li.flex { justify-content: center; text-align: center; }
    .btn { justify-content: center; }

    /* Isian formulir & isi artikel tetap rata kiri supaya mudah dibaca */
    main form, main form .flex, main form .grid, .rich, .field, textarea, select { text-align: left; }
    main form .flex:not(.flex-col) { justify-content: flex-start; }
    main form button.btn, main form .btn { width: 100%; }
    .rich ul, .rich ol { text-align: left; }
}

[x-cloak]{display:none!important}

/* ============================================================
   Tampilan HP & ukuran font responsif (v32)
   Skala font mengikuti lebar layar: HP dibesarkan, desktop lebar sedikit lebih besar.
   ============================================================ */
html { font-size: 106.25%; }               /* 17px di HP kecil */
@media (min-width: 400px)  { html { font-size: 109.375%; } }  /* 17.5px */
@media (min-width: 768px)  { html { font-size: 100%; } }      /* 16px tablet/desktop */
@media (min-width: 1536px) { html { font-size: 106.25%; } }

/* Tombol: area sentuh minimal 48px di HP */
.btn { min-height: 3rem; }
.btn-order { min-height: 3rem; font-size: 1rem; padding: .7rem 1rem; }
.card-body { padding: .9rem; }
.card-title { font-size: 1.05rem; }
.card-desc { font-size: .9rem; line-height: 1.45; }
.card-cat { font-size: .72rem; }
@media (min-width: 640px) { .card-body { padding: 1.25rem; } .card-title { font-size: 1.2rem; } .card-desc { font-size: .95rem; } .card-cat { font-size: .78rem; } }
.card-body .btn-order { margin-top: auto; }
.card-body .card-desc { margin-bottom: .9rem; }

/* Filter kategori: satu baris yang bisa digeser di HP, besar & mudah ditekan */
.chip-row { display: flex; gap: .6rem; overflow-x: auto; padding: .25rem .1rem .6rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.chip {
    flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; border-radius: 9999px;
    padding: .65rem 1.15rem; min-height: 2.75rem; display: inline-flex; align-items: center;
    font-weight: 800; font-size: 1rem; background: #fff; color: var(--o-teal-700);
    box-shadow: inset 0 0 0 1px #94dfe0; transition: background-color .2s, color .2s;
}
.chip:hover { background: var(--o-teal-50); }
.chip.is-on, .chip.is-on:hover { background: var(--o-teal); color: #fff; box-shadow: none; }
@media (min-width: 768px) { .chip-row { flex-wrap: wrap; justify-content: center; overflow: visible; } }

/* Tombol Hotline WhatsApp: lebih besar & tidak mepet pojok */
.hotline { right: 1rem; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); }
.hotline-btn { padding: .8rem 1.25rem .8rem 1rem; font-size: 1.05rem; min-height: 3.5rem; }
.hotline-btn svg { width: 2rem; height: 2rem; }
@media (min-width: 640px) { .hotline { right: 1.5rem; bottom: 1.5rem; } }

/* Footer: satu kolom ke bawah di HP, rapi dan mudah ditekan */
.foot-grid { gap: 2rem; }
.site-footer { font-size: 1rem; }
.site-footer ul li a { display: inline-block; padding: .3rem 0; }
@media (max-width: 767px) {
    .site-footer ul { gap: .15rem; }
    .site-footer .foot-title, .site-footer h2 { font-size: 1.2rem; }
}

/* Judul halaman fluid */
.page-hero h1 { font-size: clamp(1.75rem, 6.2vw, 3rem); }
@media (max-width: 767px) { .page-hero { padding: 2.25rem 0; } }

/* Teks kecil jangan di bawah ~13px; filter/pill lain ikut besar & mudah ditekan */
.text-xs, .badge { font-size: .8rem; line-height: 1.25rem; }
main button[class*="rounded-full"], main a[class*="rounded-full"][class*="px-"] {
    min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center;
}
main a.inline-block, main .link-more { padding-block: .35rem; }
@media (max-width: 767px) {
    .site-header nav a, [data-header] a { min-height: 2.75rem; }
    main input, main select, main textarea { font-size: 1rem; }   /* cegah zoom otomatis iOS */
}

/* v33: teks tombol selalu rata tengah; tombol menu HP ditumpuk supaya "Pesan Sekarang" tidak patah */
.btn, .hotline-btn { text-align: center; justify-content: center; }
.hotline-btn { text-align: center; }
@media (max-width: 479px) {
    [aria-label="Menu seluler"] .grid.grid-cols-3 { grid-template-columns: 1fr; }
    [aria-label="Menu seluler"] .grid.grid-cols-3 .btn { width: 100%; white-space: nowrap; }
}