{"id":6006,"date":"2026-03-28T00:00:14","date_gmt":"2026-03-27T17:00:14","guid":{"rendered":"https:\/\/www.wikipedieng.com\/dieng\/?page_id=6006"},"modified":"2026-03-28T07:32:11","modified_gmt":"2026-03-28T00:32:11","slug":"jogja-semarang-solo-purwokerto","status":"publish","type":"page","link":"https:\/\/www.wikipedieng.com\/dieng\/paket-wisata\/jogja-semarang-solo-purwokerto\/","title":{"rendered":"Paket Wisata Dieng dari Jogja, Semarang, Solo, Purwokerto, Wonosobo"},"content":{"rendered":"\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');\n\n:root{\n  --bg:#eef3f9;\n  --bg-2:#f6f9fd;\n  --panel:#ffffff;\n  --panel-2:#fbfdff;\n\n  --brand:#003b95;\n  --brand-2:#0057d2;\n  --brand-3:#1a73e8;\n  --brand-soft:#eaf2ff;\n\n  --ink:#101828;\n  --ink-2:#1d2939;\n  --muted:#667085;\n  --muted-2:#98a2b3;\n\n  --line:rgba(16,24,40,.10);\n  --line-2:rgba(16,24,40,.06);\n\n  --danger:#b42318;\n\n  --shadow-1:0 10px 28px rgba(16,24,40,.06);\n  --shadow-2:0 22px 56px rgba(16,24,40,.10);\n  --shadow-brand:0 16px 34px rgba(0,59,149,.22);\n\n  --r-16:16px;\n  --r-20:20px;\n  --r-24:24px;\n  --r-28:28px;\n  --r-32:32px;\n\n  --max:760px;\n  --ease:cubic-bezier(.22,.8,.2,1);\n}\n\n*{box-sizing:border-box}\nhtml{scroll-behavior:smooth}\nbody{\n  margin:0;\n  min-height:100vh;\n  background:\n    radial-gradient(circle at top center, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 34%),\n    linear-gradient(180deg, #f9fbff 0%, #f3f7fc 180px, var(--bg) 100%);\n  color:var(--ink);\n  font-family:\"Plus Jakarta Sans\",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\n  -webkit-font-smoothing:antialiased;\n  text-rendering:optimizeLegibility;\n}\nbutton,input{font:inherit;-webkit-tap-highlight-color:transparent}\na{text-decoration:none;color:inherit}\n::selection{background:rgba(0,59,149,.14)}\n:focus-visible{outline:none}\n\n@media (prefers-reduced-motion: reduce){\n  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}\n}\n\n\/* App wrapper *\/\n.app{\n  width:100%;\n  max-width:var(--max);\n  margin:0 auto;\n  min-height:100vh;\n  padding:16px 16px 28px;\n  position:relative;\n}\n\n\/* Hero section *\/\n.dieng-hero{\n  width:100%;\n  max-width:var(--max);\n  margin:0 auto 18px;\n  border-radius:var(--r-28);\n  background:linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%);\n  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, var(--shadow-2);\n  padding:28px 16px;\n  text-align:center;\n}\n\n.heroInner{\n  max-width:728px;\n  margin:0 auto;\n}\n\n.heroTitle{\n  margin:0;\n  font-size:30px;\n  line-height:1.08;\n  font-weight:800;\n  color:var(--ink);\n}\n\n.heroDesc{\n  margin:14px auto 0;\n  font-size:14px;\n  line-height:1.65;\n  font-weight:600;\n  color:var(--muted);\n}\n\n@media(min-width:721px){\n  .dieng-hero{padding:32px 22px;}\n  .heroTitle{font-size:32px;}\n  .heroDesc{font-size:15px;}\n}\n\n\/* Global stage \/ card \/ input \/ button styles *\/\n.stage, .optionCard, .packageCard, .fieldCard, .detailsCard, .contactItem, .mapWrap, .footLink{\n  background:linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%);\n  border-radius:var(--r-24);\n  border:1px solid rgba(16,24,40,.08);\n  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, var(--shadow-1);\n}\n\n.input{\n  width:100%;\n  min-height:60px;\n  border-radius:var(--r-20);\n  border:1px solid rgba(16,24,40,.14);\n  background:linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%);\n  padding:0 16px;\n  outline:none;\n  font-size:18px;\n  font-weight:700;\n  color:var(--ink);\n  box-shadow:0 1px 0 rgba(255,255,255,.85) inset;\n  transition:border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);\n}\n.input:focus{\n  border-color:rgba(0,59,149,.34);\n  background:#fff;\n  box-shadow:0 0 0 4px rgba(0,59,149,.10), 0 10px 24px rgba(0,59,149,.08);\n}\n.input.isErr{\n  border-color:var(--danger);\n  box-shadow:0 0 0 4px rgba(180,35,24,.08);\n}\n\n.btn{\n  width:100%;\n  min-height:58px;\n  border:0;\n  border-radius:18px;\n  padding:0 16px;\n  cursor:pointer;\n  font-size:15px;\n  font-weight:800;\n  letter-spacing:-.1px;\n  transition:transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s var(--ease), opacity .16s var(--ease);\n}\n.btn:active{transform:scale(.995)}\n.btn:focus-visible{box-shadow:0 0 0 4px rgba(0,59,149,.12)}\n\n.btnPrimary{\n  color:#fff;\n  background:linear-gradient(180deg,var(--brand-3) 0%, var(--brand-2) 28%, var(--brand) 100%);\n  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, var(--shadow-brand);\n}\n.btnPrimary:hover{filter:brightness(1.03)}\n\n.btnGhost{\n  color:var(--ink);\n  background:linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%);\n  border:1px solid rgba(16,24,40,.08);\n  box-shadow:0 1px 0 rgba(255,255,255,.92) inset, var(--shadow-1);\n}\n.btnGhost:hover{\n  box-shadow:0 1px 0 rgba(255,255,255,.94) inset, 0 14px 34px rgba(16,24,40,.09);\n}\n\n\/* Override untuk HP *\/\n@media(max-width:720px){\n  .app {\n    padding-top:0 !important;       \/* mentok atas *\/\n    padding-left:16px !important;\n    padding-right:16px !important;\n    padding-bottom:20px !important; \/* cukup space bawah *\/\n  }\n\n  .dieng-hero {\n    padding:20px 14px !important;   \/* lebih kecil untuk HP *\/\n  }\n\n  .heroTitle {\n    font-size:18px !important;      \/* sesuaikan ukuran font *\/\n  }\n\n  .heroDesc {\n    font-size:13px !important;\n    margin-top:10px !important;\n  }\n}\n<\/style>\n\n\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');\n\n:root{\n  --bg:#eef3f9;\n  --bg-2:#f6f9fd;\n  --panel:#ffffff;\n  --panel-2:#fbfdff;\n\n  --brand:#003b95;\n  --brand-2:#0057d2;\n  --brand-3:#1a73e8;\n  --brand-soft:#eaf2ff;\n\n  --ink:#101828;\n  --ink-2:#1d2939;\n  --muted:#667085;\n  --muted-2:#98a2b3;\n\n  --line:rgba(16,24,40,.10);\n  --line-2:rgba(16,24,40,.06);\n\n  --danger:#b42318;\n\n  --shadow-1:0 10px 28px rgba(16,24,40,.06);\n  --shadow-2:0 22px 56px rgba(16,24,40,.10);\n  --shadow-brand:0 16px 34px rgba(0,59,149,.22);\n\n  --r-16:16px;\n  --r-20:20px;\n  --r-24:24px;\n  --r-28:28px;\n  --r-32:32px;\n\n  --max:760px;\n  --ease:cubic-bezier(.22,.8,.2,1);\n}\n\n*{box-sizing:border-box}\nhtml{scroll-behavior:smooth}\nbody{\n  margin:0;\n  min-height:100vh;\n  background:\n    radial-gradient(circle at top center, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 34%),\n    linear-gradient(180deg, #f9fbff 0%, #f3f7fc 180px, var(--bg) 100%);\n  color:var(--ink);\n  font-family:\"Plus Jakarta Sans\",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\n  -webkit-font-smoothing:antialiased;\n  text-rendering:optimizeLegibility;\n}\nbutton,input{font:inherit;-webkit-tap-highlight-color:transparent}\na{text-decoration:none;color:inherit}\n::selection{background:rgba(0,59,149,.14)}\n:focus-visible{outline:none}\n\n@media (prefers-reduced-motion: reduce){\n  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}\n}\n\n.app{\n  width:100%;\n  max-width:var(--max); \/* 760px *\/\n  margin:0 auto;\n  min-height:100vh;\n  padding:0 16px 28px;\n  position:relative;\n}\n\n.topbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:12px;\n  padding:14px 16px;\n  border-radius:24px;\n  background:rgba(255,255,255,.88);\n  border:1px solid rgba(255,255,255,.84);\n  box-shadow:\n    0 1px 0 rgba(255,255,255,.9) inset,\n    0 12px 30px rgba(16,24,40,.07);\n  backdrop-filter:blur(16px) saturate(140%);\n}\n.brand h1{\n  margin:0;\n  font-size:17px;\n  font-weight:800;\n  letter-spacing:-.36px;\n  color:var(--ink);\n}\n.brand p{\n  margin:4px 0 0;\n  font-size:12px;\n  line-height:1.5;\n  color:var(--muted);\n  font-weight:700;\n}\n.topMeta{\n  min-height:40px;\n  display:inline-flex;\n  align-items:center;\n  justify-content:center;\n  padding:0 13px;\n  border-radius:999px;\n  background:linear-gradient(180deg,#f7faff 0%, #edf4ff 100%);\n  border:1px solid rgba(0,59,149,.12);\n  color:var(--brand);\n  font-size:11.5px;\n  font-weight:800;\n  white-space:nowrap;\n}\n\nmain{\n  margin-top:14px;\n}\n\n.stage{\n  position:relative;\n  background:linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(251,253,255,.99) 100%);\n  border-radius:var(--r-32);\n  border:1px solid rgba(255,255,255,.88);\n  box-shadow:\n    0 1px 0 rgba(255,255,255,.95) inset,\n    var(--shadow-2);\n  overflow:hidden;\n}\n.stage::before{\n  content:\"\";\n  position:absolute;\n  left:0;\n  right:0;\n  top:0;\n  height:116px;\n  background:linear-gradient(180deg, rgba(0,59,149,.06) 0%, rgba(0,59,149,0) 100%);\n  pointer-events:none;\n}\n.stageHead{\n  position:relative;\n  padding:24px 22px 18px;\n  border-bottom:1px solid var(--line-2);\n  background:linear-gradient(180deg,#ffffff 0%, #fcfdff 100%);\n}\n.stageKicker{\n  margin:0;\n  font-size:11px;\n  line-height:1;\n  font-weight:800;\n  letter-spacing:1.2px;\n  text-transform:uppercase;\n  color:var(--muted-2);\n}\n.stageTitle{\n  margin:10px 0 0;\n  font-size:30px;\n  line-height:1.08;\n  font-weight:800;\n  letter-spacing:-.75px;\n  color:var(--ink);\n}\n.stageSub{\n  margin:8px 0 0;\n  font-size:14px;\n  line-height:1.65;\n  color:var(--muted);\n  font-weight:600;\n  max-width:520px;\n}\n.stageMeta{\n  margin-top:18px;\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:12px;\n}\n.stepper{\n  display:flex;\n  align-items:center;\n  gap:8px;\n}\n.stepDot{\n  width:10px;\n  height:10px;\n  border-radius:999px;\n  background:rgba(16,24,40,.16);\n  transition:.25s var(--ease);\n}\n.stepDot.isActive{\n  width:36px;\n  background:linear-gradient(90deg,var(--brand-2) 0%, var(--brand) 100%);\n  box-shadow:0 6px 18px rgba(0,59,149,.22);\n}\n.stepDot.isDone{\n  background:rgba(0,59,149,.5);\n}\n.stepBadge{\n  min-width:60px;\n  text-align:center;\n  padding:9px 12px;\n  border-radius:999px;\n  background:#fff;\n  border:1px solid rgba(0,59,149,.12);\n  color:var(--brand);\n  font-size:12px;\n  font-weight:800;\n  box-shadow:0 10px 22px rgba(16,24,40,.05);\n}\n\n.stageBody{\n  position:relative;\n  height:auto;\n  min-height:0;\n  overflow:hidden;\n  padding:0;\n  transition:height .38s var(--ease);\n}\n\n.stepPane{\n  position:absolute;\n  inset:0;\n  padding:22px;\n  opacity:0;\n  visibility:hidden;\n  transform:translateX(24px) scale(.986);\n  transition:\n    opacity .42s var(--ease),\n    transform .42s var(--ease),\n    visibility .42s var(--ease);\n  pointer-events:none;\n  background:linear-gradient(180deg,#fff 0%, #fbfdff 100%);\n}\n.stepPane.isActive{\n  opacity:1;\n  visibility:visible;\n  transform:translateX(0) scale(1);\n  pointer-events:auto;\n  z-index:2;\n}\n.stepPane.isExitLeft{\n  opacity:0;\n  visibility:hidden;\n  transform:translateX(-24px) scale(.986);\n  z-index:1;\n}\n.stepPane.isExitRight{\n  opacity:0;\n  visibility:hidden;\n  transform:translateX(24px) scale(.986);\n  z-index:1;\n}\n\n#step1{padding-bottom:34px}\n\n.stepTopBlock{margin-bottom:16px}\n.stepTopTitle{\n  margin:0;\n  font-size:18px;\n  line-height:1.25;\n  color:var(--ink);\n  font-weight:800;\n  letter-spacing:-.3px;\n}\n.stepTopSub{\n  margin:7px 0 0;\n  font-size:13px;\n  line-height:1.65;\n  color:var(--muted);\n  font-weight:600;\n}\n\n.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}\n.grid1{display:grid;grid-template-columns:1fr;gap:12px}\n\n.optionCard,\n.packageCard{\n  width:100%;\n  text-align:left;\n  cursor:pointer;\n  position:relative;\n  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);\n  border:1px solid rgba(16,24,40,.08);\n  box-shadow:\n    0 1px 0 rgba(255,255,255,.92) inset,\n    var(--shadow-1);\n  transition:\n    transform .18s var(--ease),\n    box-shadow .18s var(--ease),\n    border-color .18s var(--ease),\n    background .18s var(--ease);\n}\n.optionCard::before,\n.packageCard::before{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  border-radius:inherit;\n  pointer-events:none;\n  box-shadow:0 1px 0 rgba(255,255,255,.95) inset;\n}\n.optionCard:active,\n.packageCard:active{transform:scale(.992)}\n\n.optionCard{\n  border-radius:24px;\n  padding:17px;\n  display:flex;\n  flex-direction:column;\n}\n.packageCard{\n  border-radius:26px;\n  padding:18px;\n}\n\n.optionCard:hover,\n.packageCard:hover{\n  border-color:rgba(0,59,149,.16);\n  box-shadow:\n    0 1px 0 rgba(255,255,255,.95) inset,\n    0 18px 40px rgba(16,24,40,.09);\n}\n\n.optionCard.isSelected,\n.packageCard.isSelected{\n  border-color:rgba(0,59,149,.24);\n  background:linear-gradient(180deg,#ffffff 0%, #f2f7ff 100%);\n  box-shadow:\n    0 1px 0 rgba(255,255,255,.98) inset,\n    0 22px 52px rgba(0,59,149,.12);\n}\n\n.optionTop,\n.packageTop{\n  display:flex;\n  align-items:flex-start;\n  justify-content:space-between;\n  gap:10px;\n}\n\n.optionCheck{\n  width:22px;\n  height:22px;\n  border-radius:999px;\n  border:2px solid rgba(16,24,40,.18);\n  background:#fff;\n  position:relative;\n  flex:0 0 auto;\n  box-shadow:0 4px 12px rgba(16,24,40,.05);\n}\n.optionCard.isSelected .optionCheck,\n.packageCard.isSelected .optionCheck{\n  border-color:var(--brand);\n}\n.optionCard.isSelected .optionCheck::after,\n.packageCard.isSelected .optionCheck::after{\n  content:\"\";\n  position:absolute;\n  inset:4px;\n  border-radius:999px;\n  background:linear-gradient(180deg,var(--brand-2) 0%, var(--brand) 100%);\n}\n\n.optionTitle{\n  margin:0;\n  font-size:15px;\n  line-height:1.35;\n  font-weight:800;\n  color:var(--ink);\n  letter-spacing:-.2px;\n}\n.optionSub{\n  margin:6px 0 0;\n  font-size:12.7px;\n  line-height:1.62;\n  font-weight:600;\n  color:var(--muted);\n}\n.optionTag{\n  margin-top:13px;\n  display:inline-flex;\n  align-items:center;\n  min-height:32px;\n  padding:0 11px;\n  border-radius:999px;\n  background:linear-gradient(180deg,#ffffff 0%, #f7faff 100%);\n  border:1px solid rgba(16,24,40,.08);\n  font-size:11.5px;\n  font-weight:800;\n  color:#344054;\n  width:max-content;\n}\n\n.packageDay{\n  display:inline-flex;\n  align-items:center;\n  min-height:31px;\n  padding:0 11px;\n  border-radius:999px;\n  background:linear-gradient(180deg,#f2f7ff 0%, #e8f0ff 100%);\n  border:1px solid rgba(0,59,149,.12);\n  color:var(--brand);\n  font-size:11.5px;\n  font-weight:800;\n  box-shadow:0 6px 14px rgba(0,59,149,.05);\n}\n.packageTitle{\n  margin:14px 0 0;\n  font-size:17px;\n  line-height:1.28;\n  font-weight:800;\n  letter-spacing:-.34px;\n  color:var(--ink);\n}\n.packageDesc{\n  margin:7px 0 0;\n  font-size:12.7px;\n  line-height:1.62;\n  font-weight:600;\n  color:var(--muted);\n}\n\n.fieldCard{\n  padding:18px;\n  border-radius:28px;\n  border:1px solid rgba(16,24,40,.08);\n  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);\n  box-shadow:\n    0 1px 0 rgba(255,255,255,.96) inset,\n    var(--shadow-1);\n}\n.label{\n  display:block;\n  margin:0 0 10px;\n  font-size:13px;\n  font-weight:800;\n  color:var(--ink);\n}\n.input{\n  width:100%;\n  min-height:60px;\n  border-radius:20px;\n  border:1px solid rgba(16,24,40,.14);\n  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);\n  padding:0 16px;\n  outline:none;\n  font-size:18px;\n  font-weight:700;\n  color:var(--ink);\n  box-shadow:0 1px 0 rgba(255,255,255,.85) inset;\n  transition:border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);\n}\n.input:focus{\n  border-color:rgba(0,59,149,.34);\n  background:#fff;\n  box-shadow:\n    0 0 0 4px rgba(0,59,149,.10),\n    0 10px 24px rgba(0,59,149,.08);\n}\n.input.isErr{\n  border-color:rgba(180,35,24,.42);\n  box-shadow:0 0 0 4px rgba(180,35,24,.08);\n}\n.hint{\n  margin-top:10px;\n  font-size:12.2px;\n  line-height:1.58;\n  font-weight:600;\n  color:var(--muted);\n}\n.err{\n  display:none;\n  margin-top:10px;\n  font-size:12.5px;\n  color:var(--danger);\n  font-weight:700;\n}\n\n.otherCityForm{\n  display:none;\n  margin-top:14px;\n  padding:16px;\n  border-radius:22px;\n  border:1px solid rgba(16,24,40,.08);\n  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);\n  box-shadow:\n    0 1px 0 rgba(255,255,255,.96) inset,\n    var(--shadow-1);\n}\n.otherCityForm.isShow{\n  display:block;\n}\n.otherCityLabel{\n  display:block;\n  margin:0 0 10px;\n  font-size:13px;\n  font-weight:800;\n  color:var(--ink);\n}\n.otherCityActions{\n  display:grid;\n  grid-template-columns:1fr;\n  gap:10px;\n  margin-top:12px;\n}\n.otherCityErr{\n  display:none;\n  margin-top:10px;\n  font-size:12.5px;\n  color:var(--danger);\n  font-weight:700;\n}\n\n.actions{\n  display:grid;\n  grid-template-columns:1fr;\n  gap:10px;\n  margin-top:14px;\n  padding-bottom:8px;\n}\n\n.btn{\n  width:100%;\n  min-height:58px;\n  border:0;\n  border-radius:18px;\n  padding:0 16px;\n  cursor:pointer;\n  font-size:15px;\n  font-weight:800;\n  letter-spacing:-.1px;\n  transition:transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s var(--ease), opacity .16s var(--ease);\n}\n.btn:active{transform:scale(.995)}\n.btn:focus-visible{box-shadow:0 0 0 4px rgba(0,59,149,.12)}\n\n.btnPrimary{\n  color:#fff;\n  background:linear-gradient(180deg,var(--brand-3) 0%, var(--brand-2) 28%, var(--brand) 100%);\n  box-shadow:\n    0 1px 0 rgba(255,255,255,.18) inset,\n    var(--shadow-brand);\n}\n.btnPrimary:hover{filter:brightness(1.03)}\n\n.btnGhost{\n  color:var(--ink);\n  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);\n  border:1px solid rgba(16,24,40,.08);\n  box-shadow:\n    0 1px 0 rgba(255,255,255,.92) inset,\n    var(--shadow-1);\n}\n.btnGhost:hover{\n  box-shadow:\n    0 1px 0 rgba(255,255,255,.94) inset,\n    0 14px 34px rgba(16,24,40,.09);\n}\n\n.detailsCard{\n  margin-top:12px;\n  overflow:hidden;\n  border-radius:28px;\n  border:1px solid rgba(16,24,40,.08);\n  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);\n  box-shadow:\n    0 1px 0 rgba(255,255,255,.95) inset,\n    var(--shadow-1);\n}\n.detailsSummary{\n  list-style:none;\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:12px;\n  padding:18px;\n  cursor:pointer;\n}\n.detailsSummary::-webkit-details-marker{display:none}\n.detailsKicker{\n  display:block;\n  font-size:11px;\n  font-weight:800;\n  letter-spacing:1.1px;\n  text-transform:uppercase;\n  color:var(--muted-2);\n}\n.detailsTitle{\n  display:block;\n  margin-top:6px;\n  font-size:16px;\n  font-weight:800;\n  color:var(--ink);\n  letter-spacing:-.25px;\n}\n.detailsSub{\n  display:block;\n  margin-top:6px;\n  font-size:12.5px;\n  font-weight:600;\n  color:var(--muted);\n}\n.detailsArrow{\n  width:40px;\n  height:40px;\n  border-radius:14px;\n  border:1px solid rgba(16,24,40,.08);\n  background:linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);\n  position:relative;\n  flex:0 0 auto;\n  box-shadow:0 10px 22px rgba(16,24,40,.05);\n}\n.detailsArrow::before{\n  content:\"\";\n  position:absolute;\n  left:50%;\n  top:50%;\n  width:8px;\n  height:8px;\n  border-right:2px solid #25324a;\n  border-bottom:2px solid #25324a;\n  transform:translate(-50%,-65%) rotate(45deg);\n  transition:.18s var(--ease);\n}\n.detailsCard[open] .detailsArrow::before{\n  transform:translate(-50%,-35%) rotate(225deg);\n}\n\n.contactInner{padding:0 18px 18px}\n.contactGrid{display:grid;gap:10px}\n.contactItem{\n  padding:15px;\n  border-radius:20px;\n  border:1px solid rgba(16,24,40,.08);\n  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);\n  box-shadow:\n    0 1px 0 rgba(255,255,255,.94) inset,\n    var(--shadow-1);\n}\n.contactItem b{\n  display:block;\n  font-size:13px;\n  font-weight:800;\n  color:var(--ink);\n}\n.contactItem span{\n  display:block;\n  margin-top:6px;\n  font-size:12.5px;\n  font-weight:600;\n  color:var(--muted);\n}\n\n.mapWrap{\n  margin-top:12px;\n  border-radius:22px;\n  overflow:hidden;\n  border:1px solid rgba(16,24,40,.08);\n  background:#fff;\n  box-shadow:\n    0 1px 0 rgba(255,255,255,.94) inset,\n    0 12px 28px rgba(16,24,40,.08);\n}\n.mapWrap iframe{\n  display:block;\n  width:100%;\n  height:240px;\n  border:0;\n}\n\n.footLinks{\n  margin-top:12px;\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:10px;\n}\n.footLink{\n  min-height:48px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  padding:0 14px;\n  border-radius:16px;\n  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);\n  border:1px solid rgba(16,24,40,.08);\n  box-shadow:\n    0 1px 0 rgba(255,255,255,.92) inset,\n    var(--shadow-1);\n  font-size:13px;\n  font-weight:800;\n  color:var(--ink);\n  transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);\n}\n.footLink:hover{\n  border-color:rgba(0,59,149,.16);\n  box-shadow:\n    0 1px 0 rgba(255,255,255,.94) inset,\n    0 14px 34px rgba(16,24,40,.09);\n}\n.footLink:active{transform:scale(.995)}\n\n.footer{\n  margin-top:14px;\n  text-align:center;\n  font-size:12px;\n  font-weight:700;\n  color:var(--muted);\n  padding-bottom:8px;\n}\n.footer b{color:var(--ink);font-weight:800}\n\n.bottomBar{\n  display:none !important;\n}\n\n.toast{\n  position:fixed;\n  left:50%;\n  bottom:24px;\n  transform:translateX(-50%);\n  z-index:90;\n  display:none;\n  min-width:140px;\n  max-width:calc(100% - 32px);\n  padding:12px 14px;\n  border-radius:999px;\n  background:rgba(16,24,40,.95);\n  color:#fff;\n  font-size:12.5px;\n  font-weight:800;\n  text-align:center;\n  box-shadow:0 18px 34px rgba(0,0,0,.18);\n}\n\n@media (min-width:721px){\n  .contactGrid{grid-template-columns:repeat(3,1fr)}\n  .grid2{\n    grid-template-columns:repeat(3,1fr);\n    gap:14px;\n  }\n\n  #step1{\n    padding:24px 22px 56px;\n  }\n\n  #routeGrid{\n    margin-bottom:14px;\n    padding-bottom:10px;\n  }\n\n  .optionCard{\n    min-height:180px;\n    padding:18px 18px 20px;\n  }\n\n  .optionTop{\n    align-items:flex-start;\n    gap:12px;\n    min-height:88px;\n  }\n\n  .optionSub{\n    max-width:88%;\n  }\n\n  .optionTag{\n    margin-top:auto;\n  }\n\n  #step2 .actions,\n  #step3 .actions{\n    margin-top:16px;\n    padding-bottom:28px;\n  }\n}\n\n@media (max-width:720px){\n  .app{\n    padding:12px 12px 22px;\n  }\n  .topbar{\n    padding:13px 14px;\n    border-radius:22px;\n  }\n  .brand h1{\n    font-size:16px;\n  }\n  .stage{\n    border-radius:26px;\n  }\n  .stageHead{\n    padding:18px 16px 15px;\n  }\n  .stageTitle{\n    font-size:22px;\n  }\n  .stageSub{\n    font-size:13px;\n  }\n  .stepPane{\n    padding:16px;\n  }\n  .grid2{\n    grid-template-columns:1fr;\n    padding-bottom:14px;\n  }\n  #step1{\n    padding-bottom:44px;\n  }\n  #routeGrid{\n    padding-bottom:8px;\n  }\n  .packageCard,\n  .fieldCard{\n    padding:15px;\n  }\n\n  #step2 .actions,\n  #step3 .actions{\n    margin-top:16px;\n    padding-bottom:22px;\n  }\n}\n\n@media (max-width:420px){\n  .stageTitle{font-size:20px}\n}\n\n  @media (max-width:480px){\n  .brand p{\n    font-size:10.9px;\n    margin-top:3px;\n  }\n}\n\n.footer { display: none !important; }\n<\/style>\n\n\n\n<div class=\"app\">\n\n\n\n    <main>\n\n  <section class=\"dieng-hero\">\n    <div class=\"heroInner\">\n      <h2 class=\"heroTitle\">Paket Wisata Dieng dari Jogja, Semarang, Solo, Purwokerto, Wonosobo<\/h2>\n      <p class=\"heroDesc\">\n        Jelajahi keindahan Dataran Tinggi Dieng dengan paket wisata lengkap dari Jogja, Semarang, Solo, Purwokerto, dan Wonosobo. Nikmati sunrise di Bukit Sikunir, Candi Arjuna, Kawah Sikidang, dan destinasi populer lainnya dengan perjalanan nyaman, armada bersih, dan panduan profesional. Pilihan paket fleksibel untuk keluarga maupun rombongan, semua aktivitas dan transportasi diatur agar perjalanan lancar dan menyenangkan.\n      <\/p>\n    <\/div>\n  <\/section>\n\n      <section class=\"stage\" aria-label=\"Form pemilihan paket\">\n        <div class=\"stageHead\">\n          <p class=\"stageKicker\" id=\"stageKicker\">Langkah 1<\/p>\n          <h2 class=\"stageTitle\" id=\"stageTitle\">Pilih Kota Penjemputan<\/h2>\n          <p class=\"stageSub\" id=\"stageSub\">Pilih kota, lalu lanjut ke paket.<\/p>\n          <div class=\"stageMeta\">\n            <div class=\"stepper\" aria-hidden=\"true\">\n              <span class=\"stepDot isActive\"><\/span>\n              <span class=\"stepDot\"><\/span>\n              <span class=\"stepDot\"><\/span>\n            <\/div>\n            <div class=\"stepBadge\" id=\"stepBadge\">1\/3<\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"stageBody\">\n\n          <div class=\"stepPane isActive\" id=\"step1\">\n            <div class=\"stepTopBlock\">\n              <h3 class=\"stepTopTitle\">Kota penjemputan tersedia<\/h3>\n              <p class=\"stepTopSub\">Pilih kota, lalu lanjut ke paket.<\/p>\n            <\/div>\n\n            <div class=\"grid2\" id=\"routeGrid\"><\/div>\n\n            <div class=\"otherCityForm\" id=\"otherCityForm\">\n              <label class=\"otherCityLabel\" for=\"otherCityInput\">Masukkan nama kota<\/label>\n              <input class=\"input\" id=\"otherCityInput\" type=\"text\" autocomplete=\"off\">\n              <div class=\"otherCityErr\" id=\"otherCityErr\">Isi nama kota terlebih dahulu ya.<\/div>\n              <div class=\"otherCityActions\">\n                <button class=\"btn btnPrimary\" id=\"saveOtherCity\" type=\"button\">Lanjut ke Paket<\/button>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <div class=\"stepPane\" id=\"step2\">\n            <div class=\"stepTopBlock\">\n              <h3 class=\"stepTopTitle\">Pilih paket perjalanan<\/h3>\n              <p class=\"stepTopSub\">Pilih paket, lalu isi jumlah peserta.<\/p>\n            <\/div>\n            <div class=\"grid1\" id=\"paketGrid\"><\/div>\n            <div class=\"actions\">\n              <button class=\"btn btnGhost\" id=\"back1\" type=\"button\">Kembali<\/button>\n            <\/div>\n          <\/div>\n\n          <div class=\"stepPane\" id=\"step3\">\n            <div class=\"stepTopBlock\">\n              <h3 class=\"stepTopTitle\">Masukkan jumlah peserta<\/h3>\n              <p class=\"stepTopSub\">Isi jumlah peserta untuk cek harga dan ketersediaan.<\/p>\n            <\/div>\n\n            <div class=\"fieldCard\">\n              <label class=\"label\" for=\"peserta\">Jumlah Peserta<\/label>\n              <input class=\"input\" id=\"peserta\" type=\"number\" inputmode=\"numeric\" min=\"2\">\n              <div class=\"err\" id=\"errPeserta\">Minimal 2 peserta ya.<\/div>\n              <div class=\"hint\" id=\"pesertaHint\">Minimal 2 peserta ya.<\/div>\n            <\/div>\n\n            <div class=\"actions\">\n              <button class=\"btn btnPrimary\" id=\"submitPeserta\" type=\"button\">Cek Harga Sekarang<\/button>\n              <button class=\"btn btnGhost\" id=\"back2\" type=\"button\">Kembali<\/button>\n            <\/div>\n          <\/div>\n\n        <\/div>\n      <\/section>\n\n      <details class=\"detailsCard\" id=\"contactLocation\">\n        <summary class=\"detailsSummary\">\n          <div>\n            <span class=\"detailsKicker\">Info Tambahan<\/span>\n            <span class=\"detailsTitle\">Kontak &#038; Lokasi<\/span>\n            <span class=\"detailsSub\">Instagram, WhatsApp, dan Google Maps<\/span>\n          <\/div>\n          <span class=\"detailsArrow\" aria-hidden=\"true\"><\/span>\n        <\/summary>\n\n        <div class=\"contactInner\">\n          <div class=\"contactGrid\">\n            <a class=\"contactItem\" href=\"https:\/\/www.instagram.com\/paketwisatadieng.wikipedieng\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\n              <b>Instagram<\/b>\n              <span>@paketwisatadieng.wikipedieng<\/span>\n            <\/a>\n\n            <a class=\"contactItem\" href=\"https:\/\/wa.me\/6285200070666\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\n              <b>WhatsApp<\/b>\n              <span>+62 852 0007 0666<\/span>\n            <\/a>\n\n            <a class=\"contactItem\" href=\"https:\/\/maps.app.goo.gl\/XxLzwZqhMTpdG5mS9\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\n              <b>Google Maps<\/b>\n              <span>Buka lokasi<\/span>\n            <\/a>\n          <\/div>\n\n<div class=\"mapWrap\">\n  <iframe\n    src=\"https:\/\/www.google.com\/maps?q=Paket%20wisata%20Dieng%20Wikipedieng%20Tour%20Travel&#038;z=14&#038;output=embed\"\n    loading=\"lazy\"\n    referrerpolicy=\"no-referrer-when-downgrade\"\n    allowfullscreen\n    title=\"Lokasi Paket Wisata Dieng \u2013 Wikipedieng Tour Travel\"\n    style=\"border:0;width:100%;height:420px;\">\n  <\/iframe>\n<\/div>\n        <\/div>\n      <\/details>\n\n      <nav class=\"footLinks\" aria-label=\"Tautan informasi\">\n        <a class=\"footLink\" href=\"\/dieng\/paket-wisata\/1-hari\/\">Trip Dieng 1 Hari<\/a>\n        <a class=\"footLink\" href=\"\/dieng\/paket-wisata\/2-hari\/\">Trip Dieng 2 Hari<\/a>\n        <a class=\"footLink\" href=\"\/dieng\/paket-wisata\/3-hari\/\">Trip Dieng 3 Hari<\/a>\n        <a class=\"footLink\" href=\"\/dieng\/\">Paket Wisata Dieng<\/a>\n      <\/nav>\n    <\/main>\n\n<div class=\"footer\">\n  \u00a9 <span id=\"year\"><\/span> Wikipedieng.com. All rights reserved.\n<\/div>\n  <\/div>\n\n  <div class=\"bottomBar\">\n    <div class=\"bottomBarInner\">\n      <div class=\"bottomMeta\">\n        <small>Status<\/small>\n        <b id=\"bottomStatus\">Pilih kota penjemputan<\/b>\n      <\/div>\n      <button class=\"bottomBtn\" id=\"bottomAction\" type=\"button\">Lanjut<\/button>\n    <\/div>\n  <\/div>\n\n  <div class=\"toast\" id=\"toast\"><\/div>\n\n\n\n<script>\nconst paketData = {\n  \"1\": {\n    durasi: \"1 Hari\",\n    penginapan: \"Tanpa penginapan\",\n    fasilitas: [\n      \"Layanan private trip\",\n      \"Transportasi tour (BBM, parkir, tol)\",\n      \"Tiket masuk destinasi\",\n      \"Makan 2x\",\n      \"Driver dan guide lokal\",\n      \"Air mineral\"\n    ],\n    destinasi: [\n      \"Golden Sunrise Sikunir\",\n      \"Telaga Cebong\",\n      \"Kawah Sikidang\",\n      \"Candi Arjuna\",\n      \"Batu Pandang\",\n      \"Dieng Theater\",\n      \"Pintu Langit\",\n      \"Sentra oleh-oleh\",\n      \"Kuliner Mie Ongklok\"\n    ]\n  },\n  \"2\": {\n    durasi: \"2 Hari 1 Malam\",\n    penginapan: \"Tanpa penginapan\",\n    fasilitas: [\n      \"Layanan private trip\",\n      \"Transportasi tour (BBM, parkir, tol)\",\n      \"Tiket masuk destinasi\",\n      \"Makan 4x\",\n      \"Driver dan guide lokal\",\n      \"Air mineral\"\n    ],\n    destinasi: [\n      \"Golden Sunrise Sikunir\",\n      \"Telaga Cebong\",\n      \"Kawah Sikidang\",\n      \"Candi Arjuna\",\n      \"Batu Pandang\",\n      \"Dieng Theater\",\n      \"Pintu Langit\",\n      \"Telaga Menjer\",\n      \"Kebun Teh Panama\",\n      \"Sentra oleh-oleh\",\n      \"Kuliner Mie Ongklok\"\n    ]\n  },\n  \"3\": {\n    durasi: \"3 Hari 2 Malam\",\n    penginapan: \"Tanpa penginapan\",\n    fasilitas: [\n      \"Layanan private trip\",\n      \"Transportasi tour (BBM, parkir, tol)\",\n      \"Tiket masuk destinasi\",\n      \"Makan 7x\",\n      \"Driver dan guide lokal\",\n      \"Air mineral\"\n    ],\n    destinasi: [\n      \"Golden Sunrise Sikunir\",\n      \"Telaga Cebong\",\n      \"Kawah Sikidang\",\n      \"Candi Arjuna\",\n      \"Batu Pandang\",\n      \"Dieng Theater\",\n      \"Telaga Warna & Pengilon\",\n      \"Pintu Langit\",\n      \"Dieng Water Park\",\n      \"Kahyangan Skyline\",\n      \"Telaga Merdada\",\n      \"Tol Atas Awan\",\n      \"Dieng Park\",\n      \"Sunset Bukit Scooter\",\n      \"Sikarim Waterfall\",\n      \"Telaga Menjer\",\n      \"Kebun Teh Panama\",\n      \"Sentra oleh-oleh\",\n      \"Kuliner Mie Ongklok\"\n    ]\n  }\n};\n\nconst routeCards = [\n  { id:\"dieng-wonosobo\", title:\"Dieng\/Wonosobo\", sub:\"Hotel, homestay, atau terminal area Dieng dan Wonosobo\", key:\"dalam\", tag:\"Area penjemputan\" },\n  { id:\"jogja\", title:\"Jogja\", sub:\"Bandara, stasiun, hotel, atau rumah area Yogyakarta\", key:\"luar\", tag:\"Titik jemput tersedia\" },\n  { id:\"purwokerto\", title:\"Purwokerto\", sub:\"Stasiun, hotel, terminal, atau rumah area Purwokerto\", key:\"luar\", tag:\"Titik jemput tersedia\" },\n  { id:\"semarang\", title:\"Semarang\", sub:\"Bandara, stasiun, hotel, atau rumah area Semarang\", key:\"luar\", tag:\"Titik jemput tersedia\" },\n  { id:\"surakarta\", title:\"Surakarta\", sub:\"Bandara, stasiun, hotel, atau rumah area Surakarta \/ Solo\", key:\"luar\", tag:\"Titik jemput tersedia\" },\n  { id:\"lainnya\", title:\"Kota Lainnya\", sub:\"Masukkan nama kota dan titik jemput Anda\", key:\"luar\", tag:\"Lokasi custom\", isOther:true }\n];\n\nconst paketCards = [\n  { id:\"1\", title:\"One Day Trip\", sub:\"Trip singkat menjelajah spot utama Dieng\", tag:\"1 Hari\" },\n  { id:\"2\", title:\"2 Hari 1 Malam\", sub:\"Durasi favorit untuk menikmati Dieng lebih nyaman\", tag:\"2D1N\" },\n  { id:\"3\", title:\"3 Hari 2 Malam\", sub:\"Agenda perjalanan lebih panjang dan santai\", tag:\"3D2N\" }\n];\n\nconst stepContent = {\n  1: { kicker:\"Langkah 1\", title:\"Pilih Kota Penjemputan\", sub:\"Pilih kota, lalu lanjut ke paket.\" },\n  2: { kicker:\"Langkah 2\", title:\"Pilih Paket Perjalanan\", sub:\"Pilih paket, lalu isi jumlah peserta.\" },\n  3: { kicker:\"Langkah 3\", title:\"Isi Jumlah Peserta\", sub:\"Isi jumlah peserta untuk cek harga dan ketersediaan.\" }\n};\n\n\nconst $ = (id) => document.getElementById(id);\n\nconst state = { step: 1, route: null, paket: null, peserta: null, isSubmitting: false };\n\nfunction toast(msg){\n  const el = $(\"toast\");\n  if(!el) return;\n  el.textContent = msg;\n  el.style.display = \"block\";\n  clearTimeout(toast._timer);\n  toast._timer = setTimeout(() => { el.style.display = \"none\"; }, 1600);\n}\n\nfunction focusSmooth(el){ if(!el) return; try{ el.scrollIntoView({ behavior:\"smooth\", block:\"center\" }); }catch(e){ el.scrollIntoView(); } setTimeout(()=>{ try{ el.focus({ preventScroll:true }); }catch(e){ el.focus(); } },160); }\nfunction scrollStageTop(){ const stage = document.querySelector(\".stage\"); const stageHead = document.querySelector(\".stageHead\"); const target = stageHead||stage; if(!target) return; const top = window.pageYOffset+target.getBoundingClientRect().top-12; try{ window.scrollTo({top,behavior:\"smooth\"}); }catch(e){ window.scrollTo(0,top); } }\nfunction resizeStageBody(){ const body=document.querySelector(\".stageBody\"); const active=document.querySelector(\".stepPane.isActive\"); if(!body||!active) return; requestAnimationFrame(()=>{ body.style.height=active.scrollHeight+\"px\"; }); }\n\nfunction updateHeader(){\n  const current=stepContent[state.step];\n  $(\"stageKicker\").textContent=current.kicker;\n  $(\"stageTitle\").textContent=current.title;\n  $(\"stageSub\").textContent=current.sub;\n  $(\"stepBadge\").textContent=`${state.step}\/3`;\n  document.querySelectorAll(\".stepDot\").forEach((dot,i)=>{ dot.classList.remove(\"isActive\",\"isDone\"); const no=i+1; if(no<state.step) dot.classList.add(\"isDone\"); if(no===state.step) dot.classList.add(\"isActive\"); });\n  updateBottomBar();\n}\n\nfunction updateBottomBar(){\n  const btn=$(\"bottomAction\"), status=$(\"bottomStatus\"); if(!btn||!status) return;\n  if(state.step===1){ status.textContent=state.route?state.route.title:\"Pilih kota penjemputan\"; btn.textContent=\"Lanjut\"; btn.disabled=!state.route||state.isSubmitting; }\n  if(state.step===2){ status.textContent=state.paket?state.paket.title:\"Pilih paket\"; btn.textContent=\"Lanjut\"; btn.disabled=!state.paket||state.isSubmitting; }\n  if(state.step===3){ const val=$(\"peserta\").value.trim(); status.textContent=val?`${val} peserta`:\"Isi jumlah peserta\"; btn.textContent=\"Ke WhatsApp\"; btn.disabled=!val||state.isSubmitting; }\n}\n\nfunction switchStep(nextStep,direction=\"forward\",{scrollTop=false}={}){\n  const panes={1:$(\"step1\"),2:$(\"step2\"),3:$(\"step3\")};\n  const currentPane=panes[state.step], nextPane=panes[nextStep]; if(!currentPane||!nextPane||currentPane===nextPane) return;\n  currentPane.classList.remove(\"isActive\",\"isExitLeft\",\"isExitRight\");\n  nextPane.classList.remove(\"isActive\",\"isExitLeft\",\"isExitRight\");\n  currentPane.classList.add(direction===\"forward\"?\"isExitLeft\":\"isExitRight\");\n  nextPane.classList.add(\"isActive\");\n  state.step=nextStep;\n  updateHeader();\n  setTimeout(()=>{ resizeStageBody(); if(scrollTop) scrollStageTop(); },30);\n}\n\nfunction markSelected(container,activeBtn,selector){ container.querySelectorAll(selector).forEach(card=>{ card.classList.remove(\"isSelected\"); card.setAttribute(\"aria-pressed\",\"false\"); }); activeBtn.classList.add(\"isSelected\"); activeBtn.setAttribute(\"aria-pressed\",\"true\"); }\n\nfunction hideOtherCityForm(){ const form=$(\"otherCityForm\"), input=$(\"otherCityInput\"), err=$(\"otherCityErr\"); if(form) form.classList.remove(\"isShow\"); if(input) input.value=\"\"; if(input) input.classList.remove(\"isErr\"); if(err) err.style.display=\"none\"; }\nfunction showOtherCityForm(){ const form=$(\"otherCityForm\"); if(!form) return; form.classList.add(\"isShow\"); resizeStageBody(); setTimeout(()=>{ resizeStageBody(); focusSmooth($(\"otherCityInput\")); },120); }\nfunction validateOtherCity(){ const input=$(\"otherCityInput\"), err=$(\"otherCityErr\"); if(!input||!err) return false; const value=input.value.trim(); input.classList.remove(\"isErr\"); err.style.display=\"none\"; if(!value){ input.classList.add(\"isErr\"); err.style.display=\"block\"; focusSmooth(input); return false; } state.route={id:\"lainnya\",title:value,sub:\"Kota penjemputan lainnya\",key:\"luar\",custom:true}; return true; }\n\nfunction renderRoutes(){\n  const wrap=$(\"routeGrid\"); if(!wrap) return; wrap.innerHTML=\"\";\n  routeCards.forEach(item=>{\n    const btn=document.createElement(\"button\");\n    btn.type=\"button\"; btn.className=\"optionCard\"; btn.setAttribute(\"aria-pressed\",\"false\");\n    btn.innerHTML=`<div class=\"optionTop\"><div><h3 class=\"optionTitle\">${item.title}<\/h3><p class=\"optionSub\">${item.sub}<\/p><\/div><span class=\"optionCheck\" aria-hidden=\"true\"><\/span><\/div><span class=\"optionTag\">${item.tag}<\/span>`;\n    btn.addEventListener(\"click\",()=>{\n      if(state.isSubmitting) return;\n      markSelected(wrap,btn,\".optionCard\");\n      if(item.isOther){ state.route=null; updateBottomBar(); showOtherCityForm(); toast(\"Masukkan nama kota\"); return; }\n      hideOtherCityForm();\n      state.route={id:item.id,title:item.title,sub:item.sub,key:item.key};\n      updateBottomBar();\n      toast(\"Kota penjemputan dipilih\");\n      setTimeout(()=>switchStep(2,\"forward\",{scrollTop:true}),220);\n    });\n    wrap.appendChild(btn);\n  });\n}\n\nfunction renderPakets(){\n  const wrap=$(\"paketGrid\"); if(!wrap) return; wrap.innerHTML=\"\";\n  paketCards.forEach(item=>{\n    const btn=document.createElement(\"button\");\n    btn.type=\"button\"; btn.className=\"packageCard\"; btn.setAttribute(\"aria-pressed\",\"false\");\n    btn.innerHTML=`<div class=\"packageTop\"><span class=\"packageDay\">${item.tag}<\/span><span class=\"optionCheck\" aria-hidden=\"true\"><\/span><\/div><h3 class=\"packageTitle\">${item.title}<\/h3><p class=\"packageDesc\">${item.sub}<\/p>`;\n    btn.addEventListener(\"click\",()=>{\n      if(state.isSubmitting) return;\n      markSelected(wrap,btn,\".packageCard\");\n      state.paket={id:item.id,title:item.title};\n      updateBottomBar();\n      toast(\"Paket dipilih\");\n      setTimeout(()=>{ switchStep(3,\"forward\",{scrollTop:true}); setTimeout(()=>{ resizeStageBody(); focusSmooth($(\"peserta\")); },260); },220);\n    });\n    wrap.appendChild(btn);\n  });\n}\n\nfunction validatePeserta(){ const input=$(\"peserta\"), err=$(\"errPeserta\"); if(!input||!err) return false; const value=Number(input.value); input.classList.remove(\"isErr\"); err.style.display=\"none\"; if(!Number.isFinite(value)||value<2){ input.classList.add(\"isErr\"); err.style.display=\"block\"; focusSmooth(input); return false; } state.peserta=value; return true; }\nfunction waText(){ return `Halo Kak Nur Khalimah, admin Wikipedieng.com, saya ingin cek harga paket wisata Dieng.\\n\\nKota Penjemputan: ${state.route.title}\\nPaket Wisata: ${state.paket.title}\\nJumlah Peserta: ${state.peserta} orang\\n\\nBoleh minta info harga dan ketersediaannya kak? Terima kasih.`; }\nfunction buildWhatsAppUrl(){ return `https:\/\/wa.me\/6285200070666?text=${encodeURIComponent(waText())}`; }\nfunction submitToWhatsApp(){ if(state.isSubmitting) return; if(!validatePeserta()) return; state.isSubmitting=true; updateBottomBar(); const waUrl=buildWhatsAppUrl(); try{ window.location.href=waUrl; }catch(e){ location.href=waUrl; } setTimeout(()=>{ state.isSubmitting=false; updateBottomBar(); },800); }\n\n\/\/ tracking internal\n(function trackClicks(){\n  const ENDPOINT = \"https:\/\/putratourdieng.com\/wonosobo\/track.php\";\n  const TOKEN = \"dieng5758\";\n\n  function getQuery(){\n    try{\n      const p = new URLSearchParams(location.search);\n      return (p.get(\"q\") || \"\").trim() || \"\";\n    }catch(e){\n      return \"\";\n    }\n  }\n\n  function ping(href){\n    const url = ENDPOINT + \"?t=\" + encodeURIComponent(TOKEN) + \"&u=\" + encodeURIComponent(href) + \"&q=\" + encodeURIComponent(getQuery()) + \"&_=\" + Date.now();\n    const img = new Image();\n    img.referrerPolicy = \"no-referrer-when-downgrade\";\n    img.src = url;\n  }\n\n  document.addEventListener(\"click\", function(e){\n    const a = e.target && e.target.closest ? e.target.closest(\"a\") : null;\n    if(!a) return;\n    const href = a.href || a.getAttribute(\"href\");\n    if(!href || href === \"#\") return;\n    ping(href);\n  }, true);\n})();\n\n$(\"saveOtherCity\").addEventListener(\"click\",()=>{ if(state.isSubmitting) return; if(!validateOtherCity()) return; updateBottomBar(); toast(\"Kota penjemputan dipilih\"); setTimeout(()=>switchStep(2,\"forward\",{scrollTop:true}),220); });\n$(\"otherCityInput\").addEventListener(\"input\",()=>{ $(\"otherCityInput\").classList.remove(\"isErr\"); $(\"otherCityErr\").style.display=\"none\"; resizeStageBody(); });\n$(\"otherCityInput\").addEventListener(\"keydown\",(e)=>{ if(e.key===\"Enter\"){ e.preventDefault(); if(!validateOtherCity()) return; updateBottomBar(); toast(\"Kota penjemputan dipilih\"); setTimeout(()=>switchStep(2,\"forward\",{scrollTop:true}),220); } });\n$(\"submitPeserta\").addEventListener(\"click\",()=>{ submitToWhatsApp(); });\n$(\"back1\").addEventListener(\"click\",()=>{ if(state.isSubmitting) return; switchStep(1,\"back\",{scrollTop:true}); });\n$(\"back2\").addEventListener(\"click\",()=>{ if(state.isSubmitting) return; switchStep(2,\"back\",{scrollTop:true}); });\n$(\"peserta\").addEventListener(\"input\",()=>{ $(\"peserta\").classList.remove(\"isErr\"); $(\"errPeserta\").style.display=\"none\"; updateBottomBar(); resizeStageBody(); });\n$(\"peserta\").addEventListener(\"keydown\",(e)=>{ if(e.key===\"Enter\"){ e.preventDefault(); submitToWhatsApp(); } });\nif($(\"bottomAction\")){ $(\"bottomAction\").addEventListener(\"click\",()=>{ if(state.isSubmitting) return; if(state.step===1){ if(state.route) switchStep(2,\"forward\",{scrollTop:true}); return; } if(state.step===2){ if(state.paket) switchStep(3,\"forward\",{scrollTop:true}); return; } if(state.step===3){ submitToWhatsApp(); } }); }\n\nrenderRoutes();\nrenderPakets();\n$(\"year\").textContent=new Date().getFullYear();\nupdateHeader();\nsetTimeout(()=>{ resizeStageBody(); },60);\nwindow.addEventListener(\"resize\",resizeStageBody);\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Paket Wisata Dieng dari Jogja, Semarang, Solo, Purwokerto, Wonosobo Jelajahi keindahan Dataran Tinggi Dieng dengan paket wisata lengkap dari Jogja, Semarang, Solo, Purwokerto, dan Wonosobo. Nikmati sunrise di Bukit Sikunir, Candi Arjuna, Kawah Sikidang, dan destinasi populer lainnya dengan perjalanan nyaman, armada bersih, dan panduan profesional. Pilihan paket fleksibel untuk keluarga maupun rombongan, semua aktivitas &#8230; <a title=\"Paket Wisata Dieng dari Jogja, Semarang, Solo, Purwokerto, Wonosobo\" class=\"read-more\" href=\"https:\/\/www.wikipedieng.com\/dieng\/paket-wisata\/jogja-semarang-solo-purwokerto\/\" aria-label=\"Read more about Paket Wisata Dieng dari Jogja, Semarang, Solo, Purwokerto, Wonosobo\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3909,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6006","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/www.wikipedieng.com\/dieng\/wp-json\/wp\/v2\/pages\/6006","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikipedieng.com\/dieng\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.wikipedieng.com\/dieng\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikipedieng.com\/dieng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikipedieng.com\/dieng\/wp-json\/wp\/v2\/comments?post=6006"}],"version-history":[{"count":35,"href":"https:\/\/www.wikipedieng.com\/dieng\/wp-json\/wp\/v2\/pages\/6006\/revisions"}],"predecessor-version":[{"id":6042,"href":"https:\/\/www.wikipedieng.com\/dieng\/wp-json\/wp\/v2\/pages\/6006\/revisions\/6042"}],"up":[{"embeddable":true,"href":"https:\/\/www.wikipedieng.com\/dieng\/wp-json\/wp\/v2\/pages\/3909"}],"wp:attachment":[{"href":"https:\/\/www.wikipedieng.com\/dieng\/wp-json\/wp\/v2\/media?parent=6006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}