/* Plan v82, aşama 4: the collection family (Etkinlik, Yapılacaklar, Yeme-içme): the Planında and Öneriler rows of cards.
   Rules are ported from the approved prototype (plan-v32-tasarim: docs/mockups/plan-v83-turler/kaynak/mk81.css, mk82.css
   "çoklu (etkinlik, yapılacak): sabit boy kart sırası", mk83.css) and keep its class names. */

/* ---- the box: a city's two rows (the prototype's `.z-int.multi`); a card's height follows its width (option A) ---- */
.z-int.multi .q-opts { height: auto; grid-template-rows: 28px auto; }
.z-int .q-planw { display: grid; grid-template-rows: 28px auto; gap: 8px; min-width: 0; }
.z-int .q-planw > .q-prow:empty { display: none; }
.q-oh .q-ppn { font-size: var(--q-fs-small); color: #8d89a8; font-variant-numeric: tabular-nums; }
.z-ks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-width: 0; }

/* ---- the card (0.38.8, Emre's option A): its picture 4:3 on top, about two thirds of it, over three fixed lines: the name
   over two lines, whole (three on a narrow card), one grey line, one row of action. Every card of a row is one height
   (one width, the same lines; the row's grid stretches the rest), a bought one's 2 px edge included. ---- */
.z-k { position: relative; box-sizing: border-box; container: zk / inline-size; display: grid; grid-template-rows: auto minmax(0, 1fr); border-radius: 14px; background: #fff; border: 1px solid var(--q-line); margin: 0; padding: 0; min-width: 0; transition: transform var(--t-quick) var(--e-out), box-shadow var(--t-quick) var(--e-out); }
.z-k.q-opt:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -14px rgba(28, 26, 51, .4); }
.z-kp { position: relative; aspect-ratio: 4 / 3; background: var(--q-soft); border-radius: 13px 13px 0 0; overflow: hidden; min-height: 0; }
.z-kp > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.z-kp > img.ph { background: var(--q-soft); }
/* The picture's chips, top left (clear of its tools): the source ("V Viator · Ushuaia"), the site ("Viator"), "Gezinin
   sebebi"; on its foot (.z-kd) "✓ Bilet alındı" and a place's word. */
.z-kc { position: absolute; left: 8px; top: 8px; right: 8px; z-index: 2; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px; min-width: 0; pointer-events: none; }
.z-kp:has(.z-kt > :only-child) .z-kc { right: 44px; }
.z-kp:has(.z-kt > :nth-child(2)) .z-kc { right: 72px; }
.z-kd { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1; display: flex; flex-wrap: wrap-reverse; align-items: flex-end; gap: 4px; min-width: 0; pointer-events: none; }
.z-kc > *, .z-kd > * { box-sizing: border-box; display: inline-flex; align-items: center; height: 22px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: auto; }
.z-kc > .q-src { gap: 5px; padding: 0 8px; background: rgba(255, 255, 255, .94); color: var(--q-ink); font-weight: 750; box-shadow: 0 1px 4px rgba(28, 26, 51, .18); }
.z-kc > .q-src.ai { color: var(--q-acc); }
.z-kc > .q-src.site { padding-left: 4px; }
.z-kc > .q-src .q-logo.sm { width: 15px; height: 15px; border-radius: 4px; font-size: 10px; }
.z-kc > .q-src.rsn { background: var(--k, #a8336f); color: #fff; box-shadow: none; gap: 4px; }
.z-kc > .q-brand { border-radius: 99px; padding: 0 9px; line-height: 22px; }
.z-kc > .q-brand.plain { background: rgba(255, 255, 255, .94); box-shadow: 0 1px 4px rgba(28, 26, 51, .18); }
.z-kd > .z-tagc { height: 22px; border: 0; background: rgba(255, 255, 255, .94); color: var(--q-ink); box-shadow: 0 1px 4px rgba(28, 26, 51, .18); }
/* Bought: a small green chip on the picture's foot (v80 "alındı dönüşüyor"; the card keeps its size, the photo stays whole). */
.z-kp .q-vband { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 22px; box-sizing: border-box; padding: 0 8px; border-radius: 99px; background: var(--q-ok); color: #fff; font-size: var(--q-fs-badge); font-weight: 800; white-space: nowrap; overflow: hidden; box-shadow: 0 1px 4px rgba(28, 26, 51, .2); }
/* The picture's top right: × Plandan çıkar and ⋯, faint until the card is pointed at or has the focus; ⓘ on a bought one. */
.z-kt { position: absolute; right: 8px; top: 8px; z-index: 4; display: flex; gap: 6px; }
.q-rm, .z-kmb { width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; background: #fff; color: var(--q-mut); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 4px rgba(28, 26, 51, .18); opacity: 0; transition: opacity var(--t-quick) var(--e-out); }
.q-rm:hover, .z-kmb:hover, .z-kmb[aria-expanded="true"] { color: var(--q-ink); }
.z-k:hover .q-rm, .z-k:hover .z-kmb, .z-k:focus-within .q-rm, .z-k:focus-within .z-kmb, .z-kmb[aria-expanded="true"] { opacity: 1; }
.q-rm:focus-visible, .z-kmb:focus-visible { opacity: 1; outline: 3px solid #cfc7ff; outline-offset: 2px; }
@media (hover: none) { .q-rm, .z-kmb { opacity: 1; } }
.z-kt > .z-ib { position: static; }
.z-kb { display: grid; grid-template-rows: 40px 16px 34px; grid-template-columns: minmax(0, 1fr); gap: 4px; align-content: start; padding: 10px 12px 12px; min-width: 0; }
.z-kb > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-kb > .z-kf { margin-top: 6px; }
.z-kb .z-t { font-size: var(--q-fs-button); line-height: 20px; font-weight: 750; white-space: normal; }
/* The name over two lines, wrapped between words, never cut in one (a word too long for the line is the only "…"). */
.z-kb .z-t .z-tb, .z-kb .z-t .z-tn, .z-kb .z-t .pk-ed { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; max-width: 100%; overflow: hidden; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; color: inherit; text-decoration: none; }
/* The name edits where it stands (C2), and a page's own value ("sayfadaki: …") shows under it, over the card. */
.z-kb > .z-t { overflow: visible; }
.z-kb .z-t .pk-ed-wrap { display: block; max-width: 100%; }
.z-kb .z-t .pk-ed-box { display: flex; max-width: 100%; }
.z-kb .z-t .pk-ed-input { width: 100%; font-size: var(--q-fs-button); }
.z-kb .z-l2 { display: block; font-size: var(--q-fs-small); color: var(--q-mut); line-height: 16px; }
.z-kb .q-acc { display: flex; gap: 8px; margin: 0; padding: 0; background: none; border: 0; min-width: 0; }
.z-kb .q-acc .q-aw { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--q-fs-small); color: var(--q-ink); text-decoration: none; }
.z-kb .q-acc .q-aw:last-child { flex: 1 1 0; }
.z-kb .q-acc .q-aw .i { vertical-align: -2px; margin-right: 3px; color: var(--q-mut); }
.z-kb .q-acc a.q-aw:hover { color: var(--q-acc); }
.z-tagc { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 99px; background: var(--q-soft); border: 1px solid var(--q-line); font-size: var(--q-fs-badge); font-weight: 750; color: var(--q-mut); box-sizing: border-box; }
.z-okc { display: inline-flex; align-items: center; gap: 4px; font-size: var(--q-fs-small); font-weight: 800; color: var(--q-ok); white-space: nowrap; }

/* The foot: "+ Plana koy" across; "✓ Aldım" and the site; the code and "Bileti aç"; "✓ Planda" and "Gün ver ›". */
.z-kf { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: visible; }
.q-pick.ghost { background: #fff; color: var(--q-acc); box-shadow: inset 0 0 0 1.5px var(--q-acc); }
.q-pick.ghost:hover { background: var(--q-acc-s); }
.z-kf > .q-pick { width: 100%; height: 34px; min-height: 34px; padding: 0 12px; }
.z-kf .q-act { display: flex; align-items: center; gap: 6px; width: 100%; margin: 0; padding: 0; border: 0; min-width: 0; }
.z-kf .q-act > * { flex: 1 1 0; min-width: 0; height: 34px; min-height: 34px; justify-content: center; font-size: var(--q-fs-info); box-sizing: border-box; border-radius: 10px; }
.z-kf .q-act .q-got { flex: 0 0 auto; padding: 0 8px; gap: 3px; font-size: var(--q-fs-info); }
.z-kf .q-act .q-got:only-child { flex: 1 1 auto; }
.z-kf .q-act .q-cta { flex: 1 1 auto; padding: 0 8px 0 4px; gap: 5px; box-shadow: none; font-size: var(--q-fs-info); }
.z-kf .q-act .q-cta .q-ext { display: none; }
.z-kf .q-act .q-cta > span:not(.q-logo) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-kf .q-code { flex: 1.2 1 0; display: inline-flex; align-items: center; gap: 4px; padding: 0 4px 0 8px; font-size: var(--q-fs-small); color: var(--q-mut); border: 1px solid var(--q-line); border-radius: 10px; background: var(--q-soft); overflow: hidden; }
.z-kf .q-code > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.z-kf .q-code .q-cp { margin-left: auto; flex: none; }
.z-kf .q-open { padding: 0 10px; gap: 5px; white-space: nowrap; }
.z-kf .q-act .q-open, .z-kf .q-act .q-doc.add { flex: 0 0 auto; }
.z-kf .q-act .q-code:only-child, .z-kf .q-act .q-open:only-child, .z-kf .q-act .q-doc.add:only-child { flex: 1 1 auto; }
/* "📎 Bilet ekle": a quiet link on the foot's line, not a box (the file is a second thing to do once it's bought). */
.z-kf .q-act > .q-doc.add { display: inline-flex; align-items: center; justify-content: flex-start; gap: 4px; height: 22px; min-height: 22px; padding: 0 2px; border: 0; border-radius: 6px; background: none; color: var(--q-mut); font: inherit; font-size: var(--q-fs-small); font-weight: 700; white-space: nowrap; cursor: pointer; }
.z-kf .q-act > .q-doc.add:not(:only-child) { padding: 0 2px 0 4px; }
.z-kf .q-doc.add:hover { color: var(--q-acc); text-decoration: underline; }
.z-kf .q-day { all: unset; box-sizing: border-box; cursor: pointer; margin-left: auto; font-size: var(--q-fs-info); font-weight: 700; color: var(--q-ok); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; border-radius: 6px; }
.z-kf .q-act .q-day { margin-left: 0; display: inline-flex; align-items: center; justify-content: center; max-width: none; border: 1px solid var(--q-line); background: #fff; }
.z-kf > .q-day { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--q-line); border-radius: 10px; background: #fff; }
.z-kf .q-day:hover { text-decoration: underline; }
.z-kf .q-day:focus-visible, .z-kf .q-pick:focus-visible, .z-kf .q-got:focus-visible, .z-kf .q-open:focus-visible, .z-kf .q-doc:focus-visible, .z-kf .q-cta:focus-visible, .z-kb .z-tb:focus-visible { outline: 3px solid #cfc7ff; outline-offset: 2px; }

/* The states: on the plan (a ticket sand, a place green), bought (a ticket's 2 px green), done (quiet), still to fill. */
.q-card.z-k.q-plan { border-color: var(--q-sand-l); }
.q-tile.z-k.q-plan { border-color: var(--q-ok-l); }
.z-k.done { border-color: var(--q-ok-l); }
.q-card.z-k.done { border: 2px solid var(--q-ok); }
.z-k.made .z-kp > img { opacity: .55; filter: grayscale(.4); }
.z-k.made .z-t { color: #8e8aa6; }
.z-k.wanted { border: 1.5px dashed var(--q-st-wait-line); background: #fcfbfe; }
.z-k.wanted .z-kp > img { opacity: .5; filter: grayscale(.3); }
.z-k.note .z-kp { background: #fdfdfd; }
/* Ayrıntı over a bought ticket: the card's own size (v82 "Ayrıntı kartı büyütmez"). */
.z-k > .z-det { border-radius: 14px; padding: 12px 40px 12px 12px; grid-template-columns: 1fr; gap: 10px; font-size: var(--q-fs-small); }
.z-k > .z-det .q-dr { display: grid; gap: 0; font-size: var(--q-fs-small); }
.z-k > .z-det .q-dr b { text-align: left; justify-content: flex-start; }
.z-k > .z-det .q-dfoot { flex-direction: column; align-items: stretch; }
.z-k > .z-det .q-dfoot .q-sp { display: none; }

.z-k > .pk-doc-error { position: absolute; left: 8px; right: 8px; bottom: 50px; z-index: 6; padding: 4px 8px; border-radius: 8px; background: #fdecea; color: var(--q-bad); font-size: var(--q-fs-small); }

/* A suggested place to see or eat at (0.38.7): its word on the picture, its name over two lines like every card's; "Haritada aç" beside "+ Plana koy". */
.z-kf .q-act > .z-kmap { flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0; border: 1px solid var(--q-line); background: #fff; color: var(--q-mut); text-decoration: none; font-weight: 700; }
.z-kf .q-act > .z-kmap:only-child { flex: 1 1 auto; padding: 0 10px; }
.z-kf .q-act > .z-kmap:hover { color: var(--q-acc); border-color: var(--q-acc); }
.z-kf .q-act > .z-kmap:focus-visible { outline: 3px solid #cfc7ff; outline-offset: 2px; }

/* Empty Planında: four slots of the card's size; beside cards they keep the cells' places, unseen. */
.z-k0 { display: grid; grid-template-rows: none; border: 0; background: none; padding: 0; }
.z-k0.off { visibility: hidden; }
/* Planında with nothing on it: one line in its head instead of empty slots (Emre, 19 Ekim). */
.q-oh .z-pe { min-width: 0; font-size: var(--q-fs-small); color: var(--q-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "+n Pano'da": the rest of a row, on the Pano. */
.z-more { all: unset; box-sizing: border-box; cursor: pointer; align-self: stretch; min-height: 100%; border-radius: 14px; border: 1.5px dashed #d6d2e4; display: grid; align-content: center; justify-items: center; gap: 2px; color: var(--q-acc); min-width: 0; }
.z-more b { font-size: 22px; font-weight: 800; }
.z-more small { font-size: var(--q-fs-small); font-weight: 700; }
.z-more:hover { border-color: var(--q-acc); background: #fbfaff; }
.z-more:focus-visible { outline: 3px solid #cfc7ff; outline-offset: 2px; }
/* A card the hero's mosaic (or a to-do) went to keeps its own corners while it flashes. */
.z-k.flash { border-radius: 14px; }
/* Öneriler's count when more wait in line (0.38.9: four cards at most): it opens them on the Pano. */
.q-oh .z-ocb { all: unset; cursor: pointer; font-size: var(--q-fs-small); color: #8d89a8; white-space: nowrap; border-radius: 6px; }
.q-oh .z-ocb:hover { color: var(--q-acc); text-decoration: underline; }
.q-oh .z-ocb:focus-visible { outline: 3px solid #cfc7ff; outline-offset: 2px; }

/* What just arrived (C10, C35): "Yeni" while it rings (arrive/useArrivals pulses .ar-new on the card). */
.z-k.ar-new::after { content: attr(data-new); position: absolute; top: 8px; right: 8px; z-index: 3; padding: 3px 8px; border-radius: 99px; background: #7b62f0; color: #fff; font-size: var(--q-fs-badge); font-weight: 800; line-height: 1.2; pointer-events: none; }

/* ---- the rows' heads: Planında's chips (C20), Öneriler' fold (C26) ---- */
.z-fchips { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.z-fc { display: inline-flex; align-items: center; gap: 5px; height: 28px; box-sizing: border-box; padding: 0 11px; border-radius: 99px; border: 1px solid var(--q-line); background: #fff; font: inherit; font-size: var(--q-fs-small); font-weight: 700; color: var(--q-mut); cursor: pointer; white-space: nowrap; }
.z-fc i { font-style: normal; font-weight: 600; color: #8d89a8; font-variant-numeric: tabular-nums; }
.z-fc[aria-pressed="true"] { background: var(--q-acc-s); border-color: #d9d2fb; color: var(--q-acc); }
.z-fc[aria-pressed="true"] i { color: var(--q-acc); }
.z-fc:focus-visible, .z-fold:focus-visible, .z-ask:focus-visible { outline: 3px solid #cfc7ff; outline-offset: 2px; }
.z-fold { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; height: 28px; padding: 0 6px; border-radius: 8px; font-size: var(--q-fs-small); font-weight: 700; color: var(--q-acc); white-space: nowrap; }
.z-fold .i { transform: rotate(90deg); transition: transform var(--t-quick) var(--e-out); }
.z-fold.shut .i { transform: rotate(0deg); }

/* ---- the windows over the page: a card's ⋯ and "Gün ver" (KMenu's portal) ---- */
.z-mpop.z-kpop { right: auto; z-index: 90; max-width: min(300px, calc(100vw - 16px)); }
.z-days { min-width: 220px; max-height: min(360px, calc(100vh - 32px)); overflow: auto; }
.z-days ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.z-days li button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 9px; font-size: var(--q-fs-info); }
.z-days li button b { font-weight: 700; }
.z-days li button span { font-size: var(--q-fs-small); color: var(--q-mut); }
.z-days li button:hover, .z-days li button:focus-visible { background: var(--q-soft); }
.z-days li button.on { background: var(--q-ok-s); color: var(--q-ok); }
.z-meals { display: flex; gap: 6px; padding: 6px 8px 8px; border-bottom: 1px solid var(--q-line); margin-bottom: 4px; }
.z-meals button { all: unset; cursor: pointer; height: 28px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--q-line); font-size: var(--q-fs-small); font-weight: 700; color: var(--q-mut); }
.z-meals button.on { background: var(--q-acc-s); border-color: #d9d2fb; color: var(--q-acc); }
.z-meals button:focus-visible { outline: 2px solid var(--q-acc); outline-offset: 2px; }
.z-unday { width: 100%; box-sizing: border-box; margin-top: 4px; border-top: 1px solid var(--q-line); border-radius: 0 0 9px 9px; }

/* ---- a city with nothing yet (Etkinlik): one thin line at the rail's end, off its dots ---- */
.q-gapl { position: relative; margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 52px; padding: 8px 14px; box-sizing: border-box; border: 1px dashed var(--q-st-wait-line); border-radius: 14px; background: rgba(255, 255, 255, .6); font-size: var(--q-fs-info); color: var(--q-ink); }
.q-gapl > .i, .q-gaph > .i { color: var(--k, #a8336f); }
.q-gapl.has-offers { display: grid; gap: 10px; padding: 10px 14px 14px; }
.q-gaph { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 32px; }
.q-gapl b, .q-gaph b { font-weight: 750; }
/* Which city a row of tours is (2026-10-24, "şehirler küçük kalmış, hangi şehirde ne turu baktığımız anlaşılmıyor"): the city
   is its box's title, so it stands over its cards' names (16-17 px) at 19 px, its days a step under it; a city with nothing
   yet says its name as large as a card's, its pin in the category's colour. */
.z-int.multi .z-h { height: 64px; }
.z-int.multi .z-h .q-nm { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.z-int.multi .z-h .q-ln { font-size: 13.5px; }
.q-gapl > b, .q-gaph > b { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; }
.z-ask { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 9px; background: var(--q-acc-s); color: var(--q-acc); font-size: var(--q-fs-small); font-weight: 700; }

/* ---- motion: "+ Plana koy" flies the card to its slot (E6, putFly), the count jumps; "Plandan çıkar" fades (180 ms) ---- */
@keyframes z-kbump { 0% { scale: 1; } 40% { scale: 1.35; } 100% { scale: 1; } }
@keyframes z-kout { to { opacity: 0; scale: .97; } }
.z-fly { position: fixed; z-index: 80; pointer-events: none; margin: 0 !important; box-shadow: 0 18px 40px -12px rgba(20, 16, 40, .35); transform-origin: 0 0; transition: transform 420ms var(--e-move), opacity 420ms var(--e-move); }
.q-ppn.bump, .z-more.bump b { display: inline-block; animation: z-kbump 380ms cubic-bezier(.2, .9, .3, 1.3); }
.z-k.leaving { animation: z-kout 180ms var(--e-in) forwards; pointer-events: none; }
.z-k.flying { visibility: hidden; }
/* Reduced motion: the card is simply there, with a 2 px edge for 1.6 s (E §2.6). */
.z-k.landed { outline: 2px solid var(--q-acc); outline-offset: -2px; }
body.still .z-fly { display: none !important; }
body.still .z-k, body.still .z-k.leaving, body.still .q-ppn.bump, body.still .z-more.bump b, body.still .q-rm, body.still .z-kmb, body.still .z-fold .i { animation: none !important; transition: none !important; }
body.still .z-k.q-opt:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .z-fly { display: none !important; }
  .z-k, .z-k.leaving, .q-ppn.bump, .z-more.bump b, .q-rm, .z-kmb, .z-fold .i { animation: none !important; transition: none !important; }
  .z-k.q-opt:hover { transform: none; }
}

/* ---- a narrow card (two across, 640 px and under, or a small column): the name over three lines, a lower foot ---- */
@container zk (max-width: 220px) {
  .z-kb { grid-template-rows: 57px 16px 32px; padding: 9px 10px 10px; }
  .z-kb .z-t { font-size: 14px; line-height: 19px; }
  .z-kb .z-t .z-tb, .z-kb .z-t .z-tn, .z-kb .z-t .pk-ed { -webkit-line-clamp: 3; line-clamp: 3; }
  .z-kf > .q-pick, .z-kf .q-act > * { height: 32px; min-height: 32px; }
  .z-kf .q-act > .z-kmap { flex-basis: 32px; }
  .z-kf > .q-day { height: 32px; padding: 0 10px; }
}
/* The smallest card (two across on a phone): "✓ Planda" is its check beside "Gün ver ›" (its word stays for a reader). */
@container zk (max-width: 160px) {
  .z-kf > .z-okc { font-size: 0; gap: 0; }
  .z-kf > .q-day { padding: 0 8px; }
}

/* ---- narrow: the cells two across (the prototype's 640 px), Planında's unseen cells out of the way ---- */
@media (max-width: 640px) {
  .z-ks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .z-k0.off { display: none; }
  .z-int .q-planw, .z-int.multi .q-opts { grid-template-rows: auto auto; }
  .z-fchips { flex-wrap: wrap; overflow: visible; }
  .z-kf .q-act .q-cta > span:not(.q-logo) { display: none; }
  .z-kf .q-act .q-got { padding: 0 6px; }
  /* Narrow: × and ⋯ are there without a hover (the live cards' rule). */
  .q-rm, .z-kmb { opacity: 1; }
  /* The sites keep their marks when their names step aside (intent.css hides the pill's spans). */
  .z-int.multi .q-oh .z-pl > .q-logo, .q-gapl .z-pl > .q-logo { display: grid; }
  .z-int.multi .q-oh .z-self, .q-gapl .z-self { flex: none; }
  .q-gapl .z-self > small, .q-gapl .z-pl > span:not(.q-logo) { display: none; }
  /* A bought ticket's foot: its code and the clip (its words in its label). */
  .z-kf .q-act .q-open { padding: 0 9px; }
  .z-kf .q-act .q-open > span, .z-kf .q-act .q-doc.add:not(:only-child) > span { display: none; }
}

/* A place's Google rating on its picture (spec 2026-10-19 SerpApi, item 3). */
.z-kp > .z-prate { position: absolute; right: 8px; bottom: 8px; z-index: 1; padding: 2px 7px; border-radius: 99px; background: rgba(255, 255, 255, .94); color: var(--q-ink); font-size: var(--q-fs-badge); font-weight: 700; box-shadow: 0 1px 4px rgba(28, 26, 51, .18); white-space: nowrap; }
/* the place's word (bottom left) stops short of the rating (bottom right) */
.z-kp:has(> .z-prate) .z-kd { right: 52px; }
/* What's on in the city on the stay's days (spec 2026-10-19 SerpApi, item 8): its own row under the suggestions. */
.z-evs { margin-top: 14px; }
.z-evsrc { font-size: var(--q-fs-small); color: var(--q-mut); }

/* ---- 0.39.9 Etkinlik ve turlar (Emre: Viator's own card as the model, "4'lü yerine 3'lü"): three across, the picture
   16:10, the source's tour as a deal: its pick top left, the source at the picture's foot, one line of ★ rating, length
   and free cancellation, the price a person big beside "+ Plana koy". ---- */
.z-ks.z-k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.z-k3 .z-kp { aspect-ratio: 16 / 10; }
.z-k3 .z-kb .z-t { font-size: 16px; line-height: 21px; }
.z-k3 .z-kb { grid-template-rows: 42px 18px auto; padding: 12px 14px 14px; }
.z-kc > .z-kpick { height: 24px; padding: 0 10px; border-radius: 99px; background: var(--q-acc); color: #fff; font-size: 12px; font-weight: 750; box-shadow: 0 1px 4px rgba(28, 26, 51, .2); }
.z-kfacts { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; white-space: nowrap; }
.z-kst { display: inline-flex; align-items: center; gap: 3px; color: var(--q-ink); font-weight: 750; }
.z-kst .i { fill: var(--q-ok); stroke: var(--q-ok); }
.z-kst small { color: var(--q-mut); font-weight: 500; font-size: inherit; }
.z-kfree { color: var(--q-ok); font-weight: 650; }
.z-ko .z-kf { justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: 8px; }
.z-kpr { display: grid; line-height: 1.15; min-width: 0; }
.z-kpr small { font-size: var(--q-fs-small); color: var(--q-mut); }
.z-kpr b { font-size: 20px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--q-ink); }
.z-ko .z-kf > .q-pick { width: auto; flex: none; padding: 0 14px; height: 36px; min-height: 36px; }
.z-ko .z-kf > .q-pick:only-child { margin-left: auto; }
@media (max-width: 640px) {
  .z-ks.z-k3 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ---- 0.39.10: every card of Etkinlik in the approved card's language (docs/mockups/etkinlik-karti-uclu), not only the
   source's tour: one word top left (white; the source's featured pick purple; "✓ Planında" / "✓ Alındı" green), the source
   dark at the picture's foot, the drawing small on cream when there's no photo, the day small over the price big on the
   left of the foot and one button on the right; on the plan the card is sand, bought it is green. ---- */
.z-k3 .z-k { border-radius: 16px; }
.z-k3 .z-kp { border-radius: 15px 15px 0 0; }
.z-kc > .z-kpick.plain { background: #fff; color: var(--q-ink); }
.z-kc > .z-kpick.ok { background: var(--q-ok); color: #fff; }
.z-kc > .z-kpick.rsn { background: var(--k, #a8336f); color: #fff; }
.z-kd > .z-ksrc { height: 20px; padding: 0 8px; border-radius: 6px; background: rgba(17, 15, 30, .55); color: #fff; font-size: 11.5px; font-weight: 700; }
.z-k3 .z-kp:has(> img.art) { background: #fbf6ee; }
.z-k3 .z-kp > img.art { inset: 0; margin: auto; width: 46%; height: auto; max-height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.z-k3 .q-card.z-k.q-plan { background: var(--q-sand); border-color: var(--q-sand-l); }
.z-k3 .q-card.z-k.done { background: var(--q-ok-s); border: 1px solid var(--q-ok-l); }
/* (one height whatever it holds: a day or "kişi başı" or nothing over the price, so every card of a row is one height) */
.z-ko .z-kpr { min-height: 40px; align-content: end; }
.z-ko .z-kpr small { height: 16px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-ko .z-kpr b { height: 24px; line-height: 24px; white-space: nowrap; }
.z-kpr .z-kwhen { font-size: 13px; font-weight: 700; color: var(--q-sand-ink); }
.z-k3 .done .z-kpr .z-kwhen { color: var(--q-ok); }
.z-kpr b i { font-style: normal; font-size: var(--q-fs-small); font-weight: 500; color: var(--q-mut); letter-spacing: 0; }
.z-kpr b.z-knone { font-size: 15px; font-weight: 700; color: var(--q-mut); }
.z-knote { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* The one button: "Rezerve et ↗" (its page), "✓ Aldım", a bought ticket's green "Bileti aç"; "+ Plana koy" is the outlined one. */
.z-ko .z-kf > .q-open { flex: none; height: 36px; min-height: 36px; padding: 0 14px; font-size: 14px; }
.z-ko .z-kf > .z-kgo { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 11px; background: var(--q-acc); color: #fff; font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.z-ko .z-kf > .z-kgo:hover { background: #4a36c9; }
.z-ko .z-kf > .z-kgo:focus-visible { outline: 3px solid #cfc7ff; outline-offset: 2px; }
.z-ko .z-kf > .q-doc.add { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 4px; border: 0; background: none; color: var(--q-mut); font: inherit; font-size: var(--q-fs-small); font-weight: 700; white-space: nowrap; cursor: pointer; }
.z-ko .z-kf > .q-doc.add:hover { color: var(--q-acc); text-decoration: underline; }
/* A bought ticket's grey line: its code to copy, then the meeting place. */
.z-kb .z-kacc { align-items: center; }
.z-kb .z-kacc .z-kcode { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 2px 0 6px; border-radius: 6px; background: rgba(255, 255, 255, .7); border: 1px solid var(--q-ok-l); color: var(--q-ink); font-size: var(--q-fs-small); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.z-kb .z-kacc .z-kcode .q-cp { all: unset; cursor: pointer; display: grid; place-items: center; width: 16px; height: 16px; color: var(--q-mut); border-radius: 4px; }
.z-kb .z-kacc .z-kcode .q-cp:hover { color: var(--q-acc); }

/* ---- 0.39.14 Yapılacaklar, sade (Emre: "çok buton text var"; docs/mockups yapilacak-sade): Planında's line goes while
   nothing is on it, "Haritada ara ↗" one small link, a suggested place's name and why read together, its rating (to the
   map) on the foot's left and "+ Plana koy" the one button on its right. ---- */
.z-int .q-planw.bare { display: none; }
.q-oh .z-msearch { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 2px; border: 0; background: none; box-shadow: none; color: var(--q-acc); font-size: var(--q-fs-small); font-weight: 700; text-decoration: none; white-space: nowrap; }
.q-oh .z-msearch:hover { text-decoration: underline; }
.q-oh .z-msearch:focus-visible { outline: 3px solid #cfc7ff; outline-offset: 2px; border-radius: 6px; }
.q-oh .z-msearch .q-logo.sm { width: 16px; height: 16px; border-radius: 4px; font-size: 10px; }
.z-kplace .z-kb { grid-template-rows: auto 16px minmax(34px, 1fr); align-content: stretch; }
.z-kplace .z-kf { align-self: end; justify-content: space-between; gap: 8px; }
.z-kplace .z-kf > .q-pick { width: auto; flex: none; padding: 0 12px; height: 32px; min-height: 32px; margin-left: auto; }
.z-krate { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: var(--q-fs-small); font-weight: 750; color: var(--q-ink); text-decoration: none; border-radius: 6px; }
.z-krate .i { flex: none; }
.z-krate > .i:first-child { fill: var(--q-ok); stroke: var(--q-ok); }
.z-krate small { font-size: inherit; font-weight: 500; color: var(--q-mut); }
a.z-krate:hover { color: var(--q-acc); }
a.z-krate:hover small { color: var(--q-acc); }
a.z-krate:focus-visible { outline: 3px solid #cfc7ff; outline-offset: 2px; }
a.z-krate:has(> span) { color: var(--q-mut); }
a.z-krate:has(> span) > .i:first-child { fill: none; stroke: currentColor; }
/* A narrow card (two across on a phone): the rating over the button, the button across. */
@container zk (max-width: 220px) {
  .z-kplace .z-kb { grid-template-rows: auto 16px minmax(32px, 1fr); }
  .z-kplace .z-kf { flex-wrap: wrap; row-gap: 6px; }
  .z-kplace .z-kf > .q-pick { flex: 1 1 100%; margin-left: 0; }
}
/* (narrow: the sites' names step aside, intent.css; this one link keeps its words, it's the only one) */
.q-oh .z-pl.z-msearch > span { display: inline; }