:root{--accent:#f97316;--accent-d:#ea580c;--text:#111827;--muted:#374151;--line:#d1d5db;--bg:#f3f4f6}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;line-height:1.6;color:var(--text);background:#fff}
a{text-decoration:none;color:inherit}img{max-width:100%;height:auto;display:block}
.container{width:min(1100px,92vw);margin:auto} .section{padding:48px 0}
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);background:rgba(255,255,255,.85);backdrop-filter:blur(8px)}
.nav .inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.menu{display:flex;gap:16px;align-items:center} .menu a{padding:8px 10px;border-radius:10px;font-weight:700}
.menu a:hover{background:var(--bg)}
.hero{background:radial-gradient(80% 60% at 50% 10%,#fff3e8 0%,#fff 50%,#fff 100%);padding:72px 0 40px}
.grid{display:grid;gap:20px}
.card{border:1px solid var(--line);background:#fff;border-radius:16px;padding:18px;box-shadow:0 8px 24px rgba(17,24,39,.06)}
.card img.cover{aspect-ratio: 4/3; width:100%; height:auto; object-fit:cover; border-radius:12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;border:1px solid var(--accent);background:var(--accent);color:#fff;font-weight:800;box-shadow:0 6px 20px rgba(249,115,22,.25)}
.btn.outline{background:#fff;color:var(--accent);border-color:var(--accent)}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;color:var(--accent);font-weight:800}
.title{font-size:clamp(1.6rem,2vw + 1rem,2.6rem);line-height:1.2;margin:8px 0 12px}
.lead{color:var(--muted);max-width:70ch}
.products{grid-template-columns:repeat(3,1fr)} @media(max-width:900px){.products{grid-template-columns:1fr 1fr}} @media(max-width:600px){.products{grid-template-columns:1fr}}
.badge{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;background:#fff6ed;color:var(--accent);font-weight:800;border:1px solid #ffedd5}
footer{padding:28px 0 60px;color:var(--muted)}
.wa{position:fixed;right:16px;bottom:16px;background:#25D366;color:#fff;border-radius:999px;padding:12px 16px;font-weight:900;box-shadow:0 12px 30px rgba(37,211,102,.35);z-index:99}
.thumb{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--bg);display:flex;align-items:center;justify-content:center}
.thumb img{width:100%;height:100%;object-fit:cover}
.gallery{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.gallery img{width:58px;height:58px;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:pointer}
.pricepill{display:inline-block;background:#fff7ed;color:var(--accent);border:1px solid #fed7aa;border-radius:999px;padding:4px 8px;font-weight:800;margin-right:6px}
.catgrid{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.catgrid{grid-template-columns:1fr 1fr}} @media(max-width:600px){.catgrid{grid-template-columns:1fr}}
.longform{color:var(--muted);max-width:75ch}
.longform p{margin:14px 0}
details>summary{cursor:pointer}
.brand img{width:28px;height:28px;border-radius:6px;object-fit:contain;background:#fff;border:1px solid var(--line)}
.contact-block{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contact-item{display:flex;gap:10px;align-items:flex-start;margin:8px 0}
.contact-ico{font-size:18px}

<script type="application/ld+json">
{"@context": "https://schema.org", "@type": "Organization", "name": "Jagarasa Jakarta", "url": "https://jagarasa.com/", "logo": "https://cateringjakarta.or.id/img/catering-jakarta.png", "telephone": "+62 811 3444 431"}
</script>
<script type="application/ld+json">
{"@context": "https://schema.org", "@type": "WebSite", "url": "https://jagarasa.com/", "name": "Jagarasa — Catering & Paket Wedding di Jakarta", "potentialAction": {"@type": "SearchAction", "target": "https://jagarasa.com/?s={search_term_string}", "query-input": "required name=search_term_string"}}
</script>

.features{grid-template-columns:repeat(3,1fr)}
.steps{grid-template-columns:repeat(3,1fr)}
.testimonials{grid-template-columns:repeat(3,1fr)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:14px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center;font-weight:800}
.icon{font-size:24px;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:#fff6ed;border:1px solid #ffedd5;margin-bottom:8px}
@media(max-width:900px){
  .features,.steps,.testimonials{grid-template-columns:1fr 1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .features,.steps,.testimonials{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
}


<script type="application/ld+json">
{"@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{"@type": "Question", "name": "Apakah bisa hemat tanpa mengurangi kualitas?", "acceptedAnswer": {"@type": "Answer", "text": "Bisa. Fokus pada menu unggulan + dekor fokus, dan atur rundown efisien. Kami susun paket sesuai prioritas Anda."}}, {"@type": "Question", "name": "Apakah melayani seluruh wilayah Jakarta?", "acceptedAnswer": {"@type": "Answer", "text": "Ya. Jakarta Selatan, Utara, Timur, Barat, dan Pusat dengan penyesuaian akses & jadwal loading."}}, {"@type": "Question", "name": "Apakah tersedia food tasting?", "acceptedAnswer": {"@type": "Answer", "text": "Tersedia dengan janji temu. Ini memudahkan penyesuaian bumbu sebelum final."}}]}
</script>


/* Homepage polish */
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:flex-start}
.card .media{aspect-ratio:4/3;overflow:hidden;border-radius:inherit}
.card .media .cover{width:100%;height:100%;object-fit:cover;display:block}
.align-start{align-items:flex-start}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}}


/* About section tweaks */
.about-grid > .card{margin-top:0;padding:0}

/* === Mobile Navigation (injected) === */
.hamburger{display:none;background:none;border:0;padding:8px;cursor:pointer;border-radius:10px}
.hamburger:focus{outline:2px solid var(--accent); outline-offset:2px}
.hamburger .bar{display:block;width:24px;height:2px;margin:5px 0;background:var(--text)}
.mobile-overlay{display:none}
.mobile-drawer{display:none}
@media (max-width: 768px){
  .menu{display:none !important}
  .hamburger{display:inline-flex}
  .mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s}
  .mobile-drawer{position:fixed;top:0;right:-280px;width:260px;height:100%;background:#fff;box-shadow:-10px 0 30px rgba(0,0,0,.1);padding:20px;display:flex;flex-direction:column;gap:12px;transition:right .25s;overflow:auto}
  .mobile-open .mobile-overlay{opacity:1;pointer-events:auto;display:block}
  .mobile-open .mobile-drawer{right:0;display:flex}
  .mobile-link{padding:12px 14px;border-radius:10px;font-weight:700;color:var(--text);text-decoration:none;border:1px solid var(--line)}
  .mobile-link:hover{background:var(--bg)}
}