/* claudia-prototype v3 — journey as a clean, friendly next screen.
 * Brand surfaces from base.css vars; flight cards use the live .flight-card
 * styles; hotel cards follow the /claudia/ canvas card recipe. */

/* ── the journey is a NEXT SCREEN ─────────────────────────────────────── */
.journey {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--surface);
  color: var(--on-background);
  display: flex;
  flex-direction: column;
}
.journey[hidden] { display: none; }
/* the landing auth modal is z-index:150 — BELOW the journey overlay (2000) — so opening login/
   signup from inside the journey (yolcu step / success screen) rendered it invisibly behind the
   journey. Raise it above the journey (and the ön onay modal at 4000) when it's used from here. */
.auth-overlay { z-index: 5000; }
/* same trap for the search widget's date picker (.dp-overlay z-index:1000) — opened from the guided
   strip it rendered behind the journey (2000), so tapping a date did nothing. Raise it too. */
.dp-overlay { z-index: 5000; }
/* flight-ticket step: the sort filters + the free-text chat input are redundant (a flight is already
   chosen) — hide both, leaving just Claudia's narration in the pod. */
/* "Odemeye gec" filtre degil AKSIYON: filtrelerden nefes payiyla ayrilir, saga yaslanir */
.j-stage.ticket-step .cp-filters,
.j-stage.ticket-step .cp-ask { display: none; }

/* t1 — cabin window: squircle aperture + fuselage frame + glass zoom */
.journey[data-trans="t1"].opening { animation: jwopen 1.5s cubic-bezier(.55, 0, .15, 1) forwards; }
@keyframes jwopen {
  0%   { clip-path: inset(40% 36% 40% 36% round 46% 46% 46% 46%); }
  55%  { clip-path: inset(14% 10% 14% 10% round 120px); }
  100% { clip-path: inset(0 0 0 0 round 0); }
}
.jw-frame {
  position: absolute; inset: 0; z-index: 12; pointer-events: none; opacity: 0;
}
.journey[data-trans="t1"].opening .jw-frame {
  opacity: 1;
  background: radial-gradient(115% 100% at 50% 50%, transparent 58%, rgba(214, 222, 232, .95) 72%, #e8edf4 88%);
  animation: jwframe 1.5s ease forwards;
}
@keyframes jwframe { 70% { opacity: 1; } 100% { opacity: 0; } }
.jw-glass {
  position: absolute; inset: 0; z-index: 10;
  background-size: cover; background-position: center;
  opacity: 0; pointer-events: none;
}
.journey[data-trans="t1"].opening .jw-glass { animation: jwglass 1.7s ease forwards; }
@keyframes jwglass {
  0% { opacity: .92; transform: scale(1.04); filter: blur(0); }
  60% { opacity: .5; transform: scale(1.22); filter: blur(2px); }
  100% { opacity: 0; transform: scale(1.38); filter: blur(6px); }
}

/* t2 — through the clouds: punch up through a dense cloud bank into blue sky */
.jw-clouds { position: absolute; inset: 0; z-index: 12; pointer-events: none; opacity: 0; overflow: hidden; }
.journey[data-trans="t2"].opening { animation: jwsky 1.7s ease forwards; }
@keyframes jwsky {
  0% { opacity: 0; }
  14% { opacity: 1; }
  100% { opacity: 1; }
}
.journey[data-trans="t2"].opening .jw-glass { animation: jwglass 1.6s ease forwards; }
.journey[data-trans="t2"].opening .jw-clouds {
  opacity: 1;
  background: linear-gradient(180deg, #5cb0ff 0%, #97cfff 42%, #d4ecff 100%);  /* blue sky behind the cloud bank */
  animation: jwcloudfade 1.7s ease forwards;
}
@keyframes jwcloudfade { 0% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } }
.jw-clouds i {
  position: absolute;
  width: 56vw; height: 48vh;
  border-radius: 50%;
  /* feathered + heavily blurred = soft fluffy edge, no hard gradient rings */
  background: radial-gradient(closest-side, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .82) 40%, rgba(255, 255, 255, .32) 64%, rgba(255, 255, 255, 0) 82%);
  filter: blur(26px);
  will-change: transform, opacity;
}
/* a soft cloud cover fills the screen, then the masses PART outward + fade (no white-out) */
.journey[data-trans="t2"].opening .jw-clouds i { animation: jwpuff 1.5s cubic-bezier(.35, .1, .3, 1) forwards; }
.jw-clouds i:nth-child(1) { left: -16%; top: -14%; --dx: -32%; --dy: -22%; animation-delay: 0s !important; }
.jw-clouds i:nth-child(2) { right: -18%; top: -10%; --dx: 32%;  --dy: -22%; animation-delay: .04s !important; }
.jw-clouds i:nth-child(3) { left: 2%;    top: 12%;  --dx: -26%; --dy: 4%;   animation-delay: .08s !important; }
.jw-clouds i:nth-child(4) { right: 0%;   top: 18%;  --dx: 26%;  --dy: 4%;   animation-delay: .10s !important; }
.jw-clouds i:nth-child(5) { left: -14%;  top: 44%;  --dx: -30%; --dy: 20%;  animation-delay: .06s !important; }
.jw-clouds i:nth-child(6) { right: -16%; top: 50%;  --dx: 30%;  --dy: 20%;  animation-delay: .09s !important; }
.jw-clouds i:nth-child(7) { left: 20%;   top: 30%;  --dx: -14%; --dy: 26%;  animation-delay: 0s !important; }
.jw-clouds i:nth-child(8) { left: 30%;   top: -8%;  --dx: 14%;  --dy: -26%; animation-delay: .12s !important; }
@keyframes jwpuff {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  18%  { opacity: 1; }
  52%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, -40%)) scale(1.4); opacity: 0; }
}

/* t3 — takeoff: the journey lifts in from below, nose up */
.journey[data-trans="t3"].opening {
  transform-origin: 50% 120%;
  animation: jwtakeoff 1.1s cubic-bezier(.3, .7, .2, 1) forwards;
}
@keyframes jwtakeoff {
  0% { transform: perspective(1200px) translateY(60%) rotateX(14deg) scale(.94); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.journey[data-trans="t3"].opening .jw-glass { animation: jwglass 1.2s ease forwards; }

/* ── alternative open transitions (calmer options to replace takeoff) ─────── */
/* t4 — Yumuşak: fade + gentle scale, a light blur clearing */
.journey[data-trans="t4"].opening { animation: jwdissolve .9s ease forwards; }
@keyframes jwdissolve { 0% { opacity: 0; transform: scale(.965); filter: blur(7px); } 65% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: scale(1); filter: blur(0); } }

/* t5 — Yükseliş: slides up from the bottom, ease-out */
.journey[data-trans="t5"].opening { animation: jwrise .8s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes jwrise { 0% { opacity: .3; transform: translateY(64px); } 100% { opacity: 1; transform: translateY(0); } }

/* t6 — Diyafram: a circle opens from the center */
.journey[data-trans="t6"].opening { animation: jwiris .95s cubic-bezier(.55, 0, .2, 1) forwards; }
@keyframes jwiris { 0% { clip-path: circle(7% at 50% 46%); } 100% { clip-path: circle(150% at 50% 46%); } }

/* t7 — Haritaya iniş: settles down from slightly zoomed-in (map dive) */
.journey[data-trans="t7"].opening { animation: jwsettle 1s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes jwsettle { 0% { opacity: 0; transform: scale(1.09); } 45% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }

/* t8 — Perde: an upward wipe reveal */
.journey[data-trans="t8"].opening { animation: jwwipe .85s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes jwwipe { 0% { clip-path: inset(100% 0 0 0); } 100% { clip-path: inset(0 0 0 0); } }

.journey.open .jw-glass, .journey.open .jw-frame, .journey.open .jw-clouds { opacity: 0; }

/* transition PREVIEW picker (only shown with ?tpreview=1) */
.tpv {
  position: fixed; right: 14px; bottom: 14px; z-index: 9000;
  display: flex; flex-wrap: wrap; gap: 5px; max-width: 260px;
  background: rgba(255, 255, 255, .97); border: 1px solid var(--outline-variant);
  border-radius: 12px; padding: 9px 10px; box-shadow: 0 12px 30px rgba(11, 28, 48, .18);
  font-size: 11.5px;
}
.tpv-title { flex-basis: 100%; font-weight: 700; color: var(--gray-700); margin-bottom: 2px; }
.tpv button {
  border: 1px solid var(--outline-variant); background: #fff; color: var(--gray-700);
  border-radius: 999px; padding: 4px 9px; font-size: 11px; cursor: pointer; font-family: inherit;
}
.tpv button:hover { background: var(--surface-container-low); }
.tpv button.on { background: var(--primary-container); border-color: var(--primary-container); color: #fff; }
.tpv-hint { flex-basis: 100%; color: var(--gray-400); font-size: 10px; margin-top: 3px; }

/* ── top bar ──────────────────────────────────────────────────────────── */
.j-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: #fff;
  border-bottom: 1px solid var(--outline-variant);
  z-index: 6;
  position: relative;   /* anchor for the centered #jControls */
}

/* persistent journey controls (dates + step filters) — centered in the top bar */
.j-controls[hidden] { display: none; }
.j-controls {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  max-width: min(760px, calc(100vw - 430px));
  overflow-x: auto; scrollbar-width: none;
}
.j-controls::-webkit-scrollbar { display: none; }
.jc-dates { display: flex; align-items: center; gap: 7px; flex: none; }
.jc-date { display: flex; align-items: center; gap: 1px; background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: 999px; padding: 2px 4px; }
.jc-arrow { border: none; background: none; color: var(--gray-500); font-size: 15px; line-height: 1; cursor: pointer; width: 20px; height: 24px; border-radius: 50%; padding: 0; }
.jc-arrow:hover { background: var(--outline-variant); color: var(--on-background); }
.jc-d { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1.05; padding: 0 4px; cursor: pointer; }
.jc-d b { font-size: 12.5px; color: var(--on-background); white-space: nowrap; }
/* native calendar overlaid transparently on the date label — tap the date to pick one */
.jc-dinput { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.jc-dinput::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.jc-d small { font-size: 9px; color: var(--gray-400); }
.jc-sep { color: var(--gray-400); font-size: 13px; flex: none; }
.jc-filters { display: flex; align-items: center; gap: 8px; flex: none; }
.j-title { display: flex; align-items: baseline; gap: 8px; }
.j-title b { font-size: 16px; font-weight: 700; color: var(--on-background); }
.j-title span { font-size: 12.5px; color: var(--gray-500); }
.j-back {
  border: 1px solid var(--outline-variant);
  background: #fff;
  color: var(--gray-700);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s ease;
}
.j-back:hover { background: var(--surface-container-low); color: var(--on-background); }

/* ── stage ────────────────────────────────────────────────────────────── */
.j-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% -20%, #e8f4fd, transparent 60%),
    var(--surface);
}
/* the companion globe as full-stage BACKGROUND canvas (search + flights) */
#compHost { position: absolute; inset: 0; z-index: 1; }
#compHost .suso-comp { height: 100% !important; border-radius: 0 !important; margin: 0 !important; }
.suso-comp-hbar { display: none !important; }   /* the pod narrates; no docked bar */
#compHost .suso-comp .badge { display: none; }  /* pod already says Claudia */
#compHost .suso-comp .phase { display: none; }  /* cards cover the corner; keep it clean */
.j-stage:not(.globe-mode) #compHost { display: none; }

#cityMap { position: absolute; inset: 0; z-index: 1; background: #aad7ea; transition: transform .5s ease; }
/* ~vertical routes: nudge the map left so the route seats in the chat↔cards gap
   (the exposed right strip sits behind the right-side cards) */
/* route-vshift: harita sola itilir (dikey rota sol oluğa otursun). Div viewport geninde
   kalsaydı itilen miktar kadar SAĞDA çıplak zemin kalırdı (ultrawide'da ~680px boş şerit).
   Çözüm: div'i sağa doğru büyüt + translate'i eleman-genişliğine göre telafi et; görünen
   merkez birebir eski konumda (50-15=35% / 50-34=16%), sağ kenar her genişlikte kaplı.
   (-23.0769% = 30/130, -40.4762% = 68/168; genişlik değişimi fitRoute'ta invalidateSize ister) */
.j-stage.route-vshift #cityMap { right: -30%; transform: translateX(-23.0769%); }
/* guided layout centers the cards → shift a ~vertical route further left into the gutter */
.j-stage.flights-guided.route-vshift #cityMap { right: -68%; transform: translateX(-40.4762%); }
#cityMap[hidden] { display: none; }
#cityMap .leaflet-container { width: 100%; height: 100%; font-family: inherit; background: #aad7ea; }
#cityMap .leaflet-control-attribution { background: rgba(255, 255, 255, .8); font-size: 9px; }

/* content column: centered while searching, docks right in map mode */
.j-col {
  position: relative;
  z-index: 3;
  height: 100%;
  overflow-y: auto;
  width: min(860px, 94vw);
  margin: 0 auto;
  padding: 16px 8px 32px;
  /* scrollbar hidden until you actually scroll (or hover); space stays reserved
     so revealing it never shifts the layout */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.j-col.scrolling, .j-col:hover { scrollbar-color: rgba(11, 28, 48, .32) transparent; }
.j-col::-webkit-scrollbar { width: 9px; }
.j-col::-webkit-scrollbar-track { background: transparent; }
.j-col::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; transition: background-color .25s ease; }
.j-col.scrolling::-webkit-scrollbar-thumb, .j-col:hover::-webkit-scrollbar-thumb { background-color: rgba(11, 28, 48, .28); }
/* reserve the scrollbar gutter on BOTH sides so cards stay centered (left gap == right gap).
   flights-guided is excluded — it JS-aligns the pod to the card box against a one-sided gutter. */
.j-stage:not(.flights-guided) .j-col { scrollbar-gutter: stable both-edges; }
.j-grab { display: none; }   /* the draggable sheet handle is mobile-only (shown in the @media below) */
/* desktop: the Claudia pod owns the top-left rail; content sits right of it */
@media (min-width: 901px) {
  .j-stage:not(.map-mode) .j-col {
    margin-left: 366px;
    margin-right: auto;
    width: min(860px, calc(100vw - 392px));
  }
}
/* results float over the map — CENTERED in the space beside the Claudia pod
   (left rail is the pod; centering in the remaining band avoids overlap) */
.j-stage.map-mode .j-col,
.j-stage.side-mode .j-col {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  width: min(560px, 60vw);
  margin: 0 auto;               /* dead-center over the map */
  padding: 14px 6px 24px;
}
/* HOTELS dock to the right so the map + price pins stay visible on the left
   (flights stay centered). Desktop only — mobile uses the bottom sheet. */
@media (min-width: 901px) {
  .j-stage.map-mode.hotels-mode .j-col { left: auto; right: 24px; margin: 0; }
}
/* ── location/weather card placement (desktop) ─────────────────────────────────────────
   FLIGHT SEARCH: the pod is a centred strip hugging the search fields (see
   _syncGuidedClearance), so the top-left corner is free -> weather sits top-LEFT.
   TICKET: the pod owns the top-left, so weather sits top-RIGHT.
   HOTELS is untouched (keeps the base bottom-left, clear of the right-docked cards). */
@media (min-width: 901px) {
  .j-stage.flights-guided .j-citycard { top: 14px; left: 16px; right: auto; bottom: auto; }
  .j-stage.ticket-step .j-citycard { top: 14px; right: 16px; left: auto; bottom: auto; }
}
/* NARROW DESKTOP: a centred column collides with the top-left pod once the window shrinks —
   clearance needs (W - colW)/2 >= 16 + 380 + 16, i.e. W >= ~1384px for a min(560px,60vw)
   column. Below that, dock the flights/ticket block to the RIGHT rail (the same pattern
   hotels-mode already uses) so the pod + weather keep their edge margins, and on the ticket
   drop the weather to bottom-left because the right is now the column. Under 901px the
   mobile bottom-sheet layout takes over. */
@media (min-width: 901px) and (max-width: 1400px) {
  /* width cap = viewport - (16 pod margin + 380 pod + 16 gap + 24 right rail) = 100vw - 436.
     Docking alone isn't enough near 901px: pod(380) + column(540) + margins exceeds the
     viewport, so the column would still sit on the pod. (On the flight-search step
     _syncGuidedClearance sets an inline width that wins here — it applies its own reserve.) */
  .j-stage.map-mode:not(.hotels-mode) .j-col {
    left: auto; right: 24px; margin: 0;
    width: min(560px, calc(100vw - 436px));
  }
  .j-stage.ticket-step .j-citycard { top: auto; bottom: 16px; left: 16px; right: auto; }
}
#compHost { min-height: 0; }
#stagePanel { display: flex; flex-direction: column; gap: 12px; }

.j-results-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 4px 4px 8px;
}
.j-results-head b { font-size: 19px; font-weight: 700; color: var(--on-background); }
.j-results-head span { font-size: 13px; color: var(--gray-500); }
.j-results-head[hidden] { display: none; }

/* generic white panel cards (payment, summary, success) */
.jcard {
  background: #fff;
  border: 1px solid var(--outline-variant);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(11, 28, 48, .06);
  padding: 16px 18px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .35s ease, transform .35s ease, border-color .15s ease, box-shadow .15s ease;
}
.jcard.in { opacity: 1; transform: none; }
.jcard h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--on-background); }
.jcard .muted { color: var(--gray-500); font-size: 13px; }

/* flight cards come from base.css (.flight-card / .fc-*) — small proto extras */
#stagePanel .flight-card { position: relative; opacity: 0; transform: translateY(14px); transition: opacity .35s ease, transform .35s ease; }
#stagePanel .flight-card.in { opacity: 1; transform: none; }
/* flight ticket-detail step — reuses the page's .fc-leg card styling for each leg */
.flight-ticket { padding: 14px 16px 16px; }
/* baggage note is now a full-width row BELOW the leg (moved out of .fc-airline in legHtml),
   so drop the 160px cap that squeezed the route and give it a little breathing room. */
.flight-ticket .fc-baggage-note { max-width: none; margin: 6px 0 0; }
.flight-ticket .ft-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.flight-ticket .ft-head b { font-size: 15px; font-weight: 800; color: var(--on-background); }
.flight-ticket .ft-head span { font-size: 11.5px; font-weight: 600; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flight-ticket .ft-leg-wrap { border-top: 1px dashed var(--outline-variant); padding-top: 10px; margin-top: 10px; }
.flight-ticket .ft-leg-wrap:first-of-type { border-top: none; padding-top: 4px; margin-top: 0; }
.flight-ticket .ft-dir { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sky-dark); margin-bottom: 5px; }
.flight-ticket .ft-dir span { color: var(--gray-500); font-weight: 600; }
.flight-ticket .ft-amen { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 2px; }
.flight-ticket .ft-amen-leg { margin: 8px 0 2px; }
.flight-ticket .ft-amen-leg:empty { display: none; }
/* ticket endpoint: airport CODE + time + city + full airport name (like the live vade-seçimi ticket) */
/* TOP-align the two endpoints: the departure side carries an extra airport-name line, so a centered
   row pushed its CODE/time out of line with the arrival side. flex-start locks both codes (and both
   times) onto the same baseline; the duration block is nudged down to sit on the time row. */
.flight-ticket .fc-route { align-items: flex-start; }
.flight-ticket .fc-duration { margin-top: 13px; min-width: 0; }
/* Long codeshare airline names ("Turkish Airlines, Bangkok Airways") overflowed the card because
   the base .fc-route is `flex:1` (flex-basis 0) — it never claims its real content width, so the
   nowrap airline column kept its full size and the route (with the arrival endpoint) got squeezed
   off the right edge. Fix (ticket-only): give the route flex-basis:auto so it claims its content,
   which forces the airline column to be the one that yields — its name WRAPS to a 2nd line and the
   whole row shifts left, keeping the ENDPOINTS at their natural size and the arrival inside the
   card. Search-list cards are untouched. */
.flight-ticket .fc-route { flex: 1 1 auto; min-width: 0; }
.flight-ticket .fc-airline { flex-shrink: 1; min-width: 0; }
.flight-ticket .fc-airline > div { min-width: 0; }
.flight-ticket .fc-airline-name { white-space: normal; overflow-wrap: anywhere; }
.flight-ticket .fc-point { display: flex; flex-direction: column; min-width: 0; }
.flight-ticket .fc-point-r { text-align: center; align-items: center; }   /* arrival centered, matching the departure column */
.flight-ticket .fc-point .fc-code { font-size: 15px; font-weight: 800; color: var(--on-background); letter-spacing: .5px; line-height: 1.15; }
.flight-ticket .fc-point .fc-time { font-size: 13px; font-weight: 700; color: var(--sky-dark); }
/* +N-day marker (next-day arrival) — small spaced superscript so it never crowds the hour */
/* +N-day marker: the landing modal styles .fc-time-day position:absolute;left:100%;top:0.
   The ticket's inline rule set display/vertical-align but NOT position, so the marker stayed
   ABSOLUTE — and the EXPANDED stop-detail markers (in .ft-seg-pt, with no positioned ancestor)
   flew to the card's top-right corner as a stray '++1' (user 2026-07-24). Reset position for
   EVERY .fc-time-day in the ticket so it's a tight inline superscript hugging its own hour. */
.flight-ticket .fc-time-day { position: static; left: auto; top: auto; display: inline-block; font-size: 9.5px; font-weight: 800; color: var(--sky); vertical-align: super; margin-left: 1px; padding: 0; letter-spacing: 0; }
.flight-ticket .fc-point .fc-city { font-size: 11px; color: var(--gray-600); }
.flight-ticket .fc-point .fc-airport { font-size: 9.5px; color: var(--gray-400); line-height: 1.25; margin-top: 1px; max-width: 120px; }
/* MOBIL BILET bacagi YATAY kalsin: landing modalinin @768px `.fc-leg{flex-direction:column}`
   kurali bileti de dikey yigiyordu -> logo+guzergah GEREKSIZ 2 satir kapliyordu (kullanici
   2026-07-24, "2. ornekteki gibi olsun"). Ticket'a kapsanmis override = masaustu-daraltilmis
   kompakt satirin aynisi: kucuk logo + ad/kod solda dar sutun, ayrac, sonra tam-genislik
   guzergah; dar satirda tam havalimani adini (or. Sabiha Gokcen) gizle -- sehir yeterli. */
@media (max-width: 900px) {
  .flight-ticket .fc-leg { flex-direction: row; align-items: center; gap: 11px; }
  .flight-ticket .fc-airline {
    flex-direction: column; align-items: center; gap: 2px; flex: none; min-width: 0;
    border-right: 1px solid var(--outline-variant); border-bottom: none;
    padding: 0 11px 0 0; margin: 0;
  }
  .flight-ticket .fc-airline-logo { width: 34px; height: 34px; }
  .flight-ticket .fc-airline > div { text-align: center; }
  .flight-ticket .fc-airline-name { font-size: 10.5px; font-weight: 600; line-height: 1.2; white-space: normal; max-width: 62px; }
  .flight-ticket .fc-airline-code { font-size: 9.5px; }
  .flight-ticket .fc-route { flex: 1 1 auto; gap: 8px; }
  .flight-ticket .fc-point .fc-airport { display: none; }
}
/* ── multi-segment (aktarmalı) route: collapsible per-segment detail (mirrors GF card) ── */
/* Multi-leg collapsed view = legHtml summary + a full-width toggle bar below it
   (never overlapping the route/arrival code). Per-segment amenities live inside the
   expanded .ft-msegs box. Direct flights don't use this — they keep inline chips. */
.flight-ticket .ft-mroute { position: relative; }
.flight-ticket .ft-seg-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 8px; padding: 7px 12px; background: var(--gray-50, #f8fafc); border: 1px solid var(--gray-200); border-radius: 10px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--gray-600); }
.flight-ticket .ft-seg-toggle:hover { background: var(--gray-100, #f1f3f5); }
.flight-ticket .ft-seg-toggle-lbl { line-height: 1; }
/* SVG chevron: display:block drops the inline baseline gap so flex align-items:center
   lines it up exactly with the label; rotate on expand. */
.flight-ticket .ft-chev { display: block; flex: none; color: var(--gray-500); transition: transform .2s ease; }
.flight-ticket .ft-seg-toggle[aria-expanded="true"] .ft-chev { transform: rotate(180deg); }
.flight-ticket .ft-msegs { margin-top: 8px; padding: 4px 12px 8px; border: 1px solid var(--gray-200); border-radius: 12px; background: var(--gray-50, #f8fafc); }
.flight-ticket .ft-msegs[hidden] { display: none; }
.flight-ticket .ft-seg { padding: 8px 0; border-bottom: 1px dashed var(--gray-200); }
.flight-ticket .ft-seg:last-child { border-bottom: 0; }
.flight-ticket .ft-seg-pt { font-size: 12.5px; line-height: 1.5; }
.flight-ticket .ft-seg-pt b { font-weight: 800; color: var(--on-background); }
.flight-ticket .ft-seg-pt span { color: var(--gray-600); margin-left: 6px; }
.flight-ticket .ft-seg-travel { font-size: 10.5px; color: var(--gray-400); margin: 1px 0 1px 3px; padding-left: 9px; border-left: 2px dotted var(--gray-300); }
.flight-ticket .ft-seg-fl { font-size: 11px; color: var(--gray-500); margin-top: 3px; }
.flight-ticket .ft-seg-amen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.flight-ticket .ft-layover { font-size: 11px; color: var(--gray-500); background: var(--gray-100, #f1f3f5); border-radius: 8px; padding: 5px 10px; margin: 3px 0 3px 9px; }
.flight-ticket .ft-layover-long { color: #b45309; background: #fef7ec; }
/* ticket price-validation indicator (mirrors live vade-seçimi "Fiyat doğrulandı") */
.flight-ticket .ft-price-verify { display: flex; align-items: center; gap: 8px; font-size: 12px; border-radius: 10px; padding: 8px 10px; margin: 10px 0 2px; line-height: 1.35; }
.flight-ticket .ft-price-verify[hidden] { display: none; }
.flight-ticket .ft-price-verify .pvv-ic { flex: none; width: 20px; height: 20px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.flight-ticket .ft-price-verify.pvo { background: #dcfce7; color: #166534; }
.flight-ticket .ft-price-verify.pvo .pvv-ic { background: #16a34a; }
.flight-ticket .ft-price-verify.pvw { background: #fef7ec; color: #b45309; }
.flight-ticket .ft-price-verify.pvw .pvv-ic { background: #d97706; }
/* checkout: airline price verified (mirrors the live green "Fiyat Doğrulandı" card) */
.price-verified { border: 1px solid #b7e4c7; background: linear-gradient(180deg, #f0fbf4, #ffffff); }
.price-verified .pv-head { display: flex; align-items: center; gap: 10px; }
.price-verified .pv-ic { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #16a34a; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; }
.price-verified .pv-txt b { display: block; color: #15803d; font-size: 14px; font-weight: 800; }
.price-verified .pv-txt span { font-size: 11.5px; color: var(--gray-600); }
.price-verified .pv-note { margin-top: 10px; font-size: 12px; color: #166534; background: #dcfce7; border-radius: 10px; padding: 8px 10px; line-height: 1.4; }
.price-verified.pv-warn { border-color: #f5d9a8; background: linear-gradient(180deg, #fef7ec, #fff); }
.price-verified.pv-warn .pv-ic { background: #d97706; }
.price-verified.pv-warn .pv-txt b { color: #b45309; }
/* "price held" (couldn't re-confirm, not a change) — calm sky/info, NOT an amber warning */
.price-verified.pv-held { border-color: #bcdcf5; background: linear-gradient(180deg, #eff7fe, #fff); }
.price-verified.pv-held .pv-ic { background: var(--sky, #0ea5e9); font-size: 13px; }
.price-verified.pv-held .pv-txt b { color: var(--sky-dark, #0369a1); }
.flight-ticket .ft-chip { font-size: 11px; color: var(--gray-700); background: var(--surface-container-low); border-radius: 20px; padding: 3px 9px; white-space: nowrap; }
.flight-ticket .ft-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 14px; }
.flight-ticket .ft-price b { display: block; font-size: 18px; font-weight: 800; color: var(--on-background); }
.flight-ticket .ft-price span { font-size: 11px; color: var(--gray-500); }
/* same size/format as .ft-skip (font, padding, pill radius) — just the blue fill kept */
.flight-ticket .ft-go {
  flex: none; border: 1px solid transparent;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%); color: #fff;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2;
  border-radius: 999px; padding: 9px 16px; min-height: 0; box-shadow: none;
  cursor: pointer; white-space: nowrap; transition: filter .16s ease;
}
.flight-ticket .ft-go:hover { transform: none; filter: brightness(.96); box-shadow: none; }
.flight-ticket .ft-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* on mobile these actions move into Claudia's pod, so the in-card row hides. display:flex above
   would beat a bare [hidden], hence the explicit rule. */
.flight-ticket .ft-actions[hidden] { display: none; }
/* mobile: stack the price block ABOVE the actions (the side-by-side row squeezed the price so
   "41.184 TL" and "1 yolcu · toplam" wrapped); keep each on its own single line, and put the two
   buttons side by side full-width. */
@media (max-width: 900px) {
  .flight-ticket .ft-foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .flight-ticket .ft-price b, .flight-ticket .ft-price span { white-space: nowrap; }
  .flight-ticket .ft-actions { flex-wrap: nowrap; justify-content: stretch; gap: 10px; }
  .flight-ticket .ft-actions .ft-skip, .flight-ticket .ft-actions .ft-go { flex: 1 1 0; min-width: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
}
.flight-ticket .ft-skip {
  flex: none; border: 1px solid var(--outline-variant); background: transparent;
  color: var(--gray-700); font-family: inherit; font-size: 13px; font-weight: 600;
  border-radius: 999px; padding: 9px 16px; cursor: pointer; white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.flight-ticket .ft-skip:hover { background: var(--surface-container-low); border-color: var(--primary-container); color: var(--sky-dark); }
/* fare-family picker (rare) — revealed only when Google surfaces ≥2 economy fares */
.flight-ticket .ft-fares { margin-top: 12px; border-top: 1px dashed var(--outline-variant); padding-top: 12px; }
.flight-ticket .ft-fares-h { font-size: 12px; font-weight: 700; color: var(--on-background); margin-bottom: 8px; }
.flight-ticket .ft-fare { display: block; width: 100%; text-align: left; background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: 12px; padding: 9px 12px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.flight-ticket .ft-fare.on { border-color: var(--primary-container); background: #eaf5fd; box-shadow: 0 0 0 1px var(--primary-container); }
.flight-ticket .ft-fare-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.flight-ticket .ft-fare-top b { font-size: 13px; font-weight: 700; color: var(--on-background); }
.flight-ticket .ft-fare-top span { font-size: 13px; font-weight: 800; color: var(--sky-dark); white-space: nowrap; }
.flight-ticket .ft-fare-feat { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; }
.flight-ticket .ftf { font-size: 10.5px; display: inline-flex; align-items: center; gap: 3px; }
.flight-ticket .ftf-y { color: #0a7d4b; }
.flight-ticket .ftf-f { color: var(--gray-500); }
.flight-ticket .ftf-n { color: #b4453a; }
#stagePanel .flight-card.selected { border-color: var(--primary-container); box-shadow: 0 0 0 2px rgba(14, 165, 233, .25), 0 8px 22px rgba(11, 28, 48, .08); }
.fc-tagchip {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--brand-amber-dark);
  background: #FEF3E2;
  border-radius: 6px;
  padding: 2px 8px;
}
.fc-monthly-line { font-size: 11.5px; color: var(--sky-dark); font-weight: 600; margin-top: 2px; }
/* narrow rail: price becomes a footer row under the legs (live-mobile pattern) */
.j-col .fc-main { grid-template-columns: 1fr; gap: .6rem; }
.j-col .fc-price {
  border-left: 0;
  border-top: 1px dashed var(--gray-200);
  padding: 10px 0 0;
  min-width: 0;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.j-col .fc-price-info { display: flex; flex-direction: column; align-items: center; text-align: center; }
.j-col .fc-price-info .fc-price-amount { font-size: 1.15rem; }
.j-col .fc-price .fc-add { flex: none; }

/* ── hotel cards: /claudia/ canvas recipe ─────────────────────────────── */
.hcard {
  display: flex;
  gap: 0;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(11, 28, 48, .06);
  border: 1px solid transparent;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .35s ease, transform .35s ease, border-color .15s ease, box-shadow .15s ease;
}
.hcard.in { opacity: 1; transform: none; }
.hcard:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(11, 28, 48, .16); }
.hcard.in:hover { transform: translateY(-3px); }
.hcard.selected { border-color: var(--primary-container); box-shadow: 0 0 0 2px rgba(14, 165, 233, .25); }
/* Claudia'nın önerisi: amber vurgu */
.hcard.rec { border-color: var(--brand-amber); box-shadow: 0 0 0 1px var(--brand-amber), 0 10px 26px rgba(245, 158, 11, .18); }
.hcard.rec.selected { border-color: var(--primary-container); box-shadow: 0 0 0 2px rgba(14, 165, 233, .25); }
/* hotel loading skeletons — shimmer cards over the ~7.5s LiteAPI search (beats a blank spinner) */
.hotels-skel { display: flex; flex-direction: column; gap: 12px; }
.hcard-skel { display: flex; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 22px rgba(11, 28, 48, .06); border: 1px solid transparent; }
.hcard-skel .sk-photo { width: 122px; min-height: 112px; flex: none; border-radius: 0; }
.hcard-skel .sk-body { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.sk { background: linear-gradient(90deg, #eef2f6 25%, #e1e8f0 37%, #eef2f6 63%); background-size: 400% 100%; animation: sk-shimmer 1.4s ease infinite; border-radius: 6px; }
.sk-line { height: 12px; } .sk-line.sk-sm { height: 9px; }
.sk-pill { height: 24px; width: 92px; border-radius: 999px; margin-top: auto; }
@keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
@media (max-width: 760px) { .hcard-skel .sk-photo { width: 108px; min-height: 108px; } }
.hcard .ph {
  width: 122px; min-height: 112px; height: 100%;
  object-fit: cover; flex: none; display: block;
  background: var(--surface-container-low);
}
.hcard .ph-wrap { position: relative; flex: none; }
.hcard .ph-wrap.noimg .ph { display: none; }
.hcard .ph-wrap.noimg::after {
  content: '🏨';
  display: flex; align-items: center; justify-content: center;
  width: 122px; height: 100%;
  font-size: 32px;
  background: var(--surface-container-low);
}
.hcard .body { flex: 1; min-width: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.hcard .nm { font-weight: 700; font-size: 14.5px; line-height: 1.25; color: var(--on-background); }
/* compact card: name + score on one line, meta line, rich rows are DESKTOP-only */
.hcard .hc-top { display: flex; align-items: baseline; gap: 8px; }
.hcard .hc-top .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcard .hc-top .scoreb { flex: none; }
.hcard .hc-meta { font-size: 11.5px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* hotel-class stars in gold (Booking convention) — visually distinct from the blue guest-score badge */
.hcard .hc-meta .hc-stars { color: #f4a300; letter-spacing: .5px; }
.hcard .hc-rich { display: none; }
.hcard .hc-review { font-size: 11.5px; line-height: 1.4; color: var(--gray-700); background: var(--surface-container-low); border-radius: 8px; padding: 5px 9px; margin: 4px 0 2px; }
.hcard .hc-review b { color: var(--on-background); font-weight: 600; }
.hcard .hc-review .who { color: var(--gray-500); font-weight: 400; }
/* the whole card opens the detail modal; "Detay ›" is a clear underlined link on its own line */
.hcard { cursor: pointer; }
.hcard .price span { display: block; }
/* gece satirinin ICINDE durur (em — .price span'in display:block kurali onu yakalamaz); ayri satir kart boyunu uzatiyordu */
.hcard .price .hc-detail-link { display: inline; font-style: normal; color: var(--sky-dark); font-weight: 600; font-size: 11px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.hcard .hc-gal { cursor: pointer; }
.hcard .chip.more { background: #dfe8f2; color: var(--gray-700); font-weight: 600; cursor: pointer; flex: none; }
/* card photo gallery nav (hover on desktop; dots + counter always) */
.hcard .hc-gnav { position: absolute; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: #0b1c30; font-size: 13px; display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 3; padding: 0; }
.hcard .hc-gnav.l { left: 5px; } .hcard .hc-gnav.r { right: 5px; }
.hcard .hc-gal:hover .hc-gnav { display: flex; }
.hcard .hc-gn { position: absolute; top: 6px; right: 6px; background: rgba(0, 0, 0, .42); color: #fff; font-size: 9.5px; padding: 1px 6px; border-radius: 20px; z-index: 3; }
.hcard .hc-gd { position: absolute; bottom: 6px; left: 0; right: 0; display: flex; gap: 3px; justify-content: center; z-index: 3; }
.hcard .hc-gd i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .55); transition: width .2s; }
.hcard .hc-gd i.on { background: #fff; width: 11px; border-radius: 2px; }
.hcard .rate { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.hcard .st { color: #f4a300; letter-spacing: 1px; }
.hcard .scoreb { background: var(--primary); color: #fff; border-radius: 6px; padding: 1px 6px; font-weight: 700; font-size: 11px; }
.hcard .rev { color: var(--gray-500); font-weight: 400; }
.hcard .loc { font-size: 11.5px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcard .am-inline { font-size: 13px; margin-left: 6px; }
/* /claudia/ category bars */
.hcard .cats { display: flex; flex-direction: column; gap: 3px; margin: 3px 0 1px; }
.hcard .catrow { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--gray-500); }
.hcard .catrow .cl { width: 56px; flex: none; }
.hcard .catrow .bar { flex: 1; height: 5px; background: var(--surface-container-low); border-radius: 3px; overflow: hidden; }
.hcard .catrow .bar i { display: block; height: 100%; background: linear-gradient(90deg, #0ea5e9, #006591); }
.hcard .catrow .cv { width: 24px; text-align: right; font-weight: 700; color: var(--on-background); }
/* single-line category depiction: colored score badge + label (replaces the 3 stacked bars) */
.hcard .cats-inline { display: flex; flex-wrap: wrap; gap: 5px 8px; margin: 4px 0 2px; }
.cats-inline .catx { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--gray-500); white-space: nowrap; }
.cats-inline .catx b { font-size: 11px; font-weight: 700; color: #fff; padding: 1px 5px; border-radius: 5px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.cats-inline .cx-hi b { background: #1f9d6b; }
.cats-inline .cx-mid b { background: #0e8fd6; }
.cats-inline .cx-lo b { background: #c2830c; }
.hcard .chip.ok { color: #0a7d4b; background: #e4f6ec; }
.hcard .chip.brand { color: #0b1c30; background: #e7edf6; font-weight: 600; }
.hcard .chiprow { display: flex; gap: 5px; flex-wrap: nowrap; overflow: hidden; margin-top: 3px; }
.hcard .chip { font-size: 10.5px; color: var(--gray-700); background: var(--surface-container-low); border-radius: 20px; padding: 2px 8px; white-space: nowrap; flex: none; }
/* desktop has room: bigger photo + the rich rows (amenities · review · category scores) */
@media (min-width: 901px) {
  .hcard .ph, .hcard .ph-wrap.noimg::after { width: 168px; }
  .hcard .hc-rich { display: block; margin: 2px 0 1px; }
}
.hcard .foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.hcard .price b { display: block; font-size: 16px; font-weight: 800; color: var(--on-background); }
.hcard .price span { font-size: 10.5px; color: var(--gray-500); }
.hcard .price .mo { font-size: 11px; color: var(--sky-dark); font-weight: 700; }
.hcard .hc-actions { display: flex; gap: 6px; align-items: center; }

/* aktarma details sit ONE clear line below the duration (matches live) */
.j-col .fc-duration-stops { margin-top: 3px; line-height: 1.35; }

/* ── room preview modal (light /claudia/ openRoom) ────────────────────── */
.room-ov {
  position: fixed; inset: 0; z-index: 2600;
  background: rgba(11, 28, 48, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  animation: cartin .2s ease;
}
.room-card {
  width: min(440px, 94vw);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  position: relative;
  /* oda gruplu detay 10 odaya kadar listeler — kart ekrana sigar, govde kayar */
  max-height: 92vh;
  display: flex; flex-direction: column;
}
.room-card .room-car { flex: none; }
.room-card .room-b { overflow-y: auto; }
/* yes/no confirm (ticket back → "empty the sepet and search a new flight?") */
.confirm-card {
  width: min(380px, 92vw);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  padding: 22px 20px 18px;
}
.confirm-msg {
  font-size: 15px; line-height: 1.45; font-weight: 600;
  color: var(--on-background); text-align: center;
}
.confirm-actions { display: flex; gap: 10px; margin-top: 18px; }
.confirm-actions .btn { flex: 1 1 0; }
.room-x {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 30px; height: 30px;
  border: none; border-radius: 50%;
  background: rgba(11, 28, 48, .55);
  color: #fff; font-size: 14px; cursor: pointer;
}
.room-car { position: relative; height: 240px; background: var(--surface-container-low); }
.room-car img { width: 100%; height: 100%; object-fit: cover; display: block; }
.room-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .85); color: var(--on-background);
  font-size: 18px; cursor: pointer;
}
.room-nav.prev { left: 10px; }
.room-nav.next { right: 10px; }
.room-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.room-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.room-dots i.on { background: #fff; }
.room-b { padding: 14px 16px 16px; }
.room-nm { font-size: 16px; font-weight: 700; color: var(--on-background); }
.room-rn { font-size: 13px; color: var(--gray-500); margin-top: 2px; }
.room-meta { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; font-size: 12.5px; color: var(--gray-700); }
/* room amenities (LiteAPI roomAmenities): compact icon+label chips */
.room-amen { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.room-amen .ram { font-size: 11.5px; color: var(--gray-700); background: var(--surface-container-low); border-radius: 8px; padding: 4px 9px; white-space: nowrap; }
.room-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.room-chips .chip { font-size: 10.5px; color: var(--gray-700); background: var(--surface-container-low); border-radius: 20px; padding: 3px 9px; }
.room-chips .chip.ok { color: #0a7d4b; background: #e4f6ec; }
.room-chips .chip.fam { color: #a15c00; background: #fdf1dc; }
.room-chips .chip.brand { color: #0b1c30; background: #e7edf6; font-weight: 600; }
/* hotel context in the detail modal: score badge + stars + reviews */
.room-hinfo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 2px 0 10px; font-size: 12px; color: var(--gray-600); }
.room-hinfo .rh-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.room-hinfo .scoreb { background: var(--primary); color: #fff; border-radius: 6px; padding: 1px 6px; font-weight: 700; font-size: 11px; }
.room-hinfo .rh-stars { color: #f4a300; letter-spacing: 1px; }
.room-hchips { margin-bottom: 14px; }
.room-add { width: 100%; flex: none; }

/* ── ODA SEÇİMİ step (direction A): centered, wider column for the room grid ── */
@media (min-width: 901px) {
  /* placed late in the file so it outranks the 901-1400px right-dock rule
     (.j-stage.map-mode:not(.hotels-mode) .j-col) at equal specificity */
  .j-stage.map-mode.rooms-mode .j-col { left: 0; right: 0; margin: 0 auto; width: min(720px, 82vw); }
}
.rooms-head {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--outline-variant); border-radius: 16px;
  padding: 10px 14px; margin-bottom: 12px;
  box-shadow: 0 6px 18px rgba(11, 28, 48, .06);
}
.rooms-head-ph { width: 64px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; }
.rooms-head-t { min-width: 0; }
.rooms-head-t b { font-size: 15px; color: var(--on-background); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rooms-head-t .room-hinfo { margin: 2px 0 0; }
.rooms-head-sub { font-size: 11.5px; color: var(--gray-500); }
/* the step reuses the modal's .rg blocks; give them card chrome on the open canvas */
#roomStepList .rg { background: #fff; box-shadow: 0 6px 18px rgba(11, 28, 48, .06); }
#roomStepList .rg-car { height: 190px; }
.rg-rate.on { border-color: var(--primary); background: #EAF4FC; }

/* hotel-info modal: short description + top review */
.room-desc { font-size: 12.5px; line-height: 1.5; color: var(--gray-700); margin: 0 0 12px; }
.room-review { margin: -4px 0 12px; }

/* ── mapped room groups in the detail modal (Nuitee-parity room list) ──── */
.room-list { display: flex; flex-direction: column; gap: 12px; margin: 2px 0 14px; }
.rg-loading { font-size: 12.5px; color: var(--gray-500); padding: 10px 2px; }
.rg { border: 1px solid var(--outline-variant); border-radius: 14px; overflow: hidden; background: #fff; }
.rg-car { position: relative; height: 150px; background: var(--surface-container-low); }
.rg-car img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rg-car .rg-nav { width: 26px; height: 26px; font-size: 15px; }
.rg-gn {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(11, 28, 48, .6); color: #fff;
  font-size: 10.5px; border-radius: 8px; padding: 2px 7px;
}
.rg-b { padding: 10px 12px 12px; }
.rg-nm { font-size: 14px; font-weight: 700; color: var(--on-background); }
.rg-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 5px 0 2px; font-size: 12px; color: var(--gray-700); }
.rg-amen { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 2px; }
.rg-amen .ram { font-size: 11px; color: var(--gray-700); background: var(--surface-container-low); border-radius: 8px; padding: 3px 8px; white-space: nowrap; }
.rg-rates { display: flex; flex-direction: column; gap: 7px; margin-top: 9px; }
.rg-rate {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  border: 1px solid var(--outline-variant); border-radius: 12px;
  background: var(--surface-container-low, #f6f9fc); padding: 9px 11px;
  transition: border-color .15s, background .15s;
}
.rg-rate:hover { border-color: var(--primary); background: #EAF4FC; }
.rg-rate .rg-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rg-rate .rg-l b { font-size: 13px; color: var(--on-background); }
.rg-rate .rg-l i { font-size: 11px; color: var(--gray-500); font-style: normal; }
.rg-rate .rg-l i.ok { color: #0a7d3c; }
.rg-rate .rg-r { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.rg-rate .rg-r b { font-size: 13.5px; font-weight: 700; color: var(--on-background); }
.rg-rate .rg-r em { font-size: 10.5px; color: var(--gray-500); font-style: normal; }
.rg-rate .rg-r .hc-was { margin: 0; }

/* tavsiye satis fiyati referansi: ustu cizili + yüzde rozeti (kart + oda satirlari) */
/* kartta rakamin YANINDA durur (ustte ayri satir kart boyunu bosa uzatiyordu) */
.hcard .price .hc-pline { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.hc-was { display: inline-flex; align-items: baseline; gap: 5px; }
.hc-was s { color: var(--gray-500); font-size: 11.5px; }
.hc-was em { font-style: normal; font-size: 10px; font-weight: 700; color: #0a7d3c; background: #e4f6ec; border-radius: 6px; padding: 1px 5px; white-space: nowrap; }

/* ── results controls: live datebox + filter/sort bar ─────────────────── */
.res-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--outline-variant);
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: 0 6px 16px rgba(11, 28, 48, .05);
}
.fc-datebox-wrap { display: flex; align-items: center; gap: 8px; }
.fc-datebox { font-size: 13px; color: var(--gray-700); }
.fc-datebox b { color: var(--on-background); font-weight: 700; }
.fc-datebox-nav {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--outline-variant);
  background: #fff;
  color: var(--gray-700);
  font-size: 15px;
  cursor: pointer;
  transition: all .15s ease;
}
.fc-datebox-nav:hover { background: var(--primary-container); color: #fff; border-color: var(--primary-container); }
.sfb-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sfb-chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
  background: #fff;
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: all .15s ease;
}
.sfb-chip.on { background: var(--primary-container); border-color: var(--primary-container); color: #fff; }
/* "Oteli geç · Sepete git" — sits inline with the hotel filter chips, its own sky accent */
.sfb-sort { display: flex; align-items: center; gap: 2px; font-size: 12px; }
.sfb-sort-label { color: var(--gray-500); margin-right: 4px; }
.sfb-sort-opt {
  border: none;
  background: transparent;
  color: var(--gray-700);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: 7px;
  cursor: pointer;
}
.sfb-sort-opt:hover { background: var(--surface-container-low); }
.sfb-sort-opt.on { color: var(--primary-container); background: var(--surface-container-low); }

.fc-return-body[hidden] { display: none; }
.fc-return-body { padding: 0 14px 12px; }
/* return options sit over the map, so the picker needs an OPAQUE panel — same sky
   tint the live /sonuclar site uses (linear-gradient rgba(14,165,233,.04→.02)),
   layered over #fff so the map can't show through. */
.fc-return-picker {
  background: linear-gradient(135deg, rgba(14, 165, 233, .05), rgba(14, 165, 233, .02)), #fff;
  border: 1px solid rgba(14, 165, 233, .14);
  border-radius: 14px;
  padding: 10px 12px 12px;
  box-shadow: 0 6px 20px rgba(11, 28, 48, .08);
}
.fc-return-row.sel { border-color: var(--primary-container); box-shadow: 0 0 0 2px rgba(14, 165, 233, .22); }
/* NOTE (2026-07-05): removed the old `.j-col .fc-return-row { display:grid; ... }`
   layout + its -leg/-airline/-route/-time/-city helpers. It predated the
   boarding-pass redesign and, being more specific than `.rr-card`, forced the
   return ticket into a 3-col grid so .rr-head/.rr-body collided (the card looked
   broken after the return-hint strip was dropped). Return rows are now plain
   `.fc-return-row.rr-card` boarding passes — see the .rr-* block further down. */

/* extras step cards */
.xcard .xc-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.xcard .xc-right { display: flex; align-items: center; gap: 14px; }
.xcard .xc-right b { font-size: 15px; white-space: nowrap; }
.xcard.selected { border-color: var(--primary-container); box-shadow: 0 0 0 2px rgba(14, 165, 233, .22); }
.xcard h3 { font-size: 14.5px; margin: 0 0 2px; }

/* weather + filter chips (light) */
.wx-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--outline-variant);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--gray-700);
  box-shadow: 0 6px 16px rgba(11, 28, 48, .05);
}
.wx-sum { color: var(--on-background); font-weight: 600; margin-right: auto; }
.wx-day { display: inline-flex; align-items: center; gap: 3px; color: var(--gray-500); }
.wx-day i { font-style: normal; }
.wx-day b { color: var(--on-background); font-weight: 600; }

.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchips button {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-700);
  background: #fff;
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: all .15s ease;
}
.fchips button:hover { border-color: var(--primary-container); color: var(--primary-container); }
.fchips button.active { background: var(--primary-container); border-color: var(--primary-container); color: #fff; }

/* city visual card over the map */
.j-citycard {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 4;
  width: 250px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(11, 28, 48, .18);
  border: 1px solid var(--outline-variant);
}
.j-citycard[hidden] { display: none; }
.j-citycard img { width: 100%; height: 120px; object-fit: cover; display: block; }
.j-citycard.noimg img { display: none; }
.j-citycard.noimg::before {
  content: '🏙️';
  display: flex; align-items: center; justify-content: center;
  height: 84px; font-size: 34px;
  background: var(--surface-container-low);
}
.j-citycard { width: min(380px, 88vw); }        /* match the Claudia pod width */
.j-citycard img { height: 172px; }              /* taller for better photo orientation */
/* city name + weather on ONE single line, so the visual dominates the card */
/* name LEFT (truncates if long) · weather RIGHT-aligned (stays whole) */
.j-citycard .jc-body { padding: 8px 13px; display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; }
.j-citycard b { font-size: 14px; color: var(--on-background); flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.j-citycard #cityWx { flex: none; max-width: 62%; font-size: 11.5px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }

/* map pins — friendly price chips like /claudia/ */
.pin { background: none; border: none; }
.pin .pin-chip {
  position: absolute;
  left: 50%; bottom: 7px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--on-background);
  background: #fff;
  border: 2px solid #0EA5E9;
  border-radius: 999px;
  padding: 5px 11px;
  box-shadow: 0 4px 14px rgba(11, 28, 48, .3), 0 0 0 3px rgba(14, 165, 233, .12);
  animation: pindrop .35s ease both;
  transition: transform .16s cubic-bezier(.34, 1.56, .64, 1), box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.pin .pin-chip small { font-weight: 500; color: var(--gray-500); }
.pin .pin-tip {
  position: absolute;
  left: 50%; bottom: 0;
  width: 9px; height: 9px;
  background: #fff;
  border-right: 2px solid #0EA5E9;
  border-bottom: 2px solid #0EA5E9;
  transform: translateX(-50%) rotate(45deg);
}
@keyframes pindrop { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translateX(-50%); } }
/* selected (in cart) — non-pick: solid sky fill + a ✓ so "in your cart" reads at a glance */
.pin.sel .pin-chip { background: var(--primary-container); border-color: #fff; color: #fff; }
.pin.sel .pin-chip small { color: rgba(255, 255, 255, .85); }
.pin.sel .pin-tip { background: var(--primary-container); border-color: #fff; }
.pin.sel .pin-chip::after {
  content: '✓'; position: absolute; top: -7px; right: -7px;
  width: 18px; height: 18px; border-radius: 999px;
  background: #16a34a; color: #fff; font-size: 11px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(11, 28, 48, .32);
}

/* Claudia's pick — a premium amber pill that pulls the eye across the map */
.pin.pick .pin-chip {
  color: #fff; border-color: #fff;
  background: linear-gradient(135deg, #F9B233, #F59E0B 55%, #E8890B);
  box-shadow: 0 6px 18px rgba(217, 119, 6, .45), 0 0 0 4px rgba(245, 158, 11, .22);
  animation: pindrop .35s ease both, pickpulse 2.6s ease-in-out .5s infinite;
}
.pin.pick .pin-chip small { color: rgba(255, 255, 255, .9); }
.pin.pick .pin-tip { background: #F59E0B; border-color: #fff; }
.pin .pin-star { color: #f5a623; margin-right: 3px; }
.pin.pick .pin-star { color: #fff; text-shadow: 0 1px 3px rgba(180, 83, 9, .6); }
@keyframes pickpulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(217, 119, 6, .45), 0 0 0 4px rgba(245, 158, 11, .22); }
  50%      { box-shadow: 0 9px 24px rgba(217, 119, 6, .5), 0 0 0 9px rgba(245, 158, 11, .09); }
}
/* the pick, once added to the cart — keep the amber warmth, ring it in sky + the ✓ badge */
.pin.pick.sel .pin-chip {
  background: linear-gradient(135deg, #F9B233, #F59E0B 55%, #E8890B);
  border-color: #fff;
  box-shadow: 0 6px 18px rgba(217, 119, 6, .45), 0 0 0 3px var(--primary-container);
  animation: pindrop .35s ease both;   /* stop the idle pulse once it's chosen */
}
.pin.pick.sel .pin-tip { background: #F59E0B; border-color: #fff; }

/* pin <-> card hover link (both pop) — lift + enlarge, each pin keeps its identity */
/* PIN STACKING, deterministic. Leaflet stacks markers by an INLINE z-index (latitude +
   zIndexOffset), while hover used a CSS !important class — two competing systems, so a
   hovered (or once-hovered, the offset never reset) pin could bury Claudia's pick.
   Class-based layers settle it: pick > selected > hovered > rest — the pick stays on top
   of everything, hovered or not, and a hovered pick is topmost. */
/* refined per feedback: an ACTIVELY hovered card/pin is explicit intent — it must surface
   even over the pick (whose base still tops everything at rest). Only one pin is ever
   hovered, so hover simply owns the top band. */
.pin.hi { z-index: 1600 !important; }
.pin.sel { z-index: 1400 !important; }
.pin.sel.hi { z-index: 1600 !important; }
.pin.pick { z-index: 1500 !important; }
.pin.pick.hi { z-index: 1650 !important; }
.pin.hi .pin-chip { transform: translateX(-50%) translateY(-2px) scale(1.16); }
.pin.hi:not(.pick):not(.sel) .pin-chip { border-color: var(--primary-container); box-shadow: 0 14px 26px rgba(11, 28, 48, .32), 0 0 0 4px rgba(14, 165, 233, .18); }
.pin.pick.hi .pin-chip { box-shadow: 0 14px 30px rgba(217, 119, 6, .55), 0 0 0 6px rgba(245, 158, 11, .3); animation: pindrop .35s ease both; }
.pin.sel.hi .pin-chip { box-shadow: 0 14px 26px rgba(11, 28, 48, .34), 0 0 0 4px rgba(14, 165, 233, .32); }
.pin.pick.sel.hi .pin-chip { box-shadow: 0 14px 30px rgba(217, 119, 6, .5), 0 0 0 5px var(--primary-container); }
@media (prefers-reduced-motion: reduce) {
  .pin.pick .pin-chip { animation: pindrop .35s ease both; }
  .pin .pin-chip { transition: none; }
}
.hcard.cardhi { box-shadow: 0 0 0 2px var(--primary-container), 0 16px 34px rgba(11, 28, 48, .16); }
.hcard.flash { animation: hcardflash 1.2s ease; }
@keyframes hcardflash { 0%, 100% { box-shadow: 0 8px 22px rgba(11, 28, 48, .1); } 25%, 60% { box-shadow: 0 0 0 3px #f5a623, 0 16px 34px rgba(245, 166, 35, .25); } }
/* Claudia's-choice star badge on the hotel photo */
.hcard .ph-wrap { position: relative; }
.hc-pick {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-size: 11px; font-weight: 700; color: #4a3200; white-space: nowrap;
  background: linear-gradient(180deg, #ffd766, #f5a623);
  padding: 3px 9px; border-radius: 999px;
  box-shadow: 0 3px 10px rgba(245, 166, 35, .4);
}
/* on the narrow mobile photo the ribbon wraps ugly — show it as a clean body line instead */
.hcard .hc-pick-b { display: none; font-size: 10.5px; font-weight: 700; color: #a15c00; line-height: 1.3; }

/* origin -> destination route markers (search + flights, before city zoom) */
.route-pin { background: none; border: none; }
.route-pin .rp-dot {
  position: absolute; left: 0; top: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: #0EA5E9; border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(11, 28, 48, .35);
  transform: translate(-50%, -50%);
}
.route-pin.route-to .rp-dot { width: 15px; height: 15px; background: #0B1C30; }
.route-pin .rp-label {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, calc(-50% - 24px));
  white-space: nowrap; text-align: center; line-height: 1.12;
  font-family: inherit;
  color: var(--on-background); background: #fff;
  padding: 4px 10px; border-radius: 10px;
  box-shadow: 0 3px 10px rgba(11, 28, 48, .2);
}
.route-pin .rp-label b { display: block; font-size: 11.5px; font-weight: 700; }
.route-pin .rp-label i { display: block; font-style: normal; font-weight: 600; font-size: 9px; letter-spacing: .2px; color: var(--gray-500); margin-top: 1px; }
.route-arc { animation: routeflow 1s linear infinite; }
@keyframes routeflow { to { stroke-dashoffset: -20; } }
/* searched-place marker: a labelled centre dot inside the ~10 km radius ring */
.city-center-pin { background: none; border: none; }
.city-center-pin .cc-dot {
  position: absolute; left: 0; top: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: #0EA5E9; border: 2px solid #fff;
  box-shadow: 0 1px 5px rgba(11, 28, 48, .4);
  transform: translate(-50%, -50%);
}
/* centre name written DIRECTLY on the map (no bubble) — a white halo keeps it legible */
.city-center-pin .cc-label {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, calc(-50% - 24px));
  white-space: nowrap; text-align: center; line-height: 1.18;
  font-size: 12.5px; font-weight: 800; color: #0b1c30;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 1px 1px rgba(255, 255, 255, .95);
}
.city-center-pin .cc-label em { display: block; font-style: normal; font-weight: 600; font-size: 10px; color: #3e4850; }
/* "~10 km" tag riding the ring at the end of the radius spoke */
.city-radius-pin .cr-cap {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  white-space: nowrap; font-size: 9.5px; font-weight: 700; color: #0284C7;
  background: rgba(255, 255, 255, .92); padding: 1px 6px; border-radius: 7px;
  box-shadow: 0 1px 4px rgba(11, 28, 48, .16);
}

/* ── Claudia pod: top-left guide ──────────────────────────────────────── */
.claudia-pod {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 5;
  width: min(380px, 88vw);
  background: #fff;
  border: 1px solid var(--outline-variant);
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(11, 28, 48, .14);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.cp-head { display: flex; align-items: center; gap: 8px; }   /* orb + Claudia + chips all vertically centered */
.cp-head b { font-size: 14px; color: var(--on-background); }
.cp-sub { font-size: 11px; color: var(--gray-500); }
/* KURE NABZI KOMPOZITORDE (2026-07-29): eskiden box-shadow animasyonuydu ve kodun kendi notu
   "cporb HER ZAMAN calisir" diyordu -- yani harita uzerinde surekli bir yeniden-boyama kaynagi.
   Ayni gorunum, halka artik ayri bir katman: yalniz transform + opacity. */
.cp-orb {
  position: relative;
  width: 16px; height: 16px; border-radius: 50%;
  align-self: center;
  background: radial-gradient(circle at 32% 30%, #67d6ff, #0ea5e9 55%, #006591);
  box-shadow: 0 0 0 2px rgba(14, 165, 233, .18);
}
.cp-orb::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(14, 165, 233, .5) 0%, rgba(14, 165, 233, .22) 45%, rgba(14, 165, 233, 0) 72%);
  transform: scale(.7); opacity: .5;
  animation: cpOrbGlow 2.6s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes cpOrbGlow {
  0%, 100% { transform: scale(.7); opacity: .45; }
  50%      { transform: scale(1);  opacity: .9; }
}
/* "working" glass sheen — a soft, wide highlight glides SLOWLY across the whole pod (like light
   reflecting off a glass cover) while Claudia is actively searching / streaming. Replaced the
   thin border-ring light. Tied (CSS-only) to the busy signals: the typewriter `typing` class and
   the `cl-dots` status line. Fades out when idle. */
/* CAM PARILTISI v2 (operator 2026-07-29: "gercek cam gibi durmuyor, goze hizli geliyor" +
   haritada yirtilma). Eski hal background-position animasyonuydu -- GPU'da KOMPOZIT EDILEMEZ,
   her kare pod'u yeniden boyar; altindaki harita da yeniden rasterlanirken kompozitoru dovuyor
   ve yirtilma/titreme olarak okunuyordu. Bu yuzden kodda iki ayri "duraklat" kurali birikmisti
   (.map-busy ve :focus-within) -- semptomu susturmak, sebebi degil.
   Yeni hal SADECE TRANSFORM animasyonlar (kompozitorde, boyama yok) ve gercek cam dilinde:
     * dar bir SPEKULER bant, yumusak dususlu ve hafif egik (skew) -- tek renkli genis bir
       yikama degil; gercek camda isik dar bir seritte toplanir
     * cok hafif bir renk kirilmasi (bantin iki yaninda soguk/sicak ipuclari)
     * SUREKLI degil, ARALIKLI: bir gecis, sonra durak (%55-100) -- gercek cam isigi hareket
       ettikce bir kez yakalar; surekli donen parilti "yapay" okunuyor. Ayrica yavaslatildi
       (3s -> 5.4s), "goze hizli geliyor" geri bildirimi. */
.cp-sheen {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: 2;
  opacity: 0; transition: opacity .5s ease; pointer-events: none;
}
.cp-sheen::after {
  content: ''; position: absolute; top: -30%; bottom: -30%; left: 0; width: 34%;
  background: linear-gradient(100deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(186, 230, 253, .20) 26%,
      rgba(255, 255, 255, .52) 46%,
      rgba(236, 254, 255, .78) 50%,
      rgba(255, 255, 255, .52) 54%,
      rgba(224, 231, 255, .18) 74%,
      rgba(255, 255, 255, 0) 100%);
  transform: translate3d(-220%, 0, 0) skewX(-14deg);
  will-change: transform;
}
.claudia-pod:has(.cp-msg.typing) .cp-sheen,
.claudia-pod:has(.cl-dots) .cp-sheen { opacity: 1; }
.claudia-pod:has(.cp-msg.typing) .cp-sheen::after,
.claudia-pod:has(.cl-dots) .cp-sheen::after { animation: cpSheen 5.4s cubic-bezier(.33, 0, .25, 1) infinite; }
@keyframes cpSheen {
  0%        { transform: translate3d(-220%, 0, 0) skewX(-14deg); }
  46%, 100% { transform: translate3d(420%, 0, 0) skewX(-14deg); }
}
@media (prefers-reduced-motion: reduce) { .cp-sheen { display: none !important; } }
/* the orb pulses a touch faster + the whole pod breathes a soft blue halo while working */
.claudia-pod:has(.cp-msg.typing) .cp-orb::after,
.claudia-pod:has(.cl-dots) .cp-orb::after { animation-duration: 1.15s; }
/* POD NEFESI de kompozitorde (2026-07-29): box-shadow yerine ayri bir halka katmani.
   ::after artik bos (parilti kendi elemanina tasindi), halka oraya kuruldu. */
.claudia-pod::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; z-index: 0; pointer-events: none;
  box-shadow: 0 0 0 5px rgba(56, 189, 248, .18);
  opacity: 0; transform: scale(.995); transition: opacity .4s ease;
}
.claudia-pod:has(.cp-msg.typing)::after,
.claudia-pod:has(.cl-dots)::after { animation: podBreath 2.6s ease-in-out infinite; }
@keyframes podBreath {
  0%, 100% { opacity: 0;   transform: scale(.995); }
  50%      { opacity: .85; transform: scale(1.012); }
}
/* ── map gesture: freeze the decorations layered over the map ──────────────────────────
   Zoom/pan repaints the whole map canvas. Everything decorative on top of it animates
   BOX-SHADOW (cp-orb's cporb — which runs ALWAYS, not just while busy — plus podBreath,
   and the pick pin's pickpulse) or background-position (podGlide). None of those can be
   GPU-composited, so each frame is a real repaint; layered over a repainting map that
   thrashes the compositor and reads as flicker on the pod + around the pulsing pin.
   Freezing them for the duration of the gesture communicates nothing and costs nothing.
   Deliberately surgical: ONLY the elements running those animations — a blanket pause of
   the pod subtree could freeze some entry animation at opacity:0 (see .room-ov).
   GUNCELLEME 2026-07-29: yukaridaki uc animasyonun UCU DE artik transform/opacity ile
   kompozitorde kosuyor (podGlide -> .cp-sheen::after, cporb -> .cp-orb::after,
   podBreath -> .claudia-pod::after). Yani bu duraklatma artik BIR SEMPTOM ILACI DEGIL,
   yalnizca jest sirasinda gereksiz kare harcamamak icin duruyor -- ve hedefleri
   pseudo-elemanlara guncellendi (eskiden .claudia-pod / .cp-orb'un KENDISINI durduruyordu,
   animasyonlar oradan tasindigi icin artik hicbir sey durdurmuyorlardi). */
.j-stage.map-busy .claudia-pod::after,
.j-stage.map-busy .claudia-pod .cp-sheen::after,
.j-stage.map-busy .cp-orb::after { animation-play-state: paused !important; }
/* Kullanici pod'un arama alanlarindayken susmak yine dogru (dikkat + acik dropdown), ama
   artik zorunluluk degil tercih: animasyonlar kompozitorde. Hedefler pseudo'lara guncellendi. */
.claudia-pod:focus-within::after,
.claudia-pod:focus-within .cp-sheen::after,
.claudia-pod:focus-within .cp-orb::after { animation-play-state: paused !important; }
/* pins only once their drop cascade is done — pindrop (fill:both) shares the element with
   pickpulse, so pausing mid-drop would freeze the pin invisible. See dropPins(). */
.j-stage.map-busy.pins-settled .pin.pick .pin-chip { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .claudia-pod:has(.cp-msg.typing), .claudia-pod:has(.cl-dots) { animation: none; }
  .claudia-pod:has(.cp-msg.typing)::after, .claudia-pod:has(.cl-dots)::after { animation: none; opacity: .9; }
}
.cp-msg { font-size: 13.5px; line-height: 1.55; color: var(--on-background); min-height: 20px; max-height: 42vh; overflow-y: auto; }
.cp-msg::-webkit-scrollbar { width: 4px; }
.cp-msg::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: 3px; }
/* transcript turns: user question + Claudia's archived replies stack above the live bubble */
.cp-turn { margin-bottom: 8px; }
.cp-turn.cp-u {
  align-self: flex-end; margin-left: auto; max-width: 86%; width: fit-content;
  background: #eceef2; color: var(--on-background); border: 1px solid #e1e5ea;
  border-radius: 12px 12px 4px 12px; padding: 6px 10px; font-size: 13px;
}
.cp-turn.cp-b { color: var(--on-background); opacity: .82; }
/* Twemoji: emoji rendered as inline images (consistent flags/emoji across OSes) */
img.emoji { height: 1em; width: 1em; margin: 0 .05em 0 .1em; vertical-align: -0.1em; display: inline-block; }
#scText::after { content: ''; }
.cp-msg.typing #scText::after { content: '▊'; color: var(--primary-container); animation: cpblink 1s steps(2, start) infinite; }
@keyframes cpblink { to { visibility: hidden; } }
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-chips:empty { display: none; }
/* slim filter row inside the pod (Claudia's guidance) — flight sort/direct + hotel filters.
   Tiny, no label; chips use inline-flex + line-height:1 so the text is vertically centred. */
.cp-filters { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.cp-filters:empty { display: none; }
.cp-filters::-webkit-scrollbar { display: none; }
.cp-filters .cpf-lab { display: none; }
.cp-filters .cpf-div { display: inline-block; width: 1px; height: 13px; background: var(--outline-variant); flex: none; margin: 0 3px; border-radius: 1px; }
.cp-filters .sfb-chip { flex: 0 0 auto; white-space: nowrap; font-size: 11px; padding: 4px 10px; line-height: 1; display: inline-flex; align-items: center; }
/* stays reachable when the pod minimizes (it's a control, not a message) */
.claudia-pod.collapsed .cp-filters { margin-top: 6px; }

/* ── hotel-query bar: where/when/who for the STAY, independent from the flight ─────────
   ("fly to Roma, sleep in Tivoli" / different dates / fewer-more guests). Lives in the pod,
   hotels screen only; echoes the search-widget field look (label-over-value boxes) with new
   standalone elements. Aims for ONE line in the 380px pod: city flexes (~84px floor) + two
   88px date fields + the guest button ≈ 360px; wraps gracefully if a locale needs more. */
.hq-bar { display: none; position: relative; gap: 4px; align-items: stretch; flex-wrap: wrap; }
.j-stage.hotels-mode .hq-bar { display: flex; }
.hq-f { display: flex; flex-direction: column; gap: 1px; min-width: 0; border: 1px solid var(--outline-variant); border-radius: 10px; background: var(--surface-container-low); padding: 3px 6px 2px; text-align: left; font-family: inherit; }
.hq-f > span { font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-500); line-height: 1.2; }
.hq-f input { border: 0; background: none; padding: 0; margin: 0; font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--on-background); min-width: 0; width: 100%; outline: none; }
.hq-city { flex: 1 1 70px; }
.hq-city input::placeholder { color: var(--on-background); opacity: .6; }   /* empty = follows the flight city */
.hq-date { flex: 0 0 auto; position: relative; }
.hq-dlab { font-size: 11.5px; font-weight: 600; color: var(--on-background); line-height: 1.3; white-space: nowrap; }
/* the REAL date input is an invisible overlay covering the field: a tap anywhere opens the
   native picker; its 16px font satisfies iOS's no-zoom threshold; the visible .hq-dlab is a
   plain label (never focused), so WE control the field width — the native "17 Jul 2026"
   rendering no longer dictates ~104px per field. */
.hq-date input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.hq-pax { flex: 0 0 auto; cursor: pointer; }
.hq-pax b { font-size: 11.5px; color: var(--on-background); white-space: nowrap; }
.hq-pop { position: absolute; right: 12px; z-index: 30; background: #fff; border: 1px solid var(--outline-variant); border-radius: 12px; box-shadow: 0 14px 34px rgba(11, 28, 48, .18); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 168px; }   /* pod-anchored; top set by JS under the bar */
.hq-pop[hidden] { display: none; }
/* place-autocomplete dropdown under the Nereye field (admin + country + distance per row) */
.hq-sug { position: absolute; left: 12px; right: 12px; z-index: 30; background: #fff; border: 1px solid var(--outline-variant); border-radius: 12px; box-shadow: 0 14px 34px rgba(11, 28, 48, .18); overflow: hidden; display: flex; flex-direction: column; }   /* pod-anchored; top set by JS under the bar */
.hq-sug[hidden] { display: none; }
.hq-sug-it { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; text-align: left; border: 0; background: none; padding: 8px 12px; cursor: pointer; font-family: inherit; }
.hq-sug-it + .hq-sug-it { border-top: 1px solid var(--gray-100); }
.hq-sug-it:hover { background: var(--surface-container-low); }
.hq-sug-it b { font-size: 12.5px; color: var(--on-background); }
.hq-sug-it small { font-size: 10.5px; color: var(--gray-500); }
.hq-prow { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--on-background); }
.hq-prow span { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.hq-prow span small { font-size: 10px; font-weight: 500; color: var(--gray-500); }
.hq-prow b { min-width: 16px; text-align: center; }
.hq-prow button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--outline-variant); background: var(--surface-container-low); cursor: pointer; font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.hq-prow button:hover { background: var(--surface-container); }

/* extras step — LiteAPI room/board upgrades + our add-ons (after a hotel is chosen) */
.jc-ex-top { display: flex; align-items: center; gap: 10px; margin: 2px 2px 8px; }
.jc-ex-back { flex: none; border: 1px solid var(--outline-variant); background: #fff; color: var(--gray-700); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.jc-ex-back:hover { background: var(--surface-container-low); }
.jc-ex-title { font-size: 14px; font-weight: 700; color: var(--on-background); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-ex-sec { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-500); margin: 15px 2px 8px; }
.jc-ex-list { display: flex; flex-direction: column; gap: 8px; }
.jc-ex-cta { width: 100%; margin-top: 14px; }
.jc-ex-box .jc-ex-note { font-size: 12px; color: var(--gray-700); margin: 0 0 9px; line-height: 1.4; }
.jc-ex-box .jc-ex-note b { color: var(--on-background); font-weight: 700; }
.jc-ex-box .jc-ex-note.ok { color: #0a7d4b; margin: 0; }
.jc-ex-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--outline-variant); background: #fff; border-radius: 14px; padding: 11px 14px; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s; }
.jc-ex-row:hover { border-color: #b9d6ee; }
.jc-ex-row.on { border-color: var(--primary); background: #EAF4FC; }
.jc-ex-row .jx-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jc-ex-row .jx-l b { font-size: 13.5px; color: var(--on-background); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-ex-row .jx-l i { font-size: 11.5px; color: var(--gray-500); font-style: normal; }
.jc-ex-row .jx-l .jx-free { color: #0a7d3c; font-weight: 600; }
.jc-ex-row .jx-l .jx-sub { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-top: 1px; }
.jc-ex-row .jx-l .jx-nrf { color: var(--gray-500); }
.jc-ex-row .jx-r { flex: none; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--on-background); }
.jc-ex-row .jx-r em { font-style: normal; width: 22px; height: 22px; border-radius: 999px; background: var(--surface-container-low, #eef3f8); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.jc-ex-row.on .jx-r em { background: var(--primary); color: #fff; }
.jc-ex-row .jx-ic { flex: none; font-size: 20px; line-height: 1; width: 26px; text-align: center; }
.jc-ex-row .jx-l { flex: 1; }
/* two-step extras: each section in a solid bounding box (title inside) so it reads as a
   contained module, not text/rows floating over the map */
.jc-ex-box { background: #fff; border: 1px solid var(--outline-variant); border-radius: 16px; padding: 12px 14px 14px; margin-bottom: 12px; box-shadow: 0 6px 18px rgba(11, 28, 48, .06); }
.jc-ex-box .jc-ex-sec { margin: 0 0 10px; }
/* rows inside a box: subtle fill instead of a second competing border */
.jc-ex-box .jc-ex-row { background: var(--surface-container-low); border-color: transparent; }
.jc-ex-box .jc-ex-row:hover { border-color: #b9d6ee; }
.jc-ex-box .jc-ex-row.on { border-color: var(--primary); background: #EAF4FC; }
/* chosen-room preview (step 1): photo + real specs, taps through to the full room modal */
.jc-room { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.jc-room-ph { width: 104px; height: 78px; border-radius: 12px; flex: none; background: var(--surface-container-low); overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.jc-room-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jc-room-info { min-width: 0; flex: 1; }
.jc-room-info b { font-size: 14px; color: var(--on-background); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-room-rn { font-size: 12.5px; color: var(--gray-700); margin-top: 2px; }
.jc-room-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 11.5px; color: var(--gray-500); }
.jc-room-meta:empty { display: none; }
.jc-room-more { font-size: 11.5px; color: var(--sky-dark); font-weight: 600; margin-top: 6px; display: inline-block; }
/* richer stay-card bits ported from the /claudia chat card */
.hcard .am-row { display: flex; gap: 6px; flex-wrap: wrap; font-size: 14px; line-height: 1; margin: 1px 0; }
.hcard .am-row .am { opacity: .9; }
.hcard .chip.fam { color: #8a4b00; background: #fdecd2; font-weight: 600; }
.cp-chips button {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  background: var(--surface-container-low);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all .15s ease;
}
.cp-chips button:hover { background: var(--surface-container); }
.cp-ask { display: flex; gap: 6px; }
/* the free-text chat input + the pod collapse chevron are removed everywhere (guided flow uses
   chips/affordances, not free-text) */
.claudia-pod .cp-ask, .claudia-pod .cp-collapse { display: none !important; }
.cp-ask input {
  flex: 1; min-width: 0;
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.cp-ask input:focus { border-color: var(--primary-container); }
.cp-ask button {
  width: 34px; height: 34px;
  border: none; border-radius: 50%;
  background: var(--primary-container);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
}
.cp-ask button:hover { background: var(--sky-dark); }

/* ── GUIDED flights layout (desktop): the pod becomes a centered full-width strip on TOP of the
   results carrying the search summary + filters; results get the full width below. ────────────── */
/* ═══ GUIDED FLIGHTS STRIP — responsive (desktop hugs one row; mobile wraps to 2 rows) ═══ */
/* STRUCTURAL (all widths): KEEP Claudia's header + narration; drop the free-text input, the setChips
   row (skip chip is pinned top-right instead) and the collapse chevron; strip the widget chrome;
   hide the AI box; style the fields + the sort-filter row. */
.j-stage.flights-guided .cp-ask,
.j-stage.flights-guided .cp-chips,
.j-stage.flights-guided .cp-collapse { display: none; }
.j-stage.flights-guided .cp-msg { max-width: 100%; }
/* skip chip lives in the header row, pushed to the right and centered on the "Claudia" text */
.j-stage.flights-guided .cp-head { align-items: center; }
/* compact chip: height matches the orb, vertically centered with the "Claudia" text/orb */
.j-stage.flights-guided .pod-skip { margin-left: auto; align-self: center; flex: 0 0 auto; z-index: 3; display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; line-height: 1.35; color: var(--sky-dark); background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: 999px; padding: 4.5px 11px 2.5px; cursor: pointer; white-space: nowrap; }
.j-stage.flights-guided .pod-skip:hover { border-color: var(--primary); background: var(--primary-container); color: #fff; }
/* desktop: the filters now live IN the pod, right under the search fields (they used to sit at
   the top of the scrolling column and scrolled away with the cards) — small top gap, no bottom
   margin (the pod's own padding closes the card). Mobile override below (~2009) unchanged. */
.j-stage.flights-guided .cp-filters.filters-below { justify-content: flex-start; flex-wrap: wrap; overflow: visible; margin: 4px 0 0; padding: 0; gap: 8px; width: 100%; }
.j-stage.flights-guided .cp-filters.filters-below .cpf-div { display: none; }
.j-stage.flights-guided .cp-filters.filters-below > .sfb-chip:first-child { margin-right: auto; }
.j-stage.flights-guided .cp-filters.filters-below .sfb-chip { font-size: 12.5px; padding: 8px 16px; border-radius: 999px; }
.claudia-pod .search-widget.sw-in-pod { width: 100%; max-width: none; margin: 0; padding: 0; background: transparent; box-shadow: none; border: 0; border-radius: 0; }
.claudia-pod .search-widget.sw-in-pod #suso-ai-bar,
.claudia-pod .search-widget.sw-in-pod #suso-ai-hint,
.claudia-pod .search-widget.sw-in-pod .msx-or,          /* the "YA DA / OR" AI-vs-manual divider (~71px) — belongs on the landing, NOT in the pod (it was the big message→fields gap) */
.claudia-pod .search-widget.sw-in-pod .search-submit { display: none !important; }   /* no "Ara" — a field change auto-refreshes */
.claudia-pod .search-widget.sw-in-pod .fg input,
.claudia-pod .search-widget.sw-in-pod .fg select,
.claudia-pod .search-widget.sw-in-pod .date-trigger,
.claudia-pod .search-widget.sw-in-pod .pax-trigger { font-size: 13.5px; border-radius: 0.75rem; padding: 0.32rem 0.55rem; }
.claudia-pod .search-widget.sw-in-pod .date-trigger-wrap,
.claudia-pod .search-widget.sw-in-pod .pax-trigger { border-radius: 0.75rem; }
/* the wrap owns the rounding; rounded INNER triggers drew an "overlapping pills" seam
   between gidiş and dönüş (user-caught 2026-07-23) */
.claudia-pod .search-widget.sw-in-pod .date-trigger { border-radius: 0; }
.claudia-pod .search-widget.sw-in-pod .date-trigger-ret { font-size: 12.5px; }
.claudia-pod .search-widget.sw-in-pod .swap-btn { width: 30px; min-width: 30px; height: 30px; padding: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; align-self: flex-end; }

/* DESKTOP (≥901px): center the pod WITHOUT transform (a transform makes the pod the containing
   block for its position:fixed #paOffer, trapping the full-page ön onay modal). JS hugs the pod +
   cards to the fields' exact width; the widget is max-content so its box === the one-line fields. */
@media (min-width: 901px) {
  .j-stage { --gw: min(700px, 92vw); }
  .j-stage.flights-guided .claudia-pod { left: 0; right: 0; margin: 0 auto; transform: none; top: 12px; width: var(--gw); max-width: none; }
  .j-stage.flights-guided.map-mode .j-col,
  .j-stage.flights-guided.side-mode .j-col { left: 0; right: 0; margin: 0 auto; width: var(--gw); padding-left: 0; padding-right: 0; padding-top: 200px; }
  .claudia-pod .search-widget.sw-in-pod { width: max-content; }
  .claudia-pod .search-widget.sw-in-pod .search-row { margin: 0; gap: 0.4rem; justify-content: flex-start; flex-wrap: nowrap; }
  .claudia-pod .search-widget.sw-in-pod .origin-dest { flex: 0 1 auto; flex-wrap: nowrap; }
  .claudia-pod .search-widget.sw-in-pod .origin-dest .fg { flex: 0 0 150px; min-width: 0; }
  /* landing sets date/pax flex-grow via INLINE styles (0.9 / 0.55) → override so they hug content */
  .claudia-pod .search-widget.sw-in-pod .search-row > .fg { flex: 0 0 auto !important; min-width: 0 !important; }
}

/* MOBILE (≤900px): the base .claudia-pod is already a full-width top strip. The widget FILLS it and
   the fields WRAP to two rows (from | swap | to · then date | pax). Results stay the bottom sheet. */
@media (max-width: 900px) {
  /* the landing makes .search-row display:grid on mobile → force flex so our wrap layout applies */
  .claudia-pod .search-widget.sw-in-pod .search-row { display: flex !important; margin: 0; gap: 6px; justify-content: flex-start; flex-wrap: wrap; align-items: stretch; }
  /* row 1: from | swap | to (override the landing's mobile column-stack + width:100%) */
  .claudia-pod .search-widget.sw-in-pod .origin-dest { flex: 1 1 100%; flex-direction: row; gap: 6px; align-items: stretch; }
  .claudia-pod .search-widget.sw-in-pod .origin-dest .fg { flex: 1 1 0; width: auto; min-width: 0; }
  /* the landing mobile absolutely-positions + rotates the swap (for its stacked column) — reset it
     to a normal inline item that sits BETWEEN from and to in our row layout */
  .claudia-pod .search-widget.sw-in-pod .swap-btn { position: static; transform: none; right: auto; left: auto; top: auto; margin: 0; flex: 0 0 34px; width: 34px; min-width: 34px; height: auto; align-self: stretch; border-radius: 12px; }
  /* row 2: dates | pax share one row. The date field's right edge lines up with the swap button on
     row 1 — swap is centered, so its right edge = 50% + swap/2 (17px). pax then = the `to` width. */
  .claudia-pod .search-widget.sw-in-pod .search-row > .fg { flex: 0 0 auto !important; min-width: 0 !important; }
  .claudia-pod .search-widget.sw-in-pod .search-row > .fg.fg-dates { flex-basis: calc(50% + 17px) !important; }   /* dates → end at swap's right edge */
  .claudia-pod .search-widget.sw-in-pod .search-row > .fg.fg-pax { flex-basis: calc(50% - 23px) !important; }   /* pax = to field width */
  /* match the desktop field look: compact height (not the landing's 40px touch height) + left-aligned */
  .claudia-pod .search-widget.sw-in-pod .fg input,
  .claudia-pod .search-widget.sw-in-pod .fg select,
  .claudia-pod .search-widget.sw-in-pod .date-trigger-wrap,
  .claudia-pod .search-widget.sw-in-pod .pax-trigger { height: auto; }
  .claudia-pod .search-widget.sw-in-pod .fg input,
  .claudia-pod .search-widget.sw-in-pod .date-trigger,
  .claudia-pod .search-widget.sw-in-pod .pax-trigger { text-align: left; }
}
/* identity mini-form inside the pod */
.cp-form { display: flex; flex-direction: column; gap: 7px; }
.cp-form input {
  border: 1px solid var(--outline-variant);
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.cp-form input:focus { border-color: var(--primary-container); }
.cp-form .row { display: flex; gap: 7px; }
.cp-form .row .btn-mini { flex: 1; }
.btn-mini {
  border: none;
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.btn-mini.primary { background: var(--primary-container); color: #fff; }
.btn-mini.primary:hover { background: var(--sky-dark); }
.btn-mini.ghost { background: var(--surface-container-low); color: var(--gray-700); }

/* ── payment step ─────────────────────────────────────────────────────── */
/* single "Ödeme seçenekleri" section — no radio, not selectable (the split slider is the choice) */
.pay-section .po-head { display: flex; align-items: center; gap: 10px; }
.pay-section .po-title { font-size: 15px; font-weight: 700; color: var(--on-background); }
.pay-section .po-amount { margin-left: auto; text-align: right; }
.pay-section .po-amount b { font-size: 17px; font-weight: 800; color: var(--on-background); }
.pay-section .po-amount span { display: block; font-size: 11px; color: var(--gray-500); }
.po-approved {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #0a7d4b;
  background: #e4f6ec;
  border-radius: 999px;
  padding: 2px 9px;
  margin-left: 8px;
}
/* monthly-plan locked until ön onay (finans partner approval) */
.po-lock { display: inline-block; font-size: 11px; font-weight: 700; color: #8a5a00; background: #fdf0d8; border-radius: 999px; padding: 2px 9px; margin-left: 8px; }
.pay-opt.locked { opacity: .96; }
/* cart contents shown inline at the top of the payment screen (same rows as the hover cart) */
.pay-summary { padding: 13px 18px 15px; }
.pay-summary .ps-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--on-background); }
.pay-summary .ps-route { font-size: 11.5px; font-weight: 600; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-summary .cart-row:last-of-type { border-bottom: none; }
.pay-summary .cart-total { padding: 10px 0 0; margin-top: 4px; border-top: 1px solid var(--gray-200); }
/* payment-time "price changed" confirm card */
.pc-card .pc-h { font-size: 15px; font-weight: 800; color: #9a6700; margin-bottom: 10px; }
.pc-card .pc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--outline-variant); }
.pc-card .pc-row:last-of-type { border-bottom: none; }
.pc-card .pc-l { font-size: 13px; font-weight: 600; color: var(--on-background); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-card .pc-delta { font-size: 12.5px; color: var(--gray-500); white-space: nowrap; flex: none; }
.pc-card .pc-delta s { color: var(--gray-400); }
.pc-card .pc-delta b { color: var(--on-background); font-weight: 800; font-size: 14px; }
.pc-card .pc-cta { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.pc-card .pc-no { border: none; background: none; color: var(--gray-500); font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 4px; }
.pc-card .pc-no:hover { color: var(--on-background); }
/* passenger + buyer step (yolcu bilgileri) */
.px-card { padding: 14px 16px 15px; }
.px-card .px-h { display: flex; align-items: baseline; gap: 8px; font-size: 14.5px; font-weight: 800; color: var(--on-background); margin-bottom: 4px; }
.px-card .px-type { font-size: 11px; font-weight: 600; color: var(--gray-500); }
.px-card .px-note { font-size: 11.5px; line-height: 1.4; color: var(--gray-500); margin-bottom: 10px; }
/* compact order-owner card when ön onay already collected the identity: confirmed summary +
   only the missing e-posta, with a "Düzenle" toggle revealing the pre-filled full fields */
.px-buyer-compact .px-onay-ok { font-size: 11px; font-weight: 700; color: var(--success, #16a34a); }
.px-buyer-compact .px-buyer-sum { font-size: 12.5px; line-height: 1.5; color: var(--gray-700, #374151); margin: 2px 0 10px; }
.px-buyer-compact .px-email-row { grid-template-columns: 1fr; }
.px-buyer-compact .px-edit-toggle { margin-top: 9px; padding: 0; background: none; border: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--primary-container, #2563eb); cursor: pointer; }
.px-buyer-compact .px-edit-toggle:hover { text-decoration: underline; }
.px-buyer-compact #pbFull { margin-top: 10px; }
.px-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 10px; }
.px-fg { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.px-fg > label { font-size: 11px; font-weight: 600; color: var(--gray-600); }
.px-fg .pa-input { width: 100%; box-sizing: border-box; }
.px-gender { display: inline-flex; border: 1px solid var(--outline-variant); border-radius: 10px; overflow: hidden; }
.px-gender button { flex: 1; border: 0; background: #fff; color: var(--gray-600); font-size: 12.5px; font-weight: 600; padding: 8px 6px; cursor: pointer; }
.px-gender button.on { background: var(--primary-container); color: #fff; }
.px-self, .px-save { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--gray-700); margin: 8px 0 2px; cursor: pointer; }
.px-save { margin-top: 10px; color: var(--gray-500); }
.px-save[hidden] { display: none; }   /* the class display:flex would otherwise beat [hidden] */
.px-saved { margin-bottom: 8px; }
/* passport fields: hidden unless an intl trip or a foreign nationality is chosen */
.px-fg.px-pass { display: none; }
.px-card.px-intl .px-fg.px-pass, .px-card.px-foreign .px-fg.px-pass { display: flex; }
.px-card.px-foreign .px-fg.px-tc { display: none; }
.px-err { font-size: 12.5px; font-weight: 600; color: #b4453a; background: #fdecea; border-radius: 10px; padding: 9px 12px; margin: 4px 0; }
.px-go { margin-top: 4px; }
/* passenger-step sign-in offer (signed-out) */
.px-login { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-left: 3px solid var(--primary); }
.px-login .px-login-t { font-size: 12.5px; color: var(--gray-700); line-height: 1.4; }
.px-login-btn { flex: none; background: #fff; border: 1px solid var(--primary); color: var(--sky-dark); font-weight: 700; font-size: 13px; border-radius: 9px; padding: 8px 15px; cursor: pointer; transition: all .15s ease; }
.px-login-btn:hover { background: var(--primary-container); color: #fff; border-color: transparent; }
/* success-screen create-account offer (signed-out) */
.success-signup { margin-top: 14px; padding: 13px 15px; border-radius: 12px; background: var(--surface-container-low); border: 1px solid var(--outline-variant); }
.success-signup .ss-t { font-size: 13px; color: var(--gray-700); line-height: 1.45; margin-bottom: 10px; }
.success-signup .ss-btn { width: auto; display: inline-block; padding: 9px 22px; }
.success-signup .ss-link { display: inline-block; font-weight: 700; font-size: 13.5px; color: var(--sky-dark); text-decoration: none; }
.success-signup .ss-link:hover { text-decoration: underline; }
.pay-locked { margin-top: 10px; }
.pay-locked .pl-note { font-size: 12px; line-height: 1.45; color: var(--gray-700); margin-bottom: 10px; }
.pay-locked .pl-cta { width: 100%; }
.vade-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.vade-chips[hidden] { display: none; }   /* the class display:flex would otherwise beat the [hidden] UA rule */
.vade-chips button {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  background: var(--surface-container-low);
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 7px 13px;
  cursor: pointer;
  transition: all .15s ease;
}
.vade-chips button:hover { background: var(--surface-container); }
.vade-chips button.active { background: var(--primary-container); color: #fff; }
.vade-chips button:disabled, .vade-chips button.disabled { opacity: .38; cursor: not-allowed; text-decoration: line-through; }
.vade-chips button:disabled:hover, .vade-chips button.disabled:hover { background: var(--surface-container-low); }

/* split payment — a single loan ⇄ card slider. The slider track IS the split bar: left of the
   thumb is financed (primary), right rides the card as tek çekim (amber). The fill point tracks
   the thumb via --sp (set in setSplit). Presets jump to common splits. */
.pay-split { margin-top: 12px; padding: 12px; border: 1px solid var(--outline-variant); border-radius: 12px; background: var(--surface-container-low); }
.pay-split[hidden] { display: none; }
.ps-head { font-size: 13.5px; font-weight: 800; color: var(--on-background); margin-bottom: 2px; }
.ps-head .ps-hint { font-weight: 500; color: var(--gray-500); }
.ps-sub { font-size: 11.5px; line-height: 1.35; color: var(--gray-500); margin-bottom: 11px; }
.ps-loan { background: var(--primary); }
.ps-card { background: var(--brand-amber); }
.ps-range { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 2px 0 6px; background: transparent; cursor: pointer; }
.ps-range::-webkit-slider-runnable-track { height: 8px; border-radius: 5px; background: linear-gradient(90deg, var(--primary) 0 var(--sp, 100%), var(--brand-amber) var(--sp, 100%) 100%); }
.ps-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -6px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); box-shadow: 0 2px 6px rgba(11, 28, 48, .28); }
.ps-range::-moz-range-track { height: 8px; border-radius: 5px; background: linear-gradient(90deg, var(--primary) 0 var(--sp, 100%), var(--brand-amber) var(--sp, 100%) 100%); }
.ps-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); box-shadow: 0 2px 6px rgba(11, 28, 48, .28); }
.ps-legend { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--gray-700); }
.ps-k { display: inline-flex; align-items: center; gap: 5px; }
.ps-k b { color: var(--on-background); font-weight: 800; }
/* editable amount — looks like the bold text (no box); a dashed underline only on hover/focus */
.ps-amt { font: inherit; font-weight: 800; color: var(--on-background); border: 0; background: transparent; padding: 0 1px; margin: 0; text-align: right; border-bottom: 1px dashed transparent; -moz-appearance: textfield; }
.ps-amt:hover { border-bottom-color: var(--outline-variant); }
.ps-amt:focus { outline: none; border-bottom-color: var(--primary-container); }
.ps-amt::-webkit-outer-spin-button, .ps-amt::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ps-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.ps-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ps-presets button { font-size: 12px; font-weight: 600; color: var(--gray-700); background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: 8px; padding: 6px 10px; cursor: pointer; transition: all .15s ease; }
.ps-presets button:hover { background: var(--surface-container); }
.ps-presets button.on { background: var(--primary-container); color: #fff; border-color: transparent; }
.ps-note { margin-top: 9px; font-size: 11.5px; line-height: 1.4; color: var(--gray-700); }
.rp-total { font-weight: 700; }
.rp-total .rp-v { font-weight: 800; color: var(--on-background); }
.pay-cta { width: 100%; margin-top: 4px; }

/* success */
.success-card { text-align: center; padding: 26px 18px 20px; }
.success-card .big { font-size: 44px; line-height: 1; }
.success-card h3 { font-size: 20px; margin: 10px 0 4px; }
.success-card .muted { max-width: 420px; margin: 0 auto; }
.success-rows { text-align: left; margin-top: 14px; border-top: 1px solid var(--gray-200); }
.success-rows .srow {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 9px 2px;
  font-size: 13px;
  color: var(--gray-700);
  border-bottom: 1px dashed var(--gray-200);
}
.success-rows .srow b { color: var(--on-background); }
.success-orderno {
  margin-top: 14px; padding: 8px 14px; display: inline-block;
  background: var(--surface-container-low); border: 1px solid var(--outline-variant);
  border-radius: 999px; font-size: 12.5px; color: var(--gray-600);
  letter-spacing: .2px;
}
.success-orderno b { color: var(--on-background); font-variant-numeric: tabular-nums; }

/* ── ALJ mock gateway ─────────────────────────────────────────────────── */
.alj-overlay {
  position: fixed; inset: 0; z-index: 2600;
  background: rgba(11, 28, 48, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.alj-overlay[hidden] { display: none; }
.alj-modal {
  width: min(420px, 94vw);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  animation: aljin .35s ease;
}
@keyframes aljin { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.alj-head {
  background: #143C2B;
  color: #fff;
  padding: 16px 18px;
}
.alj-logo { font-size: 20px; font-weight: 800; letter-spacing: .02em; }
.alj-logo span { font-weight: 400; opacity: .85; margin-left: 4px; }
.alj-sub { display: block; font-size: 11px; opacity: .75; margin-top: 3px; }
.alj-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 9px; }
.alj-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13.5px; color: var(--gray-700);
  padding: 7px 0;
  border-bottom: 1px dashed var(--gray-200);
}
.alj-row b { color: var(--on-background); }
.alj-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-700); padding: 6px 0 2px; cursor: pointer; }
.alj-note { font-size: 11px; color: var(--gray-500); line-height: 1.5; }

/* (the "Yolculuğa dön" reopen chip + .j-reopen styles were removed 2026-07-17) */

/* ── SEPET — lives in the journey top bar; details drop down ──────────── */
.cart {
  position: relative;
  margin-left: auto;
  color: var(--on-background);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
  pointer-events: none;
}
.cart.open { opacity: 1; visibility: visible; transform: none; }
.cart-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  background: var(--surface-container-low);
  padding: 7px 14px;
  font-size: 13px;
  font-family: inherit;
  color: var(--on-background);
  cursor: pointer;
  transition: box-shadow .18s ease, background .18s ease;
}
.cart-pill:hover { background: var(--surface-container); }
.cart-pill b { font-weight: 800; }
.cart-pill .pill-n {
  min-width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--primary-container);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.cart-pill:hover { box-shadow: 0 12px 30px rgba(14, 165, 233, .3); }
/* invisible bridge over the pill→dropdown gap so hovering across it never drops the panel */
.cart.expanded .cart-body::before, .cart.pinned .cart-body::before {
  content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.cart-body {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  border: 1px solid var(--outline-variant);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(11, 28, 48, .22);
  padding: 14px 16px;
  animation: cartin .25s ease;
  z-index: 40;
}
.cart { pointer-events: none; }              /* the container never eats clicks */
.cart > * { pointer-events: auto; }
.cart.expanded .cart-body, .cart.pinned .cart-body { display: block; }
.cart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--gray-500);
  border-bottom: 1px solid var(--gray-200);
  padding-bottom: 9px;
}
.cart-head span:last-child { color: var(--primary); }
.cart-approved {
  margin-top: 9px;
  font-size: 11.5px;
  font-weight: 700;
  color: #0a7d4b;
  background: #e4f6ec;
  border-radius: 9px;
  padding: 6px 10px;
  animation: cartin .4s ease;
}
.cart-approved[hidden] { display: none; }
/* pending while the finance partners are being evaluated: amber + a gentle pulse */
.cart-approved.evaluating { color: #9a6700; background: #fdf3d7; animation: cartEvalPulse 1.4s ease-in-out infinite; }
@keyframes cartEvalPulse { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
@media (prefers-reduced-motion: reduce) { .cart-approved.evaluating { animation: none; } }
.cart-items { max-height: 244px; overflow-y: auto; overscroll-behavior: contain; }
.cart-items::-webkit-scrollbar { width: 5px; }
.cart-items::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }
.cart-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-size: 13px;
  border-bottom: 1px dashed var(--gray-200);
  animation: cartin .35s ease;
}
@keyframes cartin { from { opacity: 0; transform: translateY(-6px); } }
.cart-row .cr-l { min-width: 0; }
.cart-row .cr-l b { display: block; color: var(--on-background); font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-row .cr-l span { font-size: 11px; color: var(--gray-500); }
.cart-row .cr-p { font-weight: 700; color: var(--on-background); white-space: nowrap; }
.cart-row .cr-x {
  border: none; background: transparent;
  color: var(--gray-400);
  font-size: 15px; cursor: pointer;
  padding: 2px 4px; line-height: 1;
}
.cart-row .cr-x:hover { color: #d33; }
.cart-empty { padding: 12px 0; font-size: 12px; color: var(--gray-500); }
.cart-clear {
  display: block; width: 100%; margin: 9px 0 0;
  border: none; background: transparent;
  color: var(--gray-500); font-size: 11.5px; font-weight: 600;
  text-align: center; cursor: pointer; padding: 4px 0;
}
.cart-clear:hover { color: #d33; }
.cart-clear[hidden] { display: none; }
.cart-total {
  display: flex; justify-content: space-between;
  padding: 11px 0 2px;
  font-size: 14px; font-weight: 600;
}
.cart-total b { font-size: 16px; font-weight: 800; }
.cart-monthly {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--surface-container-low);
  font-size: 12px;
  color: var(--gray-700);
}
.cart-monthly b { font-size: 15px; font-weight: 800; color: var(--primary); }
.cart-cta {
  width: 100%;
  margin-top: 11px;
  font-size: 14px;
  font-weight: 700;
  color: #0B1C30;
  background: var(--brand-amber);
  border: none;
  border-radius: 10px;
  padding: 11px 14px;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.cart-cta:hover { background: #FBB33B; transform: translateY(-1px); }
.cart-cta[hidden] { display: none; }
.cart-pill.pulse { animation: cartpulse .5s ease; }
@keyframes cartpulse { 30% { box-shadow: 0 0 0 4px rgba(14, 165, 233, .4), 0 10px 26px rgba(11, 28, 48, .16); } }

@media (prefers-reduced-motion: reduce) {
  .journey.opening, .journey.opening .jw-glass, .journey.opening .jw-frame,
  .journey.opening .jw-clouds, .journey.opening .jw-clouds i { animation: none !important; clip-path: none !important; opacity: 1; }
  .journey.opening .jw-glass, .journey.opening .jw-clouds { opacity: 0; }
  .cp-orb { animation: none; }
}
/* mobile context row lives inside the hotel sheet; hidden on desktop */
.hotels-ctx { display: none; }

@media (max-width: 900px) {
  /* top bar: row 1 = back(icon) + dates, row 2 = filters (see #jControls below) */
  .j-top { gap: 8px; padding: 9px 12px; flex-wrap: wrap; align-items: center; }
  .j-top #jStatus, .j-title, .j-top .logo-mark { display: none; }   /* redundant on mobile */
  .j-back { font-size: 0; padding: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; grid-column: 1; justify-self: start; }
  .j-back::before { content: '←'; font-size: 15px; font-weight: 700; }
  .cart { flex: 0 0 auto; order: 3; margin-left: auto; }
  .cart-pill, .cart-pill b { white-space: nowrap; }

  /* cards = bottom sheet with its own surface; assistant pod = compact top */
  .j-stage.map-mode .j-col,
  .j-stage.side-mode .j-col {
    position: absolute; left: 0; right: 0; top: auto; bottom: 0; width: auto;
    height: 84vh; max-height: 84vh;
    /* iOS: vh = EN BUYUK viewport — Safari cubuklari acikken sheet'in alti (fiyat satiri)
       gorsel viewportun ALTINDA kaliyordu ve icerik kisaysa scroll da yoktu ("kaydiramiyorum,
       fiyat gorunmuyor" vakasi 2026-07-23). dvh gorunur yuksekligi izler. */
    height: 84dvh; max-height: 84dvh;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 12px 20px;   /* the grab handle sits flush at the top */
    background: rgba(248, 249, 255, .96);
    backdrop-filter: blur(3px);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(11, 28, 48, .12);
    transform: translateY(44%);   /* default snap = HALF: map pins + cards both visible */
    transition: transform .3s cubic-bezier(.32, .72, 0, 1);
  }
  /* at FULL snap the sheet top sits under the pod (absolute, top:8px) — reserve the
     pod's real height (--pod-h, kept in sync by a ResizeObserver) so nothing hides
     behind Claudia. Most visible at checkout, where the top payment option was cut off. */
  .j-stage.map-mode.sheet-full .j-col,
  .j-stage.side-mode.sheet-full .j-col { padding-top: var(--pod-h, 190px); }
  /* At the half / peek snaps the sheet is translated DOWN, so its bottom (and the last cards)
     fall below the viewport — and because .j-col is itself the scroll container, its off-screen
     bottom means those cards can never scroll into view. The translate is a % of the sheet's own
     height, so bottom padding has to over-shoot to win: pad the scroll area generously (plus the
     iOS home-indicator inset) so the last card clears the fold. FULL has no translate → small gap. */
  .j-stage.map-mode .j-col, .j-stage.side-mode .j-col { padding-bottom: calc(80vh + env(safe-area-inset-bottom, 0px)); }
  .j-stage.map-mode.sheet-full .j-col, .j-stage.side-mode.sheet-full .j-col { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  /* compact pod: it no longer eats ~40% of the screen — message clamps to 3
     lines, the subtitle is dropped, so the map strip + cards get room back */
  .claudia-pod {
    width: calc(100vw - 16px); left: 8px; top: 6px;   /* full-width from the top (nav bar is gone) */
    max-height: none; padding: 9px 12px; gap: 6px;
  }
  .cp-head .cp-sub { display: none; }
  .cp-msg {
    font-size: 12.5px; line-height: 1.45;
    /* once Claudia FINISHES a long message, shrink it to ~3 lines (scrollable) so it stops
       eating the screen on mobile; while she's WRITING (.typing) it grows to show the text. */
    max-height: 4.7em; overflow-y: auto; -webkit-overflow-scrolling: touch;
    transition: max-height .35s ease;
    scrollbar-width: thin; scrollbar-color: var(--outline-variant) transparent;
  }
  .cp-msg.typing { max-height: 44vh; }
  /* long, finished message: it slowly auto-scrolls — a soft bottom fade signals "more below" */
  .cp-msg.cp-more { -webkit-mask-image: linear-gradient(180deg, #000 66%, rgba(0, 0, 0, .18) 90%, transparent); mask-image: linear-gradient(180deg, #000 66%, rgba(0, 0, 0, .18) 90%, transparent); }
  .cp-msg::-webkit-scrollbar { width: 4px; }
  .cp-msg::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: 3px; }
  /* return tickets: let the CTA wrap under the route on very narrow screens */
  .rr-body { flex-wrap: wrap; row-gap: 8px; }
  .rr-cta { margin-left: auto; }

  /* the floating city image card has no room; the ctx row carries city + weather */
  .j-citycard { display: none; }
  .hotels-ctx {
    display: block;
    font-size: 12.5px; color: var(--gray-700);
    padding: 0 2px 5px; letter-spacing: .01em;
  }
  .hotels-ctx b { color: var(--on-background); font-weight: 700; }

  /* hotel cards stay HORIZONTAL + compact on mobile (was stacked/tall → ~1.3 cards/screen);
     the rich rows are hidden here (they live in Detay), so ~3-4 cards fit and scroll cleanly */
  .hcard .ph, .hcard .ph-wrap.noimg::after { width: 108px; min-height: 108px; }
  .hcard .hc-gnav { display: flex; width: 20px; height: 20px; font-size: 12px; }   /* no hover on touch → always tappable */
  .hcard .hc-pick { display: none; }        /* photo ribbon → clean body line (no wrap on 108px) */
  .hcard .hc-pick-b { display: block; }
  .hcard .foot { gap: 8px; }
  .hcard .fc-add { padding: 6px 12px; }
  /* Pinned bottom action bar for the checkout-family CTAs (extras · hotel extras · payment).
     Keeps the primary action in view without SCROLLING AWAY, but reads as a BAR content
     slides under — not a floating pill that covers rows: full-bleed to the sheet edges,
     UPWARD shadow + rounded top, and its own safe-area padding so it never sits under the
     iOS home indicator. The sheet's padding-bottom (below) is trimmed so the last real row
     clears it instead of hiding behind it. */
  /* in-flow button at the end of the content (NOT sticky) — a sticky bottom bar floats up over the
     cards at the peek snap. Same width as the section boxes above it (no full-bleed). */
  .jc-ex-cta, .pay-cta {
    position: static; margin: 16px 0 4px; width: auto;
    border-radius: 12px;
    padding: 13px 14px;
    box-shadow: 0 8px 20px -8px rgba(11, 28, 48, .28);
  }

  /* flight + return cards already single-column via .j-col rules */
  .res-controls { gap: 8px; }

  .cart-body { position: fixed; top: 54px; left: 12px; right: 12px; width: auto; }
}

/* transition picker (proto-only demo control on the landing) */
.trans-picker {
  position: fixed; left: 16px; bottom: 16px; z-index: 1400;
  display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .95);
  border: 1px solid var(--outline-variant); border-radius: 999px;
  padding: 6px 10px; font-size: 12px; color: var(--gray-700);
  box-shadow: 0 8px 24px rgba(11, 28, 48, .14);
}
.trans-picker span { padding-right: 2px; font-weight: 600; }
.trans-picker button {
  border: 1px solid transparent; background: transparent; color: var(--gray-700);
  border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; transition: all .15s ease;
}
.trans-picker button:hover { background: var(--surface-container-low); }
.trans-picker button.active { background: var(--primary-container); color: #fff; font-weight: 600; }
@media (max-width: 640px) { .trans-picker { display: none; } }

/* real financing: lender rows */
.lender-row { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-top: 1px dashed var(--gray-200); cursor: pointer; }
.lender-row input { accent-color: var(--primary-container); }
.lender-row .lr-name { font-weight: 700; color: var(--on-background); font-size: 13.5px; }
.lender-row .lr-best { font-size: 10px; font-weight: 700; color: #0a7d4b; background: #e4f6ec; border-radius: 999px; padding: 1px 7px; }
.lender-row .lr-amt { margin-left: auto; text-align: right; }
.lender-row .lr-amt b { font-size: 14px; color: var(--on-background); }
.lender-row .lr-amt small { display: block; font-size: 10.5px; color: var(--gray-500); }

/* ── streaming feedback: skeletons, live dots, "more coming" footer ───────── */
@keyframes skpulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.sk { display: inline-block; background: linear-gradient(90deg, var(--gray-200), var(--gray-100), var(--gray-200)); background-size: 200% 100%; border-radius: 6px; animation: skpulse 1.1s ease-in-out infinite; }
.fc-skel { pointer-events: none; }
.fc-skel .fc-legs { display: flex; align-items: center; gap: 12px; }
.sk-logo { width: 34px; height: 34px; border-radius: 8px; flex: none; }
.sk-col { display: flex; flex-direction: column; gap: 6px; flex: none; }
.sk-route { display: flex; gap: 10px; align-items: center; flex: 1; }
.sk-l { height: 10px; }
.sk-l.w35 { width: 35px; } .sk-l.w40 { width: 40px; } .sk-l.w45 { width: 45px; }
.sk-l.w55 { width: 55px; } .sk-l.w60 { width: 60px; } .sk-l.w70 { width: 70px; } .sk-l.w80 { width: 80%; }
.fc-skel .fc-price { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fc-stream-foot { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; color: var(--gray-500); font-size: 12.5px; }
.cl-dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.cl-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .4; animation: cldot 1s infinite; }
.cl-dots i:nth-child(2) { animation-delay: .15s; } .cl-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes cldot { 0%,100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ── boarding-pass ticket card — shared by the return options AND (via .fc-compact)
   the outbound flight cards, so both read the same compact way ─────────────── */
.rr-card {
  display: block; background: #fff; border: 1px solid var(--outline-variant);
  border-radius: 12px; padding: 10px 12px; margin: 8px 0; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.rr-card:hover { border-color: var(--primary-container); box-shadow: 0 6px 18px rgba(11,28,48,.1); }
.rr-card.sel { border-color: var(--primary-container); box-shadow: 0 0 0 2px rgba(14,165,233,.25); }
/* outbound card = a bare wrapper; the inner .rr-card is the visible ticket */
#stagePanel .flight-card.fc-compact { background: none; border-radius: 0; padding: 0; box-shadow: none; }
#stagePanel .flight-card.fc-compact:hover { box-shadow: none; transform: none; }
#stagePanel .flight-card.fc-compact > .rr-card { margin: 0; }
#stagePanel .flight-card.fc-compact.selected { box-shadow: none; }
#stagePanel .flight-card.fc-compact.selected > .rr-card { border-color: var(--primary-container); box-shadow: 0 0 0 2px rgba(14,165,233,.25), 0 8px 22px rgba(11,28,48,.08); }
.fc-compact .fc-tagchip { position: static; top: auto; right: auto; align-self: center; flex: none; }
.rr-stops { white-space: normal !important; text-align: center; line-height: 1.25; }
.rr-bag { font-size: 10.5px; color: var(--gray-500); margin-top: 7px; }
/* the return hint had negative side-margins for the old padded card; the compact
   wrapper has no padding, so reset them — it now sits as its own aligned strip.
   The hint is empty+[hidden] until a selection confirms into it; the base rule
   sets display:flex which would override the [hidden] attribute, so force it off. */
.fc-return-hint[hidden] { display: none; }
.fc-compact .fc-return-hint { margin: 6px 0 0; border: 1px solid rgba(14,165,233,.14); border-radius: 10px; }
.rr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--gray-200); }
.rr-air { display: inline-flex; align-items: center; gap: 7px; min-width: 0; flex: 1 1 auto; }
/* long codeshare names ("Lufthansa, Lufthansa City Airlines") WRAP instead of running over the
   flight number + price (was white-space:nowrap). Short names stay on one line. */
.rr-air b { font-size: 13px; color: var(--on-background); white-space: normal; overflow-wrap: anywhere; }
.rr-air .rr-no { font-size: 11px; font-weight: 400; color: var(--gray-500); white-space: nowrap; overflow-wrap: normal; }   /* flows at the end of the name; kept regular-weight + unbroken */
.rr-fare { text-align: right; line-height: 1.1; flex: none; }
.rr-fare b { font-size: 15px; color: var(--on-background); }
.rr-fare small { display: block; font-size: 10px; color: var(--gray-500); }
.rr-body { display: flex; align-items: center; gap: 10px; padding-top: 9px; }
.rr-pt { display: flex; flex-direction: column; line-height: 1.15; }
.rr-pt.rr-pt-r { text-align: right; }
.rr-pt b { font-size: 15px; color: var(--on-background); } .rr-pt b sup { font-size: 9px; color: var(--gray-500); }
.rr-pt .rr-date { align-self: flex-start; margin-top: 3px; font-size: 10px; font-weight: 700; color: var(--sky-dark); background: #e8f4fe; border-radius: 6px; padding: 1px 6px; letter-spacing: .2px; white-space: nowrap; }
.rr-pt.rr-pt-r .rr-date { align-self: flex-end; }
.rr-pt em { font-size: 10.5px; color: var(--gray-500); font-style: normal; letter-spacing: .3px; }
.rr-mid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.rr-mid i { font-size: 10px; color: var(--gray-500); font-style: normal; white-space: nowrap; }
.rr-dash { width: 100%; height: 0; border-top: 1.5px dashed var(--gray-300); position: relative; }
.rr-dash::after { content: '✈'; position: absolute; right: -2px; top: -8px; font-size: 10px; color: var(--primary-container); }
.rr-cta { flex: none; font-size: 12px; font-weight: 700; color: var(--primary); background: var(--surface-container-low); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
.fc-return-row.rr-card:hover .rr-cta { background: var(--primary-container); color: #fff; }
.rr-tot { font-size: 10.5px; color: var(--gray-400); text-align: right; margin-top: 6px; }
.rr-back { opacity: .7; }

/* the site-wide DEMO ribbon (#susoDemoRibbon, z-index 8000) overlaps the journey
   cards — hide it while the journey overlay is open; it returns on the landing */
body.journey-open #susoDemoRibbon { display: none !important; }

/* skeleton cards must be visible immediately (the base #stagePanel .flight-card
   rule keeps real cards at opacity:0 until .in — skeletons never get .in) */
#stagePanel .flight-card.fc-skel { opacity: 1; transform: none; }

/* returns filter/sort bar — compact version of the outbound .res-controls */
.rr-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 2px 0 10px; padding: 0; }
.rr-controls .sfb-chip, .rr-controls .sfb-sort-opt { font-size: 11.5px; padding: 4px 9px; }
.rr-controls .sfb-sort { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rr-controls .sfb-sort-label { font-size: 11px; color: var(--gray-500); margin-right: 2px; }
.rr-empty { padding: 18px 4px; text-align: center; color: var(--gray-500); font-size: 13px; }

/* the site cookie/KVKK banner (.suso-cookie-banner, z9000) overlaps the journey
   cards — hide it while the journey overlay is open; it returns on the landing */
body.journey-open .suso-cookie-banner { display: none !important; }

/* airline logo: 2-letter code shows INSTANTLY, the real logo fades in on load
   (no blank flash); if the logo 404s the img removes itself and letters stay */
.fc-airline-logo.lg { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.fc-airline-logo.lg::before { content: attr(data-c); font-weight: 700; font-size: 12px; color: var(--gray-500); }
.fc-airline-logo.lg-sm { width: 28px; height: 28px; font-size: 9px; }
.fc-airline-logo.lg.lg-sm::before { font-size: 9px; }
.fc-airline-logo.lg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; opacity: 0; transition: opacity .2s ease; }
.fc-airline-logo.lg.ok img { opacity: 1; }
/* cok havayollu ("karma") ucus: agdan gelen bir logo YOK, satir ici SVG hazir gelir.
   Bu yuzden yukaridaki .lg makinesinin (harf katmani + soldurulen img) disinda durur. */
.fc-airline-logo.lg-karma { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.fc-airline-logo.lg-karma svg { width: 100%; height: 100%; }

/* Claudia pod collapse (chevron + collapsed state — mobile only) */
.cp-collapse { display: none; margin-left: auto; align-self: center; border: none; background: var(--surface-container-low); color: var(--gray-500); width: 24px; height: 24px; border-radius: 50%; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; transition: transform .2s ease, background .15s ease; }
.cp-collapse:hover { color: var(--on-background); background: var(--outline-variant); }
.claudia-pod.collapsed .cp-collapse { transform: rotate(180deg); }
@media (max-width: 900px) {
  .cp-collapse { display: block; }
  .claudia-pod.collapsed { gap: 0; }
  .claudia-pod.collapsed .cp-chips,
  .claudia-pod.collapsed .cp-ask { display: none; }
  /* …EXCEPT on the ticket, where the pod chips ARE the step's actions (Otellere bak / Ödemeye
     geç — the in-card row is hidden on mobile). Like the filters, they're CONTROLS rather than
     chat, so they must survive the pod minimizing or the step has no way forward. */
  .j-stage.ticket-step .claudia-pod.collapsed .cp-chips { display: flex; }
  /* minimized: a ~3-line peek, bottom faded to signal "more below — tap to expand" */
  .claudia-pod.collapsed .cp-msg {
    max-height: 4.4em; cursor: pointer;
    -webkit-mask-image: linear-gradient(180deg, #000 66%, transparent);
    mask-image: linear-gradient(180deg, #000 66%, transparent);
  }
}

/* routed financing partner — no user selection, backend-decided, generic label */
.routed-partner { border: 1px solid var(--outline-variant); border-radius: 12px; padding: 12px 14px; margin-top: 4px; background: var(--surface-container-low); }
.rp-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--gray-200); }
.rp-row:last-of-type { border-bottom: 0; }
.rp-k { font-size: 12.5px; color: var(--gray-500); }
.rp-v { font-size: 13.5px; color: var(--on-background); text-align: right; }
.rp-v b { font-size: 15px; }
.rp-partner { font-weight: 700; color: var(--primary); }
.rp-note { font-size: 11px; color: var(--gray-400); margin-top: 8px; line-height: 1.4; }

/* ── entry pre-approval collection (Claudia-led, format 1 step / format 2 card) ── */
.pa-step { display: flex; flex-direction: column; gap: 7px; }
.pa-input {
  width: 100%; border: 1px solid var(--outline-variant); border-radius: 9px;
  padding: 9px 11px; font-size: 13.5px; font-family: inherit; color: var(--on-background); background: #fff;
}
.pa-input:focus { border-color: var(--primary-container); outline: none; }
.pa-input.bad { border-color: #e04a4a; background: #fdf6f5; }
.pa-err { font-size: 11.5px; color: #c0392b; }
.pa-prog { font-size: 10.5px; color: var(--gray-400); letter-spacing: .04em; }
.pa-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; line-height: 1.4; color: var(--gray-700); cursor: pointer; }
.pa-consent input { margin-top: 2px; accent-color: var(--primary-container); flex: none; }
.pa-consent a { color: var(--primary); }
.pa-consent.bad { color: #c0392b; }
.pa-consent.bad input { outline: 2px solid #e04a4a; outline-offset: 1px; }
.pa-card { gap: 8px; }
.cp-chips:has(.pa-step), .cp-chips:has(.pa-card) { display: block; }

/* pre-approval OFFER box — pops out beneath the pod during search (parallel) */
/* ── Ön onay: prominent centered MODAL (was a faint slide-out box nobody noticed) ── */
.pa-offer { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pa-offer[hidden] { display: none; }
.pa-offer-backdrop { position: fixed; inset: 0; background: rgba(11, 28, 48, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.pa-offer-card {
  position: relative; z-index: 1; width: min(380px, 92vw);
  background: #fff; border-radius: 18px; padding: 28px 24px 20px; text-align: center;
  box-shadow: 0 24px 60px rgba(11, 28, 48, .35);
  animation: paPop .3s cubic-bezier(.3, 1.3, .5, 1);
}
@keyframes paPop { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pa-offer-card { animation: none; } }
.pa-offer-ic { font-size: 34px; line-height: 1; }
.pa-offer-title { display: block; font-size: 18px; font-weight: 800; color: var(--on-background); margin: 10px 0 6px; }
.pa-offer-sub { font-size: 13px; color: var(--gray-600); line-height: 1.5; margin: 0 0 18px; }
.pa-offer-main {
  display: block; width: 100%; border: none; border-radius: 999px; cursor: pointer; font-family: inherit;
  background: var(--sky-dark); color: #fff; font-size: 15px; font-weight: 800; padding: 14px 18px;
  box-shadow: 0 10px 26px rgba(14, 165, 233, .4);
}
.pa-offer-main:hover { filter: brightness(1.06); }
.pa-offer-later {
  display: block; width: 100%; margin-top: 8px; border: none; background: transparent; cursor: pointer;
  color: var(--gray-500); font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px;
}
.pa-offer-later:hover { color: var(--on-background); }
.pa-offer-card { max-height: 90vh; overflow-y: auto; }
.pa-modal-form { display: flex; flex-direction: column; gap: 9px; text-align: left; margin-top: 12px; }
.pa-modal-form .pa-offer-main { margin-top: 4px; }
.pa-modal-form .pa-fg { display: flex; flex-direction: column; gap: 3px; }
.pa-modal-form .pa-fg > label { font-size: 11px; font-weight: 600; color: var(--gray-600); }
/* phone (dial + number) + DOB (masked text + calendar overlay) — shared by the ön onay modal
   AND the passenger form (#9 parity), so NOT scoped to .pa-modal-form. */
.pa-phone { display: flex; gap: 6px; }
.pa-phone .pa-dial { flex: 0 0 auto; width: auto; max-width: 47%; }
.pa-phone input { flex: 1; min-width: 0; }
.pa-dob { position: relative; }
.pa-dob input[type="text"] { width: 100%; padding-right: 40px; box-sizing: border-box; }
.pa-dob-btn { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); border: none; background: transparent; font-size: 17px; line-height: 1; cursor: pointer; padding: 5px 7px; }
.pa-dob-native { position: absolute; right: 8px; bottom: 4px; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; pointer-events: none; }
.pa-offer-x {
  position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border: none; background: transparent;
  border-radius: 8px; color: var(--gray-400); font-size: 15px; cursor: pointer;
}
.pa-offer-x:hover { color: var(--on-background); background: var(--surface-container-low); }

/* ── mobile refinements (audit) ─────────────────────────────────────────── */
@media (max-width: 900px) {
  /* iOS auto-zooms (and won't restore) on focusing an input under 16px */
  #cpInput, .pa-input, .cp-form input, #stagePanel input, #stagePanel select { font-size: 16px; }

  /* return filters on ONE row: no wrap, horizontal-scroll, drop the "Sırala" label */
  .rr-controls { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .rr-controls::-webkit-scrollbar { display: none; }
  .rr-controls .sfb-sort { flex-wrap: nowrap; flex: 0 0 auto; }
  .rr-controls .sfb-sort-label { display: none; }
  .rr-controls .sfb-chip, .rr-controls .sfb-sort-opt { flex: 0 0 auto; white-space: nowrap; }

  /* map reveal: the results sheet starts low so the route shows, then slides up */
  .j-stage.map-mode .j-col { transition: transform .55s cubic-bezier(.4, 0, .2, 1); }
  .j-stage.map-mode.sheet-peek .j-col, .j-stage.side-mode.sheet-peek .j-col { transform: translateY(80%); }
  .j-stage.map-mode.sheet-full .j-col, .j-stage.side-mode.sheet-full .j-col { transform: translateY(0); }
  .j-col.sheet-dragging { transition: none !important; }
  /* grab handle — drag to snap peek / half / full; tap to cycle */
  /* ince tutamac (26->16px): sheet ustundeki olu bant sikayeti 2026-07-23 -- pill kucuk,
     surukleme alani ::after ile 30px'e genisletilir (gorunmez), icerik hemen baslar */
  .j-grab { display: flex; position: sticky; top: 0; z-index: 6; height: 16px; align-items: center; justify-content: center; touch-action: none; cursor: grab; background: rgba(248, 249, 255, .96); margin: 0 -12px 1px; border-radius: 16px 16px 0 0; }
  .j-grab::before { content: ''; width: 38px; height: 4px; border-radius: 999px; background: rgba(11, 28, 48, .22); }
  .j-grab::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 24px; }
  .j-grab:active { cursor: grabbing; }

  /* MOBILE: the top nav bar is REMOVED to reclaim vertical space — the back button rides in the
     pod header (before Claudia), the dates live in the search widget, and the cart floats as a
     bottom-right FAB (it's hidden until it holds items). .j-top goes out of flow (fixed) so the
     .j-stage — and Claudia's pod — start from the very top. */
  /* cart floats at the TOP-right — the same spot as the "Uçuşsuz ilerle" chip (they never show
     together: the chip is on the flights search, the filled cart on the later steps). */
  /* pointer-events:none so the empty cart's fixed box doesn't intercept taps on the skip chip
     under it; the (visible) cart pill re-enables clicks. top aligns the pill with the back button. */
  .j-top { position: fixed; top: 16px; bottom: auto; right: 20px; left: auto; z-index: 60; display: block; padding: 0; gap: 0; margin: 0; background: none; border: none; box-shadow: none; width: auto; pointer-events: none; }
  /* EMPTY cart → .j-top stays pointer-events:none so its box doesn't eat taps on the skip chip
     under it. When the cart HAS items (.cart-active) the whole FAB is interactive — no parent-none
     + child-auto override, which iOS Safari mis-hit-tests for touch, so the pill wouldn't open. */
  .j-top.cart-active, .j-top.cart-active .cart, .j-top.cart-active .cart > * { pointer-events: auto; }
  .j-top .logo-mark, .j-top .j-title, #jControls, .j-top .j-back { display: none; }
  .cart { margin: 0; }
  /* the FAB visually rides the pod's header row (back chevron + Claudia name, a 30px frame:
     pod top 6 + border 1 + padding 9 → row at y16-46, centre 31). Match it EXACTLY: a 30px
     pill anchored at .j-top's top:16px centres at 31 too. The old 6px paddings let the 19px
     .pill-n badge push the pill to ~33px — taller than the row and ~1.5px low. */
  .cart-pill { height: 30px; box-sizing: border-box; padding: 0 11px; font-size: 12.5px; box-shadow: 0 6px 18px rgba(11, 28, 48, .16); }
  /* the dropdown hangs BELOW the FAB pill (absolute vs .cart) — override the old top-nav rule's
     position:fixed+left, which made top:100% resolve against the viewport (100vh → off-screen) */
  .cart-body { position: absolute; top: calc(100% + 8px); bottom: auto; left: auto; right: 0; width: min(320px, calc(100vw - 24px)); }
  /* sort filters live in the POD (sticky, not in the scrolling sheet): Aktarmasız hugs the left,
     the sort chips go right (structural margin-right:auto split), compact, one row, scrollable
     fallback. small gap from the search fields above. */
  /* iOS auto-zooms any focused input whose font-size is UNDER 16px — the hotel bar's compact
     11px fields made tapping "Nereye" lurch the whole screen. 16px on mobile only (Apple's own
     threshold). ONE ROW: the wrap looked terrible (orphaned Misafir), so the bar is a
     horizontal scroller like the filter row — all four fields on one line, swipe if a narrow
     phone can't fit them. The dropdowns (suggestions / guest steppers) anchor on the POD, so
     the bar's overflow clipping can't touch them. */
  .hq-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; }
  .hq-bar::-webkit-scrollbar { display: none; }
  .hq-f input { font-size: 16px; }   /* the CITY input (typed) — and the invisible date overlays */
  .hq-city { flex: 1 1 92px; min-width: 92px; }
  .hq-dlab { font-size: 12.5px; }
  .hq-pax b { font-size: 12.5px; white-space: nowrap; }
  /* sehir inputu iOS zoom esigi geregi 16px KALIR; zarafet icin gorsel olcek ~13px
     (computed 16px oldugu icin odakta zoom tetiklenmez) */
  .hq-city input { transform: scale(.8125); transform-origin: left center; width: 123%; }
  /* "Uçuşsuz ilerle" was a ~23px pill — a hopeless thumb target. Keep the compact look but give
     it the header row's full 30px frame plus an invisible ~44px hit halo (::after takes part in
     the button's hit-testing), so taps land without inflating the header visually. */
  .j-stage.flights-guided .pod-skip { min-height: 30px; padding: 2px 12px; position: relative; }
  .j-stage.flights-guided .pod-skip::after { content: ''; position: absolute; inset: -7px; border-radius: inherit; }
  .j-stage.flights-guided .cp-filters.filters-below { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 7px; margin: 3px 0 1px; }
  .j-stage.flights-guided .cp-filters.filters-below::-webkit-scrollbar { display: none; }
  .j-stage.flights-guided .cp-filters.filters-below .sfb-chip { flex: 0 0 auto; padding: 6px 12px; font-size: 12px; }
  /* reserve the sheet scrollbar on both sides so flight cards stay centered if a device shows a
     non-overlay scrollbar (the mobile flights sheet isn't JS-aligned like the desktop column) */
  .j-stage.flights-guided .j-col { scrollbar-gutter: stable both-edges; }
  /* back button carried into the pod header, before the Claudia orb — clean soft-circle chevron */
  .claudia-pod .cp-head .cp-back { margin: 0 3px 0 0; flex: 0 0 auto; align-self: center; width: 30px; height: 30px; min-width: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-container-low); color: var(--gray-600); box-shadow: none; transition: background .15s ease, color .15s ease; }
  .claudia-pod .cp-head .cp-back:hover { background: var(--surface-container); color: var(--on-background); }
  .claudia-pod .cp-head .cp-back::before { content: '‹'; font-size: 22px; font-weight: 500; line-height: 1; margin-top: -3px; }
  /* search field text = Claudia's narration size on mobile (12.5px) */
  .claudia-pod .search-widget.sw-in-pod .fg input,
  .claudia-pod .search-widget.sw-in-pod .fg select,
  .claudia-pod .search-widget.sw-in-pod .date-trigger,
  .claudia-pod .search-widget.sw-in-pod .pax-trigger { font-size: 12.5px; }
  .jc-filters {
    order: 10; flex-basis: 100%; width: 100%; margin-top: 4px; gap: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: flex-start;
  }
  .jc-filters::-webkit-scrollbar { display: none; }
  .jc-filters .sfb-sort-label { display: none; }
  .jc-filters .sfb-chip, .jc-filters .sfb-sort-opt { flex: 0 0 auto; white-space: nowrap; }

  /* results are a bottom sheet on mobile — override the desktop centering */
  .j-stage.map-mode .j-col, .j-stage.side-mode .j-col {
    left: 0; right: 0; width: auto;
  }
}

/* ── LAB side-by-side flight picker (?lab=1, round trips) ─────────────────────
   Rows reuse .rr-card so a lab ticket reads exactly like a live one — the point of
   the lab is to judge the INVENTORY and the new fields, not a new visual language.
   Everything here is scoped under .lsb / .j-stage.lab-sbs and dies with the lab. */
.lsb { display: flex; flex-direction: column; gap: 10px; }
.lsb-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(296px, 1fr)); gap: 12px; align-items: start; }
.lsb-col { background: rgba(255,255,255,.78); border: 1px solid var(--outline-variant); border-radius: 14px; padding: 10px 10px 12px; }
.lsb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--on-background); }
.lsb-count { flex: none; font-size: 10.5px; font-weight: 700; color: var(--sky-dark); background: #e8f4fe; border-radius: 999px; padding: 1px 8px; }
.lsb-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 4px; }
.lsb-ctl .sfb-chip { font-size: 11px; padding: 4px 9px; }
.lsb-row.rr-card { margin: 7px 0; padding: 9px 10px; }
.lsb-row .rr-air b { font-size: 12.5px; }
.lsb-row .rr-pt b { font-size: 14px; }
.lsb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin-top: 7px; font-size: 10.5px; color: var(--gray-500); }
.lsb-fam { font-weight: 600; color: var(--gray-500); }
.lsb-var { color: var(--gray-400); }
.lsb-ams { display: inline-flex; align-items: center; gap: 5px; }
.lsb-am { position: relative; font-size: 11px; }
.lsb-am sup { font-size: 7px; color: var(--gray-400); }
.lsb-ac { font-size: 9.5px; color: var(--gray-400); border: 1px solid var(--gray-200); border-radius: 4px; padding: 0 4px; }
.lsb-delta { font-weight: 700; color: var(--on-background); }
.lsb-delta.zero { color: #157a4a; font-weight: 600; }
.lsb-warn { color: #b26a00; cursor: help; }
/* scarcity ONLY when it is real (<=4 seats). Printed on every row it is wallpaper. */
.lsb-scarce { display: block; margin-top: 6px; font-size: 10.5px; font-weight: 700; color: #b23c17; }
/* terms.summary[] arrives with its own severity level — colour maps straight off it */
.lsb-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.lsb-chip { font-size: 9.5px; font-weight: 600; border-radius: 5px; padding: 2px 6px; line-height: 1.5; }
.lsb-success { background: #e7f6ed; color: #157a4a; }
.lsb-info    { background: #eaf3fb; color: #1c5b8c; }
.lsb-warning { background: #fdf2e2; color: #9a5b00; }
.lsb-danger  { background: #fdecec; color: #a32828; }
.lsb-locked { padding: 22px 12px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--gray-500); border: 1px dashed var(--gray-300); border-radius: 12px; }
.lsb-more { display: block; width: 100%; margin-top: 8px; padding: 8px; font-size: 11.5px; font-weight: 600; color: var(--primary); background: var(--surface-container-low); border: 0; border-radius: 10px; cursor: pointer; }
.lsb-more:hover { background: var(--primary-container); color: #fff; }

/* the mix-and-match offer — shown ONLY above the measured threshold */
.lsb-offer { border: 1px solid rgba(21,122,74,.35); background: linear-gradient(135deg, rgba(21,122,74,.07), rgba(21,122,74,.03)); border-radius: 14px; padding: 11px 13px; }
.lsb-offer-t { font-size: 13.5px; font-weight: 700; color: #14603c; }
.lsb-offer-s { margin-top: 4px; font-size: 11.5px; line-height: 1.5; color: var(--gray-700); }
.lsb-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
/* below the threshold the mix is NOT offered — this line is the lab READOUT only, so the
   measurement is still visible (a hidden zero reading is how a threshold stops being checked) */
.lsb-lab { font-size: 10.5px; color: var(--gray-500); background: var(--surface-container-low); border-radius: 8px; padding: 6px 10px; }

.lsb-bar { position: sticky; bottom: 0; z-index: 4; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border: 1px solid var(--outline-variant); border-radius: 14px; padding: 10px 12px; box-shadow: 0 -4px 18px rgba(11,28,48,.07); }
.lsb-sel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--on-background); }
.lsb-slot { white-space: nowrap; }
.lsb-slot.muted { color: var(--gray-400); }
.lsb-arr { color: var(--gray-300); }
.lsb-tot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.lsb-tot b { font-size: 17px; }
.lsb-tot small { color: var(--gray-500); font-size: 10.5px; }
/* NOTE: .lsb-risk, NOT .lsb-danger — the severity chips above are `.lsb-` + terms.summary level,
   so a bar rule named .lsb-danger silently restyled every "Non-refundable" chip (it is the later
   rule at equal specificity, so it won the padding/font-size). Keep the two namespaces apart. */
.lsb-risk, .lsb-warnbar { margin-top: 8px; font-size: 11px; line-height: 1.45; border-radius: 8px; padding: 6px 9px; }
.lsb-risk { background: #fdecec; color: #a32828; }
.lsb-warnbar { background: #fdf2e2; color: #9a5b00; }
.lsb-verdict { margin-top: 7px; font-size: 11.5px; font-weight: 600; }
.lsb-verdict:empty { display: none; }
.lsb-verdict.busy { color: var(--gray-500); font-weight: 400; }
.lsb-verdict.ok   { color: #157a4a; }
.lsb-verdict.warn { color: #9a5b00; }
.lsb-verdict.bad  { color: #a32828; }
.lsb-note { margin-top: 6px; font-size: 10px; color: var(--gray-400); line-height: 1.45; }
.lsb-foot { font-size: 10px; color: var(--gray-400); text-align: center; line-height: 1.5; padding: 0 6px 8px; }

@media (max-width: 900px) {
  /* one column at a time on mobile: the two lists stack, so the picked outbound has to stay
     readable while you scroll the returns — the bar is what carries it. */
  .lsb-cols { grid-template-columns: 1fr; }
  .lsb-bar { bottom: -1px; }
}

/* ── LAB picker: fare ladder, fare rules, server-side filters (2026-07-30) ──── */
.lsb-offer.lsb-soft { border-color: var(--outline-variant); background: var(--surface-container-low); }
.lsb-offer.lsb-soft .lsb-offer-t { color: var(--on-background); }
/* per-row "cheaper separately" badge — the verdict a global comparison hides */
.lsb-mixwin { font-weight: 700; color: #157a4a; background: #e7f6ed; border-radius: 6px; padding: 2px 7px; cursor: pointer; }
.lsb-mixwin:hover { background: #157a4a; color: #fff; }
.lsb-cab { font-weight: 700; color: #6b4ea8; background: #f1ecfa; border-radius: 5px; padding: 1px 6px; }
/* real fare rules: change/cancel amounts + when they apply, seats, extra legroom, paid bags */
.lsb-rules { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 10px; color: var(--gray-500); }
.lsb-rules span { white-space: nowrap; }
/* the branded-fare ladder */
.lsb-ladder-t, .lsb-ladder-x { display: block; width: 100%; margin-top: 7px; padding: 5px; font-size: 10.5px; font-weight: 600; color: var(--primary); background: var(--surface-container-low); border: 0; border-radius: 8px; cursor: pointer; }
.lsb-ladder-t:hover, .lsb-ladder-x:hover { background: var(--primary-container); color: #fff; }
.lsb-ladder { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; padding: 7px; background: var(--surface-container-low); border-radius: 10px; }
.lsb-fare { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; text-align: left; padding: 7px 9px; background: #fff; border: 1px solid var(--outline-variant); border-radius: 8px; cursor: pointer; font: inherit; }
.lsb-fare:hover { border-color: var(--primary-container); }
.lsb-fare.on { border-color: var(--primary-container); box-shadow: 0 0 0 2px rgba(14,165,233,.22); }
.lsb-fare b { font-size: 11.5px; color: var(--on-background); }
.lsb-fare em { grid-column: 1; font-size: 9.5px; font-style: normal; color: var(--gray-400); }
.lsb-fare-p { grid-row: 1; grid-column: 2; font-size: 11.5px; font-weight: 700; color: var(--on-background); text-align: right; }
.lsb-fare-i { grid-column: 1 / -1; font-size: 9.5px; color: var(--gray-500); }
/* filters re-SEARCH at the provider — never a client-side row filter over a capped column */
.lsb-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 0; }
.lsb-filters-l { font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--gray-400); margin-right: 2px; }
.lsb-filters .sfb-chip { font-size: 11px; padding: 4px 9px; }
.lsb-filters-x { font-size: 10.5px; color: var(--gray-500); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.lsb-filters-b { font-size: 10.5px; color: var(--primary); }