/* Aman Tour — Umroh 9 Hari Emirates · landing page
   Tata letak & perilaku mengikuti referensi ermtour (rebuild ORA Travel): header pojok, tirai pembuka,
   featureShow, menu sticky, panel info, blok "about", kartu incentive, form formStyle1, footer.
   Warna diambil dari pamflet: emas (utama), navy (gelap), hijau Nabawi, merah harga. */

:root {
  --gold: #b0802a;          /* pengganti --blue referensi */
  --gold-d: #85601a;
  --gold-l: #d7b467;
  --gold-rgb: 176, 128, 42;
  --gold-pale: #f6eedc;
  --navy: #15223d;
  --green: #2e7a58;
  --red: #c0262f;
  --paper: #f8f6f1;
  --sand: #f5f4f0;
  --line: #e5e5e5;
  --theme: var(--gold);
  --theme-rgb: var(--gold-rgb);
  --f-han: 'Source Sans 3', Arial, 'Helvetica Neue', sans-serif;
  --f-body: Arial, 'Source Sans 3', Helvetica, sans-serif;
  --f-yan: 'Yantramanav', Arial, sans-serif;
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in: cubic-bezier(0.47, 0, 0.745, 0.715);
  --ease-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-expo: cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* ------------------------------------------------------------------ reset (sama dengan referensi) */
*, *::before, *::after { box-sizing: content-box; }
html, body, div, span, h1, h2, h3, h4, p, a, img, ol, ul, li, form, fieldset, legend, label, table, tr, td, th, article, footer, header, nav, section, main, figure, figcaption, small, em, b, strong, button, input, textarea, pre { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
article, footer, header, nav, section, main, figure { display: block; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
img, svg { vertical-align: middle; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, button { -webkit-appearance: none; appearance: none; border-radius: 0; font-family: inherit; }
a { color: inherit; text-decoration: none; outline: none; }
a:hover { color: #000; }
[hidden] { display: none !important; }
::placeholder { color: #999; opacity: 1; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
h1, h2, h3 { font-weight: inherit; }
b, strong { font-weight: 600; }

html { scroll-behavior: smooth; scroll-padding-top: 100px; }
html, body { color: #000; font-family: var(--f-body); font-size: 13px; line-height: 22px; -webkit-text-size-adjust: none; background: #ddd; }
#wrapper { position: relative; width: 100%; margin: 0 auto; background: #fff; overflow-x: hidden; overflow-x: clip; }
section { position: relative; }
.clearfix::after { content: ""; display: table; clear: both; }
.am-logo { display: block; width: 50px; height: 37px; }

/* ------------------------------------------------------------------ header (pojok logo + "menu.") */
.hdr { position: fixed; top: -90px; left: 0; width: 100%; height: 90px; z-index: 20; transition: all 400ms var(--ease-out); }
.hdr.open { top: 0; }
.hdr-nav { position: relative; width: 100%; height: 90px; background: var(--gold); z-index: 6; }
.hdr-nav ul { max-width: 900px; margin: 0 auto; text-align: center; font-size: 0; }
.hdr-nav li { display: inline-block; width: 13.5%; font-size: 17px; color: #fff; }
.hdr-nav li a { display: block; line-height: 90px; color: #fff; font-family: var(--f-han); font-weight: 200; transition: opacity 200ms; }
.hdr-nav li a:hover { opacity: .7; color: #fff; }
.hdr-nav li a.nav-cta { font-weight: 600; }
.hdr-logo { position: relative; left: 0; display: table; width: 80px; height: 90px; padding: 0 7px 0 0; margin-bottom: -90px; text-align: right; background: var(--gold); box-sizing: border-box; border-radius: 0 0 8px 0; z-index: 6; transition: all 600ms linear; }
.hdr-logo::after { content: ""; position: absolute; top: 0; right: -78px; width: 0; height: 0; border-style: solid; border-width: 88px 80px 0 0; border-color: var(--gold) transparent transparent transparent; }
.hdr-logo a { display: table-cell; vertical-align: middle; color: #fff; }
.hdr-logo .am-logo { margin-left: auto; }
.hdr-menu { position: fixed; top: 0; left: 85px; width: 220px; height: 75px; padding: 25px 0 0 75px; box-sizing: border-box; z-index: 7; transition: all 900ms 600ms linear; }
.hdr-menu::before { content: ""; position: absolute; inset: 0; background: rgba(34, 34, 34, .5); clip-path: polygon(70px 0, 215px 0, 150px 75px, 0 75px); z-index: -1; transition: background 300ms; }
.hdr-menu > button { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; }
.hdr-menu .hm-text { padding: 0 0 0 24px; color: #fff; transition: all 200ms 500ms var(--ease-out); }
.hdr-menu:hover .hm-text { padding-left: 30px; transition: all 300ms var(--ease-out); }
.hdr-menu .hm-line { position: absolute; left: 70px; top: 50%; margin-top: -3px; }
.hdr-menu .hm-line > div, .hdr-menu .hm-line > div::before, .hdr-menu .hm-line > div::after { position: relative; left: 0; width: 18px; height: 2px; background: #fff; }
.hdr-menu .hm-line > div::before, .hdr-menu .hm-line > div::after { content: ""; position: absolute; }
.hdr-menu .hm-line > div { animation: hm1Out 300ms linear forwards; }
.hdr-menu .hm-line > div::after { top: -6px; animation: hm2Out 300ms linear forwards; }
.hdr-menu .hm-line > div::before { bottom: -6px; animation: hm3Out 300ms linear forwards; }
.hdr-menu:hover .hm-line > div { animation: hm1 300ms 300ms linear forwards; }
.hdr-menu:hover .hm-line > div::after { animation: hm2 300ms 300ms linear forwards; }
.hdr-menu:hover .hm-line > div::before { animation: hm3 300ms 300ms linear forwards; }
@keyframes hm1 { 0%, 55% { width: 18px; left: 0; } 100% { width: 28px; left: -5px; } }
@keyframes hm1Out { 0% { width: 28px; left: -5px; } 45%, 100% { width: 18px; left: 0; } }
@keyframes hm2 { 0% { top: -6px; width: 18px; } 45%, 55% { top: -11px; width: 18px; } 100% { top: -11px; width: 28px; } }
@keyframes hm2Out { 0% { top: -11px; width: 28px; } 45%, 55% { top: -11px; width: 18px; } 100% { top: -6px; width: 18px; } }
@keyframes hm3 { 0% { bottom: -6px; width: 18px; } 45%, 55% { bottom: -11px; width: 18px; } 100% { bottom: -11px; width: 28px; } }
@keyframes hm3Out { 0% { bottom: -11px; width: 28px; } 45%, 55% { bottom: -11px; width: 18px; } 100% { bottom: -6px; width: 18px; } }
.hdr-menu.hide { opacity: 0; visibility: hidden; transition: opacity 400ms, visibility 400ms; }
.hdr.open ~ .hdr-menu, .hdr.open .hdr-menu::before { background: none; }

/* tab WhatsApp di bawah logo (pengganti tab "Explore") */
.trip-tab { position: fixed; top: 90px; left: 0; width: 60px; height: 70px; z-index: 13; transition: all 400ms 1500ms linear; }
.trip-tab .tt-btn { position: absolute; top: 0; left: 0; width: 10px; height: 70px; margin: 0 0 0 -10px; background: var(--paper); z-index: 1; transition: all 600ms var(--ease-in); }
.trip-tab .tt-btn::after { content: ""; position: absolute; top: 0; right: -60px; width: 0; height: 0; border-style: solid; border-width: 70px 60px 0 0; border-color: var(--paper) transparent transparent transparent; }
.trip-tab .tt-btn a { position: absolute; top: 9px; left: 15px; width: 20px; height: 20px; color: var(--green); z-index: 2; }
.trip-tab svg { width: 20px; height: 20px; }
.trip-tab:hover .tt-btn, .trip-tab.open .tt-btn { left: -80px; transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1); }
.trip-tab .tt-label { position: absolute; top: 0; left: -150%; width: 110px; height: 38px; padding: 0 10px 0 0; line-height: 38px; text-align: right; background: var(--paper); box-sizing: border-box; transition: all 600ms var(--ease-in); }
.trip-tab .tt-label::after { content: ""; position: absolute; top: 0; right: -20px; width: 0; height: 0; border-style: solid; border-width: 19px 0 19px 20px; border-color: transparent transparent transparent var(--paper); }
.trip-tab:hover .tt-label, .trip-tab.open .tt-label { left: 0; transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1); }
.trip-tab .tt-label a { display: block; font-size: 14px; font-family: var(--f-han); font-weight: 300; color: #000; white-space: nowrap; }
.trip-tab .tt-label svg { color: var(--green); margin-left: 3px; margin-top: -3px; }

/* chrome meluncur masuk setelah tirai */
.home-anim .ftr-more { right: -160px; }
.home-anim .hdr-logo { left: -160px; }
.home-anim ~ .hdr-menu, .home-anim .hdr-menu { left: -245px; }
.home-anim .trip-tab { left: -60px; }
.home-anim .planMaxBox { opacity: 0; transform: translateY(-20px); }

/* pin "Seat terbatas — Cek Seat" (pengganti "Schedule — Daily plan GO!") */
.planMaxBox { position: fixed; top: 32px; right: 32px; width: 192px; height: 60px; padding: 6px 0 0 65px; box-sizing: border-box; background: #fff; border: 1px solid #d8d2c4; border-radius: 4px 0 4px 4px; z-index: 9; line-height: 22px; transition: opacity 300ms, transform 600ms var(--ease-out), visibility 300ms; }
.planMaxBox::after { content: ""; position: absolute; top: -1px; right: -1px; border-style: solid; border-width: 0 18px 18px 0; border-color: transparent #fff #e2dccd transparent; }
.planMaxBox > a { position: absolute; inset: 0; z-index: 3; }
.planMaxBox .pm-ic { position: absolute; top: 9px; left: 9px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--gold); color: #fff; border-radius: 2px; transition: background 200ms; }
.planMaxBox .pm-ic svg { width: 22px; height: 22px; }
.planMaxBox .subTitle { font: 200 18px/22px var(--f-han); color: var(--gold); }
.planMaxBox .mainTitle { font: 400 18px/22px var(--f-han); color: #000; }
.planMaxBox .mainTitle span { color: var(--gold); }
.planMaxBox:hover .pm-ic { background: var(--gold-d); }
.planMaxBox.hide { opacity: 0; visibility: hidden; }

/* ------------------------------------------------------------------ hero (bannerBox) */
.introduceBox { margin: 0 auto; padding: 0; }
.bannerBox { position: relative; width: 100%; height: calc(100vh + 50px); min-height: 650px; background: #4a4436 url(../media/hero-kaaba.webp) center / cover no-repeat; overflow: hidden; }
.heroVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1; opacity: 0; transition: opacity 800ms linear; }
.heroVideo.on { opacity: 1; }
.vidToggle { position: absolute; right: 40px; bottom: 62px; z-index: 5; width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%; opacity: .75; transition: opacity 200ms, background 200ms; }
.vidToggle:hover { opacity: 1; background: rgba(255, 255, 255, .15); }
.vidToggle i, .vidToggle i::after { position: absolute; top: 10px; width: 3px; height: 12px; background: #fff; }
.vidToggle i { left: 12px; }
.vidToggle i::after { content: ""; top: 0; left: 6px; }
.vidToggle.paused i { left: 13px; width: 0; height: 0; background: none; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; }
.vidToggle.paused i::after { display: none; }
.bannerTitle { position: absolute; left: 0; right: 0; bottom: 50px; z-index: 4; }
.bannerTitle .seqTitle { position: absolute; bottom: 110px; left: 20%; right: 20%; text-align: center; color: #fff; z-index: 3; }
.seqTitle .titleBox { position: relative; display: inline-block; padding: 0 30px 22px; }
.seqTitle .titleBox::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: 0; height: 5px; margin: 0 auto; background: #fff; transition: width 500ms 900ms var(--ease-out); }
.ready .seqTitle .titleBox::after { width: 100%; }
.seqTitle .subTitle { position: absolute; top: -32px; left: 30px; font: 400 16px/22px var(--f-han); white-space: nowrap; }
.seqTitle .subTitle i { display: inline-block; width: 5px; height: 5px; margin: 0 8px; border-radius: 50%; background: var(--gold-l); vertical-align: middle; }
.seqTitle .mainTitle { font: 200 40px/46px var(--f-han); text-align: left; }
.seqTitle .mainTitle span { display: block; max-width: 760px; }
.seqTitle .mainTitle b { font-weight: 400; color: #fff; white-space: nowrap; }
.heroLead { max-width: 560px; margin: 22px auto 0; font: 300 16px/26px var(--f-han); text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.heroBtn { margin: 22px 0 0; font-size: 0; }
.heroBtn a { display: inline-block; vertical-align: middle; height: 52px; margin: 0 5px; padding: 0 30px; font: 600 16px/52px var(--f-han); color: #fff; transition: background-color 200ms var(--ease-in), color 200ms; }
.heroBtn .hb-main { background: rgba(var(--gold-rgb), 1); }
.heroBtn .hb-main:hover { color: #fff; background: rgba(var(--gold-rgb), .85); }
.heroBtn .hb-sub { font-weight: 300; line-height: 48px; border: 2px solid #fff; }
.heroBtn .hb-sub:hover { color: #000; background: #fff; }
.bannerTitle .seqNews { position: absolute; height: 10px; bottom: 65px; left: 40px; right: 40px; color: #fff; font-family: var(--f-han); font-weight: 200; z-index: 3; }
.seqNews .seqLine { position: absolute; bottom: 0; left: 150px; right: 130px; height: 1px; background: #fff; opacity: .5; }
.seqNews .natureBox { position: absolute; top: -13px; left: 0; font-size: 24px; line-height: 30px; font-weight: 300; }
.natureBox .temperture { position: relative; display: inline-block; padding: 0 10px 0 0; vertical-align: bottom; }
.natureBox .temperture::after { content: ""; position: absolute; top: 4px; right: 0; bottom: 2px; width: 1px; background: rgba(255, 255, 255, .5); }
.natureBox .weather { position: relative; top: -3px; display: inline-block; padding: 0 0 0 8px; vertical-align: bottom; }
.natureBox .weather svg { width: 24px; height: 24px; }
.natureBox .capital { margin: -2px 0 0; font: 400 13px/16px var(--f-han); }
.seqNews .timeBox { position: absolute; top: -13px; right: 0; text-align: right; font-size: 24px; line-height: 30px; font-weight: 300; }
.seqNews .timeBox small { display: block; margin: -2px 0 0; font: 400 13px/16px var(--f-han); }
.trustLine { position: absolute; top: 20px; left: 150px; right: 130px; text-align: center; font: 400 14px/20px var(--f-han); }
.trustLine li { display: inline-block; margin: 0 14px; white-space: nowrap; }
.trustLine svg { width: 15px; height: 15px; margin: -3px 6px 0 0; color: var(--gold-l); }
.seqMask { position: absolute; bottom: 0; left: 0; right: 0; height: 80%; background: linear-gradient(rgba(10, 14, 24, 0), rgba(10, 14, 24, .42) 38%, rgba(10, 14, 24, .78)); z-index: 3; pointer-events: none; }
.seqTitle .mainTitle, .seqTitle .subTitle { text-shadow: 0 1px 12px rgba(0, 0, 0, .4); }
.bannerBox::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 180px; background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)); z-index: 3; pointer-events: none; }

/* tirai emas + huruf "AYO" (pengganti "GO") */
.seqStartBg { position: absolute; inset: 0; overflow: hidden; background-color: var(--gold); z-index: 6; }
.seqStartBg.open { bottom: 100%; opacity: .8; transition: bottom 600ms 1500ms linear, opacity 600ms 1500ms linear; }
/* logo: lengkung digambar, kubus Ka'bah naik, tulisan muncul (pengganti huruf "GO") */
.ldLogo { position: absolute; top: 50%; left: 50%; width: 250px; margin: -118px 0 0 -125px; color: #fff; }
.ldLogo svg { display: block; width: 100%; height: auto; overflow: visible; }
.ldLogo .ll-arch { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.ldLogo .ll-cube { fill: currentColor; opacity: 0; transform: translateY(14px); }
.ldLogo .ll-t { font: 300 30px var(--f-yan); letter-spacing: 9px; fill: currentColor; opacity: 0; }
.ldLogo .ll-s { font: 400 9.5px var(--f-han); letter-spacing: 3px; fill: rgba(255, 255, 255, .8); opacity: 0; }
.seqStartBg.open .ll-arch { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 900ms cubic-bezier(0.65, 0, 0.35, 1), opacity 120ms linear; }
.seqStartBg.open .ll-cube { opacity: 1; transform: none; transition: all 450ms 550ms var(--ease-out); }
.seqStartBg.open .ll-c1 { transition-delay: 700ms; }
.seqStartBg.open .ll-t, .seqStartBg.open .ll-s { opacity: 1; transition: opacity 500ms 850ms linear; }
.seqStartBg.open .ldLogo { opacity: 0; transform: translateY(-30px); transition: opacity 400ms 1400ms linear, transform 600ms 1400ms var(--ease-in); }

/* ------------------------------------------------------------------ feature blocks */
.featureShow { position: relative; margin-top: -50px; background: var(--sand); }
.featureShowBox { display: table; position: relative; width: 80%; max-width: 1020px; margin: 0 auto; text-align: center; z-index: 5; }
.featureShowBox .photo, .featureShowBox .featureShowBox_content { width: 50%; }
.featureShowBox .photo { position: relative; left: 25%; float: left; padding: 0 0 50%; background: #f8f8f8; }
.featureShowBox .photo div { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; }
.featureShowBox .featureShowBox_content { position: relative; right: 25%; float: right; padding: 0 0 50%; background: #fff; z-index: 1; }
.featureShow.element .photo { left: 0; transition: all 400ms var(--ease-in); }
.featureShow.element .photo div { opacity: 1; transition: all 600ms 600ms linear; }
.featureShow.element .featureShowBox_content { right: 0; transition: all 400ms var(--ease-in); }
.featureShowBox_content .contentWrap { width: 90%; margin: 0 auto; }
.featureShowBox_content .contentTitle { position: absolute; top: 50%; width: 90%; margin-top: -120px; font-family: var(--f-han); font-weight: 200; }
.contentTitle .mainTitle { display: block; color: #000; font-size: 32px; line-height: 36px; }
.contentTitle .subTitle { display: block; color: #a6a6a6; font-size: 36px; line-height: 36px; padding-top: 5px; }
.featureShowBox_content .contentText { position: absolute; bottom: 80px; width: 90%; color: #717171; text-align: left; font: 400 14px/23px var(--f-han); }
.featureShowBox_content .contentText b { color: #222; font-weight: 600; }
.featureShowBox_content .contentBtn { position: absolute; left: 50%; bottom: 30px; width: 140px; margin: 0 0 0 -70px; }
.contentBtn a { display: block; font: 600 13px/34px var(--f-han); text-align: center; color: #fff; background: rgba(21, 34, 61, 1); transition: background-color 200ms var(--ease-in); }
.contentBtn a:hover { color: #fff; background: rgba(21, 34, 61, .8); }
.featureShowPhoto { position: relative; width: 100%; margin-top: -50px; padding-bottom: 46%; background-size: cover; background-attachment: fixed; background-position: center; z-index: 1; }
.featureShowPhoto::before, .featureShowPhoto::after { content: ""; position: absolute; left: 0; right: 0; height: 120px; z-index: 3; }
.featureShowPhoto::before { top: 0; background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)); }
.featureShowPhoto::after { bottom: 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .2)); }
.featureShowPhoto_slogan { position: absolute; top: 50%; left: 10%; margin: -50px 0 0; color: #fff; font: 200 42px/50px var(--f-han); z-index: 4; text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }

/* ------------------------------------------------------------------ menu sticky (introduceMenu) */
.introduceInfo { width: 100%; margin: 0 auto; background: #fff; scroll-margin-top: 0; }
.introduceMenu { position: relative; height: 90px; padding: 0 0 10px; margin: 0 auto; background: #fff; }
.introduceMenu.introduceMenuFixed { position: fixed; top: 0; left: 0; right: 0; z-index: 11; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.introduceMenu_Wrap { position: absolute; left: 300px; right: 20px; height: 90px; margin: auto; }
.introduceMenu_Wrap .menuPush, .introduceMenu_Wrap .introMenu { display: inline-block; vertical-align: middle; }
.introduceMenu_Wrap .menuPush { position: relative; width: 44%; max-width: 490px; min-width: 440px; height: 90px; color: #fff; background: var(--theme); }
.menuPush::before, .menuPush::after { content: ""; position: absolute; top: 0; width: 0; height: 0; border-style: solid; }
.menuPush::before { left: -80px; border-width: 0 0 90px 80px; border-color: transparent transparent var(--theme) transparent; }
.menuPush::after { right: -80px; border-width: 90px 80px 0 0; border-color: var(--theme) transparent transparent transparent; }
.menuPushBox { display: table; height: 90px; }
.menuPush .push_tourname, .menuPush .push_price { display: table-cell; vertical-align: middle; font-family: var(--f-han); font-weight: 200; }
.menuPush .push_tourname { position: relative; padding: 18px 40px 0 20px; font-size: 21px; line-height: 26px; white-space: nowrap; }
.menuPush .push_tourname .tn { display: inline-block; }
.menuPush .push_tourname a { position: absolute; inset: 0; z-index: 9; }
.menuPush .push_tourname samp { position: absolute; top: 0; left: 20px; padding: 0 10px; font: 400 12px/18px var(--f-han); color: var(--theme); background: #fff; border-radius: 0 0 4px 4px; white-space: nowrap; }
.menuPush .push_price { position: relative; min-width: 150px; padding: 0 0 5px 34px; font-size: 17px; line-height: 22px; color: #fff; white-space: nowrap; }
.menuPush .push_price::after { content: ""; position: absolute; left: 0; top: 18px; bottom: 16px; width: 1px; background: rgba(0, 0, 0, .2); }
.menuPush .nowprice { font-size: 12px; color: #fff; margin: 0 0 -2px; font-weight: 400; }
.menuPush .price { font-size: 19px; font-weight: 600; }
.introduceMenu_Wrap .introMenu { float: right; margin: 15px 0 0; background: #fff; }
.introMenu ul, .introMenu .share { display: table-cell; vertical-align: middle; }
.introMenu ul li { display: inline-block; margin: 20px 16px; }
.introMenu ul li a { color: #6c6c6c; font: 300 15px/22px var(--f-han); transition: color 200ms; }
.introMenu ul li a:hover, .introMenu ul li.on a { color: var(--theme); }
.introMenu .share { padding: 0 0 0 16px; }
.introMenu .menuCta { display: block; padding: 0 20px; color: #fff; background: var(--gold); font: 600 14px/40px var(--f-han); white-space: nowrap; transition: background 200ms; }
.introMenu .menuCta:hover { color: #fff; background: var(--gold-d); }

/* ------------------------------------------------------------------ ringkasan / sorotan / tab detail */
.introduceInfoBox { padding-top: 150px; margin: 0 auto; background: #fff; }
.introduce_content { width: 80%; max-width: 990px; margin: 0 auto; }
.localInfo { position: relative; z-index: 3; width: 465px; float: left; }
.localinfo_container_title, .tourexplain_title { position: relative; min-height: 55px; }
.localinfo_container_title::before { content: ""; position: absolute; top: 0; left: 40px; width: 1px; height: 100px; background: #000; z-index: 2; }
.localinfo_container_title .ic, .tourexplain_title svg { width: 18px; height: 18px; color: var(--gold); vertical-align: middle; }
.localinfo_container_title .titleText, .tourexplain_title .titleText { display: inline; padding: 0 0 0 30px; font: 300 18px/22px var(--f-han); vertical-align: middle; }
.localinfo_container { position: relative; min-height: 500px; padding: 0 0 110px; color: #fff; background: var(--gold); }
.localinfo_container_useful { font-size: 14px; padding: 25px 50px; }
.localinfo_container ul { width: 90%; margin: 30px auto; text-align: center; }
.localinfo_container ul::after, .moreInfo_content ul::after { content: ""; display: table; clear: both; }
.localinfo_container li { float: left; width: 33.3%; padding: 30px 0; font-family: var(--f-han); font-weight: 300; }
.localinfo_container .title, .moreInfo_content li .title { height: 20px; overflow: hidden; margin: 0 0 10px; font-size: 14px; line-height: 20px; }
.localinfo_container .icon, .moreInfo_content li .icon { height: 40px; overflow: hidden; margin: 0 0 10px; display: flex; align-items: center; justify-content: center; }
.localinfo_container .icon svg { width: 34px; height: 34px; color: #fff; }
.localinfo_container .text, .moreInfo_content li .text { position: relative; padding: 10px 0 0; line-height: 22px; }
.localinfo_container .text { font-size: 15px; }
.localinfo_container .text strong { font-weight: 600; }
.localinfo_container .text::after, .moreInfo_content li .text::after { content: ""; position: absolute; top: 0; left: 50%; width: 80px; height: 1px; margin: 0 0 0 -40px; background: #fff; }
.moreInfo_content li .text::after { background: #aeaeae; }
.localinfo_logo { position: absolute; bottom: 40px; left: 0; width: 100%; color: #fff; }
.localinfo_logo .am-logo { width: 56px; height: 41px; margin: 0 auto; }
.intro_tourexplain { position: relative; width: 45%; float: right; min-height: 500px; margin: 80px auto 0 5%; padding: 0 0 60px; }
.tourexplain_title { margin: 0 0 20px; min-height: 0; }
.tourexplain_title .titleText::before { content: ""; position: absolute; bottom: -6px; left: 40px; width: 1px; height: 40px; background: #000; }
.intro_tourexplain .paragraph { color: #717171; padding: 20px 0; font: 400 14px/23px var(--f-han); }
.intro_tourexplain .paragraph b { color: #222; font-weight: 600; }
.intro_tourexplain .desc { padding: 30px 0 0; font-size: 12px; line-height: 20px; color: #a5a5a5; }
.intro_tourexplain .desc a { color: var(--gold); border-bottom: 1px solid currentColor; }
.intro_moreInfo { position: relative; top: -60px; clear: both; width: 100%; display: block; text-align: right; margin: 0 auto 10px; }
.linkContent_wrap { position: relative; display: inline-block; padding: 5px; background: #f2f2f2; text-align: left; }
.moreInfo_content { width: 480px; padding: 0 20px 20px; margin: 0 0 0 60px; text-align: center; }
.moreInfo_title { color: #717171; font: 300 15px/50px var(--f-han); text-align: left; border-bottom: 1px solid #d9d9d9; }
.tabsMenu, .tabBox { display: none; }
.tabsMenu.open, .tabBox.open { display: block; }
.moreInfo_content ul { padding: 20px 0 0; }
.moreInfo_content li { position: relative; float: left; width: 33.3%; padding: 20px 0; color: var(--gold); font: 300 14px/22px var(--f-han); }
.moreInfo_content li > button { position: absolute; inset: 0; width: 100%; z-index: 9; }
.moreInfo_content li:hover::before { content: ""; position: absolute; top: 10px; right: 25px; bottom: 10px; left: 25px; border: 2px solid #d0d0d0; background: rgba(255, 255, 255, .5); }
.moreInfo_content li > div { position: relative; z-index: 1; }
.moreInfo_content li .text { color: #555; }
.moreInfo_content li .icon svg { width: 30px; height: 30px; color: var(--gold); }
.tabBoxTitle { position: relative; color: #717171; line-height: 50px; text-align: left; border-bottom: 1px solid #d9d9d9; }
.tabBoxTitle > svg { width: 22px; height: 22px; color: var(--gold); vertical-align: middle; }
.tabBoxTitle .moreInfo_T { position: relative; padding: 0 0 0 30px; color: #000; font: 600 15px/50px var(--f-han); vertical-align: middle; }
.tabBoxTitle .moreInfo_T::before { content: ""; position: absolute; top: -5px; bottom: -5px; left: 15px; width: 1px; background: #000; }
.tabBoxTitle .close { position: absolute; top: 15px; right: 10px; width: 20px; height: 20px; color: #000; }
.tabBoxTitle .close svg { width: 16px; height: 16px; display: block; margin: auto; }
.tabBoxContent { padding: 20px 0; color: #717171; font: 400 14px/23px var(--f-han); text-align: left; }
.tabBoxContent .noticeTitle { color: var(--gold); font-size: 18px; font-weight: 400; padding: 10px 0 15px; }
.tabBoxContent .mainBox p { padding: 0; }
.flight { width: 100%; margin: 0 0 16px; border-collapse: collapse; background: #fff; font-size: 13px; line-height: 16px; text-align: center; color: #000; }
.flight th { padding: 8px 2px; color: #fff; background: var(--gold); font-weight: 600; }
.flight td { padding: 8px 2px; border: 1px solid var(--gold); }
.visaTitle_content { position: relative; width: 84%; margin: 80px auto 0; padding: 8%; color: #fff; background: var(--gold); font: 300 14px/24px var(--f-han); }
.visaTitle_content .download { position: absolute; top: -60px; right: 20px; width: 116px; height: 116px; color: #000; font-size: 15px; text-align: center; line-height: 50px; background: #f8f8f8; border: 1px solid #d7d7d7; }
.visaTitle_content .download > a { position: absolute; inset: 0; z-index: 1; }
.visaTitle_content .downloadImg { position: relative; height: 60px; display: flex; align-items: center; justify-content: center; }
.visaTitle_content .downloadImg svg { width: 32px; height: 32px; color: var(--green); }
.visaTitle_content .downloadImg::after { content: ""; position: absolute; bottom: 0; left: 15%; right: 15%; border-bottom: 1px solid #d7d7d7; }
.visaTitle_content .downloadText { line-height: 54px; }
.visaTitle_content .download:hover { background: #fff; }
/* mobile: tab tampil sebagai modal */
.linkContent_wrap.openMobile .tabBox { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); z-index: 99; }
.linkContent_wrap.openMobile .tabBox.open { display: flex; }
.linkContent_wrap.openMobile .tabBox .conBox { position: relative; background: #f2f2f2; margin: 10px; max-height: 80vh; overflow: auto; overflow-x: hidden; }
.linkContent_wrap.openMobile .tabBoxTitle { margin: 0 20px; }
.linkContent_wrap.openMobile .tabBoxContent { padding: 20px; }
.linkContent_wrap.openMobile .visaTitle_content { padding: 14% 8% 8%; }

/* ------------------------------------------------------------------ judul seksi (gaya "WHAT WE DO NOW!") */
.secHead { max-width: 1080px; margin: 0 auto; padding: 40px 0 0; text-align: center; }
.secHead h2 { padding: 20px 0; font: 200 26px/30px var(--f-han); text-transform: uppercase; letter-spacing: .02em; border-bottom: 1px solid #000; }
.secHead p { padding: 18px 0 0; color: #717171; font: 300 15px/24px var(--f-han); }

/* ------------------------------------------------------------------ hotel (blok "about": angka besar + tag panah + bingkai sudut) */
.hotelSec { padding: 40px 0 20px; }
.feature { padding: 40px 0; }
.feature-box { display: table; position: relative; width: 90%; max-width: 1380px; margin: 0 auto; text-align: center; z-index: 2; }
.feature-con { position: relative; float: left; max-width: 540px; width: 100%; height: 760px; display: flex; align-items: center; justify-content: center; z-index: 1; }
.feature-photo { position: relative; float: right; width: 50%; height: 760px; }
.feature2 .feature-con { float: right; }
.feature2 .feature-photo { float: left; }
.feature-photo .photo, .feature-photo .bg { position: absolute; }
.feature-photo .photo { z-index: 1; width: 480px; max-width: 92%; transform: scale(.8); transition: all 1000ms var(--ease-expo); }
.feature1 .feature-photo .photo { top: 40px; left: 40px; }
.feature2 .feature-photo .photo { top: 40px; right: 40px; }
.feature-photo .photo img { display: block; width: 100%; height: auto; aspect-ratio: 480 / 640; object-fit: cover; }
.feature-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 10px; color: #fff; font: 300 12px/16px var(--f-han); text-align: left; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .45)); }
.feature.element .photo { transform: scale(1); }
.feature-photo .bg { top: 50%; bottom: 50%; width: 400px; max-width: 80%; transition: all 600ms var(--ease-expo); }
.feature1 .bg { left: 0; background: var(--gold); }
.feature1.element .bg { top: 180px; bottom: 40px; }
.feature2 .bg { right: 0; background: var(--green); }
.feature2.element .bg { top: 180px; bottom: 40px; }
.content-title { width: 90%; margin: 0 auto; }
.main-title { position: relative; display: block; margin: 0 0 20px; color: #000; font: 500 104px/100px var(--f-han); letter-spacing: -.01em; }
.main-title span { position: absolute; top: -26px; left: 6%; font-size: 30px; line-height: 30px; font-weight: 200; letter-spacing: 0; }
.sub-title { position: relative; display: inline-block; border: 3px solid var(--navy); font-size: 34px; line-height: 40px; background: #fff; z-index: 1; }
.sub-title .arrow, .sub-title .text { display: inline-block; }
.sub-title .arrow { position: relative; float: left; padding: 16px 20px; color: #fff; background: var(--navy); font-family: var(--f-han); font-weight: 600; }
.sub-title .arrow::after { content: ""; position: absolute; top: 0; bottom: 0; right: -17px; width: 18px; background: var(--navy); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.sub-title .text { padding: 16px 20px 16px 30px; font-family: var(--f-han); font-weight: 200; }
.sub-title .stars { font-style: normal; color: var(--gold); letter-spacing: 2px; font-size: 26px; }
.content-text { position: relative; margin: -40px 0 0; padding: 66px 30px 54px; border: 3px solid #000; text-align: left; font-size: 17px; line-height: 32px; font-family: var(--f-han); font-weight: 300; color: #444; }
.content-text .line1, .content-text .line2 { position: absolute; inset: 0; pointer-events: none; }
.content-text .line1::before, .content-text .line1::after, .content-text .line2::before, .content-text .line2::after { content: ""; position: absolute; background: #fff; }
.content-text .line1::before { top: -3px; left: 50px; right: 50px; height: 3px; }
.content-text .line1::after { top: 50px; bottom: 50px; left: -3px; width: 3px; }
.content-text .line2::before { bottom: -3px; left: 50px; right: 50px; height: 3px; }
.content-text .line2::after { top: 50px; bottom: 50px; right: -3px; width: 3px; }
.content-text .text { opacity: 0; }
.feature.element .content-text .text { opacity: 1; transition: all 600ms 600ms linear; }
.content-text a { display: inline-block; color: var(--gold-d); border-bottom: 1px solid currentColor; line-height: 24px; transition: color 200ms; }
.content-text a:hover { color: #000; }

/* ------------------------------------------------------------------ biaya (pita itinerary + kotak) */
.touristTitle { margin: 0 auto; padding: 120px 20px 110px; color: #fff; text-align: center; background: var(--theme); }
.touristTitle .titleWrap { max-width: 640px; margin: 0 auto; }
.touristTitle .info { font: 200 32px/34px var(--f-han); }
.touristTitle .content { margin: 12px 0 0; font: 200 22px/28px var(--f-han); }
.box-headline { margin: 15px 0 0; font: 700 48px/52px Arial, var(--f-han); letter-spacing: .01em; }
.box-words-wrapper { display: inline-block; position: relative; perspective: 300px; }
.box-words-wrapper b { display: inline-block; white-space: nowrap; font-weight: 700; }
.box-words-wrapper em { font-style: normal; display: inline-block; opacity: 0; transform: translateZ(-20px) rotateX(90deg); }
.costSec.element .box-words-wrapper em { animation: boxRotIn .4s forwards; }
@keyframes boxRotIn { 0% { opacity: 0; transform: translateZ(-20px) rotateX(90deg); } 60% { opacity: 1; transform: translateZ(-20px) rotateX(-10deg); } 100% { opacity: 1; transform: translateZ(-20px) rotateX(0); } }
.routeLine { margin: 16px 0 0; font: 300 14px/22px var(--f-han); color: rgba(255, 255, 255, .92); }
.routeLine li { display: inline-block; }
.routeLine li + li::before { content: "→"; padding: 0 8px; opacity: .7; }
.featureArticle { width: 80%; max-width: 1080px; margin: 0 auto; padding: 100px 0 40px; }
.itineraryOther { position: relative; display: flex; gap: 60px; align-items: flex-start; }
.itineraryOther > * { opacity: 0; }
.itineraryOther.element > * { opacity: 1; transition: opacity 600ms ease; }
.itineraryOther.element > *:nth-child(2) { transition-delay: 400ms; }
.incBox { flex: 1 1 56%; }
.ob-h, .remindBox h3 { position: relative; padding: 15px 0; color: #000; font: 600 17px/38px var(--f-han); }
.ob-h::before, .remindBox h3::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid #d9d9d9; }
.ob-h .icon, .remindBox h3 .icon { float: left; display: flex; align-items: center; height: 38px; padding: 0 15px; margin: 0 15px 0 0; border-left: 5px solid var(--theme); border-right: 1px solid #a2a2a2; color: var(--theme); }
.ob-h .icon svg, .remindBox h3 .icon svg { width: 24px; height: 24px; }
.incList { columns: 2; column-gap: 30px; padding: 20px 0 0; }
.incList li { position: relative; break-inside: avoid; padding: 9px 0 9px 46px; color: #444; font: 300 16px/24px var(--f-han); }
.incList li svg { position: absolute; top: 9px; left: 0; width: 16px; height: 16px; padding: 4px; color: #fff; background: var(--gold); }
.remindBox { background: #f3f3f3; }
.remindBox h3 { padding: 15px 15px; }
.remindBox h3::before { left: 15px; right: 15px; }
.remindBox .conBoxBd { padding: 26px 40px 30px; color: #717171; font: 300 15px/24px var(--f-han); }
.excBox { flex: 1 1 40%; }
.excBox h3 .icon { border-left-color: var(--red); color: var(--red); }
.excList li { position: relative; padding: 6px 0 6px 26px; color: #555; font: 300 16px/24px var(--f-han); }
.excList li::before, .excList li::after { content: ""; position: absolute; top: 17px; left: 3px; width: 13px; height: 2px; background: var(--red); transform: rotate(45deg); }
.excList li::after { transform: rotate(-45deg); }
.excNote { padding: 0 40px 30px; color: #8a8a8a; font: 300 13px/21px var(--f-han); }
.excNote a { color: var(--gold-d); border-bottom: 1px solid currentColor; }
.reserveStrip { padding: 50px 20px 110px; text-align: center; }
.reserveStrip p { position: relative; display: inline-block; margin: 0 0 40px; font: 200 25px/28px var(--f-han); }
.reserveStrip p::after { content: ""; position: absolute; bottom: -12px; left: 50%; width: 154px; height: 1px; margin: 0 0 0 -77px; background: var(--theme); }
.reserveBtn { width: 340px; max-width: 100%; height: 60px; margin: 0 auto; }
.reserveBtn a { display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font: 300 20px/60px var(--f-han); background: rgba(145, 145, 145, 1); transition: background-color 200ms var(--ease-in); }
.reserveBtn a:hover { color: #fff; background: var(--green); }
.reserveBtn svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------------ legalitas (seksi "incentive": foto fixed + lengkung + kartu gelap) */
.legalSec { position: relative; padding: 70px 0 90px; background: linear-gradient(rgba(21, 34, 61, .62), rgba(21, 34, 61, .62)) fixed, #3b3a36 url(../img/nabawi-umbrellas.webp) no-repeat center / cover fixed; }
.legalSec::before, .legalSec::after { content: ""; position: absolute; left: 0; right: 0; height: 20px; z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100Q50 40 0 0Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; }
.legalSec::before { top: -1px; }
.legalSec::after { bottom: -1px; transform: rotate(180deg); }
.legal-box { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.legalSec .title-box .main-title { padding: 20px 0; margin: 0; text-align: center; color: #fff; font: 200 24px/30px var(--f-han); border-bottom: 1px solid #fff; }
.legal-intro { padding: 30px 0 10px; text-align: center; color: #fff; font: 300 18px/28px var(--f-han); }
.legal-track { display: flex; padding: 30px 0 0; }
.inc-slide { flex: 1 1 0; margin: 0 10px; }
.inc-card { padding: 22px 22px 26px; min-height: 230px; color: #fff; background: rgba(0, 0, 0, .65); box-sizing: border-box; }
.inc-card .title { margin: 0 0 14px; font: 300 22px/28px var(--f-han); }
.inc-card .title .ic { display: block; width: 52px; height: 52px; margin: 0 0 14px; color: var(--gold-l); }
.inc-card .text { font: 300 15px/26px var(--f-han); }
.num-box { position: relative; margin: 20px -10px 0; }
.num-box::after { content: ""; position: absolute; top: 15px; left: 0; right: 0; height: 6px; background: radial-gradient(circle, #fff 0 1.6px, transparent 2.1px) repeat-x 0 50% / 20px 6px; }
.inc-slide:first-child .num-box::after { left: 50%; }
.inc-slide:last-child .num-box::after { right: 50%; }
.num-box .number { position: relative; width: 40px; height: 40px; margin: 0 auto; line-height: 40px; text-align: center; font: 400 24px/40px var(--f-yan); color: #000; background: #fff; z-index: 1; }
.down-tools-box { margin-top: 36px; text-align: center; }
.down-tools { position: relative; display: inline-block; padding: 10px 24px; font: 300 16px/22px var(--f-han); color: #fff; transition: background 300ms; }
.down-tools::before, .down-tools::after { content: ""; position: absolute; top: 0; bottom: 0; width: 20px; border: 2px solid #fff; box-sizing: border-box; }
.down-tools::before { left: 0; border-right: 0; }
.down-tools::after { right: 0; border-left: 0; }
.down-tools:hover { color: #fff; background: rgba(255, 255, 255, .12); }

/* ------------------------------------------------------------------ cerita jamaah (tourChose) */
.storySec { padding: 70px 0 0; }
.tourTitle { text-align: center; margin: 0 0 10px; color: var(--gold); font: 600 24px/30px var(--f-han); }
.tourTitle span { position: relative; }
.tourTitle span::before, .tourTitle span::after { content: ""; position: absolute; top: 50%; width: 65px; height: 1px; background: #000; }
.tourTitle span::before { left: -95px; }
.tourTitle span::after { right: -95px; }
.tourLead { margin: 0 0 40px; text-align: center; color: #8a8a8a; font: 300 15px/24px var(--f-han); }
.tourChose ul::after { content: ""; display: table; clear: both; }
.tourChose li { position: relative; display: block; width: 33.333%; float: left; overflow: hidden; }
.tourChose li > a { position: absolute; inset: 0; z-index: 3; }
.tourChose .newsMask { position: absolute; height: 170px; right: 0; bottom: 0; left: 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .55)); z-index: 1; }
.tourChose .photo { position: relative; width: 100%; padding-bottom: 68%; background-size: cover; background-position: center; transition: transform 400ms ease; }
.tourChose li:hover .photo { transform: scale(1.1); }
.tourChose .photo::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .4); z-index: 1; transition: background 300ms; }
.tourChose li:hover .photo::after { background: rgba(0, 0, 0, .1); }
.tourChose .innerBoxFt { position: absolute; width: 100%; bottom: 0; left: 0; text-align: center; z-index: 2; }
.tourChose .boxComplex { width: 80%; max-width: 260px; margin: 0 auto; color: #fff; font: 200 22px/24px var(--f-han); }
.tourChose .boxComplex > span { position: relative; display: inline-block; min-width: 160px; padding: 0 0 30px; }
.tourChose .boxComplex .title { display: inline-block; transform: translateY(0); transition: all 400ms ease; }
.tourChose li:hover .boxComplex .title { transform: translateY(-27px); }
.tourChose .boxComplex .day { position: absolute; bottom: 0; left: -20px; right: -20px; color: #000; background: #fff; font: 400 13px/22px var(--f-body); }
.tourChose .dateOut { position: absolute; left: -20px; right: -20px; bottom: 0; height: 52px; overflow: hidden; }
.tourChose .dateOut .date { position: relative; height: 52px; color: #fff; background: var(--green); font: 300 15px/52px var(--f-han); transform: translateY(52px); transition: all 400ms ease; }
.tourChose li:hover .dateOut .date { transform: translateY(0); }
.tourChose .money { height: 50px; border-top: 1px solid rgba(255, 255, 255, .5); }
.playMark { position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; margin: -60px 0 0 -29px; border: 2px solid #fff; border-radius: 50%; z-index: 2; pointer-events: none; }
.playMark::after { content: ""; position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -6px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }

/* ------------------------------------------------------------------ cara daftar (headline daftar + kotak "Day") */
.stepSec { padding: 0 0 100px; }
.headline { position: relative; height: 330px; margin: 40px auto 0; text-align: center; }
.headlineBox { position: absolute; left: 10%; right: 10%; top: 0; bottom: 0; width: 80%; max-width: 760px; height: 150px; margin: auto; }
.headline .boxTitle { position: relative; z-index: 2; font: 300 32px/32px var(--f-han); }
.headline .boxImg { position: relative; height: 70px; margin: 10px 0 0; z-index: 2; }
.headline .boxImg .word { display: inline-block; color: var(--theme); font: 700 80px/70px var(--f-han); letter-spacing: -1px; transform: scaleX(.86); }
.headline .boxContent { position: relative; z-index: 1; margin: 8px 0 0; letter-spacing: .5px; color: #bebebe; font: 200 32px/36px var(--f-han); }
.stepList { display: flex; gap: 40px; width: 84%; max-width: 1080px; margin: 0 auto; }
.step { flex: 1 1 0; }
.featureSquare { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1; box-sizing: border-box; color: #fff; background: var(--theme); font: 200 30px/32px var(--f-han); opacity: 0; transform: translateY(60px); transition: all 600ms var(--ease-out); }
.step:nth-child(2) .featureSquare { transition-delay: 150ms; }
.step:nth-child(3) .featureSquare { transition-delay: 300ms; }
.stepList.element .featureSquare { opacity: 1; transform: translateY(0); }
.featureSquare .day { padding: 26px 28px; }
.featureSquareBox { position: absolute; left: 28px; bottom: 26px; right: 20px; }
.featureSquare span { display: block; }
.artileContent { padding: 30px 0 0; color: #717171; font: 400 14px/26px var(--f-han); }
.artileContent .itineraryTitle { color: #222; font: 200 26px/36px var(--f-han); }
.artileContent .itineraryTitle span { padding: 0 8px; color: var(--theme); font-weight: 300; }
.artileContent p { padding: 14px 0 0; }
.passBox { width: 84%; max-width: 1080px; margin: 70px auto 0; box-sizing: border-box; }
.passBox .conBoxBd { padding: 22px 40px 26px; }
.passBox a { color: var(--gold-d); border-bottom: 1px solid currentColor; }

/* ------------------------------------------------------------------ form (formStyle1 / groupFormBox) */
.gf { width: 100%; padding: 0 0 60px; background: #fff; }
.gf-hd { padding: 70px 20px; border-top: 1px solid #d9d9d9; }
.gf-ht { max-width: 880px; margin: 0 auto; font: 100 45px/52px var(--f-han); }
.gf-ht b { color: var(--gold); font-weight: 400; }
.gf-hs { max-width: 880px; margin: 14px auto 0; color: #828282; font: 300 15px/24px var(--f-han); }
.gf-bar { position: relative; padding: 0 120px; color: #313131; font: 200 30px/34px var(--f-han); border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; }
.gf-bar-in { max-width: 880px; margin: 0 auto; border-left: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; }
.gf-bar-line { position: relative; padding: 30px 60px; }
.gf-bar-line::before { content: ""; position: absolute; left: 30px; top: 25px; bottom: 25px; width: 7px; background: var(--gold-l); }
.gf-body { padding: 0 20px; }
.gf-inner { max-width: 760px; margin: 0 auto; padding: 30px 0 30px 0; color: #313131; font: 200 17px/20px var(--f-han); }
.fbox { display: block; padding: 14px 0; margin: 0; min-width: 0; }
.fbox .flab { display: block; padding: 0 0 12px; font: 300 19px/26px var(--f-han); color: #222; }
.fbox .flab em { display: inline-block; width: 26px; height: 26px; margin: 0 12px 0 0; font: 400 15px/26px var(--f-yan); font-style: normal; text-align: center; color: #fff; background: var(--gold); vertical-align: 1px; }
.fbox .flab small { margin: 0 0 0 6px; color: #9a9a9a; font-size: 14px; }
.fbox.miss .flab em { background: var(--red); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 0 0 38px; }
.chip { position: relative; display: flex; align-items: center; min-height: 48px; padding: 5px 18px 5px 6px; border: 1px solid #d7d7d7; background: #fff; cursor: pointer; font: 300 16px/20px var(--f-han); color: #313131; transition: border-color 200ms, background 200ms; }
.chip:hover { border-color: var(--gold-l); }
.fs1 .fck { position: relative; flex: 0 0 34px; width: 34px; height: 34px; margin: 0 12px 0 0; background: #fff; border: 1px solid #d7d7d7; cursor: pointer; }
.fs1 .fck:checked { background: linear-gradient(var(--gold), var(--gold)) center / 14px 14px no-repeat, var(--gold-pale); border-color: var(--gold-l); }
.fs1 .fck:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.chip:has(.fck:checked) { border-color: var(--gold); background: #fcf8ef; color: #000; }
.fs1 .fin { display: block; width: 350px; max-width: 100%; height: 48px; margin: 0 0 0 38px; line-height: 48px; font: 300 17px/48px var(--f-han); text-indent: 12px; color: #000; background: #fff; border: 1px solid #d7d7d7; box-sizing: border-box; }
.fs1 .fin:focus { border-color: var(--gold-l); outline: 2px solid var(--gold-pale); outline-offset: 0; }
.msgPreview { margin: 24px 0 0 38px; padding: 5px 20px 20px; background: #f2f2f2; }
.msgPreview .tabBoxTitle .moreInfo_T { font-weight: 400; }
.msgPreview .tabBoxTitle > svg { color: var(--green); }
.mp-text { padding: 16px 0 0; min-height: 110px; white-space: pre-wrap; word-break: break-word; color: #313131; font: 300 16px/26px var(--f-han); }
.mp-text .ph { color: #a9a9a9; }
.fbtn { padding: 36px 0 0 38px; }
.fs1 .fsub { display: block; width: 350px; max-width: 100%; height: 60px; color: #fff; font: 400 17px/60px var(--f-han); text-align: center; background: var(--green); transition: background-color 200ms var(--ease-in); }
.fs1 .fsub:hover { color: #fff; background: #26684a; }
.fsub svg { width: 22px; height: 22px; margin: -3px 10px 0 0; }
.fsub .off-t { display: none; }
.fsub.is-off { color: #fff; background: #b9b9b9; cursor: not-allowed; }
.fsub.is-off:hover { background: #b0b0b0; }
.fsub.is-off .on-t { display: none; }
.fsub.is-off .off-t { display: inline; font-size: 16px; }
.fskip { padding: 16px 0 0; color: #828282; font: 300 14px/22px var(--f-han); }
.fskip a { color: var(--green); border-bottom: 1px solid currentColor; }
.fskip a:hover { color: #000; }

/* ------------------------------------------------------------------ FAQ */
.faqSec { padding: 30px 0 40px; background: #fff; }
.now-box { max-width: 1080px; width: 84%; margin: 0 auto; }
.now-box .title-box h2 { padding: 20px 0; text-align: center; font: 200 26px/30px var(--f-han); text-transform: uppercase; border-bottom: 1px solid #000; }
.faqList { max-width: 820px; margin: 40px auto 0; }
.faqItem { margin: 0 0 10px; padding: 0 20px; background: #f2f2f2; }
.faqItem .tabBoxTitle { border-bottom: 0; }
.faqItem .tabBoxTitle button { position: relative; box-sizing: border-box; display: flex; align-items: center; width: 100%; padding: 14px 40px 14px 0; text-align: left; }
.faqItem .q-ic { flex: 0 0 22px; width: 22px; height: 22px; color: var(--gold); }
.faqItem .moreInfo_T { flex: 1; line-height: 24px; }
.faqItem .moreInfo_T::before { top: 0; bottom: 0; }
.faqItem .pm { position: absolute; top: 50%; right: 4px; width: 14px; height: 14px; margin-top: -7px; }
.faqItem .pm::before, .faqItem .pm::after { content: ""; position: absolute; top: 6px; left: 0; width: 14px; height: 2px; background: #000; transition: transform 300ms var(--ease-out); }
.faqItem .pm::after { transform: rotate(90deg); }
.faqItem [aria-expanded="true"] .pm::after { transform: rotate(0); }
.faqBody { padding: 4px 0 22px 52px; color: #717171; font: 300 15px/26px var(--f-han); border-top: 1px solid #d9d9d9; }
.faqBody p { padding: 16px 0 0; }
.faqBody a { color: var(--gold-d); border-bottom: 1px solid currentColor; }

/* ------------------------------------------------------------------ penutup (goExperience) */
.goExperience { padding: 40px 0 60px; background: #fff; }
.goExperience_Wrap { width: 80%; padding: 60px 0; margin: 0 auto; text-align: center; }
.goExperience .experienceSub { margin: 0 0 10px; font: 300 18px/24px var(--f-han); color: var(--theme); }
.goExperience .experienceTitle { position: relative; margin: 0 0 40px; font: 200 32px/36px var(--f-han); }
.goExperience .experienceTitle::after { content: ""; position: absolute; bottom: -14px; left: 50%; width: 154px; height: 1px; margin: 0 0 0 -77px; background: var(--theme); }
.experienceText { max-width: 600px; margin: 0 auto 36px; color: #717171; font: 300 16px/26px var(--f-han); }
.experienceBtn { max-width: 750px; padding: 6px; margin: 0 auto; box-sizing: border-box; }
.experienceBtn .join, .experienceBtn .other { position: relative; display: inline-block; vertical-align: middle; width: 47%; margin: 0 1%; box-sizing: border-box; }
.experienceBtn a { display: block; width: 100%; font: 600 17px/55px var(--f-han); color: #fff; background: rgba(145, 145, 145, 1); transition: background-color 200ms var(--ease-in); }
.experienceBtn .join a { background: rgba(var(--theme-rgb), 1); }
.experienceBtn a:hover { color: #fff; background: rgba(145, 145, 145, .8); }
.experienceBtn .join a:hover { background: rgba(var(--theme-rgb), .85); }
.xlinks { margin: 20px 0 0; text-align: center; font-size: 13px; line-height: 18px; }
.xlinks a { color: var(--gold-d); }
.xlinks a:hover { color: #000; }

/* ------------------------------------------------------------------ footer */
.ftr { position: relative; z-index: 2; }
.ftr-more { position: relative; right: 0; float: right; width: 60px; height: 90px; margin: -90px 0 0 0; color: var(--gold); background: var(--paper); border-radius: 8px 0 0 0; transition: all 600ms linear; }
.ftr-more::after { content: ""; position: absolute; bottom: 0; left: -78px; width: 0; height: 0; border-style: solid; border-width: 0 0 88px 80px; border-color: transparent transparent var(--paper) transparent; }
.ftr-more > a { position: absolute; inset: 0 0 0 -60px; z-index: 3; }
.ftr-more .fm-box { position: relative; display: flex; align-items: center; width: 60px; height: 90px; margin: 0 0 0 -10px; z-index: 1; }
.ftr-more .fm-ic { width: 16px; flex: 0 0 16px; }
.ftr-more .fm-ic span { display: block; width: 11px; height: 11px; transform-origin: center; }
.ftr-more .fm-ic svg { width: 11px; height: 11px; display: block; }
.ftr-more:hover .fm-ic span { animation: fmSpin 1s linear forwards; }
@keyframes fmSpin { to { transform: rotate(540deg); } }
.ftr-more .fm-t { line-height: 13px; font-size: 13px; }
.ftr-box { position: relative; clear: both; height: 400px; background: var(--paper); }
.ftr-bd { margin: 0 auto; width: 680px; height: 300px; display: flex; align-items: center; justify-content: center; }
.ftr-sub { position: relative; }
.fs-box { display: flex; height: 52px; padding: 3px; border: 1px solid #cbcbcb; box-sizing: border-box; background: #fff; }
.fs-box .fs-num { display: flex; align-items: center; width: 300px; height: 44px; padding: 0 0 0 12px; font: 200 22px/44px var(--f-han); color: #000; box-sizing: border-box; }
.fs-box .fs-num svg { width: 22px; height: 22px; margin: 0 10px 0 0; color: var(--green); }
.fs-btn { display: block; height: 44px; padding: 0 20px; color: var(--gold-d); font: 400 13px/44px var(--f-han); background: #ece9e2; margin-left: 2px; white-space: nowrap; transition: background 200ms; }
.fs-btn:hover { color: var(--gold-d); background: #e2ded4; }
.fs-msg { position: absolute; top: 60px; left: 0; font-size: 12px; color: #8a8a8a; }
.ftr-addr { position: absolute; left: 30px; bottom: 30px; display: flex; align-items: flex-end; }
.ftr-addr .fa-logo { padding: 0 12px 2px 0; }
.ftr-addr .q-badge { display: block; width: 36px; height: 36px; border: 2px solid var(--gold); border-radius: 50%; color: var(--gold); font: 700 20px/36px var(--f-yan); text-align: center; }
.ftr-addr .fa-t { font-size: 12px; line-height: 18px; color: #717171; }
.ftr-addr .fa-t a { color: var(--gold-d); }
.ftr-copy { position: absolute; right: 30px; bottom: 30px; text-align: right; }
.ftr-copy .fc-logo { padding: 0 0 12px 0; }
.ftr-copy .fc-logo a { display: inline-block; color: var(--gold); }
.am-logo-l { display: block; width: 160px; height: 84px; }
.am-logo-l .ll-sub { fill: #555; }
.ftr-copy .fc-t { font-size: 12px; line-height: 18px; color: var(--gold-d); }

/* bar CTA bawah (mobile) & back to top */
.mBar { display: none; }
.backtop { position: fixed; right: 30px; bottom: 140px; width: 56px; height: 56px; z-index: 18; opacity: 0; visibility: hidden; transition: opacity 400ms, visibility 400ms; }
.backtop.show { opacity: 1; visibility: visible; }
.backtop button { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: #787878; transition: background 300ms; }
.backtop button:hover { background: #5f5f5f; }
.backtop svg { width: 26px; height: 26px; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1400px) {
  .introduceMenu_Wrap { left: 220px; }
  .introMenu ul li { margin: 20px 10px; }
}
@media (max-width: 1260px) {
  .introMenu ul { display: none; }
  .feature-photo .photo { width: 420px; }
  .main-title { font-size: 90px; line-height: 90px; }
}
@media (max-width: 1200px) {
  .localInfo { float: none; width: 100%; }
  .intro_tourexplain { width: 100%; float: none; min-height: 0; margin: 80px auto; padding: 0; }
  .intro_tourexplain .desc { position: relative; bottom: auto; padding: 20px 0 0; }
  .intro_moreInfo { top: 0; text-align: center; }
  .seqTitle .mainTitle { font-size: 36px; line-height: 42px; }
}
@media (max-width: 1080px) {
  .feature-con, .feature-photo, .feature2 .feature-con, .feature2 .feature-photo { float: none; width: auto; max-width: 600px; height: auto; margin: 0 auto; }
  .feature-con { padding: 60px 0 0; }
  .feature-photo { height: 640px; }
  .feature1 .feature-photo .photo, .feature2 .feature-photo .photo { left: 50%; right: auto; margin-left: -210px; }
  .feature-photo .bg { width: 380px; }
  .feature1 .bg { left: 0; }
  .feature2 .bg { right: 0; }
  .itineraryOther { flex-direction: column; gap: 40px; }
  .incBox, .excBox { width: 100%; flex: none; }
  .legal-track { flex-wrap: wrap; }
  .inc-slide { flex: 1 1 40%; margin: 0 10px 20px; }
  .num-box { display: none; }
  .stepList { gap: 24px; }
  .featureSquare { font-size: 24px; line-height: 26px; }
}
@media (max-width: 960px) {
  .featureShowBox { width: 100%; }
  .featureShowPhoto_slogan { font-size: 36px; line-height: 40px; margin: -40px 0 0; }
  .bannerTitle .seqTitle { left: 8%; right: 8%; }
  .trustLine { left: 0; right: 0; top: 24px; }
  .ftr-box, .ftr-bd { height: auto; width: auto; }
  .ftr-box { text-align: center; }
  .ftr-bd { display: block; padding: 70px 20px 50px; }
  .ftr-sub { display: inline-block; }
  .ftr-copy, .ftr-addr { position: relative; left: auto; right: auto; bottom: auto; display: block; padding: 40px 20px; }
  .ftr-copy { text-align: right; }
  .ftr-addr { display: flex; align-items: center; padding: 20px; border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; text-align: left; }
  .backtop { bottom: 20px; right: 20px; }
  .gf-bar { padding: 0 20px; }
  .stepList { flex-direction: column; width: 84%; max-width: 560px; gap: 50px; }
  .featureSquare { max-width: 240px; }
}

@media (max-width: 767px) {
  html { scroll-padding-top: 135px; }
  /* header mobile */
  .hdr { top: -330px; height: 330px; }
  .hdr.open { top: 0; }
  .hdr-nav { height: 330px; padding: 50px 0 0; box-sizing: border-box; }
  .hdr-nav li { display: block; width: auto; }
  .hdr-nav li a { line-height: 40px; border-bottom: 1px solid rgba(255, 255, 255, .5); }
  .hdr-logo { width: 60px; height: 50px; margin-bottom: -50px; padding-right: 5px; }
  .hdr-logo::after { right: -38px; border-width: 48px 40px 0 0; }
  .hdr-logo .am-logo { width: 40px; height: 30px; }
  .hdr-menu { left: 58px; width: 144px; height: 45px; padding: 10px 0 0 40px; }
  .hdr-menu::before { clip-path: polygon(44px 0, 141px 0, 98px 45px, 0 45px); }
  .hdr-menu .hm-line { left: 40px; }
  .trip-tab { top: 50px; width: 40px; height: 50px; }
  .trip-tab .tt-label { display: none; }
  .trip-tab .tt-btn { height: 50px; }
  .trip-tab .tt-btn::after { right: -40px; border-width: 50px 40px 0 0; }
  .trip-tab .tt-btn a { top: 6px; left: 11px; width: 18px; height: 18px; }
  .trip-tab .tt-btn svg { width: 18px; height: 18px; }
  .trip-tab:hover .tt-btn { left: 0; }
  .planMaxBox { top: 10px; right: 10px; width: 136px; height: 42px; padding: 3px 0 0 42px; }
  .planMaxBox .pm-ic { top: 5px; left: 5px; width: 30px; height: 30px; }
  .planMaxBox .pm-ic svg { width: 17px; height: 17px; }
  .planMaxBox .subTitle { font-size: 13px; line-height: 17px; }
  .planMaxBox .mainTitle { font-size: 14px; line-height: 17px; }
  .planMaxBox::after { border-width: 0 12px 12px 0; }

  /* hero */
  .bannerBox { height: 100vh; height: 100svh; min-height: 600px; background-image: url(../media/hero-kaaba-m.webp); background-position: center top; }
  .heroVideo { object-position: center 30%; }
  .vidToggle { right: 16px; bottom: auto; top: 64px; }
  .bannerTitle { bottom: 0; }
  .bannerTitle .seqTitle { left: 20px; right: 20px; bottom: 116px; text-align: left; }
  .seqTitle .titleBox { padding: 0 0 18px; }
  .seqTitle .subTitle { position: static; margin: 0 0 10px; font-size: 14px; white-space: normal; }
  .seqTitle .mainTitle { font-size: 30px; line-height: 35px; }
  .seqTitle .mainTitle b { white-space: normal; }
  .heroLead { margin: 16px 0 0; font-size: 15px; line-height: 23px; }
  .heroBtn { margin: 18px 0 0; }
  .heroBtn a { display: block; height: 50px; margin: 0 0 8px; padding: 0; text-align: center; font-size: 16px; line-height: 50px; }
  .heroBtn .hb-sub { display: none; }
  .bannerTitle .seqNews { left: 20px; right: 20px; bottom: 88px; }
  .seqNews .natureBox, .seqNews .timeBox, .seqNews .seqLine { display: none; }
  .trustLine { top: 0; text-align: left; font-size: 12.5px; line-height: 18px; }
  .trustLine li { margin: 0 12px 4px 0; }
  .seqMask { height: 85%; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .35) 35%, rgba(0, 0, 0, .78)); }
  .ldLogo { width: 180px; margin: -82px 0 0 -90px; }

  /* feature blocks: tumpuk */
  .featureShowPhoto { display: none; }
  .featureShow { padding: 0 0 20px; }
  .featureShow + .featureShow { margin-top: 0; }
  .featureShowBox { display: flex; flex-direction: column-reverse; }
  .featureShowBox .photo, .featureShowBox .featureShowBox_content { width: 100%; padding-bottom: 0; float: none; left: 0; right: 0; }
  .featureShowBox .photo { padding-bottom: 66%; }
  .featureShowBox .photo div { opacity: 1; }
  .featureShowBox .featureShowBox_content { position: relative; }
  .featureShowBox_content .contentWrap { padding: 40px 0 30px; }
  .featureShowBox_content .contentTitle, .featureShowBox_content .contentText, .featureShowBox_content .contentBtn { position: relative; top: auto; bottom: auto; left: auto; width: auto; margin: 0; }
  .contentTitle .mainTitle { font-size: 28px; line-height: 32px; }
  .contentTitle .subTitle { font-size: 28px; line-height: 32px; }
  .featureShowBox_content .contentText { margin: 22px 0 0; font-size: 15px; line-height: 24px; }
  .featureShowBox_content .contentBtn { width: 160px; margin: 22px auto 0; }
  .contentBtn a { line-height: 44px; font-size: 14px; }
  .featureShowBox { width: 100%; }
  .featureShow { padding: 0; }

  /* sticky menu */
  .introduceMenu { height: 70px; padding: 0; }
  .introduceMenu_Wrap { left: 60px; right: 0; height: 70px; }
  .introduceMenu_Wrap .menuPush { display: block; width: auto; max-width: none; min-width: 0; height: 70px; margin-right: 96px; }
  .menuPush::before { left: -50px; border-width: 0 0 70px 50px; }
  .menuPush::after { right: -40px; border-width: 70px 40px 0 0; }
  .menuPushBox { height: 70px; }
  .menuPush .push_tourname { padding: 12px 14px 0 4px; font-size: 15px; line-height: 18px; }
  .menuPush .push_tourname samp { left: 4px; font-size: 11px; line-height: 15px; }
  .menuPush .push_price { position: absolute; top: 0; left: 0; height: 70px; min-width: 0; padding: 14px 0 0 4px; font-size: 14px; box-sizing: border-box; opacity: 0; }
  .menuPush .push_price::after { display: none; }
  .menuPush .push_tourname { animation: mpName 8s infinite; }
  .menuPush .push_price { animation: mpPrice 8s infinite; }
  .menuPush .nowprice { font-size: 11px; }
  .menuPush .price { font-size: 16px; }
  .introduceMenu_Wrap .introMenu { position: absolute; top: 0; right: 10px; margin: 0; float: none; }
  .introMenu .share { display: block; padding: 15px 0 0; }
  .introMenu .menuCta { padding: 0 12px; }
  .introduceInfoBox { padding-top: 70px; }
  .introduce_content { width: auto; padding: 0 20px; }
  .localinfo_container_useful { padding: 20px 26px; }
  .localinfo_container ul { width: 96%; margin: 10px auto; }
  .localinfo_container li { padding: 18px 0; }
  .localinfo_container .text { font-size: 14px; }
  .localinfo_container { min-height: 0; padding-bottom: 96px; }
  .intro_tourexplain { margin: 60px auto 30px; }
  .intro_moreInfo { margin: 0 -20px; }
  .linkContent_wrap { display: block; }
  .moreInfo_content { width: auto; margin: 0; padding: 0 10px 10px; }
  .moreInfo_content li .title { font-size: 12px; }
  .moreInfo_content li .text { font-size: 13px; }
  .visaTitle_content .download { top: -50px; width: 96px; height: 96px; line-height: 40px; }
  .visaTitle_content .downloadImg { height: 50px; }
  .visaTitle_content .downloadText { line-height: 44px; }

  /* hotel */
  .secHead { padding: 30px 20px 0; }
  .secHead h2 { font-size: 21px; line-height: 26px; }
  .feature { padding: 20px 0; }
  .feature-con { padding: 50px 0 0; }
  .main-title { font-size: 64px; line-height: 64px; }
  .main-title span { top: -24px; left: 2%; font-size: 22px; }
  .sub-title { font-size: 20px; line-height: 24px; border-width: 2px; }
  .sub-title .arrow { padding: 12px 14px; }
  .sub-title .text { padding: 12px 12px 12px 24px; }
  .sub-title .stars { font-size: 17px; }
  .content-text { margin-top: -30px; padding: 50px 22px 36px; font-size: 15px; line-height: 26px; border-width: 2px; }
  .content-text .line1::before { top: -2px; height: 2px; }
  .content-text .line2::before { bottom: -2px; height: 2px; }
  .content-text .line1::after { left: -2px; width: 2px; }
  .content-text .line2::after { right: -2px; width: 2px; }
  .feature-photo { height: auto; padding: 30px 0 50px; }
  .feature-photo .photo, .feature1 .feature-photo .photo, .feature2 .feature-photo .photo { position: relative; top: 0; left: 0; right: 0; width: 78%; margin: 0 auto; }
  .feature-photo .bg { width: 60%; }
  .feature1.element .bg, .feature2.element .bg { top: 90px; bottom: 30px; }

  /* biaya */
  .touristTitle { padding: 80px 20px 70px; }
  .touristTitle .info { font-size: 24px; line-height: 28px; }
  .box-headline { font-size: 30px; line-height: 36px; }
  .touristTitle .content { font-size: 17px; line-height: 24px; }
  .featureArticle { width: auto; padding: 60px 20px 20px; }
  .incList { columns: 1; }
  .remindBox .conBoxBd { padding: 20px 22px 24px; }
  .excNote { padding: 0 22px 24px; }
  .reserveStrip { padding: 40px 20px 70px; }
  .reserveStrip p { font-size: 20px; line-height: 26px; }
  .reserveBtn a { font-size: 17px; }

  /* legalitas */
  .legalSec { background-attachment: scroll, scroll; padding: 50px 0 60px; }
  .legalSec .title-box .main-title { font-size: 20px; line-height: 26px; }
  .legal-intro { font-size: 16px; line-height: 24px; }
  .legal-track { flex-direction: column; }
  .inc-slide { margin: 0 0 12px; }
  .inc-card { min-height: 0; display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; padding: 18px; }
  .inc-card .title { grid-column: 2; margin: 0 0 6px; font-size: 19px; line-height: 24px; }
  .inc-card .title .ic { position: absolute; margin: 0 0 0 -68px; width: 44px; height: 44px; }
  .inc-card { position: relative; }
  .inc-card .text { grid-column: 2; font-size: 14px; line-height: 23px; }

  /* cerita */
  .tourTitle span::before, .tourTitle span::after { width: 30px; }
  .tourTitle span::before { left: -45px; }
  .tourTitle span::after { right: -45px; }
  .tourLead { padding: 0 20px; }
  .tourChose ul { display: flex; gap: 10px; padding: 0 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .tourChose li { flex: 0 0 78%; width: auto; float: none; scroll-snap-align: center; }
  .tourChose .photo { padding-bottom: 110%; }
  .tourChose li .boxComplex .title { transform: translateY(-27px); }
  .tourChose li .dateOut .date { transform: translateY(0); }

  /* cara daftar */
  .headline { height: 250px; }
  .headline .boxTitle { font-size: 24px; }
  .headline .boxImg .word { font-size: 54px; line-height: 60px; }
  .headline .boxContent { font-size: 22px; line-height: 28px; }
  .stepList { width: auto; padding: 0 20px; }
  .step { display: grid; grid-template-columns: 120px 1fr; column-gap: 18px; }
  .featureSquare { width: 120px; font-size: 15px; line-height: 17px; }
  .featureSquare .day { padding: 12px 12px; font-size: 16px; }
  .featureSquareBox { left: 12px; bottom: 12px; right: 8px; }
  .artileContent { padding: 0; font-size: 15px; line-height: 24px; }
  .artileContent .itineraryTitle { font-size: 20px; line-height: 26px; }
  .artileContent .itineraryTitle span { padding: 0 5px; }
  .artileContent p { padding: 8px 0 0; }
  .passBox { width: auto; margin: 50px 20px 0; }
  .passBox .conBoxBd { padding: 18px 22px 22px; }

  /* form */
  .gf-hd { padding: 50px 20px 40px; }
  .gf-ht { font-size: 32px; line-height: 38px; }
  .gf-bar { padding: 0; font-size: 22px; line-height: 26px; }
  .gf-bar-in { border: 0; }
  .gf-bar-line { padding: 20px 20px 20px 40px; }
  .gf-bar-line::before { left: 20px; top: 18px; bottom: 18px; width: 6px; }
  .gf-inner { padding: 20px 0; }
  .fbox .flab { font-size: 17px; line-height: 24px; display: flex; }
  .fbox .flab em { flex: 0 0 26px; }
  .chips { padding: 0; gap: 8px; }
  .chip { flex: 1 1 calc(50% - 30px); min-height: 50px; padding-right: 10px; font-size: 15px; }
  .fs1 .fin, .msgPreview, .fbtn { margin-left: 0; }
  .fs1 .fin { width: 100%; }
  .msgPreview { padding: 4px 16px 16px; }
  .msgPreview .tabBoxTitle .moreInfo_T { font-size: 14px; }
  .mp-text { font-size: 15px; line-height: 24px; }
  .fbtn { padding: 26px 0 0; }
  .fs1 .fsub { width: 100%; }

  /* FAQ & penutup */
  .now-box { width: auto; padding: 0 20px; }
  .now-box .title-box h2 { font-size: 21px; }
  .faqItem { padding: 0 14px; }
  .faqItem .moreInfo_T { font-size: 15px; padding-left: 22px; }
  .faqItem .moreInfo_T::before { left: 10px; }
  .faqBody { padding-left: 0; }
  .goExperience_Wrap { width: auto; padding: 40px 20px; }
  .goExperience .experienceTitle { font-size: 26px; line-height: 32px; }
  .experienceBtn .join, .experienceBtn .other { display: block; width: auto; margin: 0 0 10px; }

  /* footer */
  .ftr-more { height: 50px; margin-top: -50px; }
  .ftr-more::after { left: -38px; border-width: 0 0 48px 40px; }
  .ftr-more .fm-box { height: 50px; margin-left: -2px; }
  .ftr-bd { padding: 60px 20px 40px; }
  .ftr-sub { display: block; }
  .fs-box { flex-wrap: wrap; height: auto; padding: 0; border: 0; background: none; gap: 6px; }
  .fs-box .fs-num { width: 100%; height: 52px; border: 1px solid #cbcbcb; background: #fff; justify-content: center; }
  .fs-btn { flex: 1; margin: 0; text-align: center; height: 46px; line-height: 46px; }
  .fs-msg { position: static; padding: 10px 0 0; }
  .ftr-addr { align-items: flex-start; }
  .ftr-copy { padding: 30px 20px; }
  .ftr-box { padding-bottom: 60px; }
  .backtop { display: none; }

  /* bar CTA bawah */
  .mBar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; height: 60px; padding-bottom: env(safe-area-inset-bottom); background: var(--green); box-shadow: 0 -1px 0 rgba(0, 0, 0, .08); transform: translateY(100%); transition: transform 400ms var(--ease-out); }
  .mBar.show { transform: translateY(0); }
  .mBar .mb-seat { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 0 0 20px; color: #fff; background: var(--gold); font: 600 18px/22px var(--f-han); }
  .mBar .mb-seat:hover, .mBar .mb-wa:hover { color: #fff; }
  .mBar .mb-seat::after { content: ""; position: absolute; top: 0; right: -29px; width: 30px; height: 60px; background: var(--gold); clip-path: polygon(0 0, 100% 0, 0 100%); }
  .mBar .mb-seat small { font: 400 12px/16px var(--f-han); opacity: .9; white-space: nowrap; }
  .mBar .mb-wa { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 72px; padding-left: 18px; color: #fff; background: var(--green); }
  .mBar .mb-wa svg { width: 28px; height: 28px; }
}
@keyframes mpName { 0%, 44% { opacity: 1; } 50%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes mpPrice { 0%, 44% { opacity: 0; } 50%, 94% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 380px) {
  .seqTitle .mainTitle { font-size: 26px; line-height: 31px; }
  .menuPush .push_tourname { font-size: 13px; }
  .chip { flex-basis: 100%; }
}
@media (hover: none) {
  .featureShowPhoto, .legalSec { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
}