/* v82 hero: docs/superpowers/specs/2026-10-18-v82-gecis/02-spec.md. Rules are ported from the approved prototype
   (plan-v32-tasarim: docs/mockups/plan-v83-turler/kaynak/mk81.css, mk82.css, mk83.css) and keep its class names. */
/* Aşama 1 (hero/Hero.tsx); A · Kapak (2026-10-19, the approved mock hero/v17.html "A"): one round block of the cover the
   full width (430 px; the trip's ⋯ menu as a glass circle on its top left, the days to go big on its top right, its
   places, its name and its route bottom left over a dark gradient) with the tiles a row of six under it (112 px, 6 px
   apart; both a little lower on a board under 1300 px, the chat open beside it, so the Plan starts at the fold), the white summary card in one row (when, who, the budget, ready, "Sıradaki"), and one quiet row of the facts,
   the style words, Tercihler and "Özeti küçült". Narrow by the panel's own width (its container, app.css): under 900 px
   the cover 480 px, the tiles three by two, the card two by two with "Sıradaki" the full width. */
:root { --x-in: cubic-bezier(.2, .8, .2, 1); }

/* (the home's display face, --hm-display: bundled, the @font-face at the top of app.css; the dots' bright tones read on a photo) */
.x-hero { --x-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --x-dot-ok: #2fbf6f; --x-dot-plan: #f0a53a; --x-plan: #f0a53a;
  position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 40px; color: var(--q-ink); }
.x-hero button { font-family: inherit; }

/* ---- the cover and the tiles under it: one round block ---- */
.x-mos { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.x-big { position: relative; isolation: isolate; height: clamp(360px, 33cqi, 430px); margin: 0; overflow: hidden; border-radius: 28px 28px 0 0; background: #2b2748; color: #fff; min-width: 0; }
.x-mos.solo .x-big { border-radius: 28px; }
.x-big > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
/* The words always read: dark from below and from the left, a little from the top right where the days to go are. */
.x-big::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(6, 9, 24, .82) 0%, rgba(6, 9, 24, .2) 45%, rgba(6, 9, 24, 0) 65%), linear-gradient(90deg, rgba(6, 9, 24, .45), rgba(6, 9, 24, 0) 55%), radial-gradient(420px 260px at 100% 0, rgba(6, 9, 24, .36), rgba(6, 9, 24, 0) 70%); }
.x-big figcaption { position: absolute; left: 32px; right: 32px; bottom: 28px; z-index: 1; display: grid; justify-items: start; min-width: 0; color: inherit; }
.x-where { margin: 0 0 10px; font-size: 15px; font-weight: 650; opacity: .9; overflow-wrap: break-word; max-width: 100%; }
.x-big h1 { margin: 0; max-width: 16ch; font-family: var(--x-display); font-size: clamp(38px, 5.4cqi, 68px); font-weight: 800; line-height: .98; letter-spacing: -.03em; text-wrap: balance; overflow-wrap: break-word; color: inherit; text-shadow: 0 4px 30px rgba(0, 0, 0, .35); }
.x-big .x-mood { margin-top: 10px; max-width: min(64ch, 100%); font-style: normal; font-size: var(--q-fs-info); font-weight: 500; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The route: home, each main place with its nights and its stay's dot, home again; a plane, a car, a train or a ferry between. */
.x-route { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 15px; font-weight: 600; }
.x-rp { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.x-way { display: inline-flex; align-items: center; font-style: normal; opacity: .65; }
.x-dot { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%; font-style: normal; }
.x-dot.ok { background: var(--x-dot-ok); box-shadow: 0 0 0 3px rgba(47, 191, 111, .22); }
.x-dot.plan { background: var(--x-dot-plan); box-shadow: 0 0 0 3px rgba(240, 165, 58, .22); }
/* The days to go, big on the top right; on the trip or after it its words in a small glass pill. */
.x-count { position: absolute; top: 20px; right: 26px; z-index: 1; display: grid; justify-items: end; text-align: right; color: inherit; }
.x-count b { font-family: var(--x-display); font-size: 84px; font-weight: 800; line-height: .86; letter-spacing: -.05em; font-variant-numeric: tabular-nums; text-shadow: 0 6px 30px rgba(0, 0, 0, .35); }
.x-count span { margin-top: 4px; font-size: 14px; font-weight: 650; opacity: .88; }
.x-count.small span { margin: 0; padding: 6px 12px; border-radius: 99px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-weight: 700; opacity: 1; }
/* No photo yet (C19): the plain cover, its words in ink. */
.x-big.empty { height: 320px; background: linear-gradient(135deg, #ebe7fb 0%, #e4e0f6 55%, #efeaf3 100%); color: var(--q-ink); }
.x-big.empty::after { display: none; }
.x-big.empty h1, .x-big.empty .x-count b { text-shadow: none; }
.x-big.empty .x-where, .x-big.empty .x-mood, .x-big.empty .x-count span { color: var(--q-mut); opacity: 1; }
.x-big.empty .x-count.small span { background: #fff; border-color: var(--q-line); backdrop-filter: none; }
.x-ph { position: absolute; inset: 0; display: grid; place-items: center; color: #b9b2d8; }
/* The tiles: one row under the cover, its bottom corners the block's. */
.x-tiles { --n: 6; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; height: clamp(96px, 8.7cqi, 112px); overflow: hidden; border-radius: 0 0 28px 28px; min-width: 0; }
.x-tiles.n1 { --n: 1; } .x-tiles.n2 { --n: 2; } .x-tiles.n3 { --n: 3; } .x-tiles.n4 { --n: 4; } .x-tiles.n5 { --n: 5; }
.x-t { position: relative; isolation: isolate; margin: 0; overflow: hidden; background: #d9d5e6; min-width: 0; }
.x-t img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; display: block; }
/* (kapak-ferah-v1: the name one small line, its shade low, so the photo shows; the whole name and its city or nights in the tip) */
.x-t::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, rgba(8, 10, 26, .62), rgba(8, 10, 26, 0) 42%); }
.x-t figcaption { position: absolute; left: 10px; right: 10px; bottom: 7px; color: #fff; min-width: 0; }
.x-t b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--q-fs-small); font-weight: 650; line-height: 1.25; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.x-t .x-dot { position: absolute; top: 8px; right: 8px; z-index: 1; width: 8px; height: 8px; }
/* A tile of a thing on the plan goes to its card (0.38.9): the whole tile is its button, the credit's "i" over it. */
.x-tgo { all: unset; position: absolute; inset: 0; z-index: 1; cursor: pointer; border-radius: inherit; }
.x-tgo:focus-visible { outline: 3px solid #fff; outline-offset: -4px; box-shadow: inset 0 0 0 6px rgba(91, 75, 219, .55); }
.x-t.go img { transition: transform .6s var(--x-in); }
.x-t.go:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .x-t.go img { transition: none; } .x-t.go:hover img { transform: none; } }
body.still .x-t.go img { transition: none; }
body.still .x-t.go:hover img { transform: none; }
/* A city with no photo yet (row 14, the last source): drawn on the cover's own soft ground, its words in ink. */
.x-t.art { background: linear-gradient(135deg, #ebe7fb 0%, #e4e0f6 55%, #efeaf3 100%); }
.x-t.art::after { display: none; }
.x-t.art figcaption { color: var(--q-ink); }
.x-t.art b { text-shadow: none; }
.x-art { position: absolute; inset: 0 0 40% 0; display: grid; place-items: center; color: #b9b2d8; }
/* "N kayıt işleniyor" beside the menu. */
.x-busy { position: absolute; top: 20px; left: 68px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 99px; background: rgba(255, 255, 255, .92); color: var(--q-ink); font-size: var(--q-fs-small); font-weight: 700; white-space: nowrap; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.x-busy i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #d2d2d7; border-top-color: var(--q-ink); animation: x-spin 1s linear infinite; }
@keyframes x-spin { to { transform: rotate(360deg); } }

/* ---- the trip's ⋯ menu (C1): a glass circle on the cover ---- */
.x-tmenu { position: absolute; top: 16px; left: 16px; z-index: 4; }
.x-tmb { all: unset; box-sizing: border-box; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; }
.x-tmb:hover { background: rgba(255, 255, 255, .28); }
.x-tmb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.x-mos:has(> .x-big.empty) .x-tmb { background: #fff; border-color: var(--q-line); color: var(--q-ink); }
.x-mos:has(> .x-big.empty) .x-tmb:focus-visible { outline-color: var(--q-acc); }
.x-pop.x-tm-pop { top: 48px; left: 0; right: auto; width: auto; min-width: 244px; padding: 6px; gap: 0; }
.x-tmi { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: var(--q-fs-info); font-weight: 600; color: var(--q-ink); white-space: nowrap; }
.x-tmi:hover, .x-tmi:focus-visible { background: #f3f1fa; }
.x-tmi svg { color: var(--q-mut); flex: none; }
.x-tmi.bad, .x-tmi.bad svg { color: #b42318; }
.x-tm-pop .x-sep { margin: 4px 6px; }

/* ---- a photo's credit (C7): a small "i", the credit on hover or focus ---- */
.x-cr { all: unset; position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .42); color: #fff; font: italic 700 12px/1 Georgia, serif; cursor: help; opacity: 0; transition: opacity 180ms; }
.x-cr i { font-style: italic; }
.x-big:hover .x-cr, .x-t:hover .x-cr, .x-cr:focus-visible { opacity: 1; }
.x-cr:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.x-big .x-cr { right: 12px; bottom: 12px; }
.tipx-box.x-crtip { pointer-events: auto; }
.x-crline a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* The cover before, fading away over the new one (the plan's one look at the cover). */
.x-big > img.x-was { animation: x-was .6s ease forwards; }
@keyframes x-was { to { opacity: 0; } }
body.still .x-big > img.x-was { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .x-big > img.x-was { animation: none; opacity: 0; } }
/* The cover's credit, always there and faint (hero-gorsel-v1): under the caption's bottom, on the right. */
.x-crl { position: absolute; right: 20px; bottom: 9px; z-index: 2; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; font-weight: 500; line-height: 1.2; letter-spacing: .01em; color: rgba(255, 255, 255, .74); text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
.x-crl a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.x-crl a:hover { color: #fff; border-bottom-color: #fff; }
.x-crl a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }
.x-crprint { display: none; }

/* ---- the summary card: one white row, each part its value big and a line under it (no label over it, kapak-ferah-v1) ---- */
.x-strip { --segs: 4; display: grid; grid-template-columns: repeat(var(--segs), minmax(0, 1fr)) minmax(250px, 1.25fr); align-items: center; padding: 8px; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(23, 21, 43, .05), 0 0 0 1px rgba(23, 21, 43, .03); min-width: 0; }
.x-strip.n1 { --segs: 1; } .x-strip.n2 { --segs: 2; } .x-strip.n3 { --segs: 3; }
.x-seg { position: relative; display: grid; align-content: center; justify-items: start; gap: 3px; padding: 8px 18px; min-width: 0; outline: none; }
.x-seg + .x-seg { border-left: 1px solid var(--q-line); }
.x-seg.x-s1:focus-visible { outline: 2px solid var(--q-acc); outline-offset: -2px; border-radius: 12px; }
.x-sv { all: unset; display: grid; gap: 3px; cursor: default; min-width: 0; max-width: 100%; }
.x-sv b, .x-pct { font-family: var(--x-display); font-size: var(--q-fs-price); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--q-ink); white-space: nowrap; }
.x-sv small, .x-sl, .x-ps { font-size: 13px; line-height: 1.35; color: var(--q-mut); min-width: 0; max-width: 100%; }
button.x-sv { cursor: pointer; border-radius: 8px; }
/* The dates may still be long (an estimate's "~", a narrow board): they wrap in their cell, never over the next one. */
.x-s1 .x-sv b { white-space: normal; overflow-wrap: break-word; text-wrap: balance; }
button.x-sv:hover b { color: var(--q-acc); }
button.x-sv:focus-visible { outline: 2px solid var(--q-acc); outline-offset: 3px; }
.x-budb.over b, .x-sl.over { color: var(--q-bad); }
/* D16: no budget yet: "Bütçe belirle" says what a tap does; with prices, "tahmini · Limit koy". */
.x-budb.set b { font-size: var(--q-fs-card); color: var(--q-acc); }
.x-bsetl { all: unset; cursor: pointer; color: var(--q-acc); font-weight: 650; border-radius: 4px; }
.x-bsetl:hover { text-decoration: underline; text-underline-offset: 2px; }
.x-bsetl:focus-visible { outline: 2px solid var(--q-acc); outline-offset: 2px; }
.x-bset { display: grid; gap: 8px; margin: 0; }
.x-bset label { display: grid; gap: 4px; font-size: var(--q-fs-small); color: var(--q-mut); }
.x-bin input { box-sizing: border-box; width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--q-line); border-radius: 10px; font: inherit; font-size: var(--q-fs-button); color: var(--q-ink); background: #fff; }
.x-bin input:focus-visible { outline: 2px solid var(--q-acc); outline-offset: 1px; border-color: var(--q-acc); }
.x-bsave { justify-self: start; height: 34px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--q-ink); color: #fff; font: inherit; font-size: var(--q-fs-info); font-weight: 700; cursor: pointer; }
.x-bsave:disabled { opacity: .45; cursor: default; }
.x-bsave:focus-visible { outline: 3px solid #c9bff3; outline-offset: 2px; }
/* Who: the faces and the count big on one line, the names under them (the faces a little bigger with no label over them). */
.x-who { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.x-avs { display: flex; flex: none; }
.x-face { all: unset; box-sizing: border-box; cursor: pointer; position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-size: 13px; font-weight: 800; background: #e8e4ff; color: #4a36c9; border: 2px solid #fff; }
.x-face.me { background: #fde7d7; color: #9a4b12; }
.x-face + .x-face { margin-left: -10px; }
.x-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.x-face.none { background: #fff; color: var(--q-mut); border: 1.5px dashed #c9c4dc; }
.x-face.more { cursor: default; background: #f1eff6; color: var(--q-mut); }
.x-face:focus-visible { outline: 2px solid var(--q-acc); outline-offset: 1px; }
.x-whob.ask b { font-family: inherit; font-size: var(--q-fs-button); letter-spacing: 0; color: var(--q-acc); }
/* Ready: the share big, the bar (booked green, planned amber), what's booked and still to book. */
.x-s4 { gap: 4px; }
.x-pr { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.x-pw { font-family: var(--x-display); font-size: 15px; font-weight: 700; color: var(--q-mut); }
.x-prog { display: grid; width: 100%; min-width: 0; outline: none; border-radius: 6px; }
.x-prog:focus-visible { outline: 2px solid var(--q-acc); outline-offset: 4px; }
.x-bar, .h-bar { display: flex; height: 6px; border-radius: 99px; background: #ebe8f2; overflow: hidden; }
.x-bar i, .h-bar i { display: block; height: 100%; }
.x-bar .bk, .h-bar .bk { background: var(--q-ok); }
.x-bar .ch { background: var(--x-plan); }
.h-bar .ch { background: #8fd3a6; }
.x-ps b { color: var(--q-ink); }
button.x-ps { all: unset; font-size: 13px; line-height: 1.35; color: var(--q-mut); cursor: pointer; border-radius: 6px; }
button.x-ps:hover { color: var(--q-acc); }
button.x-ps:focus-visible { outline: 2px solid var(--q-acc); outline-offset: 2px; }
/* "Sıradaki": dark, its words whole on up to two lines (never "…"). */
.x-next { margin-left: 8px; min-width: 0; min-height: 64px; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 18px; border: 0; border-radius: 18px; background: var(--q-ink); color: #fff; font: inherit; text-align: left; cursor: pointer; transition: transform .2s, background .2s; }
.x-next:hover { background: #2c2950; transform: translateY(-1px); }
.x-next:focus-visible { outline: 3px solid #c9bff3; outline-offset: 2px; }
.x-next svg { flex: none; }
.x-nw { display: grid; gap: 1px; min-width: 0; }
.x-nw small { font-size: var(--q-fs-small); font-weight: 650; color: rgba(255, 255, 255, .66); }
.x-nl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.x-next .x-nl { overflow: visible; font-family: var(--x-display); font-size: 17.5px; font-weight: 750; line-height: 1.22; overflow-wrap: break-word; }
.x-next.ok { grid-template-columns: auto minmax(0, 1fr); background: var(--q-ok-s); color: var(--q-ok); cursor: default; }
.x-next.ok:hover { transform: none; }

/* ---- the small windows (E12: in 180 ms, out 120 ms) ---- */
.x-pop { position: absolute; top: calc(100% + 10px); left: 0; z-index: 70; width: 320px; box-sizing: border-box; padding: 16px; display: grid; gap: 10px; border-radius: 18px; background: #fff; border: 1px solid var(--q-line); box-shadow: 0 18px 40px -16px rgba(28, 26, 51, .35); color: var(--q-ink); font-size: var(--q-fs-info); cursor: default; animation: x-pop 180ms var(--x-in) both; }
.x-pop.x-out { animation: x-pop-out 120ms ease-in both; pointer-events: none; }
@keyframes x-pop { from { opacity: 0; scale: .97; translate: 0 -2px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes x-pop-out { to { opacity: 0; scale: .98; } }
.x-s3 .x-pop { left: auto; right: 0; }
.x-pt { font-size: var(--q-fs-button); font-weight: 800; }
.x-bl { display: flex; justify-content: space-between; gap: 12px; font-size: var(--q-fs-info); }
.x-bl span { display: inline-flex; align-items: center; gap: 8px; color: var(--q-mut); }
.x-bl b { font-variant-numeric: tabular-nums; text-align: right; }
.x-bl i { width: 10px; height: 10px; border-radius: 3px; }
.x-bl.booked i { background: var(--q-ok); }
.x-bl.planned i { background: #e2b85c; }
.x-bl.free i { background: #d6d3e0; }
.x-bl.over i { background: var(--q-bad); }
.x-bl.over, .x-bl.over b { color: var(--q-bad); }
.x-bl.pp { border-top: 1px dashed var(--q-line); padding-top: 8px; margin-top: 4px; }
.x-sep { height: 1px; background: var(--q-line); }
.x-pn { margin: 0; font-size: var(--q-fs-small); color: var(--q-mut); line-height: 1.45; }
/* Kimler gidiyor: the board's own window (Travellers.tsx), drawn in this one. */
/* (its old rules' sizes on the plan's 9-step scale, row 155) */
.x-who-pop > .hx-pop { position: static; inset: auto; z-index: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: var(--q-fs-info); }
.x-who-pop .hx-who-count, .x-who-pop .hx-who-add .btn-small { font-size: var(--q-fs-info); }
.x-who-pop .hx-who-count .stepper button { font-size: var(--q-fs-button); }
.x-who-pop .hx-who-note { font-size: var(--q-fs-small); }
.x-who-pop .hx-who-pop h4 { font-size: var(--q-fs-button); font-weight: 800; color: var(--q-ink); }
.x-shline { margin: 0; font-size: var(--q-fs-small); color: var(--q-mut); }
/* Seni böyle anladım */
.x-pref-pop { width: 380px; }
.x-pref-pop ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.x-pref-pop li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f1eff6; font-size: var(--q-fs-info); }
.x-pref-pop li small { color: var(--q-mut); font-size: var(--q-fs-small); }
.x-tag { font-style: normal; display: inline-block; margin-right: 8px; padding: 2px 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); }
.x-edit { font-size: var(--q-fs-small); color: var(--q-mut); }

/* ---- the facts' quiet row: small muted words each with a small icon; the visa and the files missing keep their chips ---- */
.x-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 0 6px; min-width: 0; }
.x-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; min-width: 0; }
.x-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; box-sizing: border-box; border-radius: 99px; font-size: var(--q-fs-info); font-weight: 500; color: var(--q-mut); white-space: nowrap; outline: none; }
.x-chip svg { color: var(--q-mut); flex: none; }
.x-chip .x-plug { color: var(--q-ink); opacity: .7; }
.x-flag { flex: none; font-size: 14px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.x-chip[tabindex] { cursor: help; }
.x-chip[tabindex]:hover { color: var(--q-ink); }
.x-chip[tabindex]:focus-visible { outline: 2px solid var(--q-acc); outline-offset: 2px; }
.x-chip.ok, .x-chip.warn { padding: 0 10px; font-weight: 650; border: 1px solid; }
.x-chip.ok { background: var(--q-ok-s); border-color: var(--q-ok-l); color: var(--q-ok); }
.x-chip.ok svg { color: var(--q-ok); }
.x-chip.warn { background: #fff8eb; border-color: #fedf89; color: #7a4b00; }
.x-chip.warn svg { color: #f79009; }
/* B15: the bookings without their file, a chip that is a button (it goes to the first). */
button.x-chip { font: inherit; font-size: var(--q-fs-info); font-weight: 650; cursor: pointer; }
button.x-chip.warn:hover { border-color: #f5c35b; }
button.x-chip:focus-visible { outline: 2px solid var(--q-acc); outline-offset: 2px; }
/* D9: "n ülke"'s tip, a row for each country. */
.x-ctab { display: grid; gap: 6px; text-align: left; }
.x-ctl { color: inherit; opacity: .8; }
.x-ctr { display: grid; gap: 1px; }
.x-ctr b { font-weight: 750; }

/* ---- the style words, Tercihler, Özeti küçült: pushed to the row's right ---- */
.x-prow { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; max-width: 100%; }
.x-styles { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.x-style { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; box-sizing: border-box; border-radius: 99px; font-size: var(--q-fs-info); font-weight: 650; white-space: nowrap; }
.x-prefs { position: relative; min-width: 0; max-width: 100%; }
.x-prefb { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 34px; padding: 0 12px; border-radius: 99px; font-size: var(--q-fs-info); color: var(--q-mut); }
.x-prefb:hover { background: #fff; }
.x-prefb:focus-visible { outline: 2px solid var(--q-acc); outline-offset: 2px; }
.x-prefb > span { flex: none; }
.x-prefb b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: var(--q-ink); }
.x-prefb .x-ptag.strong { font-weight: 800; }
.x-prefb em { flex: none; font-style: normal; font-weight: 750; color: var(--q-acc); }
.x-prefb .x-pn { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 99px; background: var(--q-acc-s); font-size: 12px; font-weight: 800; }
.x-prefb svg { flex: none; }
.x-prefs .x-pop { left: auto; right: 0; }
.x-fold { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; box-sizing: border-box; border-radius: 99px; border: 1px solid var(--q-line); background: #fff; color: var(--q-ink); font: inherit; font-size: var(--q-fs-small); font-weight: 700; cursor: pointer; }
.x-fold:hover { border-color: #cfc9e3; }
.x-fold:focus-visible, .x-unfold:focus-visible { outline: 2px solid var(--q-acc); outline-offset: 2px; }

/* ---- folded (E11) and the "Bugün" slot ---- */
.x-hero.fold > :not(.x-slim) { display: none !important; }
/* Folded, and on the trip (the Bugün strip), the summary keeps its own light purple ground in a round box. */
.x-hero.fold, .x-hero.during { background: linear-gradient(180deg, #f3f1fa, #f6f4fb); border: 1px solid #ebe8f4; }
.x-hero.fold { padding: 10px 12px; border-radius: 20px; }
.x-hero.during { padding: 16px; border-radius: 30px; }
.x-slim { display: flex; align-items: center; gap: 12px; min-width: 0; }
.x-slim[hidden] { display: none; }
.x-hero.fold .x-slim { animation: x-in 260ms var(--x-in) both; }
@keyframes x-in { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
.x-thumb { flex: none; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: #e7e3f7; color: #9b94c0; transform-origin: top left; }
.x-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.x-slim b { flex: 0 1 auto; min-width: 0; font-size: var(--q-fs-card); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-slim small { flex: 0 1000 auto; min-width: 0; font-size: var(--q-fs-info); color: var(--q-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-slim .h-sp { flex: 1 1 0; }
.x-unfold { all: unset; flex: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; box-sizing: border-box; border-radius: 99px; background: #fff; border: 1px solid var(--q-line); font-size: var(--q-fs-info); font-weight: 700; }
.x-today-slot { min-width: 0; }

/* ---- the home's money picker (D17): a money with no exchange rate known can't be picked ---- */
.hm-pop-sm button:disabled { opacity: .45; cursor: default; }
.hm-pop-sm button:disabled:hover { background: none; }
/* 0.39.1: the money and language lists open over the hero below the bar. ".hm-prefs" blurs what's behind it (its own
   stacking context), so its list's z-index stayed inside it and the hero (positioned, later) lay over the list: a
   click on "USD" or "Türkçe" landed on the hero and closed the list. The bar itself sits above the page. */
.hm-bar { position: relative; z-index: 2; }
/* The list is the popover itself here (TripsHome Picker), not a list inside it: no bullets, the popover's padding. */
ul.hm-pop { list-style: none; margin: 0; padding: 6px; }

/* ---- the thin bar while the hero is scrolled away (C24) ---- */
.h-mini-slot { position: sticky; top: -8px; height: 0; z-index: 9; }
.h-mini { display: flex; align-items: center; gap: 12px; height: 52px; padding: 8px 12px; box-sizing: border-box; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border: 1px solid var(--q-line); border-radius: 14px; box-shadow: 0 8px 24px -16px rgba(28, 26, 51, .4); color: var(--q-ink); white-space: nowrap; opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none; transition: opacity .2s, transform .2s, visibility 0s .2s; }
.h-mini.on { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.h-thumb.sm { flex: none; width: 36px; height: 36px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: #e7e3f7; color: #9b94c0; }
.h-thumb.sm img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h-mt { flex: 0 1 auto; min-width: 80px; max-width: 220px; font-size: var(--q-fs-button); font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.h-ml, .h-mp { font-size: var(--q-fs-small); color: var(--q-mut); }
.h-mp b { color: var(--q-ink); }
.h-mini .h-sp { flex: 1 1 0; }
.h-mini .h-bar { flex: none; width: 90px; }
.h-mb { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: var(--q-fs-info); font-weight: 700; font-variant-numeric: tabular-nums; }
.h-mb small { font-weight: 500; color: var(--q-mut); font-size: var(--q-fs-small); }
.h-mb i { width: 8px; height: 8px; border-radius: 50%; }
.h-mb i.ok { background: var(--q-ok); }
.h-mb i.over { background: var(--q-bad); }
.h-tabs { flex: none; display: inline-flex; padding: 3px; border-radius: 12px; background: var(--q-soft); border: 1px solid var(--q-line); }
.h-tabs button { padding: 5px 12px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: var(--q-fs-info); font-weight: 600; color: var(--q-mut); cursor: pointer; }
.h-tabs button.on { background: #fff; color: var(--q-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.h-next.sm { flex: 0 1 auto; min-width: 120px; max-width: 280px; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--q-ink); color: #fff; font: inherit; font-size: var(--q-fs-info); font-weight: 700; cursor: pointer; }
.h-next.sm:hover { background: #2c2950; }
.h-next.sm svg { flex: none; }
.h-ok { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: var(--q-fs-info); font-weight: 700; color: var(--q-ok); }
@media (max-width: 860px) { .h-mini-slot { top: 0; } }
@container panel (max-width: 980px) { .h-ml { display: none; } }
@container panel (max-width: 900px) { .h-mini .h-bar { display: none; } }
@container panel (max-width: 700px) { .h-mb, .h-tabs { display: none; } }
@container panel (max-width: 460px) { .h-mp, .h-mt { display: none; } .h-next.sm { max-width: none; margin-left: auto; } }

/* 0.46.0 (Emre: "satır olarak inmesin"): wide, the style and Tercihler stay on the facts' line; the facts wrap in their own room */
@container panel (min-width: 640px) {
  .x-info { flex-wrap: nowrap; }
  .x-info > .x-chips { flex: 1 1 auto; }
  .x-info > .x-prow { flex: none; flex-wrap: nowrap; margin-left: auto; }
}

/* ---- narrow (the board under 900 px): the cover 480 px, the tiles three by two, the card two by two with "Sıradaki" the full width ---- */
@container panel (max-width: 900px) {
  .x-big { height: 480px; }
  .x-big.empty { height: 340px; }
  .x-big figcaption { left: 20px; right: 20px; bottom: 22px; }
  .x-count { top: 18px; right: 20px; }
  .x-count b { font-size: 56px; }
  .x-tiles { height: auto; grid-auto-rows: 96px; }
  .x-tiles.n4 { --n: 2; }
  .x-tiles.n5, .x-tiles.n6 { --n: 3; }
  .x-strip, .x-strip.n1, .x-strip.n2, .x-strip.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .x-seg + .x-seg { border-left: 0; }
  .x-strip > .x-seg:nth-child(even) { border-left: 1px solid var(--q-line); }
  .x-strip > .x-seg:nth-child(n + 3) { border-top: 1px solid var(--q-line); }
  .x-strip.n1 > .x-seg, .x-strip.n3 > .x-seg:nth-child(3) { grid-column: 1 / -1; }
  .x-next { grid-column: 1 / -1; margin: 8px 0 0; }
}
@container panel (max-width: 600px) {
  .x-hero { margin-bottom: 28px; }
  .x-seg { padding: 8px 12px; }
  .x-sv b, .x-pct { font-size: 20px; white-space: normal; overflow-wrap: break-word; }
  .x-pw { font-size: var(--q-fs-info); }
  .x-route { font-size: 14px; gap: 4px 8px; }
  .x-pop { width: min(320px, calc(100vw - 48px)); }
  .x-s3 .x-pop, .x-s4 .x-pop { right: auto; left: 0; }
  .x-strip > .x-seg:nth-child(even) .x-pop { left: auto; right: 0; }
  .x-pref-pop { width: min(360px, calc(100vw - 48px)); }
  .x-prow { margin-left: 0; }
  .x-prefb { height: auto; min-height: 34px; padding: 6px 12px; flex-wrap: wrap; }
  .x-prefb b { white-space: normal; }
  .x-slim small { display: none; }
}

/* ---- on paper (PrintPlan copies the hero as drawn): no buttons, the whole summary even when folded ---- */
.pp-hero-copy .x-hero { margin: 0 0 8px; }
.pp-hero-copy .x-tmenu, .pp-hero-copy .x-next, .pp-hero-copy .x-fold, .pp-hero-copy .x-cr, .pp-hero-copy .x-crl, .pp-hero-copy .x-busy, .pp-hero-copy .x-unfold, .pp-hero-copy .x-prefb svg, .pp-hero-copy .x-pop { display: none !important; }
/* (an action is no line on paper: "Bütçe belirle", the files still to add) */
.pp-hero-copy .x-bsetl, .pp-hero-copy .c-docs, .pp-hero-copy .x-s3:has(.x-budb.set) { display: none !important; }
.pp-hero-copy .x-hero.fold .x-mos, .pp-hero-copy .x-hero.fold .x-strip { display: grid !important; }
.pp-hero-copy .x-hero.fold .x-info, .pp-hero-copy .x-hero.fold .x-chips, .pp-hero-copy .x-hero.fold .x-prow { display: flex !important; }
.pp-hero-copy .x-hero.fold { padding: 0; border: 0; background: none; border-radius: 0; }
.pp-hero-copy .x-slim { display: none !important; }
.pp-hero-copy .x-crprint { display: block; position: absolute; right: 12px; bottom: 10px; z-index: 2; font-size: 11px; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }

/* ---- "Hareketi duraklat" and reduced motion: nothing moves ---- */
body.still .x-hero *, body.still .x-hero, body.still .h-mini, body.still .h-mini * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .x-hero *, .x-hero, .h-mini, .h-mini * { animation: none !important; transition: none !important; }
}
/* 0.46.0: a country's flag before its first stop on the route */
.x-rflag { font-size: 13px; line-height: 1; margin-right: -2px; }