/* ===== Menu atas bersama (semua halaman) ===== */
.site-header .wrap { width: min(1320px, 100% - 2.5rem); position: relative; gap: 1.2rem; }
.site-header .logo-full { width: 200px; }
.nav { margin-left: auto; margin-right: .4rem; gap: 1.4rem; display: flex; }
.nav a { font-weight: 600; font-size: .98rem; color: #fff; text-decoration: none; white-space: nowrap; padding: .3rem 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--mint); }
.header-right { margin-left: 0; gap: .8rem; }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.4); background: transparent; color: #fff; cursor: pointer; place-items: center; }
.nav-toggle svg { width: 22px; height: 22px; }
@media (max-width: 1240px) {
  .nav-toggle { display: grid; }
  .nav { display: none !important; position: absolute; top: 100%; left: 0; right: 0; margin: 0; flex-direction: column; gap: 0;
         background: #1A2B4F; padding: .5rem 1.25rem 1rem; box-shadow: 0 12px 24px rgba(10,20,45,.35); }
  .nav.open { display: flex !important; }
  .nav a { padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 1.05rem; }
  .nav a[aria-current="page"] { color: var(--mint); }
  .header-right { margin-left: auto; }
}
@media (max-width: 560px) { .site-header .logo-full { width: 140px; } .header-cta { display: none; } .header-right { gap: .5rem; } }

/* ===== Halaman dalam ===== */
body.sub main { padding-top: 80px; }
.page-hero { background: linear-gradient(115deg, #17284F 0%, #22407A 55%, #2F5596 100%); color: #fff; padding: 3.2rem 0 3rem; }
.page-hero h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 0 0 .5rem; max-width: 22ch; }
.page-lead { font-size: 1.15rem; color: rgba(255,255,255,.9); max-width: 60ch; margin: 0; }
.hero-cta { width: auto; margin-top: 1.5rem; }
.page-sec { padding: 3rem 0 4rem; }
.group-title { font-size: 1.4rem; margin: 2.2rem 0 1rem; }
.group-title:first-child { margin-top: 0; }
a.route-book { display: inline-block; text-decoration: none; }
.cat-note { color: var(--ink-soft); background: var(--mist); border-radius: 10px; padding: .9rem 1.1rem; margin: 0 0 1.6rem; max-width: none; }
.cat-note:empty { display: none; }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.4rem; }
.svc-card { display: flex; flex-direction: column; justify-content: space-between; gap: 1.2rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem; box-shadow: 0 6px 20px rgba(10,20,45,.06); }
.svc-card h2 { font-size: 1.25rem; margin: .35rem 0 .5rem; }
.svc-card p { color: var(--ink-soft); margin: 0; }
.svc-meta { font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--reef); }
.svc-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.svc-bottom .btn { width: auto; }
.svc-bottom .btn-wide { width: 100%; }
.svc-price { line-height: 1.25; }
.price-main { font-family: var(--font-head); font-weight: 800; font-size: 1.45rem; }
.price-unit { color: var(--ink-soft); font-size: .9rem; }
.price-usd { display: block; color: var(--ink-soft); font-size: .85rem; }
.price-usd-inline { font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.rate-list { margin: .8rem 0 0; display: grid; gap: .45rem; }
.rate-list div { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dashed var(--line); padding-bottom: .4rem; }
.rate-list dt { color: var(--ink-soft); }
.rate-list dd { margin: 0; font-weight: 800; font-family: var(--font-head); font-size: 1.1rem; }
.rate-list small { font-family: var(--font-body); font-weight: 400; color: var(--ink-soft); font-size: .8rem; }

/* Modal pemesanan */
.svc-modal { position: fixed; inset: 0; z-index: 50; background: rgba(10,20,45,.55); display: grid; place-items: center; padding: 1rem; overflow-y: auto; }
.svc-modal-card { width: min(560px, 100%); background: #fff; border-radius: 16px; padding: 1.5rem; max-height: calc(100vh - 2rem); overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.svc-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.svc-modal-title { margin: 0; font-size: 1.4rem; }
.svc-modal-sub { margin: .2rem 0 0; color: var(--ink-soft); }
.svc-close { border: 0; background: var(--mist); width: 40px; height: 40px; border-radius: 50%; font-size: 1.6rem; line-height: 1; cursor: pointer; flex: none; }
.svc-modal .row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.svc-modal .field select { width: 100%; font: inherit; font-size: 1rem; padding: .7rem .8rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.svc-modal .field.invalid select, .svc-modal .field.invalid textarea { border-color: var(--error); }
@media (max-width: 480px) { .svc-modal .row { grid-template-columns: 1fr; } .svc-modal-card { padding: 1.1rem; } }

/* Mitra / Sopir / Perusahaan */
.benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; margin-bottom: 2.5rem; }
.benefit-card { background: var(--mist); border-radius: 14px; padding: 1.3rem 1.4rem; }
.benefit-card h3 { margin: 0 0 .4rem; }
.benefit-card p { margin: 0; color: var(--ink-soft); }
.info-form { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.6rem; max-width: 760px; box-shadow: 0 6px 20px rgba(10,20,45,.06); }
.info-form h2 { margin-top: 0; }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.info-form select { width: 100%; font: inherit; font-size: 1rem; padding: .7rem .8rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.info-form .btn { width: auto; }
.form-msg { margin: .8rem 0 0; font-weight: 600; max-width: none; }
.form-msg.ok { color: var(--reef); } .form-msg.bad { color: var(--error); }
@media (max-width: 640px) { .form-2col { grid-template-columns: 1fr; } }
.info-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; align-items: start; }
.info-box { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem; }
.info-box h2 { margin-top: 0; font-size: 1.3rem; }
.tick-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; }
.tick-list li { padding-left: 1.7rem; position: relative; color: var(--ink-soft); }
.tick-list li::before { content: ""; position: absolute; left: 0; top: .35rem; width: 1rem; height: .55rem; border-left: 3px solid var(--mint); border-bottom: 3px solid var(--mint); transform: rotate(-45deg); }
.row-links { display: flex; flex-wrap: wrap; gap: .6rem; }
.row-links .btn { width: auto; font-size: .95rem; padding: .65rem 1rem; }
.btn-ghost { background: var(--mist); color: var(--ink); }
.btn-ghost:hover { background: #E6EBF2; }

/* ===== Skema hijau muda (mengikuti referensi) ===== */
:root { --mint: #5BCB95; --mint-2: #4DBD87; --mint-soft: #E9F8F0; --mint-ink: #1F7A52; --slate: #2F3A4B; }
.site-header.solid { background: #fff; border-bottom: 1px solid #E6E9EE; box-shadow: 0 2px 12px rgba(20,30,50,.06); }
.site-header.solid .nav a { color: #1F2937; }
.site-header.solid .nav a:hover, .site-header.solid .nav a[aria-current="page"] { border-bottom-color: var(--mint); color: #111827; }
.site-header.solid .lang { border-color: #D6DBE3; }
.site-header.solid .lang button { color: #374151; }
.site-header.solid .lang button[aria-pressed="true"] { background: var(--mint); color: #fff; }
.site-header.solid .nav-toggle { border-color: #D6DBE3; color: #1F2937; }
.site-header.solid .logo-plate { box-shadow: none; padding-left: 0; }
@media (max-width: 1240px) {
  .site-header.solid .nav { background: #fff; box-shadow: 0 14px 28px rgba(20,30,50,.12); }
  .site-header.solid .nav a { border-bottom-color: #EEF0F3; }
  .site-header .nav { background: #fff; }
  .site-header .nav a { color: #1F2937; border-bottom-color: #EEF0F3; }
  .nav a[aria-current="page"] { color: var(--mint-ink); }
}
.page-hero { background: var(--mint-soft); color: var(--ink); }
.page-hero .page-lead { color: #4B5563; }
.policy { background: var(--mint-soft) !important; color: var(--ink); }
.policy h2 { color: var(--ink); }
.policy h3 { color: var(--mint-ink) !important; }
.policy p { color: #4B5563 !important; }
.steps li::before { background: var(--mint) !important; color: #fff !important; }
.how { background: #F4FBF7; }

/* Hero dengan foto bandara */
.hero {
  background-image:
    linear-gradient(180deg, rgba(5,15,25,.55) 0%, rgba(5,15,25,.15) 35%, rgba(5,15,25,.65) 100%),
    var(--hero-img, linear-gradient(115deg, #1D5C46 0%, #2F8F67 60%, #5BCB95 100%)) !important;
  background-size: cover !important; background-position: center 60% !important;
}
.hero::after { display: none; }

/* Kolom Dari/Ke ketik bebas */
.place-ac { flex: 1; }
.place-ac input::placeholder { color: #6B7385; }
.opt-airport .ac-name::before { content: "✈ "; color: var(--mint-ink); }
.place-ac .ac-list { left: -2.7rem; right: -3.2rem; }

/* ===== Alur pemesanan /book/ ===== */
body.sub .flow { background: #F4F5F7; padding: 1.6rem 0 4rem; min-height: 70vh; }
.flow-steps { list-style: none; display: flex; justify-content: center; gap: 0; margin: .4rem 0 1.4rem; padding: 0; }
.flow-steps li { display: flex; align-items: center; gap: .55rem; color: #9AA3AF; font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.flow-steps li + li::before { content: ""; width: 70px; height: 2px; background: #D6DBE3; margin: 0 1rem; }
.fs-dot { width: 28px; height: 28px; border-radius: 50%; background: #C5CBD3; color: #fff; display: grid; place-items: center; font-size: .85rem; letter-spacing: 0; }
.flow-steps li.on, .flow-steps li.done { color: #1F2937; }
.flow-steps li.on .fs-dot, .flow-steps li.done .fs-dot { background: var(--mint); }
.flow-steps li.done + li::before, .flow-steps li.on + li::before { background: var(--mint); }
.trust-band { background: var(--slate); color: #fff; border-radius: 6px; padding: 1.6rem 1.8rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-bottom: 1.6rem; }
.tb-item { display: flex; gap: 1rem; align-items: flex-start; }
.tb-ico { width: 54px; height: 54px; border-radius: 50%; background: #fff; color: var(--slate); display: grid; place-items: center; flex: none; }
.tb-ico svg { width: 26px; height: 26px; }
.tb-item b { display: block; font-size: 1.1rem; margin-bottom: .2rem; }
.tb-item p { margin: 0; color: #C9D0DA; font-size: .92rem; }
.flow-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: 1.6rem; align-items: start; }
.flow-card { background: #fff; border-radius: 6px; padding: 2rem 2.2rem; box-shadow: 0 1px 3px rgba(20,30,50,.06); }
.flow-card h1 { font-size: 1.9rem; margin: 0 0 1.4rem; }
.flow-card h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: #6B7280; margin: 1.4rem 0 .5rem; }
.flow-card .field label { font-size: 1rem; font-weight: 700; color: #1F2937; }
.flow-card .field input, .flow-card .field select, .flow-card .field textarea { border: 1.5px solid #D6DBE3; border-radius: 4px; padding: .85rem 1rem; font-size: 1rem; background: #fff; width: 100%; font: inherit; }
.flow-card .field input:focus, .flow-card .field select:focus, .flow-card .field textarea:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 3px rgba(91,203,149,.2); }
.radio-group { display: grid; gap: .8rem; margin-bottom: 1.6rem; }
.radio-row, .chk-row { display: flex; align-items: flex-start; gap: .8rem; cursor: pointer; font-size: 1.02rem; }
.radio-row input, .chk-row input { width: 22px; height: 22px; accent-color: var(--mint); margin-top: .1rem; flex: none; }
.chk-row { margin: .9rem 0; }
.chk-hint { display: block; font-size: .88rem; color: #6B7280; margin-top: .1rem; }
.phone-row { display: grid; grid-template-columns: 120px 1fr; gap: .5rem; }
.flow-hr { border: 0; border-top: 1px solid #E6E9EE; margin: 1.4rem 0; }
.sub-field { margin-left: 2.1rem; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.flow-actions { display: grid; grid-template-columns: auto 1fr; gap: 1rem; margin-top: 1.6rem; }
.flow-actions .btn { width: 100%; padding: 1.05rem 1.4rem; font-size: 1.08rem; border-radius: 4px; }
.btn-outline { background: #fff; border: 1.5px solid #CBD2DC; color: #1F2937; }
.btn-outline:hover { border-color: #1F2937; }
.flow-side { display: grid; gap: 1.2rem; }
.side-card { background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(20,30,50,.06); overflow: hidden; }
.os-head { position: relative; min-height: 150px; padding: 1.4rem 1.6rem; color: #fff; background: linear-gradient(180deg, rgba(10,20,35,.15), rgba(10,20,35,.55)), url("https://commons.wikimedia.org/wiki/Special:FilePath/Lombok_International_Airport%2C_NTB.jpg?width=900") center/cover, #2F6B57; display: flex; flex-direction: column; justify-content: space-between; }
.os-head h2 { margin: 0; font-size: 1.6rem; }
.os-badge { align-self: center; background: rgba(40,48,60,.85); padding: .35rem .9rem; border-radius: 6px; font-weight: 800; font-size: 1.3rem; }
.os-body { padding: 1.3rem 1.6rem 1.5rem; }
.os-when { display: flex; align-items: center; gap: .6rem; color: #4B5563; }
.os-when svg { width: 22px; height: 22px; color: #3F4A5A; }
.os-edit { margin-left: auto; border: 0; background: none; font: inherit; font-weight: 700; color: #1F2937; cursor: pointer; }
.os-return { margin: .4rem 0 0 1.9rem; color: #4B5563; font-size: .92rem; }
.os-route { position: relative; margin: 1.1rem 0 1rem; padding-left: 1.3rem; display: grid; gap: 1rem; }
.os-route::before { content: ""; position: absolute; left: 4px; top: .55rem; bottom: 1.6rem; width: 2px; background: var(--mint); }
.os-stop { position: relative; }
.os-stop::before { content: ""; position: absolute; left: -1.3rem; top: .38rem; width: 6px; height: 6px; border: 2px solid var(--mint); border-radius: 50%; background: #fff; }
.os-stop b { display: block; font-size: 1.08rem; }
.os-stop small { display: block; color: #6B7280; font-size: .9rem; line-height: 1.4; }
.os-meta { display: flex; gap: 1.3rem; color: #6B7280; padding-bottom: 1rem; border-bottom: 1px solid #E6E9EE; }
.os-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.os-meta svg { width: 22px; height: 22px; }
.os-total { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; align-items: flex-start; }
.os-total b { font-size: 1.05rem; }
.os-total small { display: block; color: #6B7280; font-size: .85rem; }
.os-price { text-align: right; }
.os-price b { color: var(--mint); font-family: var(--font-head); font-size: 1.7rem; }
.flex-card { padding: 1.4rem 1.6rem; }
.flex-card h2 { margin: 0 0 1rem; font-size: 1.35rem; }
.tick-list.big li { color: #1F2937; font-size: 1rem; }
.route-card { padding: 1.4rem 1.6rem; }
.rt-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .8rem; }
.rt-head h2 { margin: 0; font-size: 1.35rem; }
.rt-head span { color: #6B7280; }
.rt-map { width: 100%; height: 230px; border: 0; border-radius: 4px; background: #EEF1F4; display: block; }
.rt-link { display: inline-block; margin-top: .6rem; font-weight: 700; color: var(--mint-ink); text-decoration: none; }
.sm-list { margin: 0; display: grid; gap: 0; }
.sm-row { display: grid; grid-template-columns: 180px 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid #EEF0F3; }
.sm-row dt { color: #6B7280; }
.sm-row dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.sm-row small { display: block; font-weight: 400; color: #6B7280; }
.sm-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1.4rem; font-size: 1.1rem; font-weight: 700; }
.sm-total b { color: var(--mint); font-family: var(--font-head); font-size: 1.8rem; }
.sm-note { color: #6B7280; margin: .2rem 0 0; }
.done-card { text-align: left; }
.done-check { width: 64px; height: 64px; border-radius: 50%; background: var(--mint); color: #fff; display: grid; place-items: center; margin-bottom: 1rem; }
.done-check svg { width: 34px; height: 34px; }
.done-lead { color: #4B5563; font-size: 1.08rem; }
.done-ref-label { margin: 1.2rem 0 .2rem; color: #6B7280; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }
.done-ref { font-family: var(--font-head); font-weight: 800; font-size: 1.8rem; background: var(--mint-soft); display: inline-block; padding: .35rem .9rem; border-radius: 6px; margin: 0; }
.done-steps { padding-left: 1.2rem; color: #374151; display: grid; gap: .4rem; }
.empty-flow { background: #fff; border-radius: 6px; padding: 2.4rem; text-align: center; }
.empty-flow .btn { width: auto; }
@media (max-width: 960px) {
  .flow-grid { grid-template-columns: 1fr; }
  .flow-side { order: -1; }
  .trust-band { grid-template-columns: 1fr; padding: 1.2rem; }
}
@media (max-width: 560px) {
  .flow-card { padding: 1.3rem; }
  .flow-steps li + li::before { width: 22px; margin: 0 .5rem; }
  .flow-steps li { font-size: .7rem; }
  .flow-actions { grid-template-columns: 1fr; }
  .sm-row { grid-template-columns: 1fr; gap: .1rem; }
  .phone-row { grid-template-columns: 110px 1fr; }
  .sub-field { margin-left: 0; }
}
.flow-card .field .chk-row { display: flex; font-weight: 400; font-size: 1.02rem; }
.flow-card .field .chk-row input, .flow-card .chk-row input, .flow-card .radio-row input { width: 22px !important; height: 22px; padding: 0; border: 0; box-shadow: none; }
.flow-card .field.invalid .chk-row span { color: var(--error); }
@media (max-width: 560px) {
  .flow-steps li:not(.on) > span:not(.fs-dot) { display: none; }
  .flow-steps li + li::before { width: 18px; margin: 0 .4rem; }
}

/* ===== Transfers: kartu destinasi (seperti referensi) ===== */
body.sub .dest-wrap { background: #F4F5F7; padding: 2.5rem 1rem 4rem; min-height: 72vh; }
.dest-card { width: min(640px, 100%); margin: 0 auto; background: #fff; border-radius: 16px; box-shadow: 0 10px 40px rgba(20,30,50,.12); overflow: hidden; }
.dest-fields { border-bottom: 1px solid #E6E9EE; box-shadow: 0 4px 10px rgba(20,30,50,.04); }
.dest-field { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem; position: relative; }
.dest-field + .dest-field { border-top: 1px solid #EEF0F3; }
.dest-field.on { background: #F7FBF9; }
.dest-field.on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--mint); }
.dest-ico { width: 24px; height: 24px; color: #8A93A3; flex: none; }
.dest-field input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 1.15rem; color: #1F2937; background: transparent; padding: .3rem 0; }
.dest-field input::placeholder { color: #9AA3AF; }
.dest-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #F1F3F5; font-size: 1.4rem; line-height: 1; cursor: pointer; flex: none; color: #374151; }
.dest-list { list-style: none; margin: 0; padding: .8rem 0; max-height: 470px; overflow-y: auto; }
.dest-list li[role=option] { padding: .85rem 2.6rem; cursor: pointer; font-size: 1.1rem; color: #6B7280; }
.dest-list li[role=option] b { color: #1F2937; font-weight: 700; }
.dest-list li[role=option]:hover, .dest-list li[aria-selected="true"] { background: #F2FAF6; }
.dest-note { padding: .8rem 2.6rem; color: #6B7280; font-size: .95rem; }
.dest-attr { padding: .3rem 2.6rem .2rem; color: #9AA3AF; font-size: .75rem; }
.dest-foot { padding: 1rem 1.4rem 1.4rem; border-top: 1px solid #EEF0F3; }
.dest-foot .btn { width: 100%; border-radius: 6px; }
.dest-foot .btn[disabled] { opacity: .45; cursor: not-allowed; }
@media (max-width: 560px) { .dest-list li[role=option], .dest-note { padding-left: 1.4rem; padding-right: 1.4rem; } .dest-field input { font-size: 1.02rem; } }

/* Booking details: kotak perjalanan */
.trip-box { background: #F7FBF9; border: 1px solid #DDEFE5; border-radius: 6px; padding: 1rem 1.2rem .3rem; margin: -.4rem 0 1.6rem; }
.trip-box h3 { margin: 0 0 .7rem; }
.trip-box .row2 { gap: .8rem; }
.trip-box .field { margin-bottom: .8rem; }

/* ===== Bagian halaman utama (mengikuti referensi) ===== */
.riders { padding: 4.5rem 0 3rem; }
.riders h2, .icon-sec h2, .svc-sec h2, .dest-sec h2, #how h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: #2B3445; }
.riders-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: 220px 220px; gap: 1.2rem; position: relative; }
.riders-grid::before { content: ""; position: absolute; left: -1.6rem; top: -1.6rem; width: 60%; height: 70%; background: var(--mint-soft); border-radius: 18px; z-index: 0; }
.riders-grid figure { margin: 0; position: relative; z-index: 1; border-radius: 14px; overflow: hidden; }
.riders-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.riders-grid .r-big { grid-row: span 2; }
.riders-grid figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 1rem .8rem; color: #fff; font-weight: 600; background: linear-gradient(180deg, transparent, rgba(0,0,0,.6)); }
@media (max-width: 860px) { .riders-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 260px 160px 160px; } .riders-grid .r-big { grid-column: span 2; grid-row: auto; } .riders-grid::before { display: none; } }

.icon-sec { padding: 3.5rem 0; border-top: 1px solid #EEF0F3; }
#why .benefits { grid-template-columns: repeat(4, 1fr); gap: 1.8rem; }
#why .benefit { grid-template-columns: 1fr; gap: .9rem; }
#why .benefit svg { width: 74px; height: 74px; padding: 18px; border-radius: 50%; background: var(--mint-soft); color: var(--mint); }
#why .benefit h3 { margin-bottom: .3rem; }
@media (max-width: 960px) { #why .benefits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { #why .benefits { grid-template-columns: 1fr; } }
.icon-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.icon-item { display: flex; gap: 1.3rem; align-items: center; }
.ic-circle { width: 84px; height: 84px; border-radius: 50%; background: var(--mint-soft); color: var(--mint); display: grid; place-items: center; flex: none; }
.ic-circle svg { width: 38px; height: 38px; }
.icon-item p { margin: 0; color: #2B3445; font-size: 1.08rem; }
@media (max-width: 860px) { .icon-row { grid-template-columns: 1fr; } }

.how-v2 { background: #fff !important; border-top: 1px solid #EEF0F3; }
.how-v2 .steps { gap: 2rem; }
.how-v2 .steps li { padding-top: 0; }
.how-v2 .steps li::before { display: none; }
.how-tile { position: relative; height: 210px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 1.3rem; overflow: hidden; }
.how-tile svg { width: 96px; height: 96px; color: #fff; }
.how-tile.t1 { background: linear-gradient(135deg, #5BCB95, #2F9E6B); }
.how-tile.t2 { background: linear-gradient(135deg, #3D7FD0, #2B5BA8); }
.how-tile.t3 { background: linear-gradient(135deg, #F2A541, #E07B22); }
.how-tile::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 30%; height: 5px; transform: translateX(-50%); background: var(--mint); border-radius: 4px 4px 0 0; }
.how-num { position: absolute; left: 1rem; top: 1rem; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #1F2937; display: grid; place-items: center; font-weight: 700; font-size: 1.2rem; }
.how-v2 h3 { font-size: 1.5rem; color: #2B3445; }
.how-v2 .steps p { font-size: 1.05rem; color: #4B5563; }

.svc-sec { padding: 4rem 0; border-top: 1px solid #EEF0F3; }
.svc3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.svc3-card { color: inherit; text-decoration: none; display: block; }
.svc3-img { position: relative; height: 230px; border-radius: 12px; overflow: hidden; margin-bottom: 1.2rem; }
.svc3-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.svc3-card:hover .svc3-img img { transform: scale(1.04); }
.svc3-img::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 30%; height: 5px; transform: translateX(-50%); background: var(--mint); border-radius: 4px 4px 0 0; }
.svc3-card h3 { font-size: 1.45rem; color: #2B3445; margin-bottom: .5rem; }
.svc3-card p { color: #4B5563; font-size: 1.05rem; margin: 0; }
.svc3-more { display: inline-block; margin-top: .4rem; color: var(--mint-ink); font-weight: 700; }
@media (max-width: 860px) { .svc3 { grid-template-columns: 1fr; } }

.dest-sec { padding: 4rem 0; border-top: 1px solid #EEF0F3; }
.dest-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.dest-head h2 { margin: 0; }
.btn-outline-dark { background: #fff; border: 1.5px solid #CBD2DC; color: #1F2937; width: auto; border-radius: 6px; }
.btn-outline-dark:hover { border-color: #1F2937; }
.dest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.dest-tile { position: relative; height: 200px; border-radius: 8px; overflow: hidden; text-decoration: none; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.1rem 1.3rem; background-size: cover; background-position: center; }
.dest-tile:hover { filter: brightness(1.06); }
.dt-region { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; opacity: .92; }
.dt-name { font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; line-height: 1.1; }
.dest-tile.no-img { background: linear-gradient(135deg, #2F9E6B, #5BCB95); }
.dest-tile.t-kuta { background: linear-gradient(135deg, #1E7F74, #5BCB95); }
.dest-tile.t-senggigi { background: linear-gradient(135deg, #E07B22, #F2C14E); }
.dest-tile.t-selong { background: linear-gradient(135deg, #2B5BA8, #5FA8E8); }
.dest-tile.t-senaru { background: linear-gradient(135deg, #2D6A4F, #74C69D); }
.dest-tile.t-tetebatu { background: linear-gradient(135deg, #52734D, #A3C585); }
.dest-tile.t-ekas { background: linear-gradient(135deg, #1D4E89, #3FA7D6); }
.dest-tile.no-img::before { content: ""; position: absolute; right: -30px; top: -30px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.12); }
@media (max-width: 960px) { .dest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dest-grid { grid-template-columns: 1fr 1fr; gap: .7rem; } .dest-tile { height: 150px; padding: .8rem; } .dt-name { font-size: 1.2rem; } }

/* FAQ dua kolom */
#faq .faq-list { max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem; align-items: start; }
#faq .faq-list summary::after { content: "⌄"; color: var(--mint); font-size: 1.4rem; top: .7rem; }
#faq .faq-list details[open] summary::after { content: "⌃"; }
@media (max-width: 860px) { #faq .faq-list { grid-template-columns: 1fr; } }
.how-tile.has-photo { background-size: cover; background-position: center; }
.svc-card.has-img { padding-top: 0; overflow: hidden; }
.svc-photo { margin: 0 -1.4rem; height: 180px; overflow: hidden; }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.how-tile.t3.has-photo { background-position: center 85%; }
.svc-photo img { object-position: center 75%; }

/* Foto pada judul halaman & latar halaman Transfers */
.page-hero.has-photo { position: relative; color: #fff; background: #1F4F3F; background-image: linear-gradient(90deg, rgba(10,25,20,.72) 0%, rgba(10,25,20,.35) 70%, rgba(10,25,20,.2) 100%), var(--ph); background-size: cover; background-position: center; padding-top: 4.5rem; padding-bottom: 4.5rem; }
.page-hero.has-photo h1 { color: #fff; }
.page-hero.has-photo .page-lead { color: #E8EFEA; }
body.sub .dest-wrap.has-photo { background-color: #1F4F3F; background-image: linear-gradient(180deg, rgba(10,25,20,.55), rgba(10,25,20,.35)), url("https://commons.wikimedia.org/wiki/Special:FilePath/Lombok_International_Airport%2C_NTB.jpg?width=1800"); background-size: cover; background-position: center; }
.hero { background-color: #1D4F3F; }
.credit-list { padding-left: 1.2rem; display: grid; gap: .5rem; color: #374151; }
.credit-list a { color: var(--mint-ink); }
.how-tile.has-photo.t1, .how-tile.has-photo.t2 { background-position: center top; }
.dest-list li[role=option] { display: flex; align-items: center; gap: .9rem; }
.dest-thumb { width: 52px; height: 40px; border-radius: 6px; overflow: hidden; flex: none; background: #EEF1F4; display: grid; place-items: center; }
.dest-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dest-thumb.is-pin::before { content: "📍"; font-size: 1rem; }
.dest-thumb.is-empty::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); }
.dest-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; }
@media (max-width: 480px) { .dest-grid { grid-template-columns: 1fr 1fr !important; } }