{"id":29,"date":"2026-10-20T13:14:20","date_gmt":"2026-10-20T13:14:20","guid":{"rendered":"https:\/\/pawonsemarang.web.id\/?page_id=29"},"modified":"2026-10-20T13:15:56","modified_gmt":"2026-10-20T13:15:56","slug":"home","status":"publish","type":"page","link":"https:\/\/pawonsemarang.web.id\/","title":{"rendered":"Home"},"content":{"rendered":"\n\n\n\n\n<div id=\"pawon\">\n<style>\n#pawon{--g:#174c3b;--g2:#24664c;--gold:#e9b85b;--cream:#fff8eb;--ink:#29382f;font-family:Arial,sans-serif;color:var(--ink);background:#fffdf8;line-height:1.6;overflow:hidden}\n#pawon *{box-sizing:border-box}\n#pawon button,#pawon input,#pawon select{font:inherit}\n#pawon button{cursor:pointer}\n#pawon img{display:block;width:100%;object-fit:cover}\n#pawon a{text-decoration:none;color:inherit}\n#pawon .wrap{width:min(1160px,92%);margin:auto}\n#pawon .topline{background:var(--g);color:white;text-align:center;padding:8px;font-size:12px;letter-spacing:1px}\n#pawon .nav{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 0}\n#pawon .brand{display:flex;align-items:center;gap:10px;color:var(--g);font-size:20px;font-weight:900;line-height:1.2}\n#pawon .brand small{display:block;font-size:9px;letter-spacing:1.7px;color:#a57931;margin-top:5px}\n#pawon .brand-icon{width:44px;height:44px;border-radius:50%;background:var(--g);color:var(--gold);display:grid;place-items:center;font-size:25px;flex-shrink:0}\n#pawon .navlinks{display:flex;gap:22px;font-size:13px;font-weight:bold}\n#pawon .hero{background:var(--cream)}\n#pawon .hero-inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:42px;padding:52px 0 65px}\n#pawon .eyebrow{font-size:12px;letter-spacing:2px;font-weight:bold;color:#a57931;text-transform:uppercase}\n#pawon h1{font-family:Georgia,serif;color:var(--g);font-size:clamp(40px,5.5vw,67px);line-height:1.08;margin:15px 0}\n#pawon h1 em{color:#b77d28;font-weight:normal}\n#pawon .hero p{color:#626b61;font-size:15px;max-width:480px}\n#pawon .primary{display:inline-block;background:var(--g);color:white;border:0;padding:13px 22px;border-radius:28px;font-weight:bold;margin-top:12px}\n#pawon .hero-note{font-size:12px;color:#6e756d;margin-top:14px}\n#pawon .hero-photo{height:390px;border:7px solid white;border-radius:48% 48% 18px 18px;overflow:hidden;box-shadow:0 18px 45px #243c2a22;position:relative}\n#pawon .hero-photo img{height:100%}\n#pawon .stamp{position:absolute;right:-8px;bottom:22px;background:var(--gold);color:var(--g);border:5px solid var(--cream);border-radius:50%;width:100px;height:100px;display:grid;place-content:center;text-align:center;font-weight:bold;font-size:12px;line-height:1.35;transform:rotate(8deg)}\n#pawon .heritage{background:var(--g);color:white;padding:17px 0}\n#pawon .heritage-inner{display:flex;justify-content:space-around;gap:12px;flex-wrap:wrap}\n#pawon .heritage-item{display:flex;align-items:center;gap:9px;font-size:13px}\n#pawon .heritage-item span:first-child{font-size:25px}\n#pawon .menu-section{padding:65px 0}\n#pawon .section-head{text-align:center;margin-bottom:25px}\n#pawon .section-head h2{font-family:Georgia,serif;color:var(--g);font-size:clamp(29px,4vw,42px);margin:8px 0}\n#pawon .section-head p{font-size:14px;color:#73796f;max-width:570px;margin:auto}\n#pawon .filters{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:25px 0 30px}\n#pawon .filter{border:1px solid #d8ded6;background:white;color:var(--g);border-radius:25px;padding:9px 15px;font-size:13px}\n#pawon .filter.active{background:var(--g);color:white}\n#pawon .menu-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}\n#pawon .food-card{border:1px solid #eee9df;border-radius:16px;overflow:hidden;background:white;display:flex;flex-direction:column;min-width:0}\n#pawon .food-image{height:175px;position:relative;background:#f3ead9}\n#pawon .food-image img{height:100%}\n#pawon .food-label{position:absolute;top:10px;left:9px;background:var(--cream);color:#78521e;padding:4px 8px;border-radius:20px;font-size:10px;font-weight:bold}\n#pawon .food-content{padding:14px;display:flex;flex-direction:column;flex:1}\n#pawon .food-content h3{font-size:15px;color:var(--g);margin:0 0 5px;line-height:1.4}\n#pawon .food-content p{font-size:12px;color:#777f76;margin:0 0 12px;flex:1}\n#pawon .food-bottom{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:auto}\n#pawon .price{font-size:14px;font-weight:900;color:#9b6820}\n#pawon .add-btn{border:0;background:var(--g);color:white;border-radius:50%;width:37px;height:37px;font-size:22px;flex-shrink:0}\n#pawon .add-btn:hover{background:var(--gold);color:var(--g)}\n#pawon .story{background:var(--cream);padding:60px 0}\n#pawon .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center}\n#pawon .story-art{border-radius:18px;overflow:hidden}\n#pawon .story-art img{height:310px}\n#pawon .story h2{font:bold 35px\/1.15 Georgia,serif;color:var(--g);margin:10px 0}\n#pawon .story p{font-size:14px;color:#626d63}\n#pawon .landmarks{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}\n#pawon .landmark{background:white;border:1px solid #eee2ce;border-radius:10px;padding:9px 11px;font-size:12px;font-weight:bold;color:var(--g)}\n#pawon .closing{background:var(--g);color:white;text-align:center;padding:45px 15px}\n#pawon .closing h2{font:bold 33px Georgia,serif;margin:0 0 8px}\n#pawon .closing p{font-size:14px;color:#e2e9df}\n#pawon .closing .primary{background:var(--gold);color:var(--g)}\n#pawon footer{background:#103729;color:#d8e1d9;padding:28px 0}\n#pawon .footer-inner{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}\n#pawon footer p{font-size:12px;color:#bdcfc1;margin:8px 0 0}\n#pawon .footer-small{font-size:11px;color:#a9bdb0}\n\n\/* KERANJANG MENGAMBANG *\/\n#pawon .floating-cart{position:fixed;right:22px;bottom:24px;z-index:99990;width:62px;height:62px;border:0;border-radius:50%;background:var(--g);color:white;box-shadow:0 5px 20px #0004;display:flex;align-items:center;justify-content:center;font-size:28px;cursor:pointer;transition:transform .2s}\n#pawon .floating-cart:hover{background:var(--g2);transform:translateY(-3px)}\n#pawon .floating-cart-count{position:absolute;top:-4px;right:-4px;min-width:24px;height:24px;padding:0 5px;border-radius:20px;background:var(--gold);color:var(--g);border:2px solid white;font-size:12px;font-weight:bold;display:flex;align-items:center;justify-content:center}\n#pawon .floating-cart.bump{animation:pawonBump .3s}\n@keyframes pawonBump{50%{transform:scale(1.14)}}\n\n\/* PANEL KERANJANG: HANYA MUNCUL SAAT IKON DIKLIK *\/\n#pawon .cart-overlay{position:fixed;inset:0;background:#0008;z-index:99998;display:none}\n#pawon .cart-overlay.open{display:block}\n#pawon .cart-panel{position:fixed;right:0;top:0;height:100%;height:100dvh;width:min(440px,100%);background:#fffdf8;z-index:99999;transform:translateX(105%);transition:transform .25s;display:flex;flex-direction:column;box-shadow:-10px 0 35px #0002}\n#pawon .cart-panel.open{transform:translateX(0)}\n#pawon .cart-head{padding:17px 20px;border-bottom:1px solid #eee3d3;display:flex;justify-content:space-between;align-items:center}\n#pawon .cart-head h3{margin:0;color:var(--g);font:bold 24px Georgia,serif}\n#pawon .close-cart{border:0;background:#eee8dc;border-radius:50%;width:36px;height:36px;font-size:23px}\n#pawon .cart-items{padding:15px 20px;overflow:auto;flex:1;min-height:70px}\n#pawon .empty-cart{text-align:center;padding:30px 8px;color:#72796e}\n#pawon .empty-cart span{font-size:42px}\n#pawon .cart-item{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px 0;border-bottom:1px solid #eee9df}\n#pawon .cart-item strong{display:block;color:var(--g);font-size:13px}\n#pawon .cart-item small{color:#99702d;font-weight:bold;font-size:12px}\n#pawon .qty{display:flex;align-items:center;gap:10px;margin-top:7px}\n#pawon .qty button{border:1px solid #d9dfd5;background:white;color:var(--g);width:28px;height:28px;border-radius:50%}\n#pawon .remove{border:0;background:transparent;color:#9c5a4b;font-size:12px;margin-top:5px}\n#pawon .cart-foot{padding:14px 20px;border-top:1px solid #e7dfd2;background:white;max-height:57%;overflow:auto}\n#pawon .total-line{display:flex;justify-content:space-between;gap:10px;font-weight:bold;color:var(--g);margin-bottom:9px}\n#pawon .checkout-label{display:block;font-size:12px;font-weight:bold;color:#425348;margin:10px 0 4px}\n#pawon .checkout-input{width:100%;padding:10px 11px;border:1px solid #d9ded4;border-radius:9px;background:#fffdf8;color:#29382f;outline-color:var(--g);font-size:14px}\n#pawon .checkout-btn{width:100%;background:#16834a;color:white;border:0;border-radius:11px;padding:13px;font-weight:bold;margin-top:13px}\n#pawon .checkout-btn:disabled{opacity:.45;cursor:not-allowed}\n#pawon .checkout-hint{font-size:11px;color:#747c73;margin-top:7px}\n#pawon .toast{position:fixed;bottom:98px;right:18px;background:var(--g);color:white;padding:11px 16px;border-radius:25px;z-index:100001;font-size:12px;opacity:0;pointer-events:none;transition:.2s;max-width:85%;text-align:center}\n#pawon .toast.show{opacity:1}\n@media(max-width:900px){#pawon .menu-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#pawon .hero-inner{gap:24px}}\n@media(max-width:620px){\n#pawon .nav{padding:12px 0}\n#pawon .brand{font-size:16px;gap:7px}\n#pawon .brand-icon{width:36px;height:36px;font-size:21px}\n#pawon .brand small{font-size:8px;letter-spacing:1px}\n#pawon .navlinks{display:none}\n#pawon .hero-inner{grid-template-columns:1fr;padding:35px 0 45px;gap:24px}\n#pawon h1{font-size:43px}\n#pawon .hero p{font-size:14px}\n#pawon .hero-photo{height:280px;max-width:390px;margin:auto}\n#pawon .stamp{width:85px;height:85px;font-size:10px;right:0}\n#pawon .heritage-inner{justify-content:flex-start}\n#pawon .heritage-item{width:46%;font-size:11px}\n#pawon .menu-section{padding:45px 0}\n#pawon .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}\n#pawon .food-image{height:130px}\n#pawon .food-content{padding:10px}\n#pawon .food-content h3{font-size:13px}\n#pawon .food-content p{font-size:11px}\n#pawon .price{font-size:12px}\n#pawon .add-btn{width:32px;height:32px}\n#pawon .story-grid{grid-template-columns:1fr;gap:22px}\n#pawon .story-art img{height:220px}\n#pawon .story h2{font-size:29px}\n#pawon .closing h2{font-size:27px}\n#pawon .cart-foot{max-height:60%;padding:12px 16px}\n#pawon .cart-items{padding:12px 16px}\n#pawon .floating-cart{width:56px;height:56px;right:15px;bottom:18px}\n}\n<\/style>\n\n<div class=\"topline\">&#x1f343; RASA KHAS SEMARANG \u00b7 DIBUAT DENGAN HATI<\/div>\n\n<header class=\"wrap nav\">\n  <a class=\"brand\" href=\"#pawon-home\">\n    <span class=\"brand-icon\">&#x1f372;<\/span>\n    <span>PAWON SEMARANG<small>WARISAN RASA NUSANTARA<\/small><\/span>\n  <\/a>\n  <nav class=\"navlinks\">\n    <a href=\"#pawon-home\">Beranda<\/a>\n    <a href=\"#pawon-menu\">Daftar Menu<\/a>\n    <a href=\"#pawon-cerita\">Cerita Kami<\/a>\n  <\/nav>\n<\/header>\n\n<section class=\"hero\" id=\"pawon-home\">\n  <div class=\"wrap hero-inner\">\n    <div>\n      <div class=\"eyebrow\">Sugeng Rawuh \u00b7 Selamat Datang<\/div>\n      <h1>Hangatnya Rasa,<br><em>Kenangan Semarang.<\/em><\/h1>\n      <p>Dari gurihnya nasi ayam sampai renyahnya lumpia, temukan cita rasa khas Semarang yang bikin rindu. Pilih hidangan favoritmu dan pesan dengan mudah!<\/p>\n      <a href=\"#pawon-menu\" class=\"primary\">Jelajahi Menu &#x2197;<\/a>\n      <div class=\"hero-note\">\u2726 Kuliner khas Semarang \u00b7 Pesan praktis \u00b7 Rasa penuh cerita<\/div>\n    <\/div>\n    <div style=\"position:relative\">\n      <div class=\"hero-photo\">\n        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1547592180-85f173990554?auto=format&#038;fit=crop&#038;w=1000&#038;q=85\" alt=\"Hidangan kuliner tradisional\">\n      <\/div>\n      <div class=\"stamp\">RASA ASLI<br>SEMARANG<br>&#x2665;<\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<section class=\"heritage\">\n  <div class=\"wrap heritage-inner\">\n    <div class=\"heritage-item\"><span>&#x1f3db;&#xfe0f;<\/span><span>Pesona Kota Lama<\/span><\/div>\n    <div class=\"heritage-item\"><span>&#x1f5fc;<\/span><span>Ikonik Lawang Sewu<\/span><\/div>\n    <div class=\"heritage-item\"><span>&#x1f343;<\/span><span>Warisan Kuliner<\/span><\/div>\n    <div class=\"heritage-item\"><span>&#x2764;&#xfe0f;<\/span><span>Rasa Penuh Cerita<\/span><\/div>\n  <\/div>\n<\/section>\n\n<section class=\"menu-section\" id=\"pawon-menu\">\n  <div class=\"wrap\">\n    <div class=\"section-head\">\n      <div class=\"eyebrow\">Dari Dapur Kami<\/div>\n      <h2>Jelajahi Menu Favorit<\/h2>\n      <p>Nikmati pilihan makanan dan minuman khas. Tekan tombol tambah untuk memasukkan menu ke keranjang.<\/p>\n    <\/div>\n    <div class=\"filters\">\n      <button class=\"filter active\" data-filter=\"Semua\" type=\"button\">Semua Menu<\/button>\n      <button class=\"filter\" data-filter=\"Makanan\" type=\"button\">&#x1f35b; Makanan<\/button>\n      <button class=\"filter\" data-filter=\"Camilan\" type=\"button\">&#x1f95f; Camilan<\/button>\n      <button class=\"filter\" data-filter=\"Minuman\" type=\"button\">&#x1f964; Minuman<\/button>\n    <\/div>\n    <div class=\"menu-grid\" id=\"pawon-grid\"><\/div>\n  <\/div>\n<\/section>\n\n<section class=\"story\" id=\"pawon-cerita\">\n  <div class=\"wrap story-grid\">\n    <div class=\"story-art\">\n      <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1518005020951-eccb494ad742?auto=format&#038;fit=crop&#038;w=1000&#038;q=85\" alt=\"Arsitektur bangunan klasik\" loading=\"lazy\">\n    <\/div>\n    <div>\n      <div class=\"eyebrow\">Semarang Punya Cerita<\/div>\n      <h2>Bukan Sekadar Makan, Ini Tentang Rasa dan Cerita.<\/h2>\n      <p>Semarang menyimpan cerita di setiap sudutnya. Dari kemegahan Lawang Sewu, pesona bangunan bersejarah Kota Lama, hingga kuliner yang diwariskan lintas generasi. Pawon Semarang mengajakmu menikmati kehangatan rasa khas kota ini.<\/p>\n      <div class=\"landmarks\">\n        <span class=\"landmark\">&#x1f3db;&#xfe0f; Lawang Sewu<\/span>\n        <span class=\"landmark\">&#x1f3d8;&#xfe0f; Kota Lama<\/span>\n        <span class=\"landmark\">&#x26e9;&#xfe0f; Warisan Budaya<\/span>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<section class=\"closing\">\n  <div class=\"wrap\">\n    <h2>Sudah Tahu Mau Makan Apa?<\/h2>\n    <p>Pilih menu favoritmu, atur jumlah pesanan, dan kirim langsung ke admin.<\/p>\n    <button class=\"primary\" type=\"button\" data-pawon-action=\"open\">&#x1f6d2; Lihat Keranjang &#038; Pesan<\/button>\n  <\/div>\n<\/section>\n\n<footer>\n  <div class=\"wrap footer-inner\">\n    <div>\n      <div class=\"brand\" style=\"color:white\">\n        <span class=\"brand-icon\">&#x1f372;<\/span>\n        <span>PAWON SEMARANG<small>WARISAN RASA NUSANTARA<\/small><\/span>\n      <\/div>\n      <p>Merayakan rasa, melestarikan cerita kuliner Semarang.<\/p>\n    <\/div>\n    <div class=\"footer-small\">\u00a9 <span id=\"pawon-year\"><\/span> Pawon Semarang.<\/div>\n  <\/div>\n<\/footer>\n\n<!-- IKON KERANJANG MENGAMBANG -->\n<button type=\"button\" class=\"floating-cart\" data-pawon-action=\"open\" aria-label=\"Buka keranjang belanja\" title=\"Keranjang belanja\">\n  &#x1f6d2;\n  <span class=\"floating-cart-count\" id=\"pawon-floating-count\">0<\/span>\n<\/button>\n\n<!-- ISI KERANJANG HANYA TERBUKA SAAT IKON DIKLIK -->\n<div class=\"cart-overlay\" id=\"pawon-overlay\"><\/div>\n<aside class=\"cart-panel\" id=\"pawon-panel\" aria-label=\"Keranjang pesanan\" aria-hidden=\"true\">\n  <div class=\"cart-head\">\n    <h3>Keranjang Pesanan &#x1f6d2;<\/h3>\n    <button type=\"button\" class=\"close-cart\" data-pawon-action=\"close\" aria-label=\"Tutup keranjang\">\u00d7<\/button>\n  <\/div>\n  <div class=\"cart-items\" id=\"pawon-cart-items\"><\/div>\n  <div class=\"cart-foot\">\n    <div class=\"total-line\"><span>Total Pembayaran<\/span><span id=\"pawon-total\">Rp0<\/span><\/div>\n\n    <label class=\"checkout-label\" for=\"pawon-name\">Nama Pemesan *<\/label>\n    <input class=\"checkout-input\" id=\"pawon-name\" type=\"text\" placeholder=\"Masukkan nama kamu\" maxlength=\"70\">\n\n    <label class=\"checkout-label\" for=\"pawon-table\">Nomor Meja *<\/label>\n    <input class=\"checkout-input\" id=\"pawon-table\" type=\"text\" placeholder=\"Contoh: 05 atau Meja A\" maxlength=\"20\">\n\n    <label class=\"checkout-label\" for=\"pawon-payment\">Metode Pembayaran *<\/label>\n    <select class=\"checkout-input\" id=\"pawon-payment\">\n      <option value=\"\">Pilih metode pembayaran<\/option>\n      <option value=\"Tunai di kasir\">Tunai di kasir<\/option>\n      <option value=\"QRIS\">QRIS<\/option>\n      <option value=\"Kartu debit\">Kartu debit<\/option>\n    <\/select>\n\n    <div class=\"checkout-hint\"><strong>Informasi Pembayaran:<\/strong> Pesanan akan disiapkan setelah pembayaran dilakukan atau bukti pembayaran diberikan kepada admin.<\/div>\n\n    <button type=\"button\" class=\"checkout-btn\" id=\"pawon-checkout\" data-pawon-action=\"checkout\">Pesan via WhatsApp &#x2197;<\/button>\n    <div class=\"checkout-hint\">Periksa kembali pesanan sebelum mengirimkannya.<\/div>\n  <\/div>\n<\/aside>\n\n<div class=\"toast\" id=\"pawon-toast\" role=\"status\"><\/div>\n\n<script>\n(function(){\n  const root = document.getElementById('pawon');\n  if(!root || root.dataset.ready === '1') return;\n  root.dataset.ready = '1';\n\n  \/\/ HARGA CONTOH: SESUAIKAN DENGAN HARGA JUAL ASLI.\n  const menu = [\n    {id:1,name:'Nasi Ayam Semarang',category:'Makanan',price:18000,desc:'Nasi gurih dengan ayam dan kuah khas yang menggugah selera.',tag:'Favorit',emoji:'&#x1f357;',img:'https:\/\/images.unsplash.com\/photo-1512058564366-18510be2db19?auto=format&fit=crop&w=650&q=80'},\n    {id:2,name:'Tahu Gimbal',category:'Makanan',price:20000,desc:'Tahu, gimbal udang, sayuran, dan saus kacang khas Semarang.',tag:'Khas Semarang',emoji:'&#x1f957;',img:'https:\/\/images.unsplash.com\/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&w=650&q=80'},\n    {id:3,name:'Tahu Pong',category:'Camilan',price:15000,desc:'Tahu kopong dengan cita rasa gurih dan nikmat.',tag:'Legendaris',emoji:'&#x1f9c8;',img:'https:\/\/images.unsplash.com\/photo-1547592180-85f173990554?auto=format&fit=crop&w=650&q=80'},\n    {id:4,name:'Mie Kopyok',category:'Makanan',price:15000,desc:'Mie, lontong, tahu, dan kerupuk dengan kuah sederhana.',tag:'Khas Semarang',emoji:'&#x1f35c;',img:'https:\/\/images.unsplash.com\/photo-1569718212165-3a8278d5f624?auto=format&fit=crop&w=650&q=80'},\n    {id:5,name:'Lumpia Semarang',category:'Camilan',price:12000,desc:'Camilan khas Semarang dengan isian gurih yang menggoda.',tag:'Ikonik',emoji:'&#x1f95f;',img:'https:\/\/images.unsplash.com\/photo-1563245372-f21724e3856d?auto=format&fit=crop&w=650&q=80'},\n    {id:6,name:'Tahu Baso Semarang',category:'Camilan',price:12000,desc:'Tahu isi bakso yang cocok menjadi camilan atau teman makan.',tag:'Favorit',emoji:'&#x1f362;',img:'https:\/\/images.unsplash.com\/photo-1529042410759-befb1204b468?auto=format&fit=crop&w=650&q=80'},\n    {id:7,name:'Nasi Pindang Khas Semarang',category:'Makanan',price:22000,desc:'Nasi dengan sajian pindang bercita rasa gurih dan kaya rempah.',tag:'Menu Spesial',emoji:'&#x1f372;',img:'https:\/\/images.unsplash.com\/photo-1547592180-85f173990554?auto=format&fit=crop&w=650&q=80'},\n    {id:8,name:'Nasi Gandul',category:'Makanan',price:22000,desc:'Nasi dengan kuah rempah berwarna pekat dan kaya rasa.',tag:'Penuh Rempah',emoji:'&#x1f35b;',img:'https:\/\/images.unsplash.com\/photo-1512058564366-18510be2db19?auto=format&fit=crop&w=650&q=80'},\n    {id:9,name:'Es Jeruk',category:'Minuman',price:8000,desc:'Kesegaran jeruk yang cocok menemani hidangan favorit.',tag:'Segar',emoji:'&#x1f34a;',img:'https:\/\/images.unsplash.com\/photo-1600271886742-f049cd451bba?auto=format&fit=crop&w=650&q=80'},\n    {id:10,name:'Es Cao',category:'Minuman',price:8000,desc:'Minuman tradisional dengan cao yang menyegarkan.',tag:'Tradisional',emoji:'&#x1f9cb;',img:'https:\/\/images.unsplash.com\/photo-1544145945-f90425340c7e?auto=format&fit=crop&w=650&q=80'},\n    {id:11,name:'Es Teh Manis',category:'Minuman',price:5000,desc:'Es teh manis yang segar dan pas untuk setiap hidangan.',tag:'Favorit',emoji:'&#x1f9ca;',img:'https:\/\/images.unsplash.com\/photo-1556679343-c7306c1976bc?auto=format&fit=crop&w=650&q=80'}\n  ];\n\n  const cart = {};\n  const money = n => 'Rp' + n.toLocaleString('id-ID');\n  const $ = selector => root.querySelector(selector);\n  const grid = $('#pawon-grid');\n  const cartItems = $('#pawon-cart-items');\n  const checkoutBtn = $('#pawon-checkout');\n  let toastTimer;\n\n  function renderMenu(filter){\n    const items = menu.filter(item => filter === 'Semua' || item.category === filter);\n    grid.innerHTML = items.map(item => `\n      <article class=\"food-card\">\n        <div class=\"food-image\">\n          <img decoding=\"async\" src=\"${item.img}\" alt=\"${item.name}\" loading=\"lazy\" onerror=\"this.style.display='none'\">\n          <span class=\"food-label\">${item.emoji} ${item.tag}<\/span>\n        <\/div>\n        <div class=\"food-content\">\n          <h3>${item.name}<\/h3>\n          <p>${item.desc}<\/p>\n          <div class=\"food-bottom\">\n            <span class=\"price\">${money(item.price)}<\/span>\n            <button class=\"add-btn\" type=\"button\" data-add=\"${item.id}\" aria-label=\"Tambah ${item.name}\">+<\/button>\n          <\/div>\n        <\/div>\n      <\/article>\n    `).join('');\n  }\n\n  function totals(){\n    let count = 0, total = 0;\n    menu.forEach(item => {\n      const qty = cart[item.id] || 0;\n      count += qty;\n      total += qty * item.price;\n    });\n\n    $('#pawon-floating-count').textContent = count;\n    $('#pawon-total').textContent = money(total);\n    checkoutBtn.disabled = count === 0;\n    return {count,total};\n  }\n\n  function renderCart(){\n    const selected = menu.filter(item => (cart[item.id] || 0) > 0);\n\n    if(!selected.length){\n      cartItems.innerHTML = '<div class=\"empty-cart\"><span>&#x1f6d2;<\/span><h3>Keranjang masih kosong<\/h3><p>Yuk, pilih makanan dan minuman favoritmu.<\/p><\/div>';\n    } else {\n      cartItems.innerHTML = selected.map(item => `\n        <div class=\"cart-item\">\n          <div>\n            <strong>${item.name}<\/strong>\n            <small>${money(item.price)} \/ porsi<\/small>\n            <div class=\"qty\">\n              <button type=\"button\" data-minus=\"${item.id}\" aria-label=\"Kurangi ${item.name}\">\u2212<\/button>\n              <span>${cart[item.id]}<\/span>\n              <button type=\"button\" data-plus=\"${item.id}\" aria-label=\"Tambah ${item.name}\">+<\/button>\n            <\/div>\n          <\/div>\n          <div style=\"text-align:right\">\n            <strong>${money(item.price * cart[item.id])}<\/strong>\n            <button class=\"remove\" type=\"button\" data-remove=\"${item.id}\">Hapus<\/button>\n          <\/div>\n        <\/div>\n      `).join('');\n    }\n    totals();\n  }\n\n  function showToast(message){\n    const toast = $('#pawon-toast');\n    toast.textContent = message;\n    toast.classList.add('show');\n    clearTimeout(toastTimer);\n    toastTimer = setTimeout(() => toast.classList.remove('show'), 1900);\n  }\n\n  function openCart(){\n    $('#pawon-overlay').classList.add('open');\n    $('#pawon-panel').classList.add('open');\n    $('#pawon-panel').setAttribute('aria-hidden','false');\n    renderCart();\n  }\n\n  function closeCart(){\n    $('#pawon-overlay').classList.remove('open');\n    $('#pawon-panel').classList.remove('open');\n    $('#pawon-panel').setAttribute('aria-hidden','true');\n  }\n\n  \/\/ MENAMBAHKAN MENU TIDAK MEMBUKA KERANJANG.\n  function add(id){\n    cart[id] = (cart[id] || 0) + 1;\n    renderCart();\n\n    const icon = root.querySelector('.floating-cart');\n    icon.classList.remove('bump');\n    void icon.offsetWidth;\n    icon.classList.add('bump');\n\n    const item = menu.find(x => x.id === id);\n    showToast(item.name + ' masuk keranjang');\n  }\n\n  function changeQty(id, delta){\n    cart[id] = (cart[id] || 0) + delta;\n    if(cart[id] <= 0) delete cart[id];\n    renderCart();\n  }\n\n  function checkout(){\n    const name = $('#pawon-name').value.trim();\n    const table = $('#pawon-table').value.trim();\n    const payment = $('#pawon-payment').value;\n    const {count,total} = totals();\n\n    if(!count){showToast('Keranjang masih kosong');return;}\n    if(!name){$('#pawon-name').focus();showToast('Nama pemesan wajib diisi');return;}\n    if(!table){$('#pawon-table').focus();showToast('Nomor meja wajib diisi');return;}\n    if(!payment){$('#pawon-payment').focus();showToast('Pilih metode pembayaran');return;}\n\n    const selected = menu.filter(item => (cart[item.id] || 0) > 0);\n    const lines = selected.map(item =>\n      `${item.name}\\n${cart[item.id]} x ${money(item.price)} = ${money(item.price * cart[item.id])}`\n    );\n\n    const message = [\n      '&#x1f372; PESANAN PAWON SEMARANG',\n      '========================',\n      '',\n      `Nama Pemesan: ${name}`,\n      `Nomor Meja: ${table}`,\n      '',\n      'DETAIL PESANAN:',\n      '',\n      ...lines,\n      '',\n      '------------------------',\n      `Total Item: ${count}`,\n      `TOTAL PEMBAYARAN: ${money(total)}`,\n      '',\n      'METODE PEMBAYARAN:',\n      payment,\n      '',\n      'INFORMASI PEMBAYARAN:',\n      'Pesanan akan disiapkan setelah pembayaran dilakukan atau bukti pembayaran diberikan kepada admin.',\n      '',\n      'Mohon konfirmasi pesanan ini.',\n      'Terima kasih &#x1f64f;'\n    ].join('\\n');\n\n    const adminNumber = '6281233285758';\n    const url = 'https:\/\/wa.me\/' + adminNumber + '?text=' + encodeURIComponent(message);\n    const opened = window.open(url, '_blank');\n\n    if(!opened){\n      showToast('Izinkan pop-up browser untuk membuka WhatsApp.');\n    }\n  }\n\n  grid.addEventListener('click', event => {\n    const btn = event.target.closest('[data-add]');\n    if(btn) add(Number(btn.dataset.add));\n  });\n\n  cartItems.addEventListener('click', event => {\n    const plus = event.target.closest('[data-plus]');\n    const minus = event.target.closest('[data-minus]');\n    const remove = event.target.closest('[data-remove]');\n\n    if(plus) changeQty(Number(plus.dataset.plus), 1);\n    if(minus) changeQty(Number(minus.dataset.minus), -1);\n    if(remove){\n      delete cart[Number(remove.dataset.remove)];\n      renderCart();\n    }\n  });\n\n  root.querySelectorAll('.filter').forEach(btn => {\n    btn.addEventListener('click', () => {\n      root.querySelectorAll('.filter').forEach(b => b.classList.remove('active'));\n      btn.classList.add('active');\n      renderMenu(btn.dataset.filter);\n    });\n  });\n\n  root.addEventListener('click', event => {\n    const action = event.target.closest('[data-pawon-action]');\n    if(!action) return;\n\n    const type = action.dataset.pawonAction;\n    if(type === 'open') openCart();\n    if(type === 'close') closeCart();\n    if(type === 'checkout') checkout();\n  });\n\n  $('#pawon-overlay').addEventListener('click', closeCart);\n  $('#pawon-year').textContent = new Date().getFullYear();\n\n  renderMenu('Semua');\n  renderCart();\n})();\n<\/script>\n<\/div>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"pagelayer-canvas","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-29","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pawonsemarang.web.id\/index.php?rest_route=\/wp\/v2\/pages\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pawonsemarang.web.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pawonsemarang.web.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pawonsemarang.web.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pawonsemarang.web.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=29"}],"version-history":[{"count":2,"href":"https:\/\/pawonsemarang.web.id\/index.php?rest_route=\/wp\/v2\/pages\/29\/revisions"}],"predecessor-version":[{"id":39,"href":"https:\/\/pawonsemarang.web.id\/index.php?rest_route=\/wp\/v2\/pages\/29\/revisions\/39"}],"wp:attachment":[{"href":"https:\/\/pawonsemarang.web.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}