/* Onay paketi 2026-10-22, "planlamanın dört adımı" (docs/mockups/paket-dort-adim): every row of a dated category stands on
   one step, said by the mark on its picture's corner and a word after the kind's, never by the rail (the rail keeps the date):
     options  Seçenekler: nothing decided, a dashed card, "Seç" and the count       (a dashed ring)
     planned  Planda: decided; bought ahead ("Satın al") or paid on the spot          (a violet ring with its dot)
     bought   Alındı / Rezerve: paid, its ticket still to add ("Bileti ekle", calm)   (a green ring with its tick)
     ticket   Bilet elde / Onay elde: its code on a stub at the row's end             (a filled green tick)
   Yellow is for trouble only; the kinds of travel are MingCute's filled icons, dark on a soft tile (modeIcons.tsx). */

:root { --q-sg-opt: #aaa4c4; --q-stub: color-mix(in srgb, var(--q-ok-s) 70%, #fff); --q-stub-line: color-mix(in srgb, var(--q-ok) 28%, #fff); }

/* ---- the rail keeps the date: one quiet dot for every step ---- */
.q-ints.q-tl .q-int[data-stage] .q-tld::before { width: 11px; height: 11px; right: -5.5px; top: 24.5px; border: 2px solid #c9c4d9; border-style: solid; background: #fff; box-shadow: 0 0 0 3px #fff; }
.q-ints.q-tl .q-int[data-stage] .q-tlend { width: 11px; height: 11px; right: -5.5px; border: 2px solid #c9c4d9; background: #fff; }
.q-int[data-stage] .q-tld.none::before { top: 24.5px; }

/* ---- the mark: the kind's icon (or the carrier's logo, or the stay's photo) and the step on its corner ---- */
.q-rrow { grid-template-columns: 44px minmax(0, 1fr) auto 118px 28px; }
.q-rmark { width: 44px; height: 44px; border-radius: 13px; }
.q-rmark.ic, .q-int[data-kind] .q-rmark.ic { background: #f1f0f5; color: var(--q-ink); }
.q-rmark.ic .q-mi { width: 27px; height: 27px; display: block; }
.q-rmark.carr .q-logo { width: 44px; height: 44px; border-radius: 13px; font-size: 14px; }
.q-sb { position: absolute; right: -6px; bottom: -6px; z-index: 2; width: 24px; height: 24px; border-radius: 99px; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(28, 26, 51, .07), 0 1px 3px rgba(28, 26, 51, .12); }
.q-sb .q-sg { display: block; }
.q-rph > .q-sb { right: -7px; bottom: -7px; width: 28px; height: 28px; }
.q-rph > .q-sb .q-sg { width: 22px; height: 22px; }
.q-rph.deck > .q-sb { right: 2px; bottom: 2px; }

/* ---- the lead: the kind's word, then the step's ---- */
.q-rlead { display: flex; align-items: baseline; gap: 0; min-width: 0; }
.q-rlead > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; max-width: 100%; }
.q-rlead > span:last-child { flex: 0 1 auto; }
.q-rlead > .q-rkind + .q-rstage::before { content: " · "; white-space: pre; color: #c3bfd3; }
.q-rkind { color: var(--k, var(--c)); }
.q-rstage { color: var(--q-mut); }
.q-int[data-stage="options"] .q-rstage { color: #7c7799; }
.q-int[data-stage="options"][data-st="ai"] .q-rstage { color: var(--q-acc); }
.q-int[data-stage="planned"] .q-rstage { color: var(--q-acc-d, #4a36c9); }
.q-int[data-stage="bought"] .q-rstage, .q-int[data-stage="ticket"] .q-rstage { color: var(--q-ok); }

/* ---- the card by its step ---- */
/* options: dashed, a soft ground (the deck keeps its two edges under it) */
.q-int[data-stage="options"] .q-rcard { background: #fbfafd; box-shadow: 0 1px 2px rgba(28, 26, 51, .03); outline: 1.5px dashed #cdc7df; outline-offset: -1.5px; }
.q-int[data-stage="options"]:has(.q-rsec) .q-rcard { outline-color: color-mix(in srgb, var(--q-acc) 32%, #cdc7df); }
.q-int[data-stage="options"] .q-rhd .q-nm { color: #3b3857; }
/* planned and bought: a plain white card (decided; never dashed) */
.q-int[data-stage="planned"] .q-rcard, .q-int[data-stage="bought"] .q-rcard { background: #fff; outline: 0; }
/* ticket: a green hairline; its code on the stub */
.q-int[data-stage="ticket"] .q-rcard { background: #fff; outline: 0; box-shadow: 0 1px 1px rgba(28, 26, 51, .04), 0 2px 6px rgba(28, 26, 51, .05), 0 12px 28px -10px rgba(28, 26, 51, .18), inset 0 0 0 1px var(--q-stub-line); }

/* ---- the slot by its step ---- */
.q-proof { display: inline-flex; align-items: center; border: 1.5px solid color-mix(in srgb, var(--q-ok) 40%, #fff); background: #fff; color: var(--q-ok); font: inherit; cursor: pointer; }
.q-proof:hover { background: var(--q-stub); }
.q-proof:focus-visible { outline: 3px solid color-mix(in srgb, var(--q-ok) 35%, #fff); outline-offset: 1px; }
.q-onsite { display: inline-flex; align-items: center; gap: 6px; background: var(--q-soft); color: var(--q-mut); font-weight: 700; white-space: nowrap; }
.q-rslot:has(> .q-rstub) { align-self: stretch; margin-right: -48px; position: relative; z-index: 0; }
.q-rrow > .q-rmenu { position: relative; z-index: 1; }
.q-rstub { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 40px 0 12px; background: var(--q-stub); border-left: 2px dashed var(--q-stub-line); border-radius: 0 16px 16px 0; }
.q-row.open .q-rstub { border-bottom-right-radius: 0; }
.q-rstub::before, .q-rstub::after { content: ""; position: absolute; left: -8px; width: 14px; height: 14px; border-radius: 99px; background: var(--q-notch, #fff); box-shadow: inset 0 0 0 1px var(--q-stub-line); }
.q-rstub::before { top: -8px; }
.q-rstub::after { bottom: -8px; }
.q-rstub .q-rcode { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14.5px; font-weight: 800; letter-spacing: .04em; color: var(--q-ink); white-space: nowrap; }
.q-rstub small { font-size: var(--q-fs-badge); color: var(--q-mut); font-weight: 600; white-space: nowrap; }
.q-rrow.card > .q-rslot:has(> .q-rstub) { margin-block: -14px; }

@media (max-width: 700px) {
  .q-rrow { grid-template-columns: 44px minmax(0, 1fr) auto 24px; }
  .q-rslot:has(> .q-rstub) { margin: 0; }
  .q-rstub { padding: 8px 14px; border-radius: 11px; border: 1.5px dashed var(--q-stub-line); flex-direction: row; gap: 8px; }
  .q-rstub::before, .q-rstub::after { display: none; }
  .q-rrow.card > .q-rslot:has(> .q-rstub) { margin-block: 0; }
}

/* ---- a dated category's head icon ---- */
.q-ic.mc { background: #f1f0f5; color: var(--q-ink); }
.q-ic.mc .q-mi { display: block; }


/* ---- under the row: a pass (onay paketi 2026-10-22, "bilet gibi") ---- */
.q-rcard { container-type: inline-size; }
.q-rp .z-tm.z-pass { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 26px; align-items: center; }
.z-tart { display: grid; place-items: center; height: 164px; border-radius: 16px; background: linear-gradient(160deg, #e7effc, #f3f6fd); overflow: hidden; }
.q-int[data-kind="ferry"] .z-tart { background: linear-gradient(160deg, #e2f4f8, #f2fafc); }
.z-tart img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transform: scale(1.12); }
.q-mid.big > i.z-mic { height: 66px; }
.q-mid.big > i.z-mic::before { right: calc(50% + 40px); border-top-width: 2px; }
.q-mid.big > i.z-mic::after { left: calc(50% + 40px); border-top-width: 2px; }
.z-micc { position: relative; width: 66px; height: 66px; border-radius: 99px; background: #fff; display: grid; place-items: center; color: var(--q-ink); box-shadow: 0 0 0 1px var(--q-line), 0 6px 14px -8px rgba(28, 26, 51, .45); }
.z-micc .q-mi { display: block; }
@container (max-width: 780px) {
  .q-rp .z-tm.z-pass { grid-template-columns: minmax(0, 1fr); }
  .z-tart { display: none; }
}
/* the step said big on the right */
.z-step { display: grid; justify-items: center; gap: 4px; text-align: center; min-width: 124px; }
.z-step b { font-size: 15px; font-weight: 800; }
.z-step small { font-size: var(--q-fs-badge); color: var(--q-mut); font-weight: 650; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-step.ticket b, .z-step.bought b { color: var(--q-ok); }
.z-step.planned b { color: var(--q-acc-d); }
.q-rp .z-f.z13.bk:has(.z-step.ticket) > .z-s { background: var(--q-stub); border-left: 2px dashed var(--q-stub-line); margin: 0; padding: 14px 18px; }
/* bought: the last step, a zone the ticket is dropped on */
.z-drop { flex: 1 1 100%; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; border: 1.5px dashed color-mix(in srgb, var(--q-ok) 40%, #fff); background: var(--q-stub); color: var(--q-ok); }
.z-drop.over { background: color-mix(in srgb, var(--q-ok-s) 100%, #fff); border-style: solid; }
.z-dropt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.z-dropt b { font-size: 14px; font-weight: 800; color: var(--q-ink); }
.z-dropt small { font-size: var(--q-fs-small); color: var(--q-mut); font-weight: 600; }
.z-drop .q-got.ok { background: var(--q-ok); color: #fff; border-color: var(--q-ok); height: 36px; min-height: 36px; padding: 0 14px; }
/* planned on the spot: where its ticket is bought, its price, Aldım */
.z-onsite { flex: 1 1 100%; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #f2fafc; color: #0e7f9c; }
.z-onsite > span { display: grid; gap: 2px; }
.z-onsite b { font-size: 14px; font-weight: 800; color: var(--q-ink); }
.z-onsite small { font-size: var(--q-fs-small); color: var(--q-mut); font-weight: 600; }
.z-wpr { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-radius: 11px; box-shadow: inset 0 0 0 1.5px #d9d4e8; }
.z-wpr small { font-size: var(--q-fs-small); color: var(--q-mut); font-weight: 700; }
.z-wpr b { font-size: 14px; font-weight: 800; }
.q-pick.z-got { height: 36px; min-height: 36px; padding: 0 14px; }
.q-rp .z-f.z13 > .z-i .z-l3:has(.z-drop, .z-onsite) { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.q-city.pass small { display: flex; flex-direction: column; gap: 1px; }
.q-city.pass.r small { align-items: flex-end; }
.q-city.pass .z-cty { color: var(--q-ink); font-weight: 750; }
/* open, its last step is under the pass: not said twice on the row */
.q-row.open .q-rslot > .q-proof { visibility: hidden; }

/* ---- "Aldım": a white box under the row asks for what backs it (never a yellow warning) ---- */
.q-proofq { display: grid; gap: 14px; margin: 0 14px 14px; padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--q-line), 0 18px 40px -24px rgba(28, 26, 51, .45); animation: q-rp-in .26s cubic-bezier(.2, .7, .2, 1); }
.q-pqh { display: flex; gap: 12px; align-items: flex-start; }
.q-pqh > span { display: grid; gap: 3px; }
.q-pqh b { font-size: 15px; font-weight: 800; color: var(--q-ink); }
.q-pqh small { font-size: var(--q-fs-small); color: var(--q-mut); font-weight: 600; line-height: 1.45; }
.q-pqf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.q-pqc, .q-pqd-w { display: grid; gap: 5px; min-width: 0; }
.q-pqc small, .q-pqd-w small { font-size: var(--q-fs-badge); color: var(--q-mut); font-weight: 700; }
.q-pqc input { height: 40px; box-sizing: border-box; padding: 0 12px; border-radius: 11px; border: 1.5px solid #d9d4e8; font: inherit; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 15px; letter-spacing: .04em; color: var(--q-ink); background: #fff; }
.q-pqc input:focus { outline: none; border-color: var(--q-acc); box-shadow: 0 0 0 3px var(--q-acc-s); }
.q-pqd { display: flex; align-items: center; gap: 8px; height: 40px; box-sizing: border-box; padding: 0 12px; border-radius: 11px; border: 1.5px dashed #c9c4d9; background: #fbfafd; color: var(--q-acc); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.q-pqd.over, .q-pqd:hover { border-color: var(--q-acc); background: var(--q-acc-s); }
.q-pqa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.q-pqa .q-got.ok { height: 38px; min-height: 38px; padding: 0 16px; background: var(--q-ok); border-color: var(--q-ok); color: #fff; }
.q-pqa .q-got.ok:disabled { opacity: .45; cursor: default; }
@media (max-width: 700px) { .q-pqf { grid-template-columns: minmax(0, 1fr); } .q-proofq { margin: 0 8px 10px; } }
@media (prefers-reduced-motion: reduce) { .q-proofq { animation: none; } }

/* ---- a stay's date: its check-in in full and its nights, two lines, a month changing or not ---- */
.q-int[data-kind="stay"] .q-tld b { font-size: 14px; white-space: nowrap; text-wrap: nowrap; }
.q-int[data-kind="stay"] .q-tld .q-tlspan { margin-top: 2px; font-size: var(--q-fs-small); letter-spacing: 0; }

/* ---- the drawer card's photos (galeri): two small ones and "+n" on its photo; pressed, big over the page ---- */
.dr-gal { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: flex; gap: 6px; }
.dr-gth { width: 64px; height: 46px; padding: 0; border: 2px solid #fff; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px -3px rgba(28, 26, 51, .45); cursor: pointer; font: inherit; font-size: 14px; font-weight: 800; color: var(--q-ink); }
.dr-gth img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dr-gth.more { border: 0; }
.dr-gth:focus-visible { outline: 3px solid #cfc7ff; outline-offset: 1px; }
.dr-lb { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(20, 18, 38, .82); padding: max(24px, env(safe-area-inset-top, 0px)) 72px; }
.dr-lb figure { margin: 0; display: grid; gap: 10px; justify-items: center; max-width: min(1100px, 100%); }
.dr-lb img { max-width: 100%; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); border-radius: 14px; object-fit: contain; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.dr-lb figcaption { color: #fff; font-size: 14px; font-weight: 700; }
.dr-lbn, .dr-lbx { position: absolute; width: 44px; height: 44px; border-radius: 99px; border: 0; background: rgba(255, 255, 255, .92); color: var(--q-ink); font-size: 26px; font-weight: 700; display: grid; place-items: center; cursor: pointer; }
.dr-lbn.prev { left: 16px; top: 50%; } .dr-lbn.next { right: 16px; top: 50%; }
.dr-lbx { right: 16px; top: max(16px, env(safe-area-inset-top, 0px)); }
@media (max-width: 700px) { .dr-lb { padding: 16px; } .dr-lbn { top: auto; bottom: 16px; } .dr-gth { width: 52px; height: 38px; } }

/* ---- "Ayarla": the sort's weights as presets and three dials ---- */
.dr-tune { position: relative; }
.dr-tuneb { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--q-line); background: #fff; color: var(--q-acc); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.dr-tuneb[aria-expanded="true"], .dr-tuneb:hover { background: var(--q-acc-s); border-color: color-mix(in srgb, var(--q-acc) 30%, var(--q-line)); }
.dr-tunep { position: absolute; z-index: 30; right: 0; top: calc(100% + 8px); width: min(360px, 86vw); display: grid; gap: 14px; padding: 16px 18px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--q-line), 0 22px 48px -24px rgba(28, 26, 51, .5); }
.dr-tuneh { display: flex; align-items: center; justify-content: space-between; }
.dr-tuneh b { font-size: 15px; font-weight: 800; }
.dr-tunex { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--q-line); background: #fff; color: var(--q-mut); display: grid; place-items: center; cursor: pointer; }
.dr-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.dr-preset { height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--q-line); background: #fff; font: inherit; font-size: 12.5px; font-weight: 750; color: var(--q-ink); cursor: pointer; }
.dr-preset:hover { background: var(--q-acc-s); color: var(--q-acc-d); }
.dr-dial { display: grid; gap: 6px; font-size: 13.5px; font-weight: 750; }
.dr-dial > span { display: flex; justify-content: space-between; }
.dr-dial i { display: inline-block; width: 9px; height: 9px; border-radius: 99px; margin-right: 4px; background: var(--g); }
.dr-dial input { accent-color: var(--g, var(--q-acc)); width: 100%; }
.dr-tunen { font-size: var(--q-fs-small); color: var(--q-mut); font-weight: 600; line-height: 1.45; }

/* "✓ Seçili" in the drawer and the deck: decided is violet, never the sand of a warning (onay paketi 2026-10-22) */
.dr-in > span.q-pick, .dr-tm > span.q-pick { background: var(--q-acc-s); color: var(--q-acc-d); border: 1px solid color-mix(in srgb, var(--q-acc) 25%, #fff); }
.dr-chosen { border-color: color-mix(in srgb, var(--q-acc) 25%, #fff); }
.pd-st.sel { color: var(--q-acc-d); }

/* the four steps' bar and lines (the hero's "Planın durumu" tip) */
.q-psbar { display: flex; gap: 3px; height: 8px; border-radius: 99px; overflow: hidden; background: #e3e0ec; }
.q-psbar i { display: block; min-width: 6px; }
.q-psbar i.ticket { background: var(--q-ok); }
.q-psbar i.bought { background: color-mix(in srgb, var(--q-ok) 55%, #fff); }
.q-psbar i.planned { background: var(--q-acc); }
.q-psbar i.options { background: #d6d2e3; }
.q-psl { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; color: var(--q-ink); }
.q-psl b { font-variant-numeric: tabular-nums; }

/* ---- a stay's city on the rail, where the city changes: a pinned stop and its name (its dates stay in the column) ---- */
.q-ints.q-tl > .q-tlcity { display: flex; align-items: center; gap: 10px; margin: 8px 0 -6px calc(var(--tlx) - 11px); position: relative; z-index: 1; }
.q-tlcity > i { width: 22px; height: 22px; border-radius: 99px; background: var(--k, var(--c, #23998b)); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px #fff; flex: none; }
.q-tlcity > b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--k, var(--c, #23998b)); }
.q-ints.q-tl > .q-tlcity:first-child { margin-top: 0; }
@media (max-width: 700px) { .q-ints.q-tl > .q-tlcity { margin-left: -5px; } }
.q-rstub.plain .q-rbig { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--q-ink); white-space: nowrap; }
.q-rstub.plain small:last-child { color: var(--q-ok); font-weight: 800; }

/* ---- the hero's tips: "Planın durumu" over "hazır", "Sıradaki işler" over Sıradaki ---- */
.x-steps { display: grid; gap: 7px; text-align: left; }
.x-steps > b { font-size: 13.5px; font-weight: 800; }
.x-steps > small { font-size: 12px; line-height: 1.4; }
.x-steps .q-psl { grid-template-columns: 18px minmax(0, 1fr) auto; font-size: 12.5px; }
.x-steps, .x-steps .q-psl, .x-steps b { color: inherit; }
.x-steps > small, .x-steps .q-psl small { color: color-mix(in srgb, currentColor 68%, transparent); font-weight: 600; }
.x-steps { min-width: 0; width: 100%; box-sizing: border-box; }
.x-steps .q-psl.nx { grid-template-columns: 18px minmax(0, 1fr); align-items: start; }
.x-steps .q-psl.nx > span { display: grid; gap: 1px; }
.x-steps .q-psbar { background: rgba(255, 255, 255, .18); }

/* ---- a dated category's bar in the four steps' colours ---- */
.q-bar.q-sbar { gap: 2px; background: #ebe9f2; }
.q-sbar i { display: block; height: 100%; min-width: 4px; }
.q-sbar i.ticket { background: var(--q-ok); }
.q-sbar i.bought { background: color-mix(in srgb, var(--q-ok) 55%, #fff); }
.q-sbar i.planned { background: var(--q-acc); }
.q-sbar i.options { background: #d6d2e3; }

/* the step forward: the corner's mark springs (K29, as the hap did); the pass's big mark is stamped as the old seal was */
.q-int.pop .q-sb { animation: q-pop .52s cubic-bezier(.2, .7, .2, 1.4); }
.z-int.z-go .z-f.z13 .z-step .q-sg { animation: mv-stamp 420ms cubic-bezier(.2, .9, .3, 1.3) backwards; }
body.still .q-int.pop .q-sb, body.still .z-int.z-go .z-f.z13 .z-step .q-sg { animation: none; }
@media (prefers-reduced-motion: reduce) { .q-int.pop .q-sb, .z-int.z-go .z-f.z13 .z-step .q-sg { animation: none; } }

/* ---- niyet kartı v12–v18 (2026-11-02): a stay says what it is; its lead is the kind alone, the card's look says the step ---- */
.q-rrow.card .q-rhd { align-content: center; }
.q-rlead.q-rkline .q-rkind { font-size: var(--q-fs-badge, 12px); font-weight: 750; }
/* a booked stay with its confirmation: two quiet ways back, its paper and the map */
.q-rlinks { gap: 6px; }
.q-rlink { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 11px; border: 1.5px solid #e3e0ec; background: #fff; color: #3b3857; font: inherit; font-size: 13px; font-weight: 750; white-space: nowrap; text-decoration: none; cursor: pointer; }
.q-rlink.ok { border-color: color-mix(in srgb, var(--q-ok) 40%, #fff); color: var(--q-ok); }
.q-rlink:hover { background: #faf9fc; }
.q-rlink:focus-visible { outline: 3px solid color-mix(in srgb, var(--q-acc) 35%, #fff); outline-offset: 1px; }
.q-rslot:has(> .q-rlinks) { justify-content: flex-end; }
.q-rrow.card:has(.q-rlinks) { grid-template-columns: 84px minmax(0, 1fr) auto auto 28px; }

/* a stay pressed open: its pass (check-in and check-out big, the nights and the site between, a few facts, its one or two things) */
.q-pass { container-type: inline-size; border-top: 1.5px dashed #e6e3ee; }
.q-pass-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 26px; padding: 20px 20px 18px 24px; }
.q-pass-dates { display: grid; grid-template-columns: auto minmax(96px, 1fr) auto; align-items: center; gap: 0 22px; }
.q-pass-d b { display: block; font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--q-ink); }
.q-pass-d b span { font-size: 21px; letter-spacing: -0.01em; margin-left: 4px; font-weight: 750; }
.q-pass-d small { display: block; margin-top: 9px; font-size: 13px; font-weight: 700; color: #4a4766; white-space: nowrap; }
.q-pass-d small i { font-style: normal; color: #75728e; font-weight: 700; margin-right: 5px; }
.q-pass-hr { color: #75728e; font-weight: 650; margin-left: 5px; }
.q-pass-mid { display: grid; justify-items: center; gap: 4px; font-size: 12.5px; font-weight: 750; color: #5d5a78; text-align: center; }
.q-pass-ln { position: relative; width: 100%; height: 22px; display: grid; place-items: center; color: var(--k, var(--c)); }
.q-pass-ln::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed #d3cfe0; }
.q-pass-ln svg { position: relative; background: #fff; padding: 0 7px; box-sizing: content-box; }
.q-pass-site { font-weight: 800; }
.q-pass-side { grid-row: 1 / span 2; grid-column: 2; align-self: stretch; display: grid; align-content: center; justify-items: stretch; gap: 10px; min-width: 150px; padding-left: 24px; border-left: 1.5px dashed #e6e3ee; }
.q-pass-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 12px; border: 1.5px solid #e3e0ec; background: #fff; color: #3b3857; font: inherit; font-size: 13.5px; font-weight: 750; white-space: nowrap; text-decoration: none; cursor: pointer; }
.q-pass-btn.ok { border: 0; background: var(--q-ok); color: #fff; }
.q-pass-btn.add { border-color: color-mix(in srgb, var(--q-ok) 40%, #fff); color: var(--q-ok); }
.q-pass-btn:focus-visible, .q-pass-more:focus-visible { outline: 3px solid color-mix(in srgb, var(--q-acc) 35%, #fff); outline-offset: 2px; }
.q-pass-free { font-size: 13px; font-weight: 750; color: #5d5a78; line-height: 1.35; }
.q-pass-free.ok { color: var(--q-ok); }
.q-pass-facts { grid-column: 1; display: grid; grid-template-columns: repeat(3, max-content); gap: 0 40px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #f0eef5; min-width: 0; }
.q-pass-facts div { min-width: 0; }
.q-pass-facts small { display: block; font-size: 12px; font-weight: 700; color: #75728e; margin-bottom: 3px; }
.q-pass-facts b { display: block; max-width: 220px; font-size: 13.5px; font-weight: 700; color: #3b3857; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-pass-facts b.ok { color: var(--q-ok); }
.q-pass-more { display: block; margin: 0 0 12px 24px; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 750; color: var(--q-acc); cursor: pointer; }
@container (max-width: 620px) {
  .q-pass-in { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 14px; }
  .q-pass-dates { gap: 0 12px; }
  .q-pass-d b { font-size: 30px; } .q-pass-d b span { font-size: 16px; }
  .q-pass-side { grid-row: auto; grid-column: 1; border-left: 0; padding: 14px 0 0; margin-top: 14px; border-top: 1.5px dashed #e6e3ee; grid-auto-flow: column; justify-content: start; min-width: 0; }
  .q-pass-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .q-pass-more { margin-left: 16px; }
}
@container (max-width: 380px) { .q-pass-d b { font-size: 26px; } .q-pass-d small { font-size: 12px; } }

/* ---- Belgeler ve internet (belgeler v24, 2026-11-02): picture cards in a grid; sorted ones a small green tick ---- */
.z-docgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; padding: 4px 0 6px; isolation: isolate; }
.z-docgrid > .q-int.z-docw { margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; justify-self: stretch; transform: none; background: none; border: 0; box-shadow: none; min-width: 0; }
.z-docgrid > .q-int.z-docw::before, .z-docgrid > .q-int.z-docw::after { display: none; }
.z-dc { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px #e9e6f1, 0 1px 2px rgba(28, 26, 51, .04), 0 10px 24px -18px rgba(28, 26, 51, .25); }
.z-dc.todo { box-shadow: none; border: 1.5px solid #ddd8ea; background: #fdfcfe; }
.z-dc.done { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--q-ok) 32%, #fff), 0 10px 24px -18px rgba(28, 26, 51, .25); }
.z-dc.deck { overflow: visible; margin-bottom: 10px; border: 1.5px solid color-mix(in srgb, var(--q-acc) 28%, #ddd8ea); box-shadow: none; }
.z-dc.deck::before, .z-dc.deck::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -6px; height: 12px; border-radius: 0 0 16px 16px; background: #fff; box-shadow: 0 0 0 1px #e3dff0; z-index: -1; }
.z-dc.deck::after { left: 20px; right: 20px; bottom: -11px; z-index: -2; }
.z-dca { position: relative; height: 138px; flex: none; overflow: hidden; background: #eef4f8; border-radius: 16.5px 16.5px 0 0; }
.z-dca img.art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.z-dtick { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; background: var(--q-ok); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(28, 26, 51, .18); }
.z-dc.done .z-dmenu { right: 48px; }
.z-dmenu { position: absolute; top: 10px; right: 10px; }
.z-dmenu .z-mb { background: rgba(255, 255, 255, .92); border-radius: 10px; }
.z-dfan { position: absolute; left: 14px; bottom: 12px; display: flex; }
.z-dfan i { width: 44px; height: 54px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(28, 26, 51, .08), 0 4px 10px -4px rgba(28, 26, 51, .35); display: grid; place-items: center; font-style: normal; }
.z-dfan i span { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; }
.z-dfan i + i { margin-left: -14px; }
.z-dfan i:nth-child(1) { transform: rotate(-7deg); } .z-dfan i:nth-child(2) { transform: translateY(-3px); } .z-dfan i:nth-child(3) { transform: rotate(7deg); }
.z-dcb { padding: 15px 17px 4px; flex: 1; min-width: 0; }
.z-dcb h4 { margin: 0; font-size: 16.5px; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; color: var(--q-ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.z-dcb .z-dkind { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 750; color: var(--k, var(--c)); }
.z-dcb p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.45; color: #5d5a78; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-dchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.z-dchips span { height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--q-mut); border: 1px dashed var(--q-st-wait-line); background: #fff; }
.z-dchips span.must { border: 1px solid color-mix(in srgb, var(--q-acc) 35%, var(--q-line)); color: var(--q-acc); background: var(--q-acc-s); }
.z-dtip { margin-top: 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #f6f5fa; }
.z-dtip > span { min-width: 0; }
.z-dtip b { display: block; font-size: 13.5px; font-weight: 800; color: var(--q-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-dtip small { display: block; font-size: 12.5px; color: #5d5a78; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-dtip .z-dtp { font-size: 16px; flex: none; }
.z-dcf { display: flex; align-items: center; gap: 10px; padding: 12px 17px 16px; min-height: 38px; }
.z-dcf .q-rbtn { height: 38px; min-height: 38px; padding: 0 15px; font-size: 13.5px; white-space: nowrap; }
.z-dcr { font-size: 15px; font-weight: 800; color: var(--q-ink); white-space: nowrap; }
.z-dnote { font-size: 12.5px; font-weight: 700; color: var(--q-mut); white-space: nowrap; }
.z-dlnk { font: inherit; font-size: 13.5px; font-weight: 750; color: #4a4766; background: none; border: 0; padding: 6px 2px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.z-dlnk:hover { color: var(--q-ink); }
.z-dlnk:focus-visible { outline: 3px solid color-mix(in srgb, var(--q-acc) 35%, #fff); outline-offset: 2px; border-radius: 6px; }
.z-visa2 .z-dca { background: #dceef8; }
.z-visa2 .z-vpass { margin-top: 10px; }

/* ---- Etkinlik ve Yapılacaklar (etkinlik v28, 2026-11-02): the city's plan as rows (the plan's own language), the
   suggestions under it as today's wide cards; a card on the plan says where it came from ---- */
.q-prow.z-prows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* (one height in every state, as the plan's rows: a bought ticket doesn't grow) */
.q-prow.z-prows > .z-k { display: grid; grid-template-columns: 116px minmax(0, 1fr); grid-template-rows: 108px; align-items: stretch; height: 108px; min-height: 0; width: auto; max-width: none; }
.q-prow.z-prows > .z-k > .z-kp { position: relative; height: 88px; min-height: 0; margin: 10px 0 10px 10px; border-radius: 12px; overflow: hidden; aspect-ratio: auto; }
.q-prow.z-prows > .z-k > .z-kp .z-kd { display: none; }
/* (on the plan a row needs no "Planında" on its picture; a bought one keeps its "✓ Alındı") */
.q-prow.z-prows > .z-k:not(.done) > .z-kp .z-kc { display: none; }
.q-prow.z-prows > .z-k > .z-kp .z-kc { top: 6px; left: 6px; }
.z-k > .z-kt2 { display: none; }
.q-prow.z-prows > .z-k > .z-kt2 { display: flex; position: absolute; top: 10px; right: 10px; gap: 2px; }
.q-prow.z-prows > .z-k > .z-kb { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; column-gap: 16px; row-gap: 4px; padding: 12px 52px 12px 16px; min-width: 0; }
.q-prow.z-prows > .z-k > .z-kb > .z-t { grid-column: 1; margin: 0; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-prow.z-prows > .z-k > .z-kb > .z-l2 { grid-column: 1; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 8px; min-width: 0; overflow: hidden; white-space: nowrap; }
.q-prow.z-prows > .z-k > .z-kb > .z-kf { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 14px; margin: 0; padding: 0; border: 0; }
.q-prow.z-prows > .z-k.done { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--q-ok) 38%, #fff), 0 8px 18px -16px rgba(28, 26, 51, .4); }
.q-prow.z-prows > .z-k.z-kwish { box-shadow: none; outline: 1.5px dashed #d8d2e6; outline-offset: -1.5px; background: #fdfcfe; }
.z-from { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 99px; font-size: 11.5px; font-weight: 800; background: #f1eff7; color: #5d5a78; white-space: nowrap; }
.z-allb { border: 0; background: none; padding: 4px 2px; font: inherit; font-size: 13.5px; font-weight: 800; color: var(--q-acc); cursor: pointer; white-space: nowrap; }
.z-allb:focus-visible { outline: 3px solid color-mix(in srgb, var(--q-acc) 35%, #fff); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 640px) {
  .q-prow.z-prows > .z-k { grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto; height: auto; min-height: 92px; }
  .q-prow.z-prows > .z-k > .z-kp { height: 72px; }
  .q-prow.z-prows > .z-k > .z-kb { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: 10px 12px 12px; row-gap: 6px; }
  .q-prow.z-prows > .z-k > .z-kb > .z-t { padding-right: 64px; }
  .q-prow.z-prows > .z-k > .z-kb > .z-kf { grid-column: 1; grid-row: auto; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
  .q-prow.z-prows > .z-k > .z-kb > .z-kf > * { min-width: 0; }
}
.z-kmap { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1.5px solid #e3e0ec; background: #fff; color: #3b3857; font-size: 13px; font-weight: 750; white-space: nowrap; text-decoration: none; }
.z-kmap:hover { background: #faf9fc; }
.z-dpis { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.z-dtick.pop { animation: z-dseal 480ms cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes z-dseal { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .z-dtick.pop { animation: none; } }
/* (etkinlik v28: an idea said in words with options gathered under it is a deck, as a stay with options: two cards
   peeking under it, "Seç n" opening the drawer; a tour picked for it keeps the idea's words small over its name) */
.q-prow.z-prows > .z-k.z-kwish.z-kdeck { outline: 0; background: #fff; margin-bottom: 8px; box-shadow: 0 0 0 1.5px #e3dff0, 0 5px 0 -1.5px #fff, 0 5px 0 0 #e3dff0, 0 10px 0 -3px #fff, 0 10px 0 -1.5px #ece9f4; }
.z-kpickn b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 5px; border-radius: 99px; background: rgba(255, 255, 255, .25); font-size: 12px; font-weight: 850; }
.z-from.wish { background: #fff; color: var(--q-mut); box-shadow: inset 0 0 0 1px #e3e0ec; font-weight: 750; max-width: 14em; overflow: hidden; text-overflow: ellipsis; }

/* ---- Etkinlik ve Yapılacaklar v31 (2026-11-02, docs/mockups/etkinlik-v31): one white box. The city is a place (a round grey
   pin, its days and nights), not a box in the box; under it "Rezerve" (by day and time, a date block before the photo) and
   "Planında" as rows split by a hairline, a bigger photo with a corner mark (purple on the plan, green booked, dashed while
   it waits), and the suggestions on a grey band at the city's foot. ---- */
.q-fold-in:has(> .q-foldb > .q-ints > .z-int.multi) { background: #fff; }
.q-ints:has(> .z-int.multi)::before { display: none; }
.q-ints > .q-int.z-int.multi, .q-ints > .q-int.z-int.multi[data-st] { background: none; border: 0; border-radius: 0; box-shadow: none; }
.q-ints > .q-int.z-int.multi::before, .q-ints > .q-int.z-int.multi::after { display: none; }
/* (the box clips what leaves it: the side room moves from the fold's body into each city, so the band reaches the edges) */
.q-foldb:has(> .q-ints > .z-int.multi) { padding-left: 0; padding-right: 0; }
.q-foldb:has(> .q-ints > .z-int.multi) > :not(.q-ints) { margin-left: 14px; margin-right: 14px; }
.q-ints > .z-int.multi + .z-int.multi, .q-ints > .z-int.multi + .q-gapl { border-top: 1px solid var(--q-line); }
.q-ints > .z-int.multi > .q-head.z-h { background: none; padding: 0 18px; border-radius: 0; }
.z-int.multi .q-art.z-loc { width: 40px; height: 40px; border-radius: 50%; border: 0; box-shadow: none; background: #f1eff7; color: var(--q-ink); display: grid; place-items: center; }
.z-int.multi .z-h .q-nm { font-size: 20px; }
.z-int.multi .z-h .z-nights { color: var(--q-mut); }
.z-int.multi .z-h .z-nights::before { content: "·"; margin-right: 6px; }
.q-ints > .z-int.multi .q-body { padding: 0 18px; }
.z-int.multi .q-planw { grid-template-rows: none; gap: 0; }
.q-oh.z-grp { display: flex; align-items: center; gap: 7px; margin: 8px 0 2px; }
.q-oh.z-grp > svg { flex: none; width: 18px; height: 18px; padding: 3.5px; box-sizing: border-box; border-radius: 50%; background: var(--q-acc); color: #fff; }
.q-oh.z-grp .q-ot { color: var(--q-acc-d); }
.q-oh.z-grp.ok > svg { background: var(--q-ok); }
.q-oh.z-grp.ok .q-ot { color: var(--q-ok); }
.q-planw > .q-prow + .q-oh.z-grp { border-top: 1px solid var(--q-line); padding-top: 14px; margin-top: 6px; }
.q-prow.z-prows { gap: 0; }
.q-prow.z-prows > .z-k, .q-prow.z-prows > .z-k.done, .q-prow.z-prows > .z-k.z-kwish, .q-prow.z-prows > .z-k.z-kwish.z-kdeck { grid-template-columns: 124px minmax(0, 1fr); grid-template-rows: 116px; height: 116px; border: 0; border-radius: 0; background: none; box-shadow: none; outline: 0; margin: 0; }
.q-prow.z-prows > .z-k + .z-k { border-top: 1px solid var(--q-line); }
.q-prow.z-prows > .z-k > .z-kp { height: 92px; margin: 12px 0; border-radius: 14px; overflow: visible; }
.q-prow.z-prows > .z-k > .z-kp > img, .q-prow.z-prows > .z-k > .z-kp .z-kpl { border-radius: 14px; }
.q-prow.z-prows > .z-k > .z-kp .z-kc { display: none; }
.q-prow.z-prows > .z-k > .z-kp::after { content: ""; position: absolute; right: -5px; bottom: -5px; z-index: 3; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2.5px #fff; background: var(--q-acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.4l2.9 2.9 5.9-6.1' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; }
.q-prow.z-prows > .z-k[data-st="booked"] > .z-kp::after { background-color: var(--q-ok); }
.q-prow.z-prows > .z-k[data-st="done"] > .z-kp::after { background-color: var(--q-st-arranged-dot); }
.q-prow.z-prows > .z-k.z-kwish > .z-kp::after { background: #fff; box-shadow: 0 0 0 2.5px #fff, inset 0 0 0 2px var(--q-acc); border: 0; outline: 2px dashed #fff; outline-offset: -2px; }
.q-prow.z-prows > .z-k > .z-kb { padding: 12px 52px 12px 18px; }
.q-prow.z-prows > .z-k > .z-kb > .z-t { font-size: 16px; }
.q-prow.z-prows > .z-k.z-kdated { grid-template-columns: 60px 124px minmax(0, 1fr); column-gap: 14px; }
.z-kwhen2 { align-self: center; display: grid; justify-items: center; align-content: center; height: 92px; border-radius: 14px; background: var(--q-ok-s); color: var(--q-ok); text-align: center; font-variant-numeric: tabular-nums; }
.z-kwhen2 b { font-size: 24px; line-height: 1; font-weight: 800; letter-spacing: -0.02em; color: #14532d; }
.z-kwhen2 span { margin-top: 3px; font-size: var(--q-fs-small); font-weight: 750; }
.z-kwhen2 small { margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--q-ok-l); font-size: 12.5px; font-weight: 800; }
.q-ints > .z-int.multi .q-opts { margin: 10px -18px 0; padding: 14px 18px 18px; background: var(--q-soft); border-top: 1px solid var(--q-line); }
.q-ints > .z-int.multi:last-child .q-opts { border-radius: 0 0 18px 18px; margin-bottom: -18px; }
@media (max-width: 640px) {
  .q-prow.z-prows > .z-k, .q-prow.z-prows > .z-k.done, .q-prow.z-prows > .z-k.z-kwish, .q-prow.z-prows > .z-k.z-kwish.z-kdeck { grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto; height: auto; min-height: 100px; }
  .q-prow.z-prows > .z-k > .z-kp { height: 76px; margin: 12px 0; }
  .q-prow.z-prows > .z-k > .z-kb { padding: 12px 0 12px 12px; }
  .q-prow.z-prows > .z-k.z-kdated { grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0; }
  .q-prow.z-prows > .z-k.z-kdated > .z-kwhen2 { grid-row: 1; grid-column: 1; height: auto; margin-top: 12px; padding: 5px 4px; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 4px; border-radius: 10px; }
  .q-prow.z-prows > .z-k.z-kdated > .z-kwhen2 b { font-size: 15px; }
  .q-prow.z-prows > .z-k.z-kdated > .z-kwhen2 span, .q-prow.z-prows > .z-k.z-kdated > .z-kwhen2 small { margin: 0; padding: 0; border: 0; font-size: 12px; }
  .q-prow.z-prows > .z-k.z-kdated > .z-kp { grid-row: 2; grid-column: 1; margin-top: 6px; }
  .q-prow.z-prows > .z-k.z-kdated > .z-kb { grid-row: 1 / span 2; grid-column: 2; }
}
/* (a city with nothing yet under a city's rows: a row of the same box, its pin the city's round grey one) */
.q-ints:has(> .z-int.multi) > .q-gapl { border: 0; border-top: 1px solid var(--q-line); border-radius: 0; background: none; padding: 14px 18px; }
.q-ints:has(> .z-int.multi) > .q-gapl > .i:first-child, .q-ints:has(> .z-int.multi) > .q-gapl > .q-gaph > .i:first-child { box-sizing: content-box; padding: 8px; border-radius: 50%; background: #f1eff7; color: var(--q-ink); }
@media (max-width: 640px) {
  /* (the city's ⋯ stays on its line beside the name) */
  .q-ints > .z-int.multi > .q-head.z-h { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; height: auto; padding-top: 14px; padding-bottom: 4px; }
  .q-ints > .z-int.multi > .q-head.z-h > .q-hd { flex: 1 1 auto; min-width: 0; }
  .q-ints > .z-int.multi > .q-head.z-h > .q-hr { flex: none; margin-left: auto; }
}

/* ---- v32 (2026-11-02, docs/mockups/etkinlik-v32, Emre: "hafiften kart gibi hissettirsek"): a city's plan sits on a pale zone
   and each thing on it is a white card on it, no border, a soft shadow, 8 px apart; the suggestions' band is a step darker,
   so plan and ideas still read apart. A card that is bought glides up into Rezerve, its day block opening (CollectionRow). ---- */
.z-int.multi .q-planw:has(> .q-prow) { margin: 2px -6px 0; padding: 2px 10px 10px; border-radius: 16px; background: #f6f5fa; }
.z-int.multi .q-planw > .q-oh.z-grp { margin: 8px 2px 8px; }
.q-planw > .q-prow + .q-oh.z-grp { border-top: 0; padding-top: 0; margin-top: 14px; }
.q-prow.z-prows { gap: 8px; }
.q-prow.z-prows > .z-k, .q-prow.z-prows > .z-k.done, .q-prow.z-prows > .z-k.z-kwish, .q-prow.z-prows > .z-k.z-kwish.z-kdeck { padding-left: 10px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(28, 26, 51, .06), 0 6px 16px -10px rgba(28, 26, 51, .22); grid-template-rows: 112px; height: 112px; }
.q-prow.z-prows > .z-k + .z-k { border-top: 0; }
.q-prow.z-prows > .z-k > .z-kp { margin: 10px 0; }
.q-ints > .z-int.multi .q-opts { background: #efedf5; }
/* (the day block of a card just bought opens its width and fades its words in, never stretched) */
.z-k.z-kjust > .z-kwhen2 { animation: z-kwhen-in 520ms cubic-bezier(.22, 1, .36, 1) 120ms both; }
.z-k.z-kjust > .z-kwhen2 > * { animation: z-kwhen-txt 300ms ease 360ms both; }
@keyframes z-kwhen-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes z-kwhen-txt { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .z-k.z-kjust > .z-kwhen2, .z-k.z-kjust > .z-kwhen2 > * { animation: none; } }
@media (max-width: 640px) {
  .z-int.multi .q-planw:has(> .q-prow) { margin: 2px -8px 0; padding: 2px 8px 8px; }
  .q-prow.z-prows > .z-k, .q-prow.z-prows > .z-k.done, .q-prow.z-prows > .z-k.z-kwish, .q-prow.z-prows > .z-k.z-kwish.z-kdeck { padding-left: 8px; grid-template-rows: auto; height: auto; }
  .q-prow.z-prows > .z-k > .z-kb { padding-right: 10px; }
}
/* (a booked row's ⓘ, v32: its details open under the row, the row growing to hold them, never squeezed into its height:
   the facts side by side, the actions on one line) */
.q-prow.z-prows > .z-k:has(> .z-det), .q-prow.z-prows > .z-k.done:has(> .z-det) { height: auto; grid-template-rows: 112px auto; }
.q-prow.z-prows > .z-k > .z-det { position: relative; inset: auto; z-index: 1; grid-column: 1 / -1; margin: 0 0 0 -10px; border: 0; border-top: 1px dashed var(--q-line); border-radius: 0 0 14px 14px; box-shadow: none; overflow: visible; padding: 12px 44px 12px 18px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 18px; animation: none; }
.q-prow.z-prows > .z-k > .z-det > .q-dfoot { position: static; margin: 0; padding: 10px 0 0; flex-direction: row; flex-wrap: wrap; align-items: center; background: none; }
.q-prow.z-prows > .z-k > .z-det > .q-dfoot .q-sp { display: block; flex: 1; }
.q-prow.z-prows > .z-k > .z-det .q-dact { width: auto; text-align: left; }
.q-prow.z-prows > .z-k > .z-det > .z-dx { top: 10px; right: 10px; }
@media (max-width: 640px) {
  .q-prow.z-prows > .z-k:has(> .z-det) { grid-template-rows: auto auto; }
  .q-prow.z-prows > .z-k > .z-det { margin-left: -8px; padding: 12px 40px 12px 12px; grid-template-columns: 1fr; }
  .q-prow.z-prows > .z-k > .z-det > .q-dfoot .q-sp { display: none; }
}